Skip to content

Commit 28b23b5

Browse files
robashcompavel-blagodov
robashcom
authored and
pavel-blagodov
committed
dashboard style revisions #2
- hide/show chart controls & restyle title - re-configure chart panels for layout sml/md/lg - move chart CSS to cbui-components.css - revise delete chart dialog Change-Id: Icce3ca90b8f76ae6b0ea5fd957d91fbc350718ae Reviewed-on: http://review.couchbase.org/106408 Reviewed-by: Pavel Blagodov <[email protected]> Tested-by: Pavel Blagodov <[email protected]>
1 parent 799586b commit 28b23b5

File tree

4 files changed

+129
-59
lines changed

4 files changed

+129
-59
lines changed

‎priv/public/ui/app/css/cbui-components.css‎

Lines changed: 101 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2343,7 +2343,78 @@ nav.nav-sidebar-hidden {
23432343
text-align: center;
23442344
}
23452345

2346-
/* chart styles ------------------------------------------------------------- */
2346+
/* chart & dashboard styles ------------------------------------------------- */
2347+
.chart-title {
2348+
font-size: .8125rem;
2349+
font-weight: 600;
2350+
color: #000;
2351+
margin-left: .5rem;
2352+
white-space: nowrap;
2353+
overflow: hidden;
2354+
text-overflow: ellipsis;
2355+
}
2356+
.statistics-small {
2357+
width: calc(25% - 1rem);
2358+
padding: .5rem;
2359+
margin: .5rem;
2360+
}
2361+
.statistics-small:hover {
2362+
background-color: #f5f5f5;
2363+
cursor: pointer;
2364+
}
2365+
.statistics-medium {
2366+
width: calc(50% - 1rem);
2367+
height: 240px;
2368+
padding: .5rem;
2369+
margin: .5rem;
2370+
}
2371+
.statistics-medium:hover {
2372+
background-color: #f5f5f5;
2373+
cursor: pointer;
2374+
}
2375+
.statistics-large {
2376+
width: calc(100% - 1rem);
2377+
height: 360px;
2378+
padding: .5rem;
2379+
margin: .5rem;
2380+
}
2381+
.statistics-large:hover {
2382+
background-color: #f5f5f5;
2383+
cursor: pointer;
2384+
}
2385+
.row.charts {
2386+
flex-wrap: wrap;
2387+
margin-left: -.5rem;
2388+
justify-content: flex-start;
2389+
align-items: stretch;
2390+
}
2391+
.row.header {
2392+
justify-content: flex-start;
2393+
}
2394+
.charts select {
2395+
font-size: 10px;
2396+
line-height: 1.5;
2397+
height: 1.5rem;
2398+
}
2399+
.charts.text-smaller {
2400+
font-size: 10px;
2401+
}
2402+
.chart-controls {
2403+
margin: 0 .25rem 0 1rem;
2404+
white-space: nowrap;
2405+
text-align: right;
2406+
}
2407+
.chart-controls .icon {
2408+
color: #999;
2409+
padding: 0 .25rem;
2410+
cursor: pointer;
2411+
}
2412+
.chart-controls .icon:hover {
2413+
color: #000;
2414+
}
2415+
.chart-controls .icon:last-child {
2416+
margin-right: 0;
2417+
}
23472418
.chart-adder {
23482419
background-color: #f5f5f5;
23492420
border-radius: 5px;
@@ -2354,25 +2425,42 @@ nav.nav-sidebar-hidden {
23542425
justify-content: center;
23552426
font-size: 3rem;
23562427
cursor: pointer;
2357-
margin: 1rem;
2358-
width: calc(25% - 2rem);
2359-
height: 180px;
2428+
margin: .5rem;
2429+
width: calc(25% - 1rem);
2430+
min-height: 180px;
23602431
}
23612432
.chart-adder:hover {
23622433
color: #a1a1a1;
23632434
}
23642435
.chart-adder:before {
23652436
content: "\f055";
23662437
}
2367-
.statistics-small + .chart-adder {
2368-
width: calc(25% - 2rem);
2369-
height: 180px;
2438+
2439+
/* over-writes of nvd3 css -------------------------------------------------- */
2440+
.nvd3 .nv-axis line {
2441+
opacity: 0;
23702442
}
2371-
.statistics-medium + .chart-adder {
2372-
width: calc(50% - 2rem);
2373-
height: 240px;
2443+
.nvd3 .nv-axis.nv-y1 line,
2444+
.nvd3 .nv-axis.nv-x line {
2445+
opacity: 1;
2446+
}
2447+
.nvd3 text {
2448+
font: normal 10px OpenSans;
23742449
}
2375-
.statistics-large + .chart-adder {
2376-
width: calc(25% - 2rem);
2377-
height: 180px;
2450+
.tick line {
2451+
display:none;
2452+
}
2453+
.domain {
2454+
opacity: .2;
2455+
}
2456+
.nv-axisMaxMin-y text,
2457+
.nv-axisMin-y text {
2458+
font-weight: 400!important;
2459+
}
2460+
.full-size-dialog .dialog {
2461+
width:100%;
2462+
margin: 2rem
2463+
}
2464+
.full-size-dialog .panel-header {
2465+
display: none
23782466
}

‎priv/public/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder_delete.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<div class="dialog-med">
1+
<div class="dialog-small">
22
<div class="panel-header">
3-
<h2>Delete Chat</h2>
3+
<h2>Delete Chart</h2>
44
</div>
55
<div class="panel-content">
6-
<p class="error">
7-
Are you sure that you want to delete this chat?
8-
</p>
6+
<div class="row flex-left">
7+
<span class="icon fa-warning fa-2x red-3"></span>
8+
<p>Delete this chart?</p>
9+
</div>
910
</div>
1011
<div class="panel-footer">
11-
<a href="" ng-click="$dismiss()">Cancel</a>
12-
<button ng-click="$close()">Yes, I'm sure</button>
12+
<a ng-click="$dismiss()">Cancel</a>
13+
<button ng-click="$close()">Delete Chart</button>
1314
</div>
1415
</div>

‎priv/public/ui/app/mn_admin/mn_statistics/chart_directive/mn_statistics_chart_directive.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
1-
<div class="row">
2-
<div class="chart-title">
1+
<div class="row row-min">
2+
<div class="chart-title" title="{{title}}">
33
{{title}}
44
</div>
5-
<span class="text-right nowrap">
6-
<a class="margin-right-half" ng-click="editChart(config)"><span class="icon fa-edit"></span></a>
7-
<a ng-click="deleteChart(config)"><span class="icon fa-trash"></span></a>
8-
</span>
5+
<div class="chart-controls" title="show/hide chart controls">
6+
<span
7+
class="icon fa-ellipsis-v"
8+
ng-model="showChartControls"
9+
ng-click="showChartControls = !showChartControls"
10+
ng-class="showChartControls ? 'fa-angle-right' : 'fa-ellipsis-v'"></span>
11+
<span
12+
title="edit chart"
13+
class="icon fa-edit"
14+
ng-click="editChart(config)"
15+
ng-show="showChartControls"></span>
16+
<span
17+
title="delete chart"
18+
class="icon fa-trash"
19+
ng-click="deleteChart(config)"
20+
ng-show="showChartControls"></span>
21+
</div>
922
</div>
1023
<nvd3
1124
api="chartApi"

‎priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,5 @@
1-
<style>
2-
.chart-title {font-size: .875rem;font-weight: 600;color: #333; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;}
3-
.chart-title small {font-size: .688rem;font-weight: 400;color: #999;}
4-
.statistics-small {width: calc(25% - 2rem);height: 180px;padding: .5rem .5rem 1rem .5rem;margin: 1rem;}
5-
.statistics-small .chart-title {font-size: .75rem;}
6-
.statistics-small .chart-title small {display: none;}
7-
.statistics-medium {width: calc(50% - 2rem);height: 240px;padding: .5rem .5rem 1rem .5rem;margin: 1rem;}
8-
.statistics-medium:hover {background-color: #f7f7f7; cursor: pointer;}
9-
.statistics-large {width: calc(100% - 2rem);height: 360px; padding: .5rem .5rem 1rem .5rem;margin: 1rem;}
10-
.statistics-large:hover {background-color: #f7f7f7; cursor: pointer;}
11-
.nvd3 .nv-axis line {opacity: 0;}
12-
.nvd3 .nv-axis.nv-y1 line,
13-
.nvd3 .nv-axis.nv-x line {opacity: 1;}
14-
.row.charts {flex-wrap: wrap;margin-left: -1rem;justify-content: flex-start;}
15-
.row.header {justify-content: flex-start;}
16-
.charts select {font-size: 10px;line-height: 1.5;height: 1.5rem;}
17-
.charts.text-smaller {font-size: 10px;}
18-
19-
.nvd3 text {font: normal 10px OpenSans;}
20-
.tick line {display:none;}
21-
.domain {opacity: .2;}
22-
.nv-axisMaxMin-y text,
23-
.nv-axisMin-y text {font-weight: 400!important;}
24-
.full-size-dialog .dialog {width:100%; margin: 2rem}
25-
.full-size-dialog .panel-header {display: none}
26-
27-
</style>
28-
291
<div>
302
<div class="row margin-bottom-1">
31-
<div>
32-
Stats &gt;
33-
</div>
34-
353
<ui-select
364
style="width:200px"
375
class="cbui-select"
@@ -86,7 +54,7 @@
8654
ng-class="{disclosed: isDetailsOpened}">
8755
{{group.name}}
8856
</div>
89-
<div ng-if="isDetailsOpened" class="row charts items-top">
57+
<div ng-if="statisticsNewCtl.isDetailsOpened(group.id)" class="row charts items-top">
9058
<div
9159
ng-repeat="config in group.charts track by config.id"
9260
ng-class="'statistics-' + config.size"

0 commit comments

Comments
 (0)