feat(dashboard redesign): new dashboard layout

pull/3/head
Anastasiya 2015-11-10 17:15:26 +03:00
parent 7ab7c9324a
commit f64ee43138
30 changed files with 591 additions and 654 deletions

View File

@ -0,0 +1,32 @@
.panel {
border-radius: 0px;
background-color: $panel-bg;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
&:hover {
background: $panel-bg-hover;
}
&.animated {
animation-duration: 0.5s;
}
}
.panel-heading, .panel-default > .panel-heading {
background-color: transparent;
border: none;
padding: 7px 22px 0px;
margin-bottom: -5px;
color: $default-text;
}
.panel-title {
font-weight: normal;
}
.panel-body {
padding: 16px 22px;
@include scrollbars(.5em, #ccc, #fff);
}

View File

@ -0,0 +1,8 @@
<div class="panel panel-default invisible" zoom-in>
<div class="panel-heading clearfix" ng-if="title">
<h3 class="panel-title">{{ title }}</h3>
</div>
<div class="panel-body">
<ng-transclude></ng-transclude>
</div>
</div>

View File

@ -0,0 +1,15 @@
'use strict';
blurAdminApp.directive('blurPanel', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/components/blurPanel/blurPanel.html'
};
});

View File

@ -3,39 +3,6 @@
backface-visibility: hidden;
}
.panel {
border-radius: 0px;
background-color: $panel-bg;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
&:hover {
background: $panel-bg-hover;
}
&.animated {
animation-duration: 0.5s;
}
}
.panel-heading, .panel-default > .panel-heading {
background-color: transparent;
border: none;
padding: 7px 22px 0px;
margin-bottom: -5px;
color: $default-text;
}
.panel-title {
font-weight: normal;
}
.panel-body {
padding: 16px 22px;
@include scrollbars(.5em, #ccc, #fff);
}
.full-width {
margin: 0 -22px -16px;
}

View File

@ -1,14 +1,9 @@
<div class="widgets">
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
<div ng-repeat="widget in widgetCol" class="panel panel-default invisible" zoom-in>
<div class="panel-heading clearfix" ng-if="widget.title">
<h3 class="panel-title">{{ widget.title }}</h3>
</div>
<div class="panel-body">
<blur-panel title="widget.title" ng-repeat="widget in widgetCol" >
<div ng-include="widget.url"></div>
</div>
</div>
</blur-panel>
</div>
</div>
</div>

View File

@ -1,3 +1,50 @@
<widgets ng-model="widgetBlocks"></widgets>
<pie-charts></pie-charts>
<!--<pie-charts></pie-charts>-->
<div>
<blur-panel>
<div class="row">
<div class="col-sm-6">
<h3>Acquisition Channels</h3>
<traffic-chart></traffic-chart>
</div>
<div class="col-sm-6">
<h3>Users by country</h3>
<am-chart-map></am-chart-map>
</div>
</div>
</blur-panel>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-8">
<blur-panel title="Revenue">
<am-chart></am-chart>
</blur-panel>
</div>
<div class="col-sm-4">
<blur-panel>
<popular-app></popular-app>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<blur-panel title="ToDo List">
<blur-todo></blur-todo>
</blur-panel>
</div>
<div class="col-sm-8">
<blur-panel title="Calenar">
<blur-calendar></blur-calendar>
</blur-panel>
</div>
</div>
</div>
<div class="col-sm-3">
<blur-panel title="Feed">
<blur-feed></blur-feed>
</blur-panel>
</div>
</div>

View File

@ -9,39 +9,4 @@ angular.module('BlurAdmin.dashboard', ['ngRoute'])
});
}])
.controller('DashboardCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: 'Users by Country',
url: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
},
{
title: 'Revenue',
url: 'app/pages/dashboard/widgets/amChart/amChart.html'
},
{
title: 'My Calendar',
url: 'app/pages/dashboard/widgets/calendar/calendar.html'
}
],
[
{
title: 'Acquisition Channels',
url: 'app/pages/dashboard/widgets/chart/chart.html'
},
{
title: 'Timeline',
url: 'app/pages/dashboard/widgets/timeline/timeline.html'
},
{
title: 'ToDo List',
url: 'app/pages/dashboard/widgets/todo/todo.html'
}
]
]
}
];
}]);

