Skip to content

N
nexpie-grafana-theme
Commit f1137e4d by Torkel Ödegaard
Options

ux(dashboard): removed green row icon gain, replaced with collapse icon, #6442

parent 075c7225
Showing with 51 additions and 63 deletions
public/app/features/dashboard/model.ts
...@@ -196,7 +196,6 @@ export class DashboardModel { ...@@ -196,7 +196,6 @@ export class DashboardModel {
} }
setPanelFocus(id) { setPanelFocus(id) {
console.log('setting focus panel id', id);
this.meta.focusPanelId = id; this.meta.focusPanelId = id;
} }
......
public/app/features/dashboard/row/row.html
<div ng-if="ctrl.editMode"> <div ng-if="ctrl.dashboard.editMode">
<div class="dash-row-header"> <div class="dash-row-header">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()"> <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer"> <span class="dash-row-collapse-toggle pointer">
...@@ -40,27 +40,12 @@ ...@@ -40,27 +40,12 @@
</div> </div>
</div> </div>
<div ng-if="!ctrl.editMode"> <div ng-if="!ctrl.dashboard.editMode">
<div class="row-open"> <div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
<div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen"> <i class="fa fa-chevron-down"></i>
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</span>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li>
<a ng-click="ctrl.onMenuAddPanel()">Add Panel</a>
</li>
<li>
<a ng-click="ctrl.onMenuRowOptions()">Row Options</a>
</li>
<li>
<a ng-click="ctrl.onMenuDeleteRow()">Delete row</a>
</li>
</ul>
</div>
</div> </div>
<div class="dash-row-header" ng-if="ctrl.showtitle"> <div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()"> <a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
<span class="dash-row-collapse-toggle pointer"> <span class="dash-row-collapse-toggle pointer">
<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i> <i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
......
public/app/features/dashboard/row/row_ctrl.ts
...@@ -12,7 +12,6 @@ export class DashRowCtrl { ...@@ -12,7 +12,6 @@ export class DashRowCtrl {
dashboard: any; dashboard: any;
row: any; row: any;
dropView: number; dropView: number;
editMode: boolean;
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) { constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
...@@ -22,12 +21,6 @@ export class DashRowCtrl { ...@@ -22,12 +21,6 @@ export class DashRowCtrl {
this.dropView = 1; this.dropView = 1;
delete this.row.isNew; delete this.row.isNew;
} }
this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope);
}
editModeChanged() {
this.editMode = this.dashboard.editMode;
} }
onDrop(panelId, dropTarget) { onDrop(panelId, dropTarget) {
...@@ -58,7 +51,7 @@ export class DashRowCtrl { ...@@ -58,7 +51,7 @@ export class DashRowCtrl {
dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel); dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
} else if (this.row === dragObject.row) { } else if (this.row === dragObject.row) {
// just move element // just move element
this.row.movePanel(dropTarget.index, dragObject.index); this.row.movePanel(dragObject.index, dropTarget.index);
} else { } else {
// split drop target space // split drop target space
dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2; dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
...@@ -100,32 +93,29 @@ export class DashRowCtrl { ...@@ -100,32 +93,29 @@ export class DashRowCtrl {
} }
toggleCollapse() { toggleCollapse() {
this.dropView = 0; this.closeDropView();
this.row.collapse = !this.row.collapse; this.row.collapse = !this.row.collapse;
} }
showAddPanel() { showAddPanel() {
this.row.collapse = false; this.row.collapse = false;
this.dropView = this.dropView === 1 ? 0 : 1; if (this.dropView === 1) {
this.closeDropView();
} else {
this.dropView = 1;
}
} }
showRowOptions() { showRowOptions() {
this.dropView = this.dropView === 2 ? 0 : 2; if (this.dropView === 2) {
} this.closeDropView();
} else {
onMenuAddPanel() { this.dropView = 2;
this.editMode = true; }
this.dropView = 1;
}
onMenuRowOptions() {
this.editMode = true;
this.dropView = 2;
} }
closeDropView() { closeDropView() {
this.dropView = 0; this.dropView = 0;
this.editMode = this.dashboard.editMode;
} }
onMenuDeleteRow() { onMenuDeleteRow() {
...@@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) { ...@@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) {
coreModule.directive('panelDropZone', function($timeout) { coreModule.directive('panelDropZone', function($timeout) {
return function(scope, element) { return function(scope, element) {
var row = scope.ctrl.row; var row = scope.ctrl.row;
var dashboard = scope.ctrl.dashboard;
var indrag = false; var indrag = false;
var textEl = element.find('.panel-drop-zone-text'); var textEl = element.find('.panel-drop-zone-text');
...@@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) { ...@@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) {
} }
function updateState() { function updateState() {
if (scope.ctrl.editMode) { if (scope.ctrl.dashboard.editMode) {
if (row.panels.length === 0 && indrag === false) { if (row.panels.length === 0 && indrag === false) {
return showPanel(12, 'Empty Space'); return showPanel(12, 'Empty Space');
} }
...@@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) { ...@@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) {
} }
row.events.on('span-changed', updateState, scope); row.events.on('span-changed', updateState, scope);
scope.$watchGroup(['ctrl.editMode'], updateState); dashboard.events.emit('edit-mode-changed', updateState, scope);
scope.$on("ANGULAR_DRAG_START", function() { scope.$on("ANGULAR_DRAG_START", function() {
indrag = true; indrag = true;
......
public/app/features/panel/panel_directive.ts
...@@ -146,7 +146,7 @@ module.directive('grafanaPanel', function($rootScope) { ...@@ -146,7 +146,7 @@ module.directive('grafanaPanel', function($rootScope) {
module.directive('panelResizer', function($rootScope) { module.directive('panelResizer', function($rootScope) {
return { return {
restrict: 'E', restrict: 'E',
template: '<span class="resize-panel-handle"></span>', template: '<span class="resize-panel-handle fa fa-signal"></span>',
link: function(scope, elem) { link: function(scope, elem) {
var resizing = false; var resizing = false;
var lastPanel; var lastPanel;
......
public/sass/components/_row.scss
...@@ -169,15 +169,6 @@ a.dash-row-header-actions--tight { ...@@ -169,15 +169,6 @@ a.dash-row-header-actions--tight {
display: flex; display: flex;
} }
.dash-edit-mode {
.dash-row-options {
margin-bottom: 0;
}
.dash-row-add-panel {
margin-bottom: 0;
}
}
.add-panel-panels-scroll { .add-panel-panels-scroll {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -215,6 +206,23 @@ a.dash-row-header-actions--tight { ...@@ -215,6 +206,23 @@ a.dash-row-header-actions--tight {
width: 2rem; width: 2rem;
} }
.dash-row-expand-toggle {
margin-top: -3px;
left: 1px;
position: absolute;
z-index: 100;
transition: .10s left;
transition-delay: .05s;
width: 15px;
font-size: 60%;
color: $text-muted;
cursor: pointer;
height: 100%;
&:hover {
color: $link-color;
}
}
// Legacy mode // Legacy mode
.row-tab { .row-tab {
...@@ -237,14 +245,6 @@ a.dash-row-header-actions--tight { ...@@ -237,14 +245,6 @@ a.dash-row-header-actions--tight {
color: rgba(255,255,255,.90); color: rgba(255,255,255,.90);
} }
.row-button {
width: 24px;
float: left;
cursor: pointer;
line-height: 31px;
background-color: $blue-dark;
}
.row-open { .row-open {
margin-top: 1px; margin-top: 1px;
left: -24px; left: -24px;
......
public/sass/pages/_dashboard.scss
...@@ -198,6 +198,7 @@ div.flot-text { ...@@ -198,6 +198,7 @@ div.flot-text {
width: 15px; width: 15px;
height: 15px; height: 15px;
display: block; display: block;
color: $panel-bg;
} }
.dashboard-header { .dashboard-header {
...@@ -211,3 +212,15 @@ div.flot-text { ...@@ -211,3 +212,15 @@ div.flot-text {
} }
} }
.dash-edit-mode {
.resize-panel-handle {
color: $text-color-faint;
overflow: hidden;
&:before {
left: initial;
right: -5px;
bottom: 0px;
position: absolute;
}
}
}
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