updated

public/app/features/panel/panel_ctrl.ts

@@ -140,12 +140,18 @@ export class PanelCtrl {
 
 
   getMenu() {
   getMenu() {
     let menu = [];
     let menu = [];
-    menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'});
-    menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'});
-    if (!this.fullscreen) { //  duplication is not supported in fullscreen mode
-      menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' });
+    menu.push({text: 'View', click: 'ctrl.viewPanel();', icon: "fa fa-fw fa-eye", shortcut: "v"});
+    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: 'Actions', 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: 'Share', click: 'ctrl.sharePanel(); dismiss();'});
+
+    menu.push({text: 'Remove', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-trash", shortcut: "p r"});
     return menu;
     return menu;
   }
   }
 
 

public/app/features/panel/panel_header.ts

@@ -16,8 +16,6 @@ var template = `
           <i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span>
           <i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span>
         </a>
         </a>
       </li>
       </li>
-      <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-eye"></i> View</a></li>
-      <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-share-square-o"></i> Share</a></li>
       <li class="dropdown-submenu">
       <li class="dropdown-submenu">
         <a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cube"></i> Actions</a>
         <a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cube"></i> Actions</a>
         <ul class="dropdown-menu panel-menu">
         <ul class="dropdown-menu panel-menu">
@@ -33,16 +31,74 @@ var template = `
   <span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>
   <span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>
 </span>`;
 </span>`;
 
 
+function renderMenuItem(item, ctrl) {
+  let html = '';
+  let listItemClass = '';
+
+  if (item.submenu) {
+    listItemClass = 'dropdown-submenu';
+  }
+
+  html += `<li class="${listItemClass}"><a `;
+
+  if (item.click) { html += ` ng-click="${item.click}"`; }
+  if (item.href) { html += ` href="${item.href}"`; }
+
+  html += `><i class="${item.icon}"></i>`;
+  html += `<span>${item.text}</span>`;
+
+  if (item.shortcut) {
+    html += `<span class="dropdown-menu-item-shortcut">${item.shortcut}</span>`;
+  }
+
+  html += `</a>`;
+
+  if (item.submenu) {
+    html += '<ul class="dropdown-menu panel-menu">';
+    for (let subitem of item.submenu) {
+      html += renderMenuItem(subitem, ctrl);
+    }
+    html += '</ul>';
+  }
+
+  html += `</li>`;
+  return html;
+}
+
+function createMenuTemplate(ctrl) {
+  let html = '';
+
+  for (let item of ctrl.getMenu()) {
+    html += renderMenuItem(item, ctrl);
+  }
+
+  return html;
+}
+
 /** @ngInject **/
 /** @ngInject **/
-function panelHeader() {
+function panelHeader($compile) {
   return {
   return {
     restrict: 'E',
     restrict: 'E',
     template: template,
     template: template,
     link: function(scope, elem, attrs) {
     link: function(scope, elem, attrs) {
 
 
+      let menuElem = elem.find('.panel-menu');
+      let menuScope;
+
       elem.click(function(evt) {
       elem.click(function(evt) {
         const targetClass = evt.target.className;
         const targetClass = evt.target.className;
 
 
+        // remove existing scope
+        if (menuScope) {
+          menuScope.$destroy();
+        }
+
+        menuScope = scope.$new();
+        let menuHtml = createMenuTemplate(scope.ctrl);
+        console.log(menuHtml);
+        menuElem.html(menuHtml);
+        $compile(menuElem)(menuScope);
+
         if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') {
         if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') {
           evt.stopPropagation();
           evt.stopPropagation();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
           elem.find('[data-toggle=dropdown]').dropdown('toggle');

public/sass/components/_dropdown.scss

@@ -76,7 +76,7 @@
   // Links within the dropdown menu
   // Links within the dropdown menu
   > li {
   > li {
     > a {
     > a {
-      display: block;
+      display: flex;
       padding: 3px 20px 3px 15px;
       padding: 3px 20px 3px 15px;
       clear: both;
       clear: both;
       font-weight: normal;
       font-weight: normal;
@@ -257,6 +257,7 @@
 }
 }
 
 
 .dropdown-menu-item-with-shortcut {
 .dropdown-menu-item-with-shortcut {
+  min-width: 40px;
   a {
   a {
     min-width: 12rem;
     min-width: 12rem;
   }
   }
@@ -266,6 +267,7 @@
   display: block;
   display: block;
   float: right;
   float: right;
   color: $text-muted;
   color: $text-muted;
+  min-width: 30px;
 
 
   &::before {
   &::before {
     font-family: FontAwesome;
     font-family: FontAwesome;

public/sass/pages/_dashboard.scss

@@ -109,8 +109,6 @@ div.flot-text {
   left: -100px;
   left: -100px;
 
 
   li a {
   li a {
-    display: block;
-    white-space: nowrap;
     color: $dropdown-link-color;
     color: $dropdown-link-color;
     font-size: $font-size-sm;
     font-size: $font-size-sm;
     padding: $spacer/2 $spacer;
     padding: $spacer/2 $spacer;