refactor(layout): fix switching to blur theme

9 years ago · dee1333e06
parent db01a0be11
commit dee1333e06
7 changed files with 43 additions and 32 deletions
--- 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;
--- 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 () {
--- 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,
+    }
+  }
+
+})();
--- 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() }">

--- 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;
  }
 }

--- 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 {
--- 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;
-  }
-}