diff --git a/src/app/pages/dashboard/lineChart/lineChart.service.ts b/src/app/pages/dashboard/lineChart/lineChart.service.ts index b7184a7a..cb5b948e 100644 --- a/src/app/pages/dashboard/lineChart/lineChart.service.ts +++ b/src/app/pages/dashboard/lineChart/lineChart.service.ts @@ -10,7 +10,7 @@ export class LineChartService { getData() { var layoutColors = this._baConfig.get().colors; - var graphColor = this._baConfig.get().theme.blur ? '#000000' : layoutColors.primary; + var graphColor = this._baConfig.get().colors.custom.dashboardLineChart; return { type: 'serial', @@ -84,7 +84,7 @@ export class LineChartService { id: 'g1', bullet: 'none', useLineColorForBulletBorder: true, - lineColor: colorHelper.hexToRgbA(graphColor, 0.5), + lineColor: colorHelper.hexToRgbA(graphColor, 0.15), lineThickness: 1, negativeLineColor: layoutColors.danger, type: 'smoothedLine', diff --git a/src/app/pages/dashboard/todo/todo.component.ts b/src/app/pages/dashboard/todo/todo.component.ts index db80f377..b10ab191 100644 --- a/src/app/pages/dashboard/todo/todo.component.ts +++ b/src/app/pages/dashboard/todo/todo.component.ts @@ -11,8 +11,7 @@ import {TodoService} from './todo.service'; template: require('./todo.html') }) export class Todo { - - public transparent = this._baConfig.get().theme.blur; + public dashboardColors = this._baConfig.get().colors.dashboard; public todoList:Array; diff --git a/src/app/pages/dashboard/todo/todo.html b/src/app/pages/dashboard/todo/todo.html index 76b1e06f..f8ab6681 100644 --- a/src/app/pages/dashboard/todo/todo.html +++ b/src/app/pages/dashboard/todo/todo.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/pages/dashboard/todo/todo.scss b/src/app/pages/dashboard/todo/todo.scss index 87ada47c..ed8169e4 100644 --- a/src/app/pages/dashboard/todo/todo.scss +++ b/src/app/pages/dashboard/todo/todo.scss @@ -99,94 +99,96 @@ label.todo-checkbox { display: none; } -.task-todo-container.transparent { - .todo-panel.panel { - color: white; - opacity: 0.9; - } - input.task-todo { - color: white; - width: calc(100% - 25px); - border-radius: 0; - border: none; - background: transparent; - &:focus { - outline: none; - background-color: transparent; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); +.ng2, .blur { + + .task-todo-container { + .todo-panel.panel { + color: white; + opacity: 0.9; } - } - .add-item-icon { - display: block; - float: right; - margin-top: -45px; - margin-right: 5px; - font-size: 25px; - cursor: pointer; - } - - ul.todo-list { - li { - margin: 0; + input.task-todo { + color: white; + width: calc(100% - 25px); + border-radius: 0; border: none; - font-weight: $font-light; + background: transparent; + &:focus { + outline: none; + background-color: transparent; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); + } + } + .add-item-icon { + display: block; + float: right; + margin-top: -45px; + margin-right: 5px; + font-size: 25px; + cursor: pointer; + } - .blur-container{ - height: 40px; - position: absolute; - width: calc(100% + 40px);; - top: 0; - left: -25px; - overflow-y: hidden; - } - &:hover{ - .blur-container{ - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); - } - .blur-box { - height: 100%; - background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); - -webkit-filter: blur(3px); - } - } - i.remove-todo { - color: white; - opacity: 0.4; - &:hover { - color: white; - opacity: 0.95; - } - } - i.mark { - min-width: 40px; - display: none; - } - label.todo-checkbox > span { - &:before { + ul.todo-list { + li { + margin: 0; + border: none; + font-weight: $font-light; + + .blur-container { + height: 40px; position: absolute; - color: $content-text; - content: '\f10c'; - float: none; - margin-right: 6px; - transition: none; + width: calc(100% + 40px);; + top: 0; + left: -25px; + overflow-y: hidden; + } + &:hover { + .blur-container { + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); + } + .blur-box { + height: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); + -webkit-filter: blur(3px); + } + } + i.remove-todo { + color: white; + opacity: 0.4; + &:hover { + color: white; + opacity: 0.95; + } + } + i.mark { + min-width: 40px; + display: none; } - } - &.checked { label.todo-checkbox > span { &:before { - content: '\f00c'; + position: absolute; + color: $content-text; + content: '\f10c'; + float: none; + margin-right: 6px; + transition: none; + } + } + &.checked { + label.todo-checkbox > span { + &:before { + content: '\f00c'; + } } } } } - } - .box-shadow-border{ - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); - width: calc(100% + 44px); - margin-left: -22px; + .box-shadow-border { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); + width: calc(100% + 44px); + margin-left: -22px; + } } - } diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts index 18813e42..cdbca10a 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts +++ b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts @@ -15,11 +15,9 @@ import {TrafficChartService} from './trafficChart.service'; export class TrafficChart { public doughnutData: Array; - public transparent:boolean = false; constructor(private trafficChartService:TrafficChartService) { this.doughnutData = trafficChartService.getData(); - this.transparent = trafficChartService.getTransparent(); } ngAfterViewInit() { diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html index 82a0ec70..3b5f55ec 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.html +++ b/src/app/pages/dashboard/trafficChart/trafficChart.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss index c14bf150..9bdecd43 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.scss +++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss @@ -5,21 +5,23 @@ position: relative; } -.channels-block.transparent { - .traffic-chart canvas{ - border: 10px solid rgba(0,0,0,0.35); - box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset; - border-radius: 150px; - } +.ng2, .blur { + .channels-block { + .traffic-chart canvas{ + border: 15px solid rgba(0,0,0,0.2); + //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset; + border-radius: 150px; + } - .chart-bg{ - position: absolute; - width: 180px; - height: 180px; - left: 60px; - top: 60px; - background-color: rgba(0,0,0,0.35); - border-radius: 100px; + .chart-bg{ + position: absolute; + width: 180px; + height: 180px; + left: 60px; + top: 60px; + background-color: rgba(0,0,0,0.4); + border-radius: 100px; + } } } diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts index 8c1aeb5b..a09bc35b 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts +++ b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts @@ -49,8 +49,4 @@ export class TrafficChartService { }, ]; } - - getTransparent() { - return this._baConfig.get().theme.blur; - } } diff --git a/src/app/theme/components/baCard/baCardBlur.directive.ts b/src/app/theme/components/baCard/baCardBlur.directive.ts index 7b0693a1..bad59788 100644 --- a/src/app/theme/components/baCard/baCardBlur.directive.ts +++ b/src/app/theme/components/baCard/baCardBlur.directive.ts @@ -53,6 +53,6 @@ export class BaCardBlur { } private _isEnabled() { - return this._baConfig.get().theme.blur; + return this._baConfig.get().theme.name == 'blur'; } } diff --git a/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts b/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts index bc8dd0f9..e836b5aa 100644 --- a/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts +++ b/src/app/theme/directives/baThemeRun/baThemeRun.directive.ts @@ -7,23 +7,29 @@ import {BaThemeConfigProvider, isMobile} from '../../../theme'; }) export class BaThemeRun { - @HostBinding('class.blur-theme') isBlur:boolean = false; - @HostBinding('class.mobile') isMobile:boolean = false; + private _classes:Array = []; + @HostBinding('class') classesString:string; constructor(private _baConfig:BaThemeConfigProvider) { } public ngOnInit():void { - this._assignBlur(); + this._assignTheme(); this._assignMobile(); } - // TODO: assign any theme class, not only hardcoded blur - private _assignBlur():void { - this.isBlur = this._baConfig.get().theme.blur; + private _assignTheme():void { + this._addClass(this._baConfig.get().theme.name); } private _assignMobile():void { - this.isMobile = isMobile(); + if (isMobile()) { + this._addClass('mobile'); + } + } + + private _addClass(cls:string) { + this._classes.push(cls); + this.classesString = this._classes.join(' '); } } diff --git a/src/app/theme/sass/conf/colorSchemes/_ng2.scss b/src/app/theme/sass/conf/colorSchemes/_ng2.scss index cd6bc8da..c7db9867 100644 --- a/src/app/theme/sass/conf/colorSchemes/_ng2.scss +++ b/src/app/theme/sass/conf/colorSchemes/_ng2.scss @@ -26,8 +26,8 @@ $bootstrap-panel-header-border: none; $bootstrap-panel-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15); $mail-box: whitesmoke; $auth-panel-background: #ffffff; -$progress-background: rgba(#000000, 0.07); -$progress-default: rgba(#000000, 0.15); +$progress-background: rgba(0,0,0, 0.15); +$progress-default: rgba($default-text, 0.95); $primary: #00abff !default; $info: #40daf1 !default; diff --git a/src/app/theme/theme.configProvider.ts b/src/app/theme/theme.configProvider.ts index a1988dd6..2a613675 100644 --- a/src/app/theme/theme.configProvider.ts +++ b/src/app/theme/theme.configProvider.ts @@ -31,7 +31,7 @@ export class BaThemeConfigProvider { conf = { theme: { - blur: false, + name: 'ng2', }, colors: { default: this.basic.default, @@ -64,6 +64,10 @@ export class BaThemeConfigProvider { gossip: this.dashboardColors.gossip, white: this.dashboardColors.white, }, + + custom: { + dashboardLineChart: '#fff', + } } };