Skip to content

Commit 2de8a89

Browse files
robashcompavel-blagodov
robashcom
authored and
pavel-blagodov
committed
Dashboard group controls revision #1
- added styles for the row of disclosure, group name, save & delete controls - changed the behavior of editing the group: - - focus on the group name shows save and delete icons - - blur or clicking save/delete hides the icons & blurs the name field - - typing in the name field extends the width of the field dynamically!! - added styles for vertical spacing of the groups from one another - added a new HTML template for specifically deleting groups - formatted A LOT of code >> attributes should be indented 3 spaces Change-Id: I43450db86b6a115192518508341c138cf0488ba9 Reviewed-on: http://review.couchbase.org/106669 Reviewed-by: Pavel Blagodov <[email protected]> Tested-by: Pavel Blagodov <[email protected]>
1 parent d699f14 commit 2de8a89

File tree

5 files changed

+200
-98
lines changed

5 files changed

+200
-98
lines changed

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2401,9 +2401,9 @@ nav.nav-sidebar-hidden {
24012401
}
24022402
.row.charts {
24032403
flex-wrap: wrap;
2404-
margin-left: -.5rem;
24052404
justify-content: flex-start;
24062405
align-items: stretch;
2406+
margin-left: -.5rem;
24072407
}
24082408
.row.header {
24092409
justify-content: flex-start;
@@ -2453,6 +2453,41 @@ nav.nav-sidebar-hidden {
24532453
.chart-adder:before {
24542454
content: "\f055";
24552455
}
2456+
.charts-group {
2457+
margin-bottom: 1rem;
2458+
}
2459+
.charts-group:nth-of-type(2) {
2460+
margin-bottom: 3rem;
2461+
}
2462+
.charts-group-row {
2463+
display: flex;
2464+
align-items: center;
2465+
justify-content: flex-start;
2466+
}
2467+
.charts-group-row .disclosure {
2468+
padding-left: 1rem;
2469+
}
2470+
.charts-group-row .disclosure:before,
2471+
.charts-group-row .disclosed:before {
2472+
top: 3px;
2473+
}
2474+
input[type="text"].charts-group-name {
2475+
border-color: #fff;
2476+
font-size: .961rem;
2477+
font-weight: 600;
2478+
margin-right: .5rem;
2479+
}
2480+
input[type="text"]:focus.charts-group-name {
2481+
border-color: #d1d1d1;
2482+
}
2483+
.charts-group-row .icon {
2484+
padding: 0 .5rem;
2485+
color: #4287d6;
2486+
cursor: pointer;
2487+
}
2488+
.charts-group-row .icon:hover {
2489+
color: #000;
2490+
}
24562491

24572492
/* over-writes of nvd3 css -------------------------------------------------- */
24582493
.nvd3 .nv-axis line {

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

Lines changed: 118 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,85 @@
22
<span>
33
<div class="inline margin-right-half">
44
<mn-dropdown
5-
ng-click="$event.stopPropagation();"
6-
on-select="statisticsNewCtl.onSelectScenario(scenario);"
7-
model="statisticsNewCtl.statisticsService.scenarios"
8-
class="scenario-dropdown">
5+
ng-click="$event.stopPropagation();"
6+
on-select="statisticsNewCtl.onSelectScenario(scenario);"
7+
model="statisticsNewCtl.statisticsService.scenarios"
8+
class="scenario-dropdown">
99
<inner-select>
1010
{{statisticsNewCtl.statisticsService.scenarios.selected.name}}
1111
</inner-select>
1212
<inner-body ng-class="{'body-shorter' : statisticsNewCtl.scenarioCtrl.showRestOfMenu}">
1313
<mn-dropdown-item
14-
ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
15-
mn-item="scenario">
14+
ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
15+
mn-item="scenario">
1616
<p>{{scenario.name}}</p>
1717
<p ng-if="scenario.desc">{{scenario.desc}}</p>
1818
<div
19-
class="scenario-controls"
20-
ng-click="$event.stopPropagation();"
21-
title="delete/edit scenario">
19+
class="scenario-controls"
20+
ng-click="$event.stopPropagation();"
21+
title="delete/edit scenario">
2222
<span
23-
class="icon fa-ellipsis-v"
24-
ng-click="showScenarioControls = !showScenarioControls"
25-
ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
23+
class="icon fa-ellipsis-v"
24+
ng-click="showScenarioControls = !showScenarioControls"
25+
ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
2626
</span>
2727
<span
28-
title="edit chart"
29-
class="icon fa-edit"
30-
ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
31-
ng-show="showScenarioControls"></span>
28+
title="edit chart"
29+
class="icon fa-edit"
30+
ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
31+
ng-show="showScenarioControls"></span>
3232
<span
33-
title="delete chart"
34-
class="icon fa-trash"
35-
ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
36-
ng-show="showScenarioControls"></span>
33+
title="delete chart"
34+
class="icon fa-trash"
35+
ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
36+
ng-show="showScenarioControls"></span>
3737
</div>
3838
</mn-dropdown-item>
3939
</inner-body>
40-
<inner-footer ng-controller="mnScenarioDialogController as scenarioCtrl"
41-
ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
40+
<inner-footer
41+
ng-controller="mnScenarioDialogController as scenarioCtrl"
42+
ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
4243
<form
43-
novalidate
44-
ng-submit="scenarioCtrl.onSubmit()"
45-
name="form"
46-
class="forms">
44+
novalidate
45+
ng-submit="scenarioCtrl.onSubmit()"
46+
name="form"
47+
class="forms">
4748
<div class="scenario-add" ng-class="{'scenario-add-ext' : scenarioCtrl.showRestOfMenu}">
4849
<input
49-
type="text"
50-
ng-model="scenarioCtrl.scenario.name"
51-
placeholder="new scenario..."
52-
autocorrect="off"
53-
ng-click="scenarioCtrl.showRestOfMenu = true"
54-
spellcheck="false"
55-
autocapitalize="off"
56-
ng-disabled="!rbac.bucketNames['.stats!read'].length">
50+
type="text"
51+
ng-model="scenarioCtrl.scenario.name"
52+
placeholder="new scenario..."
53+
autocorrect="off"
54+
ng-click="scenarioCtrl.showRestOfMenu = true"
55+
spellcheck="false"
56+
autocapitalize="off"
57+
ng-disabled="!rbac.bucketNames['.stats!read'].length">
5758
<span class="icon fa-plus-square" ng-show="!scenarioCtrl.showRestOfMenu"></span>
5859
</div>
5960

6061
<input
61-
type="text"
62-
ng-model="scenarioCtrl.scenario.desc"
63-
placeholder="add optional description..."
64-
autocorrect="off"
65-
spellcheck="false"
66-
autocapitalize="off"
67-
ng-disabled="!rbac.bucketNames['.stats!read'].length"
68-
ng-show="scenarioCtrl.showRestOfMenu"
69-
class="scenario-desc">
62+
type="text"
63+
ng-model="scenarioCtrl.scenario.desc"
64+
placeholder="add optional description..."
65+
autocorrect="off"
66+
spellcheck="false"
67+
autocapitalize="off"
68+
ng-disabled="!rbac.bucketNames['.stats!read'].length"
69+
ng-show="scenarioCtrl.showRestOfMenu"
70+
class="scenario-desc">
7071
<div class="checkbox-list margin-bottom-half"
7172
ng-show="!scenarioCtrl.isEditingMode && scenarioCtrl.showRestOfMenu">
7273
<input
73-
type="radio"
74-
value="true"
75-
ng-model="scenarioCtrl.copyScenario"
76-
id="for-bucket-type-current">
74+
type="radio"
75+
value="true"
76+
ng-model="scenarioCtrl.copyScenario"
77+
id="for-bucket-type-current">
7778
<label for="for-bucket-type-current">save current charts</label>
7879
<input
79-
type="radio"
80-
value="false"
81-
ng-model="scenarioCtrl.copyScenario"
82-
id="for-bucket-type-blank">
80+
type="radio"
81+
value="false"
82+
ng-model="scenarioCtrl.copyScenario"
83+
id="for-bucket-type-blank">
8384
<label for="for-bucket-type-blank">start blank</label>
8485
</div>
8586
<div class="scenario-save-controls" ng-show="scenarioCtrl.showRestOfMenu">
@@ -92,72 +93,100 @@
9293
</div>
9394

9495
<a
95-
ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
96-
ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
97-
class="text-small">
96+
ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
97+
ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
98+
class="text-small">
9899
Add Group
99100
</a>
100101
</span>
101102

102-
<select ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
103-
ng-change="statisticsNewCtl.onSelectZoom(
104-
statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
103+
<select
104+
ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
105+
ng-change="statisticsNewCtl.onSelectZoom(
106+
statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
105107
<option value="minute">minute</option>
106108
<option value="hour">hour</option>
107109
<option value="day">day</option>
108110
<option value="week">week</option>
109111
<option value="month">month</option>
110112
</select>
111113

112-
<select ng-model="statisticsNewCtl.selectedBucket"
113-
ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
114+
<select
115+
ng-model="statisticsNewCtl.selectedBucket"
116+
ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
114117
<option ng-repeat="name in rbac.bucketNames['.stats!read']" value="{{name}}">
115118
{{name}}
116119
</option>
117120
</select>
118121
</div>
119122

120123
<div class="width-12">
121-
<div ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id">
124+
<div
125+
ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id"
126+
127+
class="charts-group">
122128
<div
123-
ng-click="isDetailsOpened = !isDetailsOpened;"
124-
ng-init="isDetailsOpened = true;"
125-
class="disclosure"
126-
ng-class="{disclosed: isDetailsOpened}">
127-
<form
128-
novalidate
129-
style="display:inline-block;position:relative;"
130-
ng-click="$event.stopPropagation()">
129+
ng-click="scope.isDetailsOpened = !scope.isDetailsOpened;"
130+
ng-init="scope.isDetailsOpened = true;"
131+
class="disclosure"
132+
ng-class="{disclosed: scope.isDetailsOpened}">
133+
<form novalidate
134+
style="display: inline-block;"
135+
ng-mouseleave="statisticsNewCtl.hideGroupControls(scope, group);"
136+
ng-click="$event.stopPropagation();"
137+
ng-submit="scope.initName = group.name;
138+
statisticsNewCtl.saveScenarios();
139+
statisticsNewCtl.hideGroupControls(scope, group);
140+
scope.focusOnSubmit = true;">
131141
<input
132-
ng-model="group.name"
133-
ng-blur="statisticsNewCtl.saveScenarios()"
134-
autocorrect="off"
135-
spellcheck="false"
136-
autocapitalize="off">
142+
ng-model="group.name"
143+
autocorrect="off"
144+
spellcheck="false"
145+
autocapitalize="off"
146+
type="text"
147+
class="charts-group-name"
148+
ng-focus="scope.showGroupControls = true;
149+
scope.initName = group.name;"
150+
ng-blur="statisticsNewCtl.onGroupNameBlur(scope, group)"
151+
ng-attr-size="{{group.name.length + 3}}">
152+
<button
153+
type="submit"
154+
title="save chart"
155+
class="outline icon fa-check"
156+
mn-focus="scope.focusOnSubmit"
157+
ng-show="scope.showGroupControls"
158+
ng-mousedown="scope.onControlClick = true;">
159+
</button>
137160
<span
138-
title="delete chart"
139-
class="icon fa-trash"
140-
ng-click="statisticsNewCtl.deleteGroup(group)"></span>
161+
title="delete group"
162+
class="icon fa-trash"
163+
ng-show="scope.showGroupControls"
164+
ng-mousedown="scope.onControlClick = true;
165+
statisticsNewCtl.deleteGroup(group);
166+
statisticsNewCtl.hideGroupControls(scope, group)">
167+
</span>
141168
</form>
142169
</div>
143170

144-
<div ng-if="isDetailsOpened" class="row charts">
171+
<div ng-if="scope.isDetailsOpened" class="row charts">
172+
<div
173+
ng-repeat="config in group.charts track by config.id"
174+
ng-class="'statistics-' + config.size"
175+
mn-statistics-chart
176+
nodes="statisticsNewCtl.nodes"
177+
class="panel"
178+
rbac="rbac"
179+
config="config"></div>
145180
<div
146-
ng-repeat="config in group.charts track by config.id"
147-
ng-class="'statistics-' + config.size"
148-
mn-statistics-chart
149-
nodes="statisticsNewCtl.nodes"
150-
class="panel"
151-
rbac="rbac"
152-
config="config"></div>
153-
<div class="chart-adder"
154-
ng-click="statisticsNewCtl.openChartBuilderDialog()">
181+
class="chart-adder"
182+
ng-click="statisticsNewCtl.openChartBuilderDialog()">
155183
</div>
156184
</div>
157185
</div>
158-
<div ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
159-
!statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
160-
class="zero-content">
186+
<div
187+
ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
188+
!statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
189+
class="zero-content">
161190
No charts to display yet. Use Add Group to first add groups and then charts.<br>
162191
NOTE: All your changes will be auto-saved.
163192
</div>

‎priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,19 @@
1818
])
1919
.controller('mnStatisticsNewController', mnStatisticsNewController);
2020

21-
function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions) {
21+
function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions, $timeout, $document) {
2222
var vm = this;
2323

2424
vm.onSelectScenario = onSelectScenario;
2525
vm.onSelectZoom = onSelectZoom;
26+
vm.$document = $document;
2627

2728
vm.statisticsService = mnStatisticsNewService.export;
2829
vm.saveScenarios = mnStatisticsNewService.saveScenarios;
2930

31+
vm.hideGroupControls = hideGroupControls;
32+
vm.onGroupNameBlur = onGroupNameBlur;
33+
3034
if (vm.statisticsService.scenarios.selected) {
3135
$state.go("^.statistics", {
3236
scenario: vm.statisticsService.scenarios.selected.id,
@@ -48,6 +52,20 @@
4852

4953
activate();
5054

55+
function onGroupNameBlur(scope, group) {
56+
if (!scope.onControlClick) {
57+
scope.showGroupControls = false;
58+
group.name = scope.initName;
59+
}
60+
}
61+
62+
function hideGroupControls(scope, group) {
63+
if (scope.onControlClick) {
64+
scope.onControlClick = false;
65+
onGroupNameBlur(scope, group);
66+
}
67+
}
68+
5169
function openScenarioDialog(scenario) {
5270
$uibModal.open({
5371
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario.html',
@@ -77,7 +95,7 @@
7795

7896
function deleteGroup(group) {
7997
$uibModal.open({
80-
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html',
98+
templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_group_delete.html',
8199
}).result.then(function () {
82100
mnStatisticsNewService.deleteGroup(group);
83101
});

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="dialog-small">
2+
<h2 class="panel-header">
3+
Delete Group
4+
</h2>
5+
<form ng-submit="$close()">
6+
<div class="panel-content">
7+
<div class="row flex-left">
8+
<span class="icon fa-warning fa-2x red-3"></span>
9+
<p>Delete this group and all its charts?</p>
10+
</div>
11+
</div>
12+
<div class="panel-footer">
13+
<a ng-click="$dismiss()">Cancel</a>
14+
<button type="submit" mn-focus="">Delete Group</button>
15+
</div>
16+
</form>
17+
</div>

0 commit comments

Comments
 (0)