diff --git a/public/app/core/routes/dashboard_loaders.js b/public/app/core/routes/dashboard_loaders.js index 728b7e0092f..869f486fbfd 100644 --- 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, } diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts index 1ea0cc5159e..a5cdda2fb83 100644 --- 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 = { diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index 2f978e65345..72a70a6c8d7 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -1,5 +1,5 @@ define([ - './panel_menu', + './panel_header', './panel_directive', './solo_panel_ctrl', './query_ctrl', diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 63fdba693cb..ba7e5ef0a01 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -19,7 +19,7 @@ var panelTemplate = ` -
+
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts new file mode 100644 index 00000000000..4c299d0d214 --- /dev/null +++ b/public/app/features/panel/panel_header.ts @@ -0,0 +1,45 @@ +/// + +import angular from 'angular'; +import {coreModule} from 'app/core/core'; + +var template = ` + + + {{ctrl.panel.title | interpolateTemplateVars:this}} + + + + + {{ctrl.timeInfo}} +`; + +/** @ngInject **/ +function panelHeader() { + return { + restrict: 'E', + template: template, + link: function() { + } + }; +} + +coreModule.directive('panelHeader', panelHeader); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index a78753d0944..d6e414610d4 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -16,12 +16,6 @@ function (angular, $, _, Tether) { '{{ctrl.panel.title | interpolateTemplateVars:this}}' + '' + ' {{ctrl.timeInfo}}' + - '' + ''; function createMenuTemplate(ctrl) { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index e3030df387a..57ab4d01aa9 100644 --- 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 // -------------------------------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 438dde22e21..f6acd0a5930 100644 --- 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 // -------------------------------------------------- diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 7b0cbc5fd36..073825b6010 100644 --- 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-left-color: darken($dropdownBackground, 20%); - margin-top: 5px; + border-width: 4px 0 4px 4px; + border-left-color: $text-color-weak; + margin-top: 4px; margin-right: -10px; } .dropdown-submenu:hover > a::after { diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss index 840db839607..0d91cf8074d 100644 --- 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; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 57cf74a9eb1..5547d449bc2 100644 --- 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) // }