mirror of https://github.com/akveo/blur-admin
refactor(skins):make transperent panel optional
parent
9bb23a9a04
commit
0737bdb0f9
|
@ -12,10 +12,16 @@
|
|||
.directive('baPanel', baPanel);
|
||||
|
||||
/** @ngInject */
|
||||
function baPanel(baPanel, $document, $window) {
|
||||
function baPanel(baPanel, $document, $window, tplSkinManager) {
|
||||
return angular.extend({}, baPanel, {
|
||||
link: function($scope){
|
||||
$scope.panelType = tplSkinManager.getActiveSkin().panelType;
|
||||
$scope.$on('tplSkinChanged', function(){
|
||||
$scope.panelType = tplSkinManager.getActiveSkin().panelType;
|
||||
});
|
||||
},
|
||||
template: function(el, attrs) {
|
||||
var res = '<div class="panel panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
|
||||
var res = '<div class="panel {{panelType}} invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
|
||||
res += baPanel.template(el, attrs);
|
||||
res += '</div>';
|
||||
return res;
|
||||
|
|
|
@ -12,35 +12,41 @@
|
|||
name: 'Default',
|
||||
bodyClass: '',
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/01_default.jpg',
|
||||
panelType: "panel-white",
|
||||
chartColorProfile: 'whitePanel'
|
||||
},
|
||||
{
|
||||
name: 'Peachy',
|
||||
bodyClass: SKIN_CLASS_PREFIX + '-peachy',
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/04_peachy.jpg',
|
||||
panelType: "panel-white",
|
||||
chartColorProfile: 'whitePanel'
|
||||
},
|
||||
{
|
||||
name: 'Blue',
|
||||
bodyClass: SKIN_CLASS_PREFIX + '-blue',
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/03_blue.jpg',
|
||||
panelType: "panel-white",
|
||||
chartColorProfile: 'whitePanel'
|
||||
},
|
||||
{
|
||||
name: 'Material',
|
||||
bodyClass: SKIN_CLASS_PREFIX + '-material',
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/05_material.jpg',
|
||||
panelType: "panel-white",
|
||||
chartColorProfile: 'whitePanel'
|
||||
},
|
||||
{
|
||||
name: 'Transblue (beta)',
|
||||
bodyClass: SKIN_CLASS_PREFIX + '-transblue',
|
||||
panelType: "panel-blur",
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/06_transblue.jpg',
|
||||
chartColorProfile: 'transparent'
|
||||
},
|
||||
{
|
||||
name: 'Transparent (beta)',
|
||||
bodyClass: SKIN_CLASS_PREFIX + '-transparent',
|
||||
panelType: "panel-blur",
|
||||
thumbnailUrl: 'assets/img/app/skin-thumbnails/02_transparent.jpg',
|
||||
chartColorProfile: 'transparent'
|
||||
}
|
||||
|
|
|
@ -22,6 +22,10 @@
|
|||
}
|
||||
};
|
||||
|
||||
this.getActiveSkin = function(){
|
||||
return activeSkin;
|
||||
};
|
||||
|
||||
this.getChartColorProfile = function() {
|
||||
return tplSkinChartColors[activeSkin.chartColorProfile];
|
||||
};
|
||||
|
|
|
@ -59,9 +59,7 @@ $panel-heading-font-size: 16px;
|
|||
//text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-white {
|
||||
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
|
||||
background: url($blurredBgUrl);
|
||||
.panel-white, .panel-blur {
|
||||
background-size: cover;
|
||||
> .panel-heading {
|
||||
background-color: transparent;
|
||||
|
@ -70,6 +68,15 @@ $panel-heading-font-size: 16px;
|
|||
}
|
||||
}
|
||||
|
||||
.panel-white{
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
|
||||
.panel-blur{
|
||||
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
|
||||
background: url($blurredBgUrl);
|
||||
}
|
||||
|
||||
.panel-primary {
|
||||
> .panel-heading {
|
||||
color: $primary;
|
||||
|
|
Loading…
Reference in New Issue