jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(colorScheme): move colors to config provider

pull/46/head
KostyaDanovsky 2016-05-13 22:18:49 +03:00 committed by kostya.danovsky
parent 767189b548
commit d2f8c1a4b3
26 changed files with 167 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
View File

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

3
src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
View File

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

3
src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
View File

@ -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",

3
src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js
View File

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

2
src/app/pages/charts/amCharts/ganttChart/ganttChartCtrl.js
View File

@ -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",

3
src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
View File

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

3
src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js
View File

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

4
src/app/pages/charts/chartist/chartistCtrl.js
View File

@ -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: {

3
src/app/pages/charts/morris/morris.module.js
View File

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

3
src/app/pages/charts/morris/morrisCtrl.js
View File

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

4
src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js
View File

@ -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: {

5
src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js
View File

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

3
src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js
View File

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

4
src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js
View File

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

6
src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js
View File

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

6
src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
View File

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

3
src/app/pages/maps/map-bubbles/MapBubblePageCtrl.js
View File

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

3
src/app/pages/maps/map-lines/MapLinesPageCtrl.js
View File

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

3
src/app/theme/amChartConfig.js
View File

@ -9,7 +9,8 @@
.config(amChartConfig);
/** @ngInject */
function amChartConfig(layoutColors) {
function amChartConfig(baConfigProvider) {
var layoutColors = baConfigProvider.colors;
AmCharts.themes.blur = {
themeName: "blur",

3
src/app/theme/chartJsConfig.js
View File

@ -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],

6
src/app/theme/components/baPanel/baPanel.directive.js
View File

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

23
src/app/theme/theme.config.js Normal file
View File

@ -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
src/app/theme/theme.configProvider.js Normal file
View File

@ -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;
}
})();

76
src/app/theme/theme.constants.js
View File

@ -7,75 +7,7 @@
var IMAGES_ROOT = 'assets/img/';
var blurTheme = true;
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')
.constant('layoutTheme', {
blur: blurTheme,
})
.constant('layoutColors', {
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: tint(colorScheme.primary, 30),
infoLight: tint(colorScheme.info, 30),
successLight: tint(colorScheme.success, 30),
warningLight: tint(colorScheme.warning, 30),
dangerLight: tint(colorScheme.danger, 30),
primaryDark: shade(colorScheme.primary, 15),
infoDark: shade(colorScheme.info, 15),
successDark: shade(colorScheme.success, 15),
warningDark: shade(colorScheme.warning, 15),
dangerDark: shade(colorScheme.danger, 15),
dashboard: {
blueStone: dashboardColors.blueStone,
surfieGreen: dashboardColors.surfieGreen,
silverTree: dashboardColors.silverTree,
gossip: dashboardColors.gossip,
white: dashboardColors.white,
blueStoneDark: shade(dashboardColors.blueStone, 15),
surfieGreenDark: shade(dashboardColors.surfieGreen, 15),
silverTreeDark: shade(dashboardColors.silverTree, 15),
gossipDark: shade(dashboardColors.gossip, 15),
whiteDark: shade(dashboardColors.white, 5),
},
})
.constant('layoutSizes', {
resWidthCollapseSidebar: 1200,
resWidthHideSidebar: 500
@ -87,6 +19,14 @@
amMap: 'assets/img/theme/vendor/ammap//dist/ammap/images/',
amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
}
})
.constant('colorHelper', {
tint: function(color, weight) {
return mix('#ffffff', color, weight);
},
shade: function(color, weight) {
return mix('#000000', color, weight);
},
});
function shade(color, weight) {

6
src/app/theme/theme.service.js
View File

@ -9,14 +9,14 @@
.service('themeLayoutSettings', themeLayoutSettings);
/** @ngInject */
function themeLayoutSettings(layoutTheme) {
function themeLayoutSettings(baConfig) {
var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
var mobileClass = isMobile ? 'mobile' : '';
var blurClass = layoutTheme.blur ? 'blur-theme' : '';
var blurClass = baConfig.theme.blur ? 'blur-theme' : '';
angular.element(document.body).addClass(mobileClass).addClass(blurClass);
return {
blur: layoutTheme.blur,
blur: baConfig.theme.blur,
mobile: isMobile,
}
}

2
src/sass/common.scss
View File

@ -1,3 +1,3 @@
@import 'theme/conf/mixins';
@import 'theme/conf/colorScheme/default';
@import 'theme/conf/colorScheme/mint';
@import 'theme/conf/variables';