mirror of https://github.com/akveo/blur-admin
refactor(layout): fix switching to blur theme
parent
db01a0be11
commit
dee1333e06
|
@ -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;
|
||||||
|
|
|
@ -9,22 +9,21 @@
|
||||||
.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;
|
||||||
|
if (theme.blur) {
|
||||||
|
if (theme.mobile) {
|
||||||
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
|
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
|
||||||
} else {
|
} else {
|
||||||
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
|
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
|
||||||
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
|
whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$q.all(whatToWait).then(function () {
|
$q.all(whatToWait).then(function () {
|
||||||
$rootScope.$pageFinishedLoading = true;
|
$rootScope.$pageFinishedLoading = true;
|
||||||
|
|
|
@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
|
@ -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() }">
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue