feat(build): style refactoring snapshot

bower.json

@@ -72,5 +72,8 @@
     "slimScroll": {
       "main": "./jquery.slimscroll.js"
     }
+  },
+  "devDependencies": {
+    "angular-ui-router": "~0.2.15"
   }
 }

gulp/styles.js

@@ -25,28 +25,25 @@ var buildStyles = function() {
     style: 'expanded'
   };
 
-/*
   var injectFiles = gulp.src([
-    path.join(conf.paths.src, '/app/!**!/!*.scss'),
+    path.join(conf.paths.src, '/sass/**/_*.scss')
-    path.join('!' + conf.paths.src, '/app/index.scss')
   ], { read: false });
 
   var injectOptions = {
     transform: function(filePath) {
-      filePath = filePath.replace(conf.paths.src + '/app/', '');
+      filePath = filePath.replace(conf.paths.src + '/sass/', '');
-      return '@import "../../app/' + filePath + '";';
+      console.log(filePath);
+      return '@import "' + filePath + '";';
     },
     starttag: '// injector',
     endtag: '// endinjector',
     addRootSlash: false
   };
-*/
-
 
   return gulp.src([
-    path.join(conf.paths.src, '/assets/css/main.scss')
+    path.join(conf.paths.src, '/sass/main.scss')
   ])
-    //.pipe($.inject(injectFiles, injectOptions))
+    .pipe($.inject(injectFiles, injectOptions))
     .pipe(wiredep(_.extend({}, conf.wiredep)))
     .pipe($.sourcemaps.init())
     .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))

src/app/app.js

@@ -4,6 +4,7 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'ui.sortable',
   'ngRoute',
   'ngTouch',
+  'BlurAdmin.layout',
   'BlurAdmin.dashboard',
   'BlurAdmin.buttonsPage',
   'BlurAdmin.chartsPage',

src/app/layout/amChartConfig.js

