Skip to content

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

ux: panel title ux improvements poc

parent 0384eecf
Showing with 69 additions and 12 deletions
public/app/features/panel/panel_menu.js
...@@ -11,10 +11,17 @@ function (angular, $, _, Tether) { ...@@ -11,10 +11,17 @@ function (angular, $, _, Tether) {
.module('grafana.directives') .module('grafana.directives')
.directive('panelMenu', function($compile) { .directive('panelMenu', function($compile) {
var linkTemplate = var linkTemplate =
'<span class="panel-title drag-handle pointer">' + '<span class="panel-title drag-handle pointer dropdown">' +
'<span class="icon-gf panel-alert-icon"></span>' + '<span class="icon-gf panel-alert-icon"></span>' +
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' + '<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>' + '<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>'; '</span>';
function createMenuTemplate(ctrl) { function createMenuTemplate(ctrl) {
...@@ -100,6 +107,9 @@ function (angular, $, _, Tether) { ...@@ -100,6 +107,9 @@ function (angular, $, _, Tether) {
} }
var showMenu = function(e) { var showMenu = function(e) {
if (true) {
return;
}
// if menu item is clicked and menu was just removed from dom ignore this event // if menu item is clicked and menu was just removed from dom ignore this event
if (!$.contains(document, e.target)) { if (!$.contains(document, e.target)) {
return; return;
......
public/sass/_variables.dark.scss
...@@ -89,7 +89,8 @@ $component-active-bg: $brand-primary !default; ...@@ -89,7 +89,8 @@ $component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $dark-2; $panel-bg: $dark-2;
$panel-border: solid 1px $dark-3; $panel-border-color: $dark-3;
$panel-border: solid 1px $panel-border-color;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black; $panel-menu-border: solid 1px black;
......
public/sass/_variables.light.scss
...@@ -96,7 +96,8 @@ $component-active-bg: $brand-primary !default; ...@@ -96,7 +96,8 @@ $component-active-bg: $brand-primary !default;
// ------------------------- // -------------------------
$panel-bg: $gray-7; $panel-bg: $gray-7;
$panel-border: solid 1px $gray-6; $panel-border-color: $gray-5;
$panel-border: solid 1px $panel-border-color;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white; $panel-menu-border: solid 1px white;
......
public/sass/components/_cards.scss
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
&:nth-child(2) { &:nth-child(2) {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border-right: 1px solid $panel-border; border-right: $panel-border;
} }
&:nth-child(1) { &:nth-child(1) {
......
public/sass/pages/_dashboard.scss
...@@ -55,7 +55,7 @@ div.flot-text { ...@@ -55,7 +55,7 @@ div.flot-text {
.panel-title-container { .panel-title-container {
min-height: 9px; min-height: 9px;
padding-top: 4px; padding: 2px 0;
cursor: pointer; cursor: pointer;
word-wrap: break-word; word-wrap: break-word;
} }
...@@ -69,6 +69,16 @@ div.flot-text { ...@@ -69,6 +69,16 @@ div.flot-text {
display: block; display: block;
} }
.panel-title-caret {
color: $text-color-faint;
margin-left: 10px;
padding: 3px 5px;
&:hover {
background: $dark-4;
}
}
.panel-loading { .panel-loading {
position:absolute; position:absolute;
top: -3px; top: -3px;
...@@ -78,8 +88,43 @@ div.flot-text { ...@@ -78,8 +88,43 @@ div.flot-text {
.panel-header { .panel-header {
text-align: center; text-align: center;
&:hover {
background: $side-menu-bg;
.panel-title-caret {
color: $text-color;
}
}
} }
.panel-dropdown-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;
font-size: $font-size-sm;
padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg;
i {
display: inline-block;
padding-right: $spacer/2;
}
&:hover {
@include left-brand-border-gradient();
color: $link-color;
background: $input-label-bg;
}
}
}
.panel-info-corner-inner { .panel-info-corner-inner {
width: 0; width: 0;
...@@ -181,13 +226,13 @@ div.flot-text { ...@@ -181,13 +226,13 @@ div.flot-text {
} }
} }
.panel-highlight { // .panel-highlight {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8) // box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
} // }
//
.panel-hover-highlight { // .panel-hover-highlight {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5) // box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
} // }
.on-drag-hover { .on-drag-hover {
.panel-container { .panel-container {
......
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