refactor(skins):make transperent panel optional

pull/3/head
alex 2016-01-22 20:04:33 +03:00
parent 9bb23a9a04
commit 0737bdb0f9
4 changed files with 28 additions and 5 deletions

View File

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

View File

@ -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'
}

View File

@ -22,6 +22,10 @@
}
};
this.getActiveSkin = function(){
return activeSkin;
};
this.getChartColorProfile = function() {
return tplSkinChartColors[activeSkin.chartColorProfile];
};

View File

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