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

feat(theme): change dashboard and charts to use light theme

pull/46/head
KostyaDanovsky 2016-04-20 17:50:04 +03:00 committed by kostya.danovsky
parent cbfa97dc35
commit 490d81f317
20 changed files with 144 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@
var areaChart = AmCharts.makeChart(id, {
type: 'serial',
theme: 'blur',
color: layoutColors.defaultText,
dataProvider: [
{
lineColor: layoutColors.info,
@ -79,7 +80,7 @@
hh: 'h ',
mm: 'min'
},
axisAlpha: 0
gridColor: layoutColors.defaultText,
}
],
graphs: [
@ -124,9 +125,9 @@
],
parseDates: true,
autoGridCount: false,
axisColor: '#555555',
gridAlpha: 0,
gridCount: 50
gridCount: 50,
gridAlpha: 0.5,
gridColor: layoutColors.border,
},
export: {
enabled: true
@ -134,7 +135,7 @@
pathToImages: layoutPaths.images.amChart
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
//tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
areaChart.addListener('dataUpdated', zoomAreaChart);

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

@ -14,6 +14,7 @@
var barChart = AmCharts.makeChart(id, {
type: 'serial',
theme: 'blur',
color: layoutColors.defaultText,
dataProvider: [
{
country: 'USA',
@ -44,14 +45,16 @@
{
country: 'France',
visits: 1114,
color: layoutColors.default
color: layoutColors.primaryLight
}
],
valueAxes: [
{
axisAlpha: 0,
position: 'left',
title: 'Visitors from country'
title: 'Visitors from country',
gridAlpha: 0.5,
gridColor: layoutColors.border,
}
],
startDuration: 1,
@ -73,7 +76,9 @@
categoryField: 'country',
categoryAxis: {
gridPosition: 'start',
labelRotation: 45
labelRotation: 45,
gridAlpha: 0.5,
gridColor: layoutColors.border,
},
export: {
enabled: true
@ -82,7 +87,6 @@
pathToImages: layoutPaths.images.amChart
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
//tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
}
})();

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

@ -107,16 +107,18 @@
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
gridAlpha: 0,
color: layoutColors.defaultText,
scrollbarHeight: 50,
backgroundAlpha: 0,
selectedBackgroundAlpha: 0.05,
selectedBackgroundColor: layoutColors.defaultText,
graphFillAlpha: 0,
autoGridCount: true,
selectedGraphFillAlpha: 0,
graphLineAlpha: 0.2,
selectedGraphLineColor: layoutColors.defaultText,
selectedGraphLineAlpha: 1
},
"chartCursor": {
"pan": true,

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

@ -9,11 +9,13 @@
.controller('FunnelChartCtrl', FunnelChartCtrl);
/** @ngInject */
function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
var id = $element[0].getAttribute('id');
var funnelChart = AmCharts.makeChart(id, {
type: 'funnel',
theme: 'blur',
color: layoutColors.defaultText,
labelTickColor: layoutColors.borderDark,
dataProvider: [
{
title: 'Website visits',
@ -64,7 +66,7 @@
pathToImages: layoutPaths
});
tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
//tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
}
})();

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

@ -14,6 +14,7 @@
var lineChart = AmCharts.makeChart(id, {
type: 'serial',
theme: 'blur',
color: layoutColors.defaultText,
marginTop: 0,
marginRight: 15,
dataProvider: [
@ -85,7 +86,9 @@
valueAxes: [
{
axisAlpha: 0,
position: 'left'
position: 'left',
gridAlpha: 0.5,
gridColor: layoutColors.border,
}
],
graphs: [
@ -104,17 +107,16 @@
chartScrollbar: {
graph: 'g1',
gridAlpha: 0,
color: '#888888',
color: layoutColors.defaultText,
scrollbarHeight: 55,
backgroundAlpha: 0,
selectedBackgroundAlpha: 0.1,
selectedBackgroundColor: '#888888',
selectedBackgroundAlpha: 0.05,
selectedBackgroundColor: layoutColors.defaultText,
graphFillAlpha: 0,
autoGridCount: true,
selectedGraphFillAlpha: 0,
graphLineAlpha: 0.2,
graphLineColor: '#c2c2c2',
selectedGraphLineColor: '#888888',
selectedGraphLineColor: layoutColors.defaultText,
selectedGraphLineAlpha: 1
},
chartCursor: {
@ -131,7 +133,9 @@
minPeriod: 'YYYY',
parseDates: true,
minorGridAlpha: 0.1,
minorGridEnabled: true
minorGridEnabled: true,
gridAlpha: 0.5,
gridColor: layoutColors.border,
},
export: {
enabled: true
@ -140,7 +144,7 @@
pathToImages: layoutPaths.images.amChart
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
//tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
lineChart.addListener('rendered', zoomChart);
if (lineChart.zoomChart) {

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

@ -9,17 +9,19 @@
.controller('PieChartCtrl', PieChartCtrl);
/** @ngInject */
function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths, layoutColors) {
var id = $element[0].getAttribute('id');
var pieChart = AmCharts.makeChart(id, {
type: 'pie',
startDuration: 0,
theme: 'blur',
addClassNames: true,
color: layoutColors.defaultText,
labelTickColor: layoutColors.borderDark,
legend: {
position: 'right',
marginRight: 100,
autoMargins: false
autoMargins: false,
},
innerRadius: '40%',
defs: {
@ -126,7 +128,7 @@
}
});
tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
//tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
pieChart.addListener('init', handleInit);

2
src/app/pages/charts/chartist/chartist.html
View File

@ -1,4 +1,4 @@
<section ng-controller="chartistCtrl">
<section ng-controller="chartistCtrl" class="chartist">
<div class="row">
<div class="col-md-6 ">
<div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">

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

@ -9,9 +9,10 @@
.controller('chartistCtrl', chartistCtrl);
/** @ngInject */
function chartistCtrl($scope, $timeout) {
function chartistCtrl($scope, $timeout, layoutColors) {
$scope.simpleLineOptions = {
color: layoutColors.defaultText,
fullWidth: true,
height: "300px",
chartPadding: {

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

@ -6,11 +6,11 @@
'use strict';
angular.module('BlurAdmin.pages.charts.morris', [])
.config(routeConfig).config(function(){
.config(routeConfig).config(function(layoutColors){
Morris.Donut.prototype.defaults.backgroundColor = 'transparent';
Morris.Donut.prototype.defaults.labelColor = 'rgba(255,255,255,0.8)';
Morris.Grid.prototype.gridDefaults.gridLineColor = 'rgba(255,255,255,0.8)';
Morris.Grid.prototype.gridDefaults.gridTextColor = 'rgba(255,255,255,0.8)';
Morris.Donut.prototype.defaults.labelColor = layoutColors.defaultText;
Morris.Grid.prototype.gridDefaults.gridLineColor = layoutColors.borderDark;
Morris.Grid.prototype.gridDefaults.gridTextColor = layoutColors.defaultText;
});
/** @ngInject */

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

@ -10,7 +10,7 @@
/** @ngInject */
function morrisCtrl($scope, $window, layoutColors) {
$scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.default, layoutColors.primaryDark];
$scope.colors = [layoutColors.primary, layoutColors.warning, layoutColors.danger, layoutColors.info, layoutColors.success, layoutColors.primaryDark];
$scope.lineData = [
{y: "2006", a: 100, b: 90},
{y: "2007", a: 75, b: 65},

62
src/app/pages/components/mail/mail.html
View File

@ -1,43 +1,41 @@
<div class="row mail-row">
<div class="col-md-12">
<div ba-panel ba-panel-class="xmedium-panel mail-panel">
<div class="mail-container">
<div class="letter-layout">
<div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
<div class="compose-button">
<button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
Compose
</button>
</div>
<div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
{{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
</div>
<div class="labels">
<div class="labels-title">
<div class="letter-layout">
<div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
<div class="compose-button">
<button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
Compose
</button>
</div>
<div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
{{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
</div>
<div class="labels">
<div class="labels-title">
</div>
<div class="labels-container">
<div class="label-item">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
</div>
</div>
</div>
<div class="add-label-container">
<i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
<div class="labels-container">
<div class="label-item">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
</div>
</div>
</div>
<ui-view></ui-view>
<div class="add-label-container">
<i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
</div>
</div>
<ui-view></ui-view>
</div>
</div>
</div>

14
src/app/pages/components/timeline/timeline.html
View File

@ -6,7 +6,7 @@
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Euro-Coin' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-yellow">
<div class="cd-timeline-content warning">
<h5>Title of section 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi
@ -20,7 +20,7 @@
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Laptop-Signal' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-red">
<div class="cd-timeline-content danger">
<h5>Title of section 2</h5>
<p>Donec dapibus at leo eget volutpat. Praesent dolor tellus, ultricies venenatis molestie eu, luctus eget nibh.
@ -34,7 +34,7 @@
<div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Checklist' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-blue">
<div class="cd-timeline-content primary">
<h5>Title of section 3</h5>
<p>Phasellus auctor tellus eget lacinia condimentum. Cum sociis natoque penatibus et magnis dis parturient
@ -48,7 +48,7 @@
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Boss-3' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-yellow">
<div class="cd-timeline-content warning">
<h5>Title of section 4</h5>
<p>Morbi fringilla in massa ac posuere. Fusce non sagittis massa, id accumsan odio. Nullam eget tempor est.
@ -62,7 +62,7 @@
<div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Online-Shopping' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-red">
<div class="cd-timeline-content danger">
<h5>Title of section 5</h5>
<p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eget mattis
@ -76,7 +76,7 @@
<div class="kameleon-icon with-round-bg primary"><img ng-src="{{::( 'Money-Increase' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-blue">
<div class="cd-timeline-content primary">
<h5>Title of section 6</h5>
<p>Praesent bibendum ante mattis augue consectetur, ut commodo turpis consequat. Donec ligula eros, porta in
@ -89,7 +89,7 @@
<div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Vector' | kameleonImg )}}"></div>
</div>
<div class="cd-timeline-content cd-timeline-content-yellow">
<div class="cd-timeline-content warning">
<h5>Title of section 7</h5>
<p>Vivamus ut laoreet erat, vitae eleifend eros. Sed varius id tellus non lobortis. Sed dolor ante, cursus non

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

@ -71,24 +71,24 @@
id: 'g0',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: 'rgba(0,0,0,0.15)',
lineColor: layoutColors.primary,
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value0',
fillAlphas: 1,
fillAlphas: 0.5,
fillColorsField: 'lineColor'
},
{
id: 'g1',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: 'rgba(0,0,0,0.2)',
lineColor: layoutColors.primary,
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 1,
fillAlphas: 0.3,
fillColorsField: 'lineColor'
}
],

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

@ -20,15 +20,15 @@
},
AmCoordinateChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark]
},
AmStockChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark]
},
AmSlicedChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg, layoutColors.warningDark],
labelTickColor: "#FFFFFF",
labelTickAlpha: 0.3
},
@ -128,7 +128,7 @@
ZoomControl: {
buttonFillAlpha: 0.8,
buttonIconColor: layoutColors.default,
buttonIconColor: layoutColors.defaultText,
buttonRollOverColor: layoutColors.danger,
buttonFillColor: layoutColors.primaryDark,
buttonBorderColor: layoutColors.primaryDark,

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

@ -14,9 +14,9 @@
ChartJsProvider.setOptions({
colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg],
responsive: true,
scaleFontColor: "rgba(255,255,255,.7)",
scaleLineColor: "rgba(255,255,255,.7)",
pointLabelFontColor: "rgba(255,255,255,.7)"
scaleFontColor: layoutColors.defaultText,
scaleLineColor: layoutColors.border,
pointLabelFontColor: layoutColors.defaultText
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {

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

@ -54,6 +54,7 @@
default: '#ffffff',
defaultText: '#666666',
border: '#dddddd',
borderDark: '#aaaaaa',
bgColorPalette: {
blueStone: bgColorPalette.blueStone,

6
src/sass/app/_chartsPage.scss
View File

@ -107,7 +107,7 @@ body.badmin-transparent{
fill-opacity: .5;
}
.ct-label{
color: $default;
color: $default-text;
opacity: 0.9;
fill: rgba(255,255,255,.9);
}
@ -158,4 +158,8 @@ body.badmin-transparent{
.amcharts-cursor-fill {
filter: url(#shadow);
}
.chartist h5 {
font-weight: $font-normal;
}

25
src/sass/app/_email.scss
View File

@ -4,12 +4,9 @@
}
.mail-panel {
.panel-body{
&.panel>.panel-body{
padding-left: 0;
}
.panel-content {
padding: 15px 22px 0 0;
}
}
.mail-navigation-container {
@ -59,12 +56,13 @@
}
}
.labels, .add-label-container {
margin-top: 16px;
.labels {
margin-top: 14px;
margin-left: 22px;
}
.labels-container {
margin-top: 16px;
text-align: center;
padding-right: 28px;
padding-left: 20px;
@ -767,7 +765,7 @@ body.badmin-transparent {
background-color: transparent;
}
&.active {
background: rgba(255, 255, 255, 0.2);
background: rgba(black, 0.2);
color: white;
transition: background-color .5s ease;
.new-mails {
@ -775,11 +773,11 @@ body.badmin-transparent {
color: $default;
}
&:hover {
background-color: rgba(255, 255, 255, 0.3);
background-color: rgba(black, 0.3);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(black, 0.1);
}
}
}
@ -826,7 +824,7 @@ body.badmin-transparent {
}
.side-message-navigation .side-message-navigation-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid $border;
&.work, &.study, &.family, &.friend {
border-left: none;
}
@ -1017,12 +1015,5 @@ body.badmin-transparent {
font-size: 13px;
font-weight: $font-light;
}
}
}

3
src/sass/theme/dashboard/_popularApp.scss
View File

@ -11,8 +11,7 @@
border-top-left-radius: 5px;
border-bottom: 1px solid $border;
img {
max-width: 60%;
max-height: 70%;
max-width: 85%;
position: absolute;
transform: translateY(-50%) translate(-50%);
top: 50%;

57
src/sass/theme/dashboard/_timeline.scss
View File

@ -132,25 +132,19 @@
@mixin cd-timeline-color($color) {
background: $color;
&:before {
border-right-color: $color;
}
}
.cd-timeline-content-yellow {
@include cd-timeline-color(rgba(0,0,0,.2));
.cd-timeline-content.warning {
@include cd-timeline-color(rgba($warning, 0.2));
}
.cd-timeline-content-red {
@include cd-timeline-color(rgba(0,0,0,.2));
.cd-timeline-content.danger {
@include cd-timeline-color(rgba($danger, 0.2));
}
.cd-timeline-content-blue {
@include cd-timeline-color(rgba(0,0,0,.2));
.cd-timeline-content.primary {
@include cd-timeline-color(rgba($primary, 0.2));
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
background-color: $border;
}
@mixin cd-timeline-left-color($color) {
@ -159,6 +153,12 @@
}
}
@mixin cd-timeline-right-color($color) {
&::before {
border-right-color: $color;
}
}
@media only screen and (min-width: $resXL) {
#cd-timeline::before {
@ -199,16 +199,14 @@
}
}
.cd-timeline-content-yellow {
@include cd-timeline-left-color(rgba(0,0,0,.2));
.cd-timeline-content.warning {
@include cd-timeline-left-color(rgba($warning, 0.2));
}
.cd-timeline-content-red {
@include cd-timeline-left-color(rgba(0,0,0,.2));
.cd-timeline-content.danger {
@include cd-timeline-left-color(rgba($danger, 0.2));
}
.cd-timeline-content-blue {
@include cd-timeline-left-color(rgba(0,0,0,.2));
.cd-timeline-content.primary {
@include cd-timeline-left-color(rgba($primary, 0.2));
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
@ -225,19 +223,14 @@
border-right-color: white;
}
@mixin cd-timeline-right-color($color) {
&::before {
border-right-color: $color;
}
&.cd-timeline-content.warning {
@include cd-timeline-right-color(rgba($warning, 0.2));
}
&.cd-timeline-content-yellow {
@include cd-timeline-right-color(rgba(0,0,0,.2));
&.cd-timeline-content.danger {
@include cd-timeline-right-color(rgba($danger, 0.2));
}
&.cd-timeline-content-red {
@include cd-timeline-right-color(rgba(0,0,0,.2));
}
&.cd-timeline-content-blue {
@include cd-timeline-right-color(rgba(0,0,0,.2));
&.cd-timeline-content.primary {
@include cd-timeline-right-color(rgba($primary, 0.2));
}
}
}