From cbfa97dc3507931e6733b61f236c10602c95c6b7 Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Tue, 19 Apr 2016 19:41:19 +0300 Subject: [PATCH] feat(dashboard): change template theme to light --- .../combinedChart/combinedChartCtrl.js | 36 ++--- .../DashboardLineChartCtrl.js | 16 +-- .../dashboardMap/DashboardMapCtrl.js | 11 +- .../DashboardPieChartCtrl.js | 10 +- .../dashboardTodo/DashboardTodoCtrl.js | 117 ++++------------ .../dashboardTodo/dashboardTodo.html | 4 +- .../trafficChart/TrafficChartCtrl.js | 20 +-- src/app/theme/theme.constants.js | 5 +- src/assets/img/app/my-app-logo.png | Bin 11709 -> 16931 bytes src/sass/404.scss | 2 +- src/sass/app/_chartsPage.scss | 2 +- src/sass/app/_email.scss | 9 +- src/sass/app/_form.scss | 12 +- src/sass/app/_modals.scss | 2 +- src/sass/app/_profile.scss | 8 +- src/sass/app/_typography.scss | 7 +- src/sass/app/maps/_leaflet.scss | 12 +- src/sass/auth.scss | 6 +- src/sass/theme/_buttons.scss | 2 +- src/sass/theme/_layout.scss | 15 +- .../theme/bootstrap-overrides/_panel.scss | 21 +-- src/sass/theme/components/_contentTop.scss | 4 +- src/sass/theme/components/_msgCenter.scss | 6 +- src/sass/theme/components/_pageTop.scss | 12 +- src/sass/theme/components/_sidebar.scss | 6 +- src/sass/theme/conf/_colorScheme.scss | 5 + src/sass/theme/conf/_variables.scss | 7 - src/sass/theme/dashboard/_blurFeed.scss | 4 +- src/sass/theme/dashboard/_calendar.scss | 12 +- src/sass/theme/dashboard/_popularApp.scss | 2 +- src/sass/theme/dashboard/_todo.scss | 128 +----------------- src/sass/theme/dashboard/_trafficChart.scss | 18 +-- src/sass/theme/skins/_02_transparent.scss | 84 +++++------- 33 files changed, 191 insertions(+), 414 deletions(-) diff --git a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js index 673f269..31c7966 100644 --- a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js +++ b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js @@ -14,13 +14,13 @@ var chart = AmCharts.makeChart(id, { "type": "serial", "theme": "none", - "color": layoutColors.default, + "color": layoutColors.defaultText, "dataDateFormat": "YYYY-MM-DD", "precision": 2, "valueAxes": [{ - color: layoutColors.default, - axisColor: layoutColors.default, - gridColor: layoutColors.default, + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText, + gridColor: layoutColors.defaultText, "id": "v1", "title": "Sales", "position": "left", @@ -29,9 +29,9 @@ return "$" + Math.round(value) + "M"; } }, { - color: layoutColors.default, - axisColor: layoutColors.default, - gridColor: layoutColors.default, + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText, + gridColor: layoutColors.defaultText, "id": "v2", "title": "Market Days", "gridAlpha": 0, @@ -40,7 +40,7 @@ }], "graphs": [{ "id": "g3", - color: layoutColors.default, + color: layoutColors.defaultText, "valueAxis": "v1", "lineColor": layoutColors.primaryLight, "fillColors": layoutColors.primaryLight, @@ -51,13 +51,13 @@ "valueField": "sales2", "clustered": false, "columnWidth": 0.5, - "lineColorField" : "#ffffff", + "lineColorField" : layoutColors.defaultText, "legendValueText": "$[[value]]M", "balloonText": "[[title]]
$[[value]]M" }, { "id": "g4", "valueAxis": "v1", - color: layoutColors.default, + color: layoutColors.defaultText, "lineColor": layoutColors.primary, "fillColors": layoutColors.primary, "fillAlphas": 0.9, @@ -74,8 +74,8 @@ "valueAxis": "v2", "bullet": "round", "bulletBorderAlpha": 1, - "bulletColor": "#FFFFFF", - color: layoutColors.default, + "bulletColor": layoutColors.defaultText, + color: layoutColors.defaultText, "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, @@ -88,10 +88,10 @@ }, { "id": "g2", "valueAxis": "v2", - color: layoutColors.default, + color: layoutColors.defaultText, "bullet": "round", "bulletBorderAlpha": 1, - "bulletColor": "#FFFFFF", + "bulletColor": layoutColors.defaultText, "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, @@ -128,9 +128,9 @@ }, "categoryField": "date", "categoryAxis": { - "axisColor": "#fff", - "color": "#fff", - "gridColor": "#fff", + "axisColor": layoutColors.defaultText, + "color": layoutColors.defaultText, + "gridColor": layoutColors.defaultText, "parseDates": true, "dashLength": 1, "minorGridEnabled": true @@ -138,7 +138,7 @@ "legend": { "useGraphSettings": true, "position": "top", - "color": "#fff" + "color": layoutColors.defaultText }, "balloon": { "borderThickness": 1, diff --git a/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js b/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js index 8fc4960..89b45a0 100644 --- a/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js +++ b/src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js @@ -43,7 +43,7 @@ { date: new Date(2015, 1), value: 49800, value0: 13000} ]; - var chartColorProfile = tplSkinManager.getChartColorProfile(); + //var chartColorProfile = tplSkinManager.getChartColorProfile(); var chart = AmCharts.makeChart('amchart', { type: 'serial', @@ -55,15 +55,15 @@ categoryAxis: { parseDates: true, gridAlpha: 0, - color: chartColorProfile.fontColors, - axisColor: chartColorProfile.axisColors + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText }, valueAxes: [ { minVerticalGap: 50, gridAlpha: 0, - color: chartColorProfile.fontColors, - axisColor: chartColorProfile.axisColors + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText } ], graphs: [ @@ -71,7 +71,7 @@ id: 'g0', bullet: 'none', useLineColorForBulletBorder: true, - lineColor: 'rgba(0,0,0,0.3)', + lineColor: 'rgba(0,0,0,0.15)', lineThickness: 1, negativeLineColor: layoutColors.danger, type: 'smoothedLine', @@ -83,7 +83,7 @@ id: 'g1', bullet: 'none', useLineColorForBulletBorder: true, - lineColor: 'rgba(0,0,0,0.4)', + lineColor: 'rgba(0,0,0,0.2)', lineThickness: 1, negativeLineColor: layoutColors.danger, type: 'smoothedLine', @@ -114,7 +114,7 @@ pathToImages: layoutPaths.images.amChart }); - tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart); + //tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart); function zoomChart() { chart.zoomToDates(new Date(2013, 3), new Date(2014, 0)); diff --git a/src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js b/src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js index 014d7d0..7203711 100644 --- a/src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js +++ b/src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js @@ -53,10 +53,11 @@ }, areasSettings: { - rollOverOutlineColor: '#FFFFFF', + rollOverOutlineColor: layoutColors.border, rollOverColor: layoutColors.primaryDark, alpha: 0.8, - unlistedAreasAlpha: 0.1, + unlistedAreasAlpha: 0.2, + unlistedAreasColor: layoutColors.defaultText, balloonText: '[[title]]: [[customData]] users' }, @@ -66,9 +67,9 @@ marginRight: 27, marginLeft: 27, equalWidths: false, - backgroundAlpha: 0.5, - backgroundColor: '#FFFFFF', - borderColor: '#ffffff', + backgroundAlpha: 0.3, + backgroundColor: layoutColors.border, + borderColor: layoutColors.border, borderAlpha: 1, top: 362, left: 0, diff --git a/src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js b/src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js index 4b6af89..986c83c 100644 --- a/src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js +++ b/src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js @@ -9,24 +9,24 @@ .controller('DashboardPieChartCtrl', DashboardPieChartCtrl); /** @ngInject */ - function DashboardPieChartCtrl($scope, $element, $window, $timeout) { + function DashboardPieChartCtrl($scope, $element, $window, $timeout, layoutColors) { $scope.charts = [{ - color: 'rgba(255,255,255,0.4)', + color: layoutColors.border, description: 'New Visits', stats: '57,820', icon: 'person', }, { - color: 'rgba(255,255,255,0.4)', + color: layoutColors.border, description: 'Purchases', stats: '$ 89,745', icon: 'money', }, { - color: 'rgba(255,255,255,0.4)', + color: layoutColors.border, description: 'Active Users', stats: '178,391', icon: 'face', }, { - color: 'rgba(255,255,255,0.4)', + color: layoutColors.border, description: 'Returned', stats: '32,592', icon: 'refresh', diff --git a/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js b/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js index 8b10974..bfd9de7 100644 --- a/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js +++ b/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js @@ -9,99 +9,35 @@ .controller('DashboardTodoCtrl', DashboardTodoCtrl); /** @ngInject */ - function DashboardTodoCtrl($scope) { - $scope.marks = [ - { - id: 0, - color: 'default' - }, - { - id: 1, - color: 'primary' - }, - { - id: 2, - color: 'success' - }, - { - id: 3, - color: 'warning' - }, - { - id: 4, - color: 'danger' - } - ]; + function DashboardTodoCtrl($scope, layoutColors) { + + var palette = layoutColors.bgColorPalette; + var colors = []; + for (var key in palette) { + colors.push(palette[key]); + } + + function getRandomColor() { + var i = Math.floor(Math.random() * (colors.length - 1)); + return colors[i]; + } $scope.todoList = [ - { - text: 'Check me out', - edit: false, // todo: remove edit - markId: 4 - }, - { - text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro', - edit: false, - markId: 3 - }, - { - text: 'Ex has semper alterum, expetenda dignissim', - edit: false, - markId: 2 - }, - { - text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.', - edit: false, - markId: 1 - }, - { - text: 'Simul erroribus ad usu', - edit: false, - markId: 0 - }, - { - text: 'Ei cum solet appareat, ex est graeci mediocritatem', - edit: false, - markId: 4 - }, - { - text: 'Get in touch with akveo team', - edit: false, - markId: 1 - }, - { - text: 'Write email to business cat', - edit: false, - markId: 3 - }, - { - text: 'Have fun with blur admin', - edit: false, - markId: 2 - }, + { text: 'Check me out' }, + { text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro' }, + { text: 'Ex has semper alterum, expetenda dignissim' }, + { text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.' }, + { text: 'Simul erroribus ad usu' }, + { text: 'Ei cum solet appareat, ex est graeci mediocritatem' }, + { text: 'Get in touch with akveo team' }, + { text: 'Write email to business cat' }, + { text: 'Have fun with blur admin' }, + { text: 'What do you think?' }, ]; - $scope.getMarkColor = function (id) { - return $scope.marks.filter(function (item) { - return item.id === id; - })[0].color || ''; - }; - - $scope.changeColor = function (todo) { - for (var i = 0; i < $scope.marks.length; ++i) { - if ($scope.marks[i].id === todo.markId) { - var next = (i + 1 !== $scope.marks.length) ? i + 1 : 0; - todo.markId = $scope.marks[next].id; - return false; - } - } - }; - - $scope.blurOnEnter = function (event, item) { - if (event.which === 13) { - item.edit = false; - } - }; + $scope.todoList.forEach(function(item) { + item.color = getRandomColor(); + }); $scope.newTodoText = ''; @@ -109,8 +45,7 @@ if (clickPlus || event.which === 13) { $scope.todoList.unshift({ text: $scope.newTodoText, - edit: false, - markId: 0 + color: getRandomColor(), }); $scope.newTodoText = ''; } diff --git a/src/app/pages/dashboard/dashboardTodo/dashboardTodo.html b/src/app/pages/dashboard/dashboardTodo/dashboardTodo.html index a347c56..fd61eb9 100644 --- a/src/app/pages/dashboard/dashboardTodo/dashboardTodo.html +++ b/src/app/pages/dashboard/dashboardTodo/dashboardTodo.html @@ -3,10 +3,10 @@