ux: more work on panel menu

702978ef · Torkel Ödegaard · a47183f7 · 702978ef · 702978ef · 702978ef
Commit 702978ef authored Apr 11, 2017 by Torkel Ödegaard
11 changed files
--- a/public/app/core/routes/dashboard_loaders.js
+++ b/public/app/core/routes/dashboard_loaders.js
@@ -34,7 +34,7 @@ function (coreModule) {
        rows: [
          {
            title: 'Dashboard Row',
-            height: '250px',
+            height: '350px',
            panels:[],
            isNew: true,
          }

--- a/public/app/features/dashboard/row/add_panel.ts
+++ b/public/app/features/dashboard/row/add_panel.ts
@@ -78,7 +78,7 @@ export class AddPanelCtrl {
  }
  addPanel(panelPluginInfo) {
-    var defaultSpan = 12;
+    var defaultSpan = 6;
    var span = 12 - this.row.span;
    var panel = {

--- a/public/app/features/panel/all.js
+++ b/public/app/features/panel/all.js
 define([
-  './panel_menu',
+  './panel_header',
  './panel_directive',
  './solo_panel_ctrl',
  './query_ctrl',

--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -19,7 +19,7 @@ var panelTemplate = `
        <i class="fa fa-spinner fa-spin"></i>
      </span>
-      <div class="panel-title-container drag-handle" panel-menu></div>
+      <panel-header class="panel-title-container drag-handle" panel-ctrl="ctrl"></panel-header>
    </div>
    <div class="panel-content">

--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
+///<reference path="../../headers/common.d.ts" />
+import angular from 'angular';
+import {coreModule} from 'app/core/core';
+var template = `
+<span class="panel-title drag-handle">
+  <span class="icon-gf panel-alert-icon"></span>
+  <span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
+  <span class="panel-menu-container dropdown">
+    <span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span>
+    <ul class="dropdown-menu panel-menu" role="menu">
+      <li>
+        <a ng-click="ctrl.addDataQuery(datasource);">
+          <i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span>
+        </a>
+      </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">
+        <a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cube"></i> Actions</a>
+        <ul class="dropdown-menu panel-menu">
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-flash"></i> Add Annotation</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-bullseye"></i> Toggle Legend</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-download"></i> Export to CSV</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-eye"></i> View JSON</a></li>
+        </ul>
+      </li>
+      <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-trash"></i> Remove</a></li>
+    </ul>
+  </span>
+  <span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>
+</span>`;
+/** @ngInject **/
+function panelHeader() {
+  return {
+    restrict: 'E',
+    template: template,
+    link: function() {
+    }
+  };
+}
+coreModule.directive('panelHeader', panelHeader);
--- a/public/app/features/panel/panel_menu.js
+++ b/public/app/features/panel/panel_menu.js
@@ -16,12 +16,6 @@ function (angular, $, _, Tether) {
            '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
            '<span class="fa fa-caret-down panel-title-caret" data-toggle="dropdown"></span>' +
            '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
-            '<ul class="dropdown-menu panel-dropdown-menu" role="menu">' +
-              '<li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span></a></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><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-trash"></i> Remove</a></li>' +
-            '</ul>' +
          '</span>';
      function createMenuTemplate(ctrl) {

--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -192,6 +192,8 @@ $dropdownLinkColorActive:       $white;
 $dropdownLinkBackgroundActive:  $dark-4;
 $dropdownLinkBackgroundHover:   $dark-4;
+$dropdown-link-color: $gray-3;
 // COMPONENT VARIABLES
 // --------------------------------------------------

--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -204,6 +204,7 @@ $dropdownLinkColorActive:       $link-color;
 $dropdownLinkBackgroundActive:  $gray-6;
 $dropdownLinkBackgroundHover:   $gray-6;
+$dropdown-link-color: $gray-3;
 // COMPONENT VARIABLES
 // --------------------------------------------------

--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -31,7 +31,7 @@
  width: 0;
  height: 0;
  vertical-align: top;
-  border-top:   4px solid $black;
+  border-top:   4px solid $text-color-weak;
  border-right: 4px solid transparent;
  border-left:  4px solid transparent;
  content: "";
@@ -192,7 +192,7 @@
 .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
-  margin-top: -6px;
+  margin-top: 0px;
  margin-left: -1px;
  @include border-radius(0 6px 6px 6px);
 }
@@ -218,9 +218,9 @@
  height: 0;
  border-color: transparent;
  border-style: solid;
-  border-width: 5px 0 5px 5px;
+  border-width: 4px 0 4px 4px;
-  border-left-color: darken($dropdownBackground, 20%);
+  border-left-color: $text-color-weak;
-  margin-top: 5px;
+  margin-top: 4px;
  margin-right: -10px;
 }
 .dropdown-submenu:hover > a::after {

--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -147,7 +147,7 @@ $dash-row-menu-animation-speed: 0.20s;
  li a {
    display: block;
    white-space: nowrap;
-    color: $text-muted;
+    color: $dropdown-link-color;
    font-size: $font-size-sm;
    padding: $spacer/2 $spacer;
    border-left: 2px solid $side-menu-bg;

--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -56,22 +56,26 @@ div.flot-text {
 .panel-title-container {
  min-height: 9px;
  padding: 2px 0;
-  cursor: pointer;
+  cursor: move;
  word-wrap: break-word;
+  display: block;
 }
 .panel-title {
  border: 0px;
  font-weight: $font-weight-semi-bold;
  position: relative;
-  cursor: pointer;
  width: 100%;
  display: block;
 }
-.panel-title-caret {
+.panel-menu-container {
+  margin-left: 8px;
+}
+.panel-menu-toggle {
  color: $text-color-faint;
-  margin-left: 10px;
+  cursor: pointer;
  padding: 3px 5px;
  &:hover {
@@ -98,18 +102,16 @@ div.flot-text {
  }
 }
-.panel-dropdown-menu {
+.panel-menu {
  border: none;
-  left: 50%;
  text-align: left;
-  transform: translateX(-50%);
  background: $side-menu-bg;
  box-shadow: $search-shadow;
  li a {
    display: block;
    white-space: nowrap;
-    color: $text-muted;
+    color: $dropdown-link-color;
    font-size: $font-size-sm;
    padding: $spacer/2 $spacer;
    border-left: 2px solid $side-menu-bg;
@@ -195,37 +197,6 @@ div.flot-text {
  margin-bottom: 20px;
 }
-.panel-menu {
-  z-index: 500;
-  position: absolute;
-  background: $tight-form-func-bg;
-  border: $panel-menu-border;
-  .panel-menu-row {
-    white-space: nowrap;
-    border-bottom: $panel-menu-border;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-  .panel-menu-link, .panel-menu-icon {
-    padding: 5px 10px;
-  }
-  .panel-menu-link {
-    display: inline-block;
-    border-right: $panel-menu-border;
-    &:last-child {
-      border: none;
-    }
-  }
-  .dropdown-menu {
-    text-align: left;
-  }
-}
 // .panel-highlight  {
 //   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
 // }