refactor(layout): fix switching to blur theme

Appsbender · May 13, 2016 · dee1333 · dee1333
1 parent db01a0b
commit dee1333
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 32 deletions.
diff --git a/src/app/theme/components/baPanel/baPanel.directive.js b/src/app/theme/components/baPanel/baPanel.directive.js
@@ -12,10 +12,11 @@
       .directive('baPanel', baPanel);
 
   /** @ngInject */
-  function baPanel(baPanel) {
+  function baPanel(baPanel, layoutTheme) {
     return angular.extend({}, baPanel, {
       template: function(el, attrs) {
-        var res = '<div  class="panel panel-blur full-invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
+        var res = '<div  class="panel ' + (layoutTheme.blur ? 'panel-blur' : '') + ' full-invisible ' + (attrs.baPanelClass || '');
+        res += '" zoom-in ' + (layoutTheme.blur ? 'ba-panel-blur' : '') + '>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;

diff --git a/src/app/theme/theme.run.js b/src/app/theme/theme.run.js
@@ -9,21 +9,20 @@
     .run(themeRun);
 
   /** @ngInject */
-  function themeRun($timeout, $rootScope, layoutTheme, layoutPaths, preloader, $q, baSidebarService) {
-
-    $rootScope.$isMobile =  (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
-    $rootScope.$blurTheme = layoutTheme.blur;
-
+  function themeRun($timeout, $rootScope, layoutPaths, preloader, $q, baSidebarService, themeLayoutSettings) {
     var whatToWait = [
       preloader.loadAmCharts(),
       $timeout(3000)
     ];
 
-    if ($rootScope.$isMobile) {
-      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
-    } else {
-      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
-      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
+    var theme = themeLayoutSettings;
+    if (theme.blur) {
+      if (theme.mobile) {
+        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
+      } else {
+        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
+        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
+      }
     }
 
     $q.all(whatToWait).then(function () {

diff --git a/src/app/theme/theme.service.js b/src/app/theme/theme.service.js
@@ -0,0 +1,24 @@
+/**
+ * Created by k.danovsky on 12.05.2016.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+    .service('themeLayoutSettings', themeLayoutSettings);
+
+  /** @ngInject */
+  function themeLayoutSettings(layoutTheme) {
+    var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
+    var mobileClass = isMobile ? 'mobile' : '';
+    var blurClass = layoutTheme.blur ? 'blur-theme' : '';
+    angular.element(document.body).addClass(mobileClass).addClass(blurClass);
+
+    return {
+      blur: layoutTheme.blur,
+      mobile: isMobile,
+    }
+  }
+
+})();
diff --git a/src/index.html b/src/index.html
@@ -24,7 +24,7 @@
   <!-- endinject -->
   <!-- endbuild -->
 </head>
-<body ng-class="{'mobile' : $isMobile, 'blur-theme': $blurTheme}">
+<body>
 <div class="body-bg"></div>
 <main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }">
 

diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss
@@ -345,7 +345,7 @@ label.custom-input-danger {
   }
   .input-group-addon {
     background-color: $color;
-    color: $default;
+    color: $label-text;
   }
 }
 

diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss
@@ -40,13 +40,11 @@ $panel-heading-font-size: 16px;
   }
 }
 
-.blur-theme {
-  .panel.panel-blur {
-    $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
-    background: url($blurredBgUrl);
-    transition: none;
-    background-attachment: fixed;
-  }
+.panel.panel-blur {
+  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+  background: url($blurredBgUrl);
+  transition: none;
+  background-attachment: fixed;
 }
 
 .panel {

diff --git a/src/sass/theme/conf/_mixins.scss b/src/sass/theme/conf/_mixins.scss
@@ -115,14 +115,3 @@
     color: darken($color, 20);
   }
 }
-
-@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
-  .panel.panel-blur, .panel.panel-blur:hover {
-    border-color: $borderColor;
-    background-color: $color;
-  }
-
-  .progress {
-    background: $color;
-  }
-}