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 {
}
setupDashboardBindings(scope, dashboard) {
this.bind('b', () => {
dashboard.toggleEditMode();
});
// this.bind('b', () => {
// dashboard.toggleEditMode();
// });
this.bind('ctrl+o', () => {
dashboard.sharedCrosshair = !dashboard.sharedCrosshair;
......
public/app/features/dashboard/dashnav/dashnav.html
......@@ -52,12 +52,6 @@
<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>
<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('annotations');">Annotations</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 {
}
this.meta = meta;
this.editMode = this.meta.isNew;
}
// cleans meta data and other non peristent state
......
public/app/features/dashboard/row/options.html
......@@ -31,14 +31,5 @@
<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>
public/app/features/dashboard/row/options.ts
......@@ -19,10 +19,6 @@ export class RowOptionsCtrl {
this.dashboard = this.rowCtrl.dashboard;
this.row.titleSize = this.row.titleSize || 'h6';
}
removeRow() {
this.dashboard.removeRow(this.row);
}
}
export function rowOptionsDirective() {
......
public/app/features/dashboard/row/row.html
<div ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<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 class="dash-row-header-actions">
<a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()" ng-class="{active: ctrl.dropView===1}">
Add Panel
<i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
<i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
</a>
<a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()" ng-class="{active: ctrl.dropView===2}">
Row Options
<i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
<i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
</a>
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row up'" ng-click="ctrl.moveRow(-1)">
<i class="fa fa-arrow-up"></i>
</a>
<a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row down'" ng-click="ctrl.moveRow(1)">
<i class="fa fa-arrow-down"></i>
</a>
</div>
</div>
<div ng-if="ctrl.dropView === 1">
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
</div>
<div class="dash-row-menu-container" ng-hide="dashboard.meta.fullscreen">
<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="ctrl.onMenuAddPanel()">
<i class="fa fa-plus"></i> Add Panel
</a>
</li>
<li>
<a ng-click="ctrl.onMenuRowOptions()">
<i class="fa fa-cog"></i> Row Options
</a>
</li>
<li>
<a ng-click="ctrl.onMenuDeleteRow()">
<i class="fa fa-arrow-up"></i> Move Up
</a>
</li>
<li>
<a ng-click="ctrl.onMenuDeleteRow()">
<i class="fa fa-arrow-down"></i> Move Down
</a>
</li>
<li>
<a ng-click="ctrl.onMenuDeleteRow()">
<i class="fa fa-trash"></i> Delete row
</a>
</li>
</ul>
</div>
<div ng-if="ctrl.dropView === 2">
<dash-row-options row-ctrl="ctrl"></dash-row-options>
</div>
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<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 ng-if="!ctrl.dashboard.editMode">
<div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
<i class="fa fa-chevron-down"></i>
</div>
<div ng-if="ctrl.dropView === 1">
<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
</div>
<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<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 ng-if="ctrl.dropView === 2">
<dash-row-options row-ctrl="ctrl"></dash-row-options>
</div>
<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>
<plugin-component type="panel" class="panel-margin">
</plugin-component>
</div>
<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>
</div>
<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-container">
<div class="panel-drop-zone-text"></div>
</div>
</div>
</div>
<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-container">
<div class="panel-drop-zone-text"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
</div>
public/app/features/dashboard/row/row_ctrl.ts
......@@ -97,21 +97,12 @@ export class DashRowCtrl {
this.row.collapse = !this.row.collapse;
}
showAddPanel() {
this.row.collapse = false;
if (this.dropView === 1) {
this.closeDropView();
} else {
this.dropView = 1;
}
onMenuAddPanel() {
this.dropView = 1;
}
showRowOptions() {
if (this.dropView === 2) {
this.closeDropView();
} else {
this.dropView = 2;
}
onMenuRowOptions() {
this.dropView = 2;
}
closeDropView() {
......
public/app/features/dashboard/submenu/submenu.html
......@@ -23,11 +23,5 @@
<dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
</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>
public/sass/components/_row.scss
......@@ -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 {
flex-grow: 1;
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 {
background: $panel-bg;
border-left: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
border: 1px solid $dash-row-border-color;
margin: 0 $panel-margin $panel-margin*2 $panel-margin;
padding: $panel-margin*2;
}
.dash-row-add-panel {
background: $panel-bg;
border-left: 1px solid $dash-row-border-color;
border-bottom: 1px solid $dash-row-border-color;
border-right: 1px solid $dash-row-border-color;
margin: 0 0 $panel-margin*2 0;
border: 1px solid $dash-row-border-color;
margin: 0 $panel-margin $panel-margin*2 $panel-margin;
padding: $panel-margin*2;
display: flex;
}
......@@ -212,21 +103,32 @@ a.dash-row-header-actions--tight {
width: 2rem;
}
.dash-row-expand-toggle {
margin-top: -3px;
left: 1px;
.dash-row-menu-container {
position: absolute;
z-index: 100;
transition: .10s left;
left: -120px;
background: $panel-bg;
width: 130px;
transition: .30s left;
transition-delay: .05s;
width: 15px;
font-size: 60%;
color: $text-muted;
cursor: pointer;
height: 100%;
z-index: 100;
&: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