Bläddra i källkod

ux: minor panel menu tweaks

Torkel Ödegaard 8 år sedan
förälder
incheckning
d862b64b1b

+ 7 - 4
public/app/features/panel/panel_ctrl.ts

@@ -6,6 +6,7 @@ import angular from 'angular';
 import $ from 'jquery';
 import {profiler} from 'app/core/profiler';
 import Remarkable from 'remarkable';
+import {contextSrv} from 'app/core/core';
 
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
@@ -144,14 +145,16 @@ export class PanelCtrl {
     menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"});
     menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"});
 
-    let extendedMenu = this.getExtendedMenu();
-    menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
-
     if (!this.fullscreen) {
       menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" });
     }
 
-    menu.push({text: 'Remove', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-trash", shortcut: "p r"});
+    menu.push({divider: true});
+    menu.push({text: 'Remove', click: 'ctrl.removePanel();', role: 'Editor', icon: "fa fa-fw fa-trash", shortcut: "p r"});
+    menu.push({divider: true, role: 'Editor'});
+
+    let extendedMenu = this.getExtendedMenu();
+    menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
     return menu;
   }
 

+ 4 - 0
public/app/features/panel/panel_header.ts

@@ -35,6 +35,10 @@ function renderMenuItem(item, ctrl) {
   let html = '';
   let listItemClass = '';
 
+  if (item.divider) {
+    return '<li class="divider"></li>';
+  }
+
   if (item.submenu) {
     listItemClass = 'dropdown-submenu';
   }

+ 5 - 3
public/sass/pages/_dashboard.scss

@@ -77,7 +77,9 @@ div.flot-text {
 }
 
 .panel-menu-container {
-  margin-left: 6px;
+  width: 1px;
+  height: 19px;
+  display: inline-block;
 }
 
 .panel-menu-toggle {
@@ -89,8 +91,8 @@ div.flot-text {
   position: absolute;
   width: 16px;
   height: 16px;
-  left: 0;
-  top: 0;
+  left: 1px;
+  top: 4px;
 
   &:hover {
     color: $link-hover-color;