Skip to content

Commit

Permalink
refactor(colorScheme): move colors to config provider
Browse files Browse the repository at this point in the history
  • Loading branch information
KostyaDanovsky committed May 13, 2016
1 parent 767189b commit d2f8c1a
Show file tree
Hide file tree
Showing 26 changed files with 167 additions and 103 deletions.
3 changes: 2 additions & 1 deletion src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('AreaChartCtrl', AreaChartCtrl);

/** @ngInject */
function AreaChartCtrl($scope, layoutColors, $element, layoutPaths) {
function AreaChartCtrl($scope, baConfig, $element, layoutPaths) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var areaChart = AmCharts.makeChart(id, {
type: 'serial',
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('BarChartCtrl', BarChartCtrl);

/** @ngInject */
function BarChartCtrl($scope, layoutColors, $element, layoutPaths) {
function BarChartCtrl($scope, baConfig, $element, layoutPaths) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var barChart = AmCharts.makeChart(id, {
type: 'serial',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('combinedChartCtrl', combinedChartCtrl);

/** @ngInject */
function combinedChartCtrl($element, layoutColors, layoutPaths) {
function combinedChartCtrl($element, baConfig, layoutPaths) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart(id, {
"type": "serial",
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('FunnelChartCtrl', FunnelChartCtrl);

/** @ngInject */
function FunnelChartCtrl($scope, $element, layoutPaths, layoutColors) {
function FunnelChartCtrl($scope, $element, layoutPaths, baConfig) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var funnelChart = AmCharts.makeChart(id, {
type: 'funnel',
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/charts/amCharts/ganttChart/ganttChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.controller('ganttChartCtrl', ganttChartCtrl);

/** @ngInject */
function ganttChartCtrl(layoutColors, $element) {
function ganttChartCtrl($element) {
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart( id, {
"type": "gantt",
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('LineChartCtrl', LineChartCtrl);

/** @ngInject */
function LineChartCtrl($scope, layoutColors, $element, layoutPaths) {
function LineChartCtrl($scope, baConfig, $element, layoutPaths) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var lineChart = AmCharts.makeChart(id, {
type: 'serial',
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('PieChartCtrl', PieChartCtrl);

/** @ngInject */
function PieChartCtrl($element, layoutPaths, layoutColors) {
function PieChartCtrl($element, layoutPaths, baConfig) {
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var pieChart = AmCharts.makeChart(id, {
type: 'pie',
Expand Down
4 changes: 2 additions & 2 deletions src/app/pages/charts/chartist/chartistCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
.controller('chartistCtrl', chartistCtrl);

/** @ngInject */
function chartistCtrl($scope, $timeout, layoutColors) {
function chartistCtrl($scope, $timeout, baConfig) {

$scope.simpleLineOptions = {
color: layoutColors.defaultText,
color: baConfig.colors.defaultText,
fullWidth: true,
height: "300px",
chartPadding: {
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/morris/morris.module.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
'use strict';

angular.module('BlurAdmin.pages.charts.morris', [])
.config(routeConfig).config(function(layoutColors){
.config(routeConfig).config(function(baConfigProvider){
var layoutColors = baConfigProvider.colors;
Morris.Donut.prototype.defaults.backgroundColor = 'transparent';
Morris.Donut.prototype.defaults.labelColor = layoutColors.defaultText;
Morris.Grid.prototype.gridDefaults.gridLineColor = layoutColors.borderDark;
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/charts/morris/morrisCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('morrisCtrl', morrisCtrl);

/** @ngInject */
function morrisCtrl($scope, $window, layoutColors) {
function morrisCtrl($scope, $window, baConfig) {
var layoutColors = baConfig.colors;
$scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.primaryDark];
$scope.lineData = [
{y: "2006", a: 100, b: 90},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
.controller('DashboardCalendarCtrl', DashboardCalendarCtrl);

/** @ngInject */
function DashboardCalendarCtrl(layoutColors) {
var dashboardColors = layoutColors.dashboard;
function DashboardCalendarCtrl(baConfig) {
var dashboardColors = baConfig.colors.dashboard;
var $element = $('#calendar').fullCalendar({
//height: 335,
header: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
.controller('DashboardLineChartCtrl', DashboardLineChartCtrl);

/** @ngInject */
function DashboardLineChartCtrl(layoutColors, layoutPaths, layoutTheme, baUtil) {
var graphColor = layoutTheme.blur ? '#000000' : layoutColors.primary;
function DashboardLineChartCtrl(baConfig, layoutPaths, baUtil) {
var layoutColors = baConfig.colors;
var graphColor = baConfig.theme.blur ? '#000000' : layoutColors.primary;
var chartData = [
{ date: new Date(2012, 11), value: 0, value0: 0 },
{ date: new Date(2013, 0), value: 15000, value0: 19000},
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('DashboardMapCtrl', DashboardMapCtrl);

/** @ngInject */
function DashboardMapCtrl(layoutColors, layoutPaths) {
function DashboardMapCtrl(baConfig, layoutPaths) {
var layoutColors = baConfig.colors;
var map = AmCharts.makeChart('amChartMap', {
type: 'map',
theme: 'blur',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
.controller('DashboardPieChartCtrl', DashboardPieChartCtrl);

/** @ngInject */
function DashboardPieChartCtrl($scope, $timeout, layoutColors, baUtil) {
var pieColor = baUtil.hexToRGB(layoutColors.defaultText, 0.2);
function DashboardPieChartCtrl($scope, $timeout, baConfig, baUtil) {
var pieColor = baUtil.hexToRGB(baConfig.colors.defaultText, 0.2);
$scope.charts = [{
color: pieColor,
description: 'New Visits',
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
.controller('DashboardTodoCtrl', DashboardTodoCtrl);

/** @ngInject */
function DashboardTodoCtrl($scope, layoutColors, layoutTheme) {
function DashboardTodoCtrl($scope, baConfig) {

$scope.transparent = layoutTheme.blur;
var dashboardColors = layoutColors.dashboard;
$scope.transparent = baConfig.theme.blur;
var dashboardColors = baConfig.colors.dashboard;
var colors = [];
for (var key in dashboardColors) {
colors.push(dashboardColors[key]);
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
.controller('TrafficChartCtrl', TrafficChartCtrl);

/** @ngInject */
function TrafficChartCtrl($scope, layoutColors, layoutTheme) {
function TrafficChartCtrl($scope, baConfig) {

$scope.transparent = layoutTheme.blur;
var dashboardColors = layoutColors.dashboard;
$scope.transparent = baConfig.theme.blur;
var dashboardColors = baConfig.colors.dashboard;
$scope.doughnutData = [
{
value: 2000,
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/maps/map-bubbles/MapBubblePageCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('MapBubblePageCtrl', MapBubblePageCtrl);

/** @ngInject */
function MapBubblePageCtrl(layoutColors, $timeout, layoutPaths) {
function MapBubblePageCtrl(baConfig, $timeout, layoutPaths) {
var layoutColors = baConfig.colors;
var latlong = {};
latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
latlong['AE'] = {'latitude': 24, 'longitude': 54};
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/maps/map-lines/MapLinesPageCtrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.controller('MapLinesPageCtrl', MapLinesPageCtrl);

/** @ngInject */
function MapLinesPageCtrl(layoutColors, $timeout, layoutPaths) {
function MapLinesPageCtrl(baConfig, $timeout, layoutPaths) {
var layoutColors = baConfig.colors;
// svg path for target icon
var targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
// svg path for plane icon
Expand Down
3 changes: 2 additions & 1 deletion src/app/theme/amChartConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.config(amChartConfig);

/** @ngInject */
function amChartConfig(layoutColors) {
function amChartConfig(baConfigProvider) {
var layoutColors = baConfigProvider.colors;
AmCharts.themes.blur = {

themeName: "blur",
Expand Down
3 changes: 2 additions & 1 deletion src/app/theme/chartJsConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
.config(chartJsConfig);

/** @ngInject */
function chartJsConfig(ChartJsProvider, layoutColors) {
function chartJsConfig(ChartJsProvider, baConfigProvider) {
var layoutColors = baConfigProvider.colors;
// Configure all charts
ChartJsProvider.setOptions({
colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
Expand Down
6 changes: 3 additions & 3 deletions src/app/theme/components/baPanel/baPanel.directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
.directive('baPanel', baPanel);

/** @ngInject */
function baPanel(baPanel, layoutTheme) {
function baPanel(baPanel, baConfig) {
return angular.extend({}, baPanel, {
template: function(el, attrs) {
var res = '<div class="panel ' + (layoutTheme.blur ? 'panel-blur' : '') + ' full-invisible ' + (attrs.baPanelClass || '');
res += '" zoom-in ' + (layoutTheme.blur ? 'ba-panel-blur' : '') + '>';
var res = '<div class="panel ' + (baConfig.theme.blur ? 'panel-blur' : '') + ' full-invisible ' + (attrs.baPanelClass || '');
res += '" zoom-in ' + (baConfig.theme.blur ? 'ba-panel-blur' : '') + '>';
res += baPanel.template(el, attrs);
res += '</div>';
return res;
Expand Down
23 changes: 23 additions & 0 deletions src/app/theme/theme.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* Created by k.danovsky on 13.05.2016.
*/

(function () {
'use strict';

angular.module('BlurAdmin.theme')
.config(config);

/** @ngInject */
function config(baConfigProvider, colorHelper) {
baConfigProvider.theme.blur = false;

var colors = baConfigProvider.colors;
colors.default = '#ffffff';
colors.defaultText = '#666666';
colors.dashboard.white = '#10c4b5';
colors.dashboard.whiteDark = colorHelper.shade(colors.dashboard.white, 5);

console.log(baConfigProvider);
}
})();
87 changes: 87 additions & 0 deletions src/app/theme/theme.configProvider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* Created by k.danovsky on 13.05.2016.
*/

(function () {
'use strict';

var basic = {
default: 'rgba(#000000, 0.2)',
defaultText: '#ffffff',
border: '#dddddd',
borderDark: '#aaaaaa',
};

// main functional color scheme
var colorScheme = {
primary: '#209e91',
info: '#2dacd1',
success: '#90b900',
warning: '#dfb81c',
danger: '#e85656',
};

// dashboard colors for charts
var dashboardColors = {
blueStone: '#005562',
surfieGreen: '#0e8174',
silverTree: '#6eba8c',
gossip: '#b9f2a1',
white: '#ffffff',
};

angular.module('BlurAdmin.theme')
.provider('baConfig', configProvider);

/** @ngInject */
function configProvider(colorHelper) {
var conf = {
theme: {
blur: true,
},
colors: {
default: basic.default,
defaultText: basic.defaultText,
border: basic.border,
borderDark: basic.borderDark,

primary: colorScheme.primary,
info: colorScheme.info,
success: colorScheme.success,
warning: colorScheme.warning,
danger: colorScheme.danger,

primaryLight: colorHelper.tint(colorScheme.primary, 30),
infoLight: colorHelper.tint(colorScheme.info, 30),
successLight: colorHelper.tint(colorScheme.success, 30),
warningLight: colorHelper.tint(colorScheme.warning, 30),
dangerLight: colorHelper.tint(colorScheme.danger, 30),

primaryDark: colorHelper.shade(colorScheme.primary, 15),
infoDark: colorHelper.shade(colorScheme.info, 15),
successDark: colorHelper.shade(colorScheme.success, 15),
warningDark: colorHelper.shade(colorScheme.warning, 15),
dangerDark: colorHelper.shade(colorScheme.danger, 15),

dashboard: {
blueStone: dashboardColors.blueStone,
surfieGreen: dashboardColors.surfieGreen,
silverTree: dashboardColors.silverTree,
gossip: dashboardColors.gossip,
white: dashboardColors.white,

blueStoneDark: colorHelper.shade(dashboardColors.blueStone, 15),
surfieGreenDark: colorHelper.shade(dashboardColors.surfieGreen, 15),
silverTreeDark: colorHelper.shade(dashboardColors.silverTree, 15),
gossipDark: colorHelper.shade(dashboardColors.gossip, 15),
whiteDark: colorHelper.shade(dashboardColors.white, 5),
},
}
};
conf.$get = function () {
delete conf.$get;
return conf;
};
return conf;
}
})();
Loading

0 comments on commit d2f8c1a

Please sign in to comment.