View File

@ -1 +1 @@
<div id="amchart" style="" ng-controller="amChartCtrl"></div>
<div id="amchart"></div>

View File

@ -1,6 +1,9 @@
'use strict';
blurAdminApp.controller('amChartCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
blurAdminApp.directive('amChart', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
var chartData = [
{ date: new Date(2011, 0), value: -30700},
{ date: new Date(2011, 1), value: -16800},
@ -60,8 +63,7 @@ blurAdminApp.controller('amChartCtrl', ['$scope', '$timeout', '$element', functi
{ date: new Date(2015, 7), value: 4700}
];
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart(id, {
var chart = AmCharts.makeChart('amchart', {
type: 'serial',
theme: 'blur',
marginTop: 0,
@ -139,4 +141,7 @@ blurAdminApp.controller('amChartCtrl', ['$scope', '$timeout', '$element', functi
if (chart.zoomChart) {
chart.zoomChart();
}
}]);
}],
templateUrl: 'app/pages/dashboard/widgets/amChart/amChart.html'
};
});

View File

@ -1 +1 @@
<div id="amChartMap" ng-controller="amMapCtrl"></div>
<div id="amChartMap"></div>

View File

@ -1,9 +1,11 @@
'use strict';
blurAdminApp.controller('amMapCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var map = AmCharts.makeChart(id, {
blurAdminApp.directive('amChartMap', function () {
return {
restrict: 'E',
controller: function () {
var map = AmCharts.makeChart('amChartMap', {
type: 'map',
theme: 'blur',
@ -13,204 +15,34 @@ blurAdminApp.controller('amMapCtrl', ['$scope', '$timeout', '$element', function
zoomLongitude: 10,
zoomLatitude: 52,
areas: [
{
title: 'Austria',
id: 'AT',
color: colorPrimary,
customData: '1 244',
groupId: '1'
},
{
title: 'Ireland',
id: 'IE',
color: colorPrimary,
customData: '1 342',
groupId: '1'
},
{
title: 'Denmark',
id: 'DK',
color: colorPrimary,
customData: '1 973',
groupId: '1'
},
{
title: 'Finland',
id: 'FI',
color: colorPrimary,
customData: '1 573',
groupId: '1'
},
{
title: 'Sweden',
id: 'SE',
color: colorPrimary,
customData: '1 084',
groupId: '1'
},
{
title: 'Great Britain',
id: 'GB',
color: colorPrimary,
customData: '1 452',
groupId: '1'
},
{
title: 'Italy',
id: 'IT',
color: colorPrimary,
customData: '1 321',
groupId: '1'
},
{
title: 'France',
id: 'FR',
color: colorPrimary,
customData: '1 112',
groupId: '1'
},
{
title: 'Spain',
id: 'ES',
color: colorPrimary,
customData: '1 865',
groupId: '1'
},
{
title: 'Greece',
id: 'GR',
color: colorPrimary,
customData: '1 453',
groupId: '1'
},
{
title: 'Germany',
id: 'DE',
color: colorPrimary,
customData: '1 957',
groupId: '1'
},
{
title: 'Belgium',
id: 'BE',
color: colorPrimary,
customData: '1 011',
groupId: '1'
},
{
title: 'Luxembourg',
id: 'LU',
color: colorPrimary,
customData: '1 011',
groupId: '1'
},
{
title: 'Netherlands',
id: 'NL',
color: colorPrimary,
customData: '1 213',
groupId: '1'
},
{
title: 'Portugal',
id: 'PT',
color: colorPrimary,
customData: '1 291',
groupId: '1'
},
{
title: 'Lithuania',
id: 'LT',
color: colorSuccessLight,
customData: '567',
groupId: '2'
},
{
title: 'Latvia',
id: 'LV',
color: colorSuccessLight,
customData: '589',
groupId: '2'
},
{
title: 'Czech Republic ',
id: 'CZ',
color: colorSuccessLight,
customData: '785',
groupId: '2'
},
{
title: 'Slovakia',
id: 'SK',
color: colorSuccessLight,
customData: '965',
groupId: '2'
},
{
title: 'Estonia',
id: 'EE',
color: colorSuccessLight,
customData: '685',
groupId: '2'
},
{
title: 'Hungary',
id: 'HU',
color: colorSuccessLight,
customData: '854',
groupId: '2'
},
{
title: 'Cyprus',
id: 'CY',
color: colorSuccessLight,
customData: '754',
groupId: '2'
},
{
title: 'Malta',
id: 'MT',
color: colorSuccessLight,
customData: '867',
groupId: '2'
},
{
title: 'Poland',
id: 'PL',
color: colorSuccessLight,
customData: '759',
groupId: '2'
},
{
title: 'Romania',
id: 'RO',
color: colorSuccess,
customData: '302',
groupId: '3'
},
{
title: 'Bulgaria',
id: 'BG',
color: colorSuccess,
customData: '102',
groupId: '3'
},
{
title: 'Slovenia',
id: 'SI',
color: colorDanger,
customData: '23',
groupId: '4'
},
{
title: 'Croatia',
id: 'HR',
color: colorDanger,
customData: '96',
groupId: '4'
}
{ title: 'Austria', id: 'AT', color: colorPrimary, customData: '1 244', groupId: '1'},
{ title: 'Ireland', id: 'IE', color: colorPrimary, customData: '1 342', groupId: '1'},
{ title: 'Denmark', id: 'DK', color: colorPrimary, customData: '1 973', groupId: '1'},
{ title: 'Finland', id: 'FI', color: colorPrimary, customData: '1 573', groupId: '1'},
{ title: 'Sweden', id: 'SE', color: colorPrimary, customData: '1 084', groupId: '1'},
{ title: 'Great Britain', id: 'GB', color: colorPrimary, customData: '1 452', groupId: '1'},
{ title: 'Italy', id: 'IT', color: colorPrimary, customData: '1 321', groupId: '1'},
{ title: 'France', id: 'FR', color: colorPrimary, customData: '1 112', groupId: '1'},
{ title: 'Spain', id: 'ES', color: colorPrimary, customData: '1 865', groupId: '1'},
{ title: 'Greece', id: 'GR', color: colorPrimary, customData: '1 453', groupId: '1'},
{ title: 'Germany', id: 'DE', color: colorPrimary, customData: '1 957', groupId: '1'},
{ title: 'Belgium', id: 'BE', color: colorPrimary, customData: '1 011', groupId: '1'},
{ title: 'Luxembourg', id: 'LU', color: colorPrimary, customData: '1 011', groupId: '1'},
{ title: 'Netherlands', id: 'NL', color: colorPrimary, customData: '1 213', groupId: '1'},
{ title: 'Portugal', id: 'PT', color: colorPrimary, customData: '1 291', groupId: '1'},
{ title: 'Lithuania', id: 'LT', color: colorSuccessLight, customData: '567', groupId: '2'},
{ title: 'Latvia', id: 'LV', color: colorSuccessLight, customData: '589', groupId: '2'},
{ title: 'Czech Republic ', id: 'CZ', color: colorSuccessLight, customData: '785', groupId: '2'},
{ title: 'Slovakia', id: 'SK', color: colorSuccessLight, customData: '965', groupId: '2'},
{ title: 'Estonia', id: 'EE', color: colorSuccessLight, customData: '685', groupId: '2'},
{ title: 'Hungary', id: 'HU', color: colorSuccessLight, customData: '854', groupId: '2'},
{ title: 'Cyprus', id: 'CY', color: colorSuccessLight, customData: '754', groupId: '2'},
{ title: 'Malta', id: 'MT', color: colorSuccessLight, customData: '867', groupId: '2'},
{ title: 'Poland', id: 'PL', color: colorSuccessLight, customData: '759', groupId: '2'},
{ title: 'Romania', id: 'RO', color: colorSuccess, customData: '302', groupId: '3'},
{ title: 'Bulgaria', id: 'BG', color: colorSuccess, customData: '102', groupId: '3'},
{ title: 'Slovenia', id: 'SI', color: colorDanger, customData: '23', groupId: '4'},
{ title: 'Croatia', id: 'HR', color: colorDanger, customData: '96', groupId: '4'}
]
},
@ -260,4 +92,7 @@ blurAdminApp.controller('amMapCtrl', ['$scope', '$timeout', '$element', function
creditsPosition: 'bottom-right',
pathToImages: 'img/'
});
}]);
},
templateUrl: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
};
});

View File

@ -0,0 +1,3 @@
.blur-feed {
height: 983px;
}

View File

@ -0,0 +1,3 @@
<div class="blur-feed">
</div>

View File

@ -0,0 +1,11 @@
'use strict';
blurAdminApp.directive('blurFeed', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/pages/dashboard/widgets/blurFeed/blurFeed.html'
};
});

View File

@ -1 +1 @@
<div id='calendar' ng-controller="calendarCtrl"></div>
<div id='calendar'></div>

View File

@ -1,7 +1,10 @@
'use strict';
blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
$element.fullCalendar({
blurAdminApp.directive('blurCalendar', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
@ -80,4 +83,12 @@ blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', funct
}
]
});
}]);
}],
templateUrl: 'app/pages/dashboard/widgets/calendar/calendar.html'
};
});
/*
blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
}]);*/

View File

@ -1,52 +0,0 @@
'use strict';
blurAdminApp.controller('trafficChartCtrl', [function () {
var doughnutData = [
{
value: 2000,
color: colorPrimary,
highlight: colorPrimaryDark,
label: 'Ad Campaigns'
},
{
value: 1500,
color: colorDanger,
highlight: colorDangerDark,
label: 'Search engines'
},
{
value: 1000,
color: colorSuccessLight,
highlight: '#6c9c3f',
label: 'Direct Traffic'
},
{
value: 1200,
color: colorSuccess,
highlight: colorSuccessDark,
label: 'Referral Traffic'
},
{
value: 400,
color: colorWarning,
highlight: colorWarningDark,
label: 'Other'
}
];
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
'<% for (var i=0; i<segments.length; i++){%>' +
'<li class="clearfix">' +
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
'</li><%}%>' +
'</ul>'
});
var legend = window.myDoughnut.generateLegend();
$('.traffic-legend').html(legend);
}]);

View File

@ -1,11 +1,4 @@
.pie-charts {
white-space: nowrap;
min-width: 84px * 4;
padding: 0 300px 0;
position: absolute;
top: 24px;
left: 0;
width: 100%;
.pie-chart-item {
text-align: center;
display: inline-block;
@ -52,28 +45,3 @@
margin-top: 0;
}
}
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
.pie-charts {
padding: 0 250px;
}
}
@media (max-width: $resL) {
.pie-charts {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0;
}
}
@media (max-width: $resXXS) {
.pie-charts {
white-space: normal;
.pie-chart-item {
width: 49%;
}
}
}

View File

@ -1,18 +1,38 @@
<div class="pie-charts invisible clearfix" zoom-in>
<div class="row">
<!-- todo: ng-repeat -->
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart1">
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
<h6>New Visits</h6>
</div>
</blur-panel>
</div>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart2">
<span class="chart" rel="#9D498C" data-percent="50"> <span class="percent"></span> </span>
<span class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </span>
<h6>New Purchases</h6>
</div>
</blur-panel>
</div>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart3">
<span class="chart" rel="#bbcb50" data-percent="40"> <span class="percent"></span> </span>
<span class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </span>
<h6>Active Users</h6>
</div>
</blur-panel>
</div>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart4">
<span class="chart" rel="#5FBCBB" data-percent="70"> <span class="percent"></span> </span>
<span class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </span>
<h6>Server Load</h6>
</div>
</blur-panel>
</div>
</div>

View File

@ -0,0 +1,3 @@
.popular-app {
height: 444px;
}

View File

@ -0,0 +1,25 @@
<div class="popular-app">
<div class="popular-app-img">
</div>
<div class="popular-app-main">
<div class="popular-app-top">
<h4>Most Popular App</h4>
<p>17$</p>
</div>
<div class="row">
<div class="col-sm-4">
<h6>Total Visits</h6>
<p>47,512</p>
</div>
<div class="col-sm-4">
<h6>New Visits</h6>
<p>9,217</p>
</div>
<div class="col-sm-4">
<h6>Sales</h6>
<p>2,928</p>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,11 @@
'use strict';
blurAdminApp.directive('popularApp', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/pages/dashboard/widgets/popularApp/popularApp.html'
};
});