@@ -0,0 +1,214 @@
+/**
+ * @author v.lugovsky
+ * created on 15.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.layout')
+      .config(amChartConfig);
+
+  /** @ngInject */
+  function amChartConfig(layoutColors) {
+    AmCharts.themes.blur = {
+
+      themeName: "blur",
+
+      AmChart: {
+        color: layoutColors.defaultText,
+        backgroundColor: "#FFFFFF"
+      },
+
+      AmCoordinateChart: {
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info]
+      },
+
+      AmStockChart: {
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info]
+      },
+
+      AmSlicedChart: {
+        colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info],
+        outlineAlpha: 1,
+        outlineThickness: 2,
+        labelTickColor: "#000000",
+        labelTickAlpha: 0.3
+      },
+
+      AmRectangularChart: {
+        zoomOutButtonColor: '#000000',
+        zoomOutButtonRollOverAlpha: 0.15,
+        zoomOutButtonImage: "lens.png"
+      },
+
+      AxisBase: {
+        axisColor: "#000000",
+        axisAlpha: 0.3,
+        gridAlpha: 0.1,
+        gridColor: "#000000"
+      },
+
+      ChartScrollbar: {
+        backgroundColor: "#000000",
+        backgroundAlpha: 0.12,
+        graphFillAlpha: 0.5,
+        graphLineAlpha: 0,
+        selectedBackgroundColor: "#FFFFFF",
+        selectedBackgroundAlpha: 0.4,
+        gridAlpha: 0.15
+      },
+
+      ChartCursor: {
+        cursorColor: "#000000",
+        color: "#FFFFFF",
+        cursorAlpha: 0.5
+      },
+
+      AmLegend: {
+        color: "#000000"
+      },
+
+      AmGraph: {
+        lineAlpha: 0.9
+      },
+      GaugeArrow: {
+        color: "#000000",
+        alpha: 0.8,
+        nailAlpha: 0,
+        innerRadius: "40%",
+        nailRadius: 15,
+        startWidth: 15,
+        borderAlpha: 0.8,
+        nailBorderAlpha: 0
+      },
+
+      GaugeAxis: {
+        tickColor: "#000000",
+        tickAlpha: 1,
+        tickLength: 15,
+        minorTickLength: 8,
+        axisThickness: 3,
+        axisColor: '#000000',
+        axisAlpha: 1,
+        bandAlpha: 0.8
+      },
+
+      TrendLine: {
+        lineColor: layoutColors.danger,
+        lineAlpha: 0.8
+      },
+
+      // ammap
+      AreasSettings: {
+        alpha: 0.8,
+        color: layoutColors.info,
+        colorSolid: layoutColors.primaryDark,
+        unlistedAreasAlpha: 0.4,
+        unlistedAreasColor: "#000000",
+        outlineColor: "#FFFFFF",
+        outlineAlpha: 0.5,
+        outlineThickness: 0.5,
+        rollOverColor: layoutColors.primary,
+        rollOverOutlineColor: "#FFFFFF",
+        selectedOutlineColor: "#FFFFFF",
+        selectedColor: "#f15135",
+        unlistedAreasOutlineColor: "#FFFFFF",
+        unlistedAreasOutlineAlpha: 0.5
+      },
+
+      LinesSettings: {
+        color: "#000000",
+        alpha: 0.8
+      },
+
+      ImagesSettings: {
+        alpha: 0.8,
+        labelColor: "#000000",
+        color: "#000000",
+        labelRollOverColor: layoutColors.primaryDark
+      },
+
+      ZoomControl: {
+        buttonFillAlpha: 0.8,
+        buttonIconColor: layoutColors.default,
+        buttonRollOverColor: layoutColors.danger,
+        buttonFillColor: layoutColors.primaryDark,
+        buttonBorderColor: layoutColors.primaryDark,
+        buttonBorderAlpha: 0,
+        buttonCornerRadius: 0,
+        gridColor: "#FFFFFF",
+        gridBackgroundColor: "#000000",
+        buttonIconAlpha: 0.6,
+        gridAlpha: 0.6,
+        buttonSize: 20
+      },
+
+      SmallMap: {
+        mapColor: "#000000",
+        rectangleColor: layoutColors.danger,
+        backgroundColor: "#FFFFFF",
+        backgroundAlpha: 0.7,
+        borderThickness: 1,
+        borderAlpha: 0.8
+      },
+
+      // the defaults below are set using CSS syntax, you can use any existing css property
+      // if you don't use Stock chart, you can delete lines below
+      PeriodSelector: {
+        color: "#000000"
+      },
+
+      PeriodButton: {
+        color: "#000000",
+        background: "transparent",
+        opacity: 0.7,
+        border: "1px solid rgba(0, 0, 0, .3)",
+        MozBorderRadius: "5px",
+        borderRadius: "5px",
+        margin: "1px",
+        outline: "none",
+        boxSizing: "border-box"
+      },
+
+      PeriodButtonSelected: {
+        color: "#000000",
+        backgroundColor: "#b9cdf5",
+        border: "1px solid rgba(0, 0, 0, .3)",
+        MozBorderRadius: "5px",
+        borderRadius: "5px",
+        margin: "1px",
+        outline: "none",
+        opacity: 1,
+        boxSizing: "border-box"
+      },
+
+      PeriodInputField: {
+        color: "#000000",
+        background: "transparent",
+        border: "1px solid rgba(0, 0, 0, .3)",
+        outline: "none"
+      },
+
+      DataSetSelector: {
+        color: "#000000",
+        selectedBackgroundColor: "#b9cdf5",
+        rollOverBackgroundColor: "#a8b0e4"
+      },
+
+      DataSetCompareList: {
+        color: "#000000",
+        lineHeight: "100%",
+        boxSizing: "initial",
+        webkitBoxSizing: "initial",
+        border: "1px solid rgba(0, 0, 0, .3)"
+      },
+
+      DataSetSelect: {
+        border: "1px solid rgba(0, 0, 0, .3)",
+        outline: "none"
+      }
+
+    };
+  }
+
+})();

