From 0528e2e39fa5efbe4128d052401af66588bc03c8 Mon Sep 17 00:00:00 2001 From: Alexander Zhukov Date: Fri, 3 Feb 2017 15:09:03 +0300 Subject: [PATCH] fix(theme): fix cards background of blur theme --- src/app/app.component.ts | 6 +- .../theme/sass/conf/colorSchemes/_blur.scss | 2 +- .../theme/sass/conf/colorSchemes/_ng2.scss | 1 - src/app/theme/theme.config.ts | 24 ++-- src/app/theme/theme.configProvider.ts | 132 ++++++++++-------- 5 files changed, 91 insertions(+), 74 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 60f6c471bc..27b324f19b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,7 @@ import { Component, ViewContainerRef } from '@angular/core'; import { GlobalState } from './global.state'; import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services'; +import { BaThemeConfig } from './theme/theme.config'; import { layoutPaths } from './theme/theme.constants'; import 'style-loader!./app.scss'; @@ -27,7 +28,10 @@ export class App { constructor(private _state: GlobalState, private _imageLoader: BaImageLoaderService, private _spinner: BaThemeSpinner, - private viewContainerRef: ViewContainerRef) { + private viewContainerRef: ViewContainerRef, + private themeConfig: BaThemeConfig) { + + themeConfig.config(); this._loadImages(); diff --git a/src/app/theme/sass/conf/colorSchemes/_blur.scss b/src/app/theme/sass/conf/colorSchemes/_blur.scss index 6784df3a2d..6353014105 100644 --- a/src/app/theme/sass/conf/colorSchemes/_blur.scss +++ b/src/app/theme/sass/conf/colorSchemes/_blur.scss @@ -24,7 +24,7 @@ $progress-default: #ffffff; $bootstrap-panel-radius: 5px; $bootstrap-panel-text: #7d7d7d; -$bootstrap-panel-bg: #ffffff; +$bootstrap-panel-bg: rgba(255, 255, 255, 0.1); $bootstrap-panel-header-bg: $bootstrap-panel-bg; $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12); $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); diff --git a/src/app/theme/sass/conf/colorSchemes/_ng2.scss b/src/app/theme/sass/conf/colorSchemes/_ng2.scss index 43d1a69af5..1d895829ff 100644 --- a/src/app/theme/sass/conf/colorSchemes/_ng2.scss +++ b/src/app/theme/sass/conf/colorSchemes/_ng2.scss @@ -13,7 +13,6 @@ $border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for $input-border: rgba(255, 255, 255, 0.6); // input border color $input-background: rgba(255, 255, 255, 0.1); // input border color for hover $dropdown-text: #7d7d7d; // dropdown text color -$ckeditor-text: #333; // sidebar colors $sidebar: #282828; diff --git a/src/app/theme/theme.config.ts b/src/app/theme/theme.config.ts index 22cf62b5f9..3a7e2494d6 100644 --- a/src/app/theme/theme.config.ts +++ b/src/app/theme/theme.config.ts @@ -1,17 +1,17 @@ -import {Injectable} from '@angular/core'; -import {BaThemeConfigProvider} from './theme.configProvider'; -import {colorHelper} from './theme.constants'; +import { Injectable } from '@angular/core'; + +import { BaThemeConfigProvider } from './theme.configProvider'; +import { colorHelper } from './theme.constants'; @Injectable() export class BaThemeConfig { - constructor(private _baConfig:BaThemeConfigProvider) { - this._config(); + constructor(private _baConfig: BaThemeConfigProvider) { } - private _config() { - // this._baConfig.changeTheme({name: 'my-theme'}); - + config() { + // this._baConfig.changeTheme({ name: 'my-theme' }); + // // let colorScheme = { // primary: '#209e91', // info: '#2dacd1', @@ -19,9 +19,10 @@ export class BaThemeConfig { // warning: '#dfb81c', // danger: '#e85656', // }; + // // this._baConfig.changeColors({ // default: '#4e4e55', - // defaultText: '#e2e2e2', + // defaultText: '#aaaaaa', // border: '#dddddd', // borderDark: '#aaaaaa', // @@ -50,6 +51,11 @@ export class BaThemeConfig { // gossip: '#b9f2a1', // white: '#10c4b5', // }, + // + // custom: { + // dashboardPieChart: colorHelper.hexToRgbA('#aaaaaa', 0.8), + // dashboardLineChart: '#6eba8c', + // }, // }); } } diff --git a/src/app/theme/theme.configProvider.ts b/src/app/theme/theme.configProvider.ts index 7450a4e93d..f62f344234 100644 --- a/src/app/theme/theme.configProvider.ts +++ b/src/app/theme/theme.configProvider.ts @@ -1,87 +1,95 @@ -import {Injectable} from '@angular/core'; -import {colorHelper} from './theme.constants'; +import { Injectable } from '@angular/core'; import * as _ from 'lodash'; +import { colorHelper } from './theme.constants'; + @Injectable() export class BaThemeConfigProvider { - basic = { - default: '#ffffff', - defaultText: '#ffffff', - border: '#dddddd', - borderDark: '#aaaaaa', - }; + private basic: any; + private colorScheme: any; + private dashboardColors: any; + private conf: any; - // main functional color scheme - colorScheme = { - primary: '#00abff', - info: '#40daf1', - success: '#8bd22f', - warning: '#e7ba08', - danger: '#f95372', - }; + constructor() { + this.basic = { + default: '#ffffff', + defaultText: '#ffffff', + border: '#dddddd', + borderDark: '#aaaaaa', + }; - // dashboard colors for charts - dashboardColors = { - blueStone: '#40daf1', - surfieGreen: '#00abff', - silverTree: '#1b70ef', - gossip: '#3c4eb9', - white: '#ffffff', - }; + // main functional color scheme + this.colorScheme = { + primary: '#00abff', + info: '#40daf1', + success: '#8bd22f', + warning: '#e7ba08', + danger: '#f95372', + }; - conf = { - theme: { - name: 'ng2', - }, - colors: { - default: this.basic.default, - defaultText: this.basic.defaultText, - border: this.basic.border, - borderDark: this.basic.borderDark, + // dashboard colors for charts + this.dashboardColors = { + blueStone: '#40daf1', + surfieGreen: '#00abff', + silverTree: '#1b70ef', + gossip: '#3c4eb9', + white: '#ffffff', + }; - primary: this.colorScheme.primary, - info: this.colorScheme.info, - success: this.colorScheme.success, - warning: this.colorScheme.warning, - danger: this.colorScheme.danger, + this.conf = { + theme: { + name: 'ng2', + }, + colors: { + default: this.basic.default, + defaultText: this.basic.defaultText, + border: this.basic.border, + borderDark: this.basic.borderDark, - primaryLight: colorHelper.tint(this.colorScheme.primary, 30), - infoLight: colorHelper.tint(this.colorScheme.info, 30), - successLight: colorHelper.tint(this.colorScheme.success, 30), - warningLight: colorHelper.tint(this.colorScheme.warning, 30), - dangerLight: colorHelper.tint(this.colorScheme.danger, 30), + primary: this.colorScheme.primary, + info: this.colorScheme.info, + success: this.colorScheme.success, + warning: this.colorScheme.warning, + danger: this.colorScheme.danger, - primaryDark: colorHelper.shade(this.colorScheme.primary, 15), - infoDark: colorHelper.shade(this.colorScheme.info, 15), - successDark: colorHelper.shade(this.colorScheme.success, 15), - warningDark: colorHelper.shade(this.colorScheme.warning, 15), - dangerDark: colorHelper.shade(this.colorScheme.danger, 15), + primaryLight: colorHelper.tint(this.colorScheme.primary, 30), + infoLight: colorHelper.tint(this.colorScheme.info, 30), + successLight: colorHelper.tint(this.colorScheme.success, 30), + warningLight: colorHelper.tint(this.colorScheme.warning, 30), + dangerLight: colorHelper.tint(this.colorScheme.danger, 30), - dashboard: { - blueStone: this.dashboardColors.blueStone, - surfieGreen: this.dashboardColors.surfieGreen, - silverTree: this.dashboardColors.silverTree, - gossip: this.dashboardColors.gossip, - white: this.dashboardColors.white, - }, + primaryDark: colorHelper.shade(this.colorScheme.primary, 15), + infoDark: colorHelper.shade(this.colorScheme.info, 15), + successDark: colorHelper.shade(this.colorScheme.success, 15), + warningDark: colorHelper.shade(this.colorScheme.warning, 15), + dangerDark: colorHelper.shade(this.colorScheme.danger, 15), - custom: { - dashboardLineChart: this.basic.defaultText, - dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8) + dashboard: { + blueStone: this.dashboardColors.blueStone, + surfieGreen: this.dashboardColors.surfieGreen, + silverTree: this.dashboardColors.silverTree, + gossip: this.dashboardColors.gossip, + white: this.dashboardColors.white, + }, + + custom: { + dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8), + dashboardLineChart: this.basic.defaultText, + } } - } - }; + }; + } get() { return this.conf; } - changeTheme (theme) { + changeTheme(theme: any) { _.merge(this.get().theme, theme); } - changeColors (colors) { + changeColors(colors: any) { _.merge(this.get().colors, colors); } }