View File

@ -1,3 +1,4 @@
<!-- todo: remove whole block -->
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">

View File

@ -6,6 +6,8 @@ input.task-todo {
ul.todo-list {
margin: 0;
padding: 0;
height: 435px;
overflow: auto;
.placeholder, .ui-sortable-placeholder {
background: #fff;
}

View File

@ -1,5 +1,5 @@
<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
<ul class="todo-list" blur-todo ui-sortable ng-model="todoList">
<ul class="todo-list" ui-sortable ng-model="todoList">
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
<i class="mark" ng-click="changeColor(item)"></i>
<label class="todo-checkbox custom-checkbox custom-input-success">

View File

@ -2,7 +2,7 @@
blurAdminApp.directive('blurTodo', function () {
return {
restrict: 'A',
restrict: 'EA',
controller: ['$scope', function ($scope) {
$scope.marks = [
@ -101,7 +101,6 @@ blurAdminApp.directive('blurTodo', function () {
}
};
}],
link: function ($scope, $element, $attrs) {
}
templateUrl: 'app/pages/dashboard/widgets/todo/todo.html'
};
});

View File

@ -1,4 +1,4 @@
<div class="channels-block" ng-controller="trafficChartCtrl">
<div class="channels-block">
<div class="channels-info">
<div>

View File

@ -0,0 +1,60 @@
'use strict';
blurAdminApp.directive('trafficChart', function () {
return {
restrict: 'E',
controller: [function () {
var doughnutData = [
{
value: 2000,
color: colorPrimary,
highlight: colorPrimaryDark,
label: 'Ad Campaigns'
},
{
value: 1500,
color: colorDanger,
highlight: colorDangerDark,
label: 'Search engines'
},
{
value: 1000,
color: colorSuccessLight,
highlight: '#6c9c3f',
label: 'Direct Traffic'
},
{
value: 1200,
color: colorSuccess,
highlight: colorSuccessDark,
label: 'Referral Traffic'
},
{
value: 400,
color: colorWarning,
highlight: colorWarningDark,
label: 'Other'
}
];
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
'<% for (var i=0; i<segments.length; i++){%>' +
'<li class="clearfix">' +
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
'</li><%}%>' +
'</ul>'
});
var legend = window.myDoughnut.generateLegend();
$('.traffic-legend').html(legend);
}],
templateUrl: 'app/pages/dashboard/widgets/trafficChart/trafficChart.html'
};
});

View File

@ -17,13 +17,16 @@
"../../app/components/sidebar/sidebar.scss",
"../../app/components/backTop/backTop.scss",
"../../app/components/msgCenter/msgCenter.scss",
"../../app/components/blurPanel/blurPanel.scss",
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
"../../app/pages/dashboard/widgets/todo/todo.scss",
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
"../../app/pages/dashboard/widgets/timeline/timeline.scss",
"../../app/pages/dashboard/widgets/chart/chart.scss",
"../../app/pages/dashboard/widgets/trafficChart/trafficChart.scss",
"../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
"../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
"../../app/pages/maps/widgets/leaflet/leaflet.scss",
"../../app/pages/maps/widgets/google-maps/google-maps.scss",
"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",