src/app/layout/layout.constants.js

@@ -0,0 +1,35 @@
+/**
+ * @author v.lugovsky
+ * created on 15.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.layout')
+      .constant('layoutColors', {
+        primary:        '#41bee9',
+        info:           '#5bc0de',
+        danger:         '#9d498c',
+        success:        '#348779',
+        warning:        '#bbcb50',
+        default:        '#e1e1e1',
+        successLight:   '#85BA54',
+        primaryLight:   '#5FBCBB',
+        warningLight:   '#c5d36a',
+        primaryDark:    '#1488b0',
+        dangerDark:     '#632e58',
+        successDark:    '#1c4a42',
+        warningDark:    '#8b992d',
+
+        primaryBg:      '#C5ECF9',
+        successBg:      '#C1DBD7',
+        dangerBg:       '#E1C8DD',
+
+        defaultText:    '#585858'
+      })
+      .constant('layoutSizes', {
+        resWidthCollapseSidebar: 1200,
+        resWidthHideSidebar: 500
+      });
+
+})();

src/app/layout/layout.module.js

@@ -0,0 +1,10 @@
+/**
+ * @author v.lugovsky
+ * created on 15.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.layout', []);
+
+})();

src/assets/css/main.scss

@@ -1,40 +0,0 @@
-@import "variables.scss",
-"mixins.scss",
-"skins/skins.scss",
-"../../app/pages/typography/typography.scss",
-"preloader.scss",
-"socicon.scss",
-"buttons.scss",
-"table.scss",
-"layout.scss",
-"icons.scss",
-"../../app/tplSkin/tplSkinPanel.scss",
-"../../app/components/widgets/widgets.scss",
-"../../app/pages/buttons/buttonsPage.scss",
-"../../app/pages/icons/iconsPage.scss",
-"../../app/pages/charts/chartsPage.scss",
-"../../app/pages/profile/profile.scss",
-"../../app/pages/form/form.scss",
-"../../app/components/pageTop/pageTop.scss",
-"../../app/components/contentTop/contentTop.scss",
-"../../app/components/sidebar/sidebar.scss",
-"../../app/components/backTop/backTop.scss",
-"../../app/components/msgCenter/msgCenter.scss",
-"../../app/components/blurPanel/blurPanel.scss",
-"../../app/pages/dashboard/dashboard.scss",
-"../../app/pages/dashboard/widgets/calendar/calendar.scss",
-"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
-"../../app/pages/dashboard/widgets/amChart/amChart.scss",
-"../../app/pages/dashboard/widgets/todo/todo.scss",
-"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
-"../../app/pages/dashboard/widgets/timeline/timeline.scss",
-"../../app/pages/dashboard/widgets/trafficChart/trafficChart.scss",
-"../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
-"../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
-"../../app/pages/dashboard/widgets/weather/weather.scss",
-"../../app/pages/maps/widgets/leaflet/leaflet.scss",
-"../../app/pages/maps/widgets/google-maps/google-maps.scss",
-"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",
-"../../app/pages/maps/widgets/map-lines/map-lines.scss",
-"../../app/pages/modals/modals.scss",
-"../../app/pages/modals/widgets/notifications/notifications.scss";

src/assets/js/amcharts-blur-theme.js

@@ -1,199 +0,0 @@
-AmCharts.themes.blur = {
-
-  themeName: "blur",
-
-  AmChart: {
-    color: colorDefaultText,
-    backgroundColor: "#FFFFFF"
-  },
-
-  AmCoordinateChart: {
-    colors: [colorPrimary, colorDanger, colorWarning, colorSuccess, colorDefault, colorPrimaryDark, colorSuccessDark, colorWarningLight, colorSuccessLight, colorSuccessBg, colorInfo]
-  },
-
-  AmStockChart: {
-    colors: [colorPrimary, colorDanger, colorWarning, colorSuccess, colorDefault, colorPrimaryDark, colorSuccessDark, colorWarningLight, colorSuccessLight, colorSuccessBg, colorInfo]
-  },
-
-  AmSlicedChart: {
-    colors: [colorPrimary, colorDanger, colorWarning, colorSuccess, colorDefault, colorPrimaryDark, colorSuccessDark, colorWarningLight, colorSuccessLight, colorSuccessBg, colorInfo],
-    outlineAlpha: 1,
-    outlineThickness: 2,
-    labelTickColor: "#000000",
-    labelTickAlpha: 0.3
-  },
-
-  AmRectangularChart: {
-    zoomOutButtonColor: '#000000',
-    zoomOutButtonRollOverAlpha: 0.15,
-    zoomOutButtonImage: "lens.png"
-  },
-
-  AxisBase: {
-    axisColor: "#000000",
-    axisAlpha: 0.3,
-    gridAlpha: 0.1,
-    gridColor: "#000000"
-  },
-
-  ChartScrollbar: {
-    backgroundColor: "#000000",
-    backgroundAlpha: 0.12,
-    graphFillAlpha: 0.5,
-    graphLineAlpha: 0,
-    selectedBackgroundColor: "#FFFFFF",
-    selectedBackgroundAlpha: 0.4,
-    gridAlpha: 0.15
-  },
-
-  ChartCursor: {
-    cursorColor: "#000000",
-    color: "#FFFFFF",
-    cursorAlpha: 0.5
-  },
-
-  AmLegend: {
-    color: "#000000"
-  },
-
-  AmGraph: {
-    lineAlpha: 0.9
-  },
-  GaugeArrow: {
-    color: "#000000",
-    alpha: 0.8,
-    nailAlpha: 0,
-    innerRadius: "40%",
-    nailRadius: 15,
-    startWidth: 15,
-    borderAlpha: 0.8,
-    nailBorderAlpha: 0
-  },
-
-  GaugeAxis: {
-    tickColor: "#000000",
-    tickAlpha: 1,
-    tickLength: 15,
-    minorTickLength: 8,
-    axisThickness: 3,
-    axisColor: '#000000',
-    axisAlpha: 1,
-    bandAlpha: 0.8
-  },
-
-  TrendLine: {
-    lineColor: colorDanger,
-    lineAlpha: 0.8
-  },
-
-  // ammap
-  AreasSettings: {
-    alpha: 0.8,
-    color: colorInfo,
-    colorSolid: colorPrimaryDark,
-    unlistedAreasAlpha: 0.4,
-    unlistedAreasColor: "#000000",
-    outlineColor: "#FFFFFF",
-    outlineAlpha: 0.5,
-    outlineThickness: 0.5,
-    rollOverColor: colorPrimary,
-    rollOverOutlineColor: "#FFFFFF",
-    selectedOutlineColor: "#FFFFFF",
-    selectedColor: "#f15135",
-    unlistedAreasOutlineColor: "#FFFFFF",
-    unlistedAreasOutlineAlpha: 0.5
-  },
-
-  LinesSettings: {
-    color: "#000000",
-    alpha: 0.8
-  },
-
-  ImagesSettings: {
-    alpha: 0.8,
-    labelColor: "#000000",
-    color: "#000000",
-    labelRollOverColor: colorPrimaryDark
-  },
-
-  ZoomControl: {
-    buttonFillAlpha: 0.8,
-    buttonIconColor: colorDefault,
-    buttonRollOverColor: colorDanger,
-    buttonFillColor: colorPrimaryDark,
-    buttonBorderColor: colorPrimaryDark,
-    buttonBorderAlpha: 0,
-    buttonCornerRadius: 0,
-    gridColor: "#FFFFFF",
-    gridBackgroundColor: "#000000",
-    buttonIconAlpha: 0.6,
-    gridAlpha: 0.6,
-    buttonSize: 20
-  },
-
-  SmallMap: {
-    mapColor: "#000000",
-    rectangleColor: colorDanger,
-    backgroundColor: "#FFFFFF",
-    backgroundAlpha: 0.7,
-    borderThickness: 1,
-    borderAlpha: 0.8
-  },
-
-  // the defaults below are set using CSS syntax, you can use any existing css property
-  // if you don't use Stock chart, you can delete lines below
-  PeriodSelector: {
-    color: "#000000"
-  },
-
-  PeriodButton: {
-    color: "#000000",
-    background: "transparent",
-    opacity: 0.7,
-    border: "1px solid rgba(0, 0, 0, .3)",
-    MozBorderRadius: "5px",
-    borderRadius: "5px",
-    margin: "1px",
-    outline: "none",
-    boxSizing: "border-box"
-  },
-
-  PeriodButtonSelected: {
-    color: "#000000",
-    backgroundColor: "#b9cdf5",
-    border: "1px solid rgba(0, 0, 0, .3)",
-    MozBorderRadius: "5px",
-    borderRadius: "5px",
-    margin: "1px",
-    outline: "none",
-    opacity: 1,
-    boxSizing: "border-box"
-  },
-
-  PeriodInputField: {
-    color: "#000000",
-    background: "transparent",
-    border: "1px solid rgba(0, 0, 0, .3)",
-    outline: "none"
-  },
-
-  DataSetSelector: {
-    color: "#000000",
-    selectedBackgroundColor: "#b9cdf5",
-    rollOverBackgroundColor: "#a8b0e4"
-  },
-
-  DataSetCompareList: {
-    color: "#000000",
-    lineHeight: "100%",
-    boxSizing: "initial",
-    webkitBoxSizing: "initial",
-    border: "1px solid rgba(0, 0, 0, .3)"
-  },
-
-  DataSetSelect: {
-    border: "1px solid rgba(0, 0, 0, .3)",
-    outline: "none"
-  }
-
-};

src/sass/auth.scss

@@ -1,7 +1,7 @@
-@import "_variables.scss";
+@import "theme/_variables.scss";
-@import "_mixins.scss";
+@import "theme/_mixins.scss";
-@import "_socicon.scss";
+@import "theme/_socicon.scss";
-@import "_layout.scss";
+@import "theme/_layout.scss";
 
 html, body {
   height: 100%;

src/sass/main.scss

@@ -0,0 +1,2 @@
+// injector
+// endinjector

src/sass/theme/_icons.scss

@@ -1,5 +1,3 @@
-$images-root: '../img/';
-
 @mixin svg-icon($url, $width:'', $height:'') {
   display: inline-block;
   background: url($url) no-repeat center;

src/sass/theme/_layout.scss

@@ -133,11 +133,11 @@ a {
 }
 
 .icon-up {
-  background: url(../img/arrow-green-up.svg) no-repeat 0 0;
+  @include bg-nr('arrow-green-up.svg');
 }
 
 .icon-down {
-  background: url(../img/arrow-red-down.svg) no-repeat 0 0;
+  @include bg-nr('arrow-red-down.svg');
 }
 
 .disable-text-selection {

src/sass/theme/_mixins.scss

@@ -21,8 +21,13 @@
   }
 }
 
+@mixin bg-nr($relativeUrl) {
+  background: url($images-root + $relativeUrl) no-repeat 0 0;
+}
+
 @mixin main-background() {
-  background: url(../img/green-bg.jpg) no-repeat top center fixed;
+  $mainBgUrl: $images-root + 'green-bg.jpg';
+  background: url($mainBgUrl) no-repeat top center fixed;
   background-size: cover;
 }
 

src/sass/theme/_variables.scss

@@ -57,3 +57,6 @@ $small-panel-height: 114px;
 $medium-panel-height: 400px;
 $extra-medium-panel-height: 550px;
 $large-panel-height: 974px;
+
+$assets-root: '../assets/';
+$images-root: $assets-root + 'img/';

src/sass/theme/skins/skins.scss

@@ -26,10 +26,3 @@
     background-color: $dropdownColor;
   }
 }
-
-@import '02_transparent';
-@import '03_blue';
-@import '04_peachy';
-@import '05_material';
-@import '06_transblue';
-@import '07_grey';