Skip to content

N
nexpie-grafana-theme
Commit 3e712178 by Torkel Ödegaard
Options

ux(dashboard): began removing build mode and adding new slide out row menu

parent f91e0672
Showing with 87 additions and 227 deletions
public/app/core/services/keybindingSrv.ts
...@@ -79,9 +79,9 @@ export class KeybindingSrv { ...@@ -79,9 +79,9 @@ export class KeybindingSrv {
} }
setupDashboardBindings(scope, dashboard) { setupDashboardBindings(scope, dashboard) {
this.bind('b', () => { // this.bind('b', () => {
dashboard.toggleEditMode(); // dashboard.toggleEditMode();
}); // });
this.bind('ctrl+o', () => { this.bind('ctrl+o', () => {
dashboard.sharedCrosshair = !dashboard.sharedCrosshair; dashboard.sharedCrosshair = !dashboard.sharedCrosshair;
......
public/app/features/dashboard/dashnav/dashnav.html
...@@ -52,12 +52,6 @@ ...@@ -52,12 +52,6 @@
<li ng-if="::showSettingsMenu" class="dropdown"> <li ng-if="::showSettingsMenu" class="dropdown">
<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a> <a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li ng-if="dashboardMeta.canEdit" class="dropdown-menu-item-with-shortcut">
<a class="pointer" ng-click="dashboard.toggleEditMode();">
Build Mode
<span class="dropdown-menu-item-shortcut">b</span>
</a>
</li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li> <li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li> <li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li> <li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
......
public/app/features/dashboard/model.ts
...@@ -88,7 +88,6 @@ export class DashboardModel { ...@@ -88,7 +88,6 @@ export class DashboardModel {
} }
this.meta = meta; this.meta = meta;
this.editMode = this.meta.isNew;
} }
// cleans meta data and other non peristent state // cleans meta data and other non peristent state
......
public/app/features/dashboard/row/options.html
...@@ -31,14 +31,5 @@ ...@@ -31,14 +31,5 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="pull-right">
<button class="btn btn-danger btn-small" ng-click="ctrl.removeRow()">
<i class="fa fa-trash"></i>
Delete row
</button>
</div>
<div class="clearfix"></div>
</div> </div>
public/app/features/dashboard/row/options.ts
...@@ -19,10 +19,6 @@ export class RowOptionsCtrl { ...@@ -19,10 +19,6 @@ export class RowOptionsCtrl {
this.dashboard = this.rowCtrl.dashboard; this.dashboard = this.rowCtrl.dashboard;
this.row.titleSize = this.row.titleSize || 'h6'; this.row.titleSize = this.row.titleSize || 'h6';
} }
removeRow() {
this.dashboard.removeRow(this.row);
}
} }
export function rowOptionsDirective() { export function rowOptionsDirective() {
......
public/app/features/dashboard/row/row.html
<div ng-if="ctrl.dashboard.editMode"> <div class="dash-row-menu-container" ng-hide="dashboard.meta.fullscreen">
<div class="dash-row-header"> <ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()"> <li>
<span class="dash-row-collapse-toggle pointer"> <a ng-click="ctrl.onMenuAddPanel()">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i> <i class="fa fa-plus"></i> Add Panel
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i> </a>
</span> </li>
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span> <li>
</a> <a ng-click="ctrl.onMenuRowOptions()">
<i class="fa fa-cog"></i> Row Options
<div class="dash-row-header-actions"> </a>
<a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()" ng-class="{active: ctrl.dropView===1}"> </li>
Add Panel <li>
<i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i> <a ng-click="ctrl.onMenuDeleteRow()">
<i class="fa fa-remove" ng-show="ctrl.dropView===1"></i> <i class="fa fa-arrow-up"></i> Move Up
</a> </a>
<a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()" ng-class="{active: ctrl.dropView===2}"> </li>
Row Options <li>
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i> <a ng-click="ctrl.onMenuDeleteRow()">
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i> <i class="fa fa-arrow-down"></i> Move Down
</a> </a>
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row up'" ng-click="ctrl.moveRow(-1)"> </li>
<i class="fa fa-arrow-up"></i> <li>
</a> <a ng-click="ctrl.onMenuDeleteRow()">
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row down'" ng-click="ctrl.moveRow(1)"> <i class="fa fa-trash"></i> Delete row
<i class="fa fa-arrow-down"></i> </a>
</a> </li>
</div> </ul>
</div> </div>
<div ng-if="ctrl.dropView === 1">
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
</div>
<div ng-if="ctrl.dropView === 2"> <div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
<dash-row-options row-ctrl="ctrl"></dash-row-options> <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
</div> <span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</span>
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
</a>
</div> </div>
<div ng-if="!ctrl.dashboard.editMode"> <div ng-if="ctrl.dropView === 1">
<div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()"> <dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
<i class="fa fa-chevron-down"></i> </div>
</div>
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse"> <div ng-if="ctrl.dropView === 2">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()"> <dash-row-options row-ctrl="ctrl"></dash-row-options>
<span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
</span>
<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
</a>
</div>
</div> </div>
<div class="panels-wrapper" ng-if="!ctrl.row.collapse"> <div class="panels-wrapper" ng-if="!ctrl.row.collapse">
<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width> <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
<plugin-component type="panel" class="panel-margin"> <plugin-component type="panel" class="panel-margin">
</plugin-component> </plugin-component>
</div> </div>
<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true"> <div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
<div class="panel-margin"> <div class="panel-margin">
<div class="panel-container"> <div class="panel-container">
<div class="panel-drop-zone-text"></div> <div class="panel-drop-zone-text"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
public/app/features/dashboard/row/row_ctrl.ts
...@@ -97,21 +97,12 @@ export class DashRowCtrl { ...@@ -97,21 +97,12 @@ export class DashRowCtrl {
this.row.collapse = !this.row.collapse; this.row.collapse = !this.row.collapse;
} }
showAddPanel() { onMenuAddPanel() {
this.row.collapse = false; this.dropView = 1;
if (this.dropView === 1) {
this.closeDropView();
} else {
this.dropView = 1;
}
} }
showRowOptions() { onMenuRowOptions() {
if (this.dropView === 2) { this.dropView = 2;
this.closeDropView();
} else {
this.dropView = 2;
}
} }
closeDropView() { closeDropView() {
......
public/app/features/dashboard/submenu/submenu.html
...@@ -23,11 +23,5 @@ ...@@ -23,11 +23,5 @@
<dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container> <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
</div> </div>
<div class="gf-form" ng-if="ctrl.dashboard.editMode" ng-click="ctrl.exitBuildMode();">
<button class="btn btn-secondary gf-form-btn">
Exit Build Mode
</button>
</div>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
public/sass/components/_row.scss
...@@ -40,131 +40,22 @@ ...@@ -40,131 +40,22 @@
} }
} }
.dash-row-header-actions {
position: absolute;
color: $text-muted;
font-size: $font-size-sm;
bottom: 0px;
right: 1rem;
a {
display: inline-block;
padding: 6px 11px;
color: $text-muted;
padding-left: 1rem;
&:hover {
color: $link-hover-color;
}
}
a.active {
color: $link-color;
background: $panel-bg;
border: 1px solid $dash-row-border-color;
border-bottom: none;
position: relative;
top: 1px;
}
}
a.dash-row-header-actions--tight {
padding-left: 1px;
padding-right: 1px;
}
.dash-row-header-add-panel {
padding: 0.7rem;
i {
font-size: 0.9rem;
position: relative;
top: 2px;
left: 1px;
color: $text-muted;
}
}
.dash-row-header-spacer {
flex: 50;
}
.panels-wrapper { .panels-wrapper {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
} }
.dash-edit-mode {
.dash-row-header {
display: flex;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin-right: 0;
}
.dash-row-header::after {
content: ' ';
border-top: 1px solid $dash-row-border-color;
width: 15px;
position: relative;
}
.dash-row {
margin-bottom: $spacer;
}
.dash-row-header-title {
border-left: 1px solid $dash-row-border-color;
}
.dash-row-header-title::before {
content: ' ';
border-top: 1px solid $dash-row-border-color;
width: 15px;
position: absolute;
margin: -9px 0 0 -9px;
}
.panels-wrapper {
padding: $panel-margin*2 $panel-margin 0 $panel-margin;
border-left: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
}
.panels-wrapper::after {
content: ' ';
border-bottom: 1px solid $dash-row-border-color;
width: 15px;
position: absolute;
margin: 0 0 0 -6px;
bottom: 0;
}
.add-row-panel-hint {
display: block;
}
}
.dash-row-options-close-btn {
float: right;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
i {
font-size: 120%;
}
color: $text-color;
&:hover {
color: $white;
}
}
.dash-row-options { .dash-row-options {
background: $panel-bg; background: $panel-bg;
border-left: 1px solid $dash-row-border-color; border: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color; margin: 0 $panel-margin $panel-margin*2 $panel-margin;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2; padding: $panel-margin*2;
} }
.dash-row-add-panel { .dash-row-add-panel {
background: $panel-bg; background: $panel-bg;
border-left: 1px solid $dash-row-border-color; border: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color; margin: 0 $panel-margin $panel-margin*2 $panel-margin;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
padding: $panel-margin*2; padding: $panel-margin*2;
display: flex; display: flex;
} }
...@@ -212,21 +103,32 @@ a.dash-row-header-actions--tight { ...@@ -212,21 +103,32 @@ a.dash-row-header-actions--tight {
width: 2rem; width: 2rem;
} }
.dash-row-expand-toggle { .dash-row-menu-container {
margin-top: -3px;
left: 1px;
position: absolute; position: absolute;
z-index: 100; left: -120px;
transition: .10s left; background: $panel-bg;
width: 130px;
transition: .30s left;
transition-delay: .05s; transition-delay: .05s;
width: 15px; z-index: 100;
font-size: 60%;
color: $text-muted;
cursor: pointer;
height: 100%;
&:hover { &:hover {
color: $link-color; left: 0px;
}
}
.dash-row-menu {
list-style: none;
li a {
display: block;
white-space: nowrap;
color: $text-muted;
font-size: $font-size-sm;
padding: 0.4rem 1rem;
&:hover {
color: $link-color;
background: $input-label-bg;
}
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment