refactor(layout): fix switching to blur theme

pull/46/head
KostyaDanovsky 2016-05-12 17:16:20 +03:00 committed by kostya.danovsky
parent db01a0be11
commit dee1333e06
7 changed files with 43 additions and 32 deletions

View File

@ -12,10 +12,11 @@
.directive('baPanel', baPanel); .directive('baPanel', baPanel);
/** @ngInject */ /** @ngInject */
function baPanel(baPanel) { function baPanel(baPanel, layoutTheme) {
return angular.extend({}, baPanel, { return angular.extend({}, baPanel, {
template: function(el, attrs) { 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 += baPanel.template(el, attrs);
res += '</div>'; res += '</div>';
return res; return res;

View File

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

View File

@ -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,
}
}
})();

View File

@ -24,7 +24,7 @@
<!-- endinject --> <!-- endinject -->
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body ng-class="{'mobile' : $isMobile, 'blur-theme': $blurTheme}"> <body>
<div class="body-bg"></div> <div class="body-bg"></div>
<main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }"> <main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }">

View File

@ -345,7 +345,7 @@ label.custom-input-danger {
} }
.input-group-addon { .input-group-addon {
background-color: $color; background-color: $color;
color: $default; color: $label-text;
} }
} }

View File

@ -40,13 +40,11 @@ $panel-heading-font-size: 16px;
} }
} }
.blur-theme { .panel.panel-blur {
.panel.panel-blur { $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg'; background: url($blurredBgUrl);
background: url($blurredBgUrl); transition: none;
transition: none; background-attachment: fixed;
background-attachment: fixed;
}
} }
.panel { .panel {

View File

@ -115,14 +115,3 @@
color: darken($color, 20); 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;
}
}