IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: panel title ux improvements poc

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-04-11 07:43:40 +02:00
parent 0384eecf5c
commit a47183f740
5 changed files with 69 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/features/panel/panel_menu.js
View File

@@ -11,10 +11,17 @@ function (angular, $, _, Tether) {
.module('grafana.directives')
.directive('panelMenu', function($compile) {
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="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) {
@@ -100,6 +107,9 @@ function (angular, $, _, Tether) {
}
var showMenu = function(e) {
if (true) {
return;
}
// if menu item is clicked and menu was just removed from dom ignore this event
if (!$.contains(document, e.target)) {
return;

3
public/sass/_variables.dark.scss
View File

@@ -89,7 +89,8 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$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-menu-border: solid 1px black;

3
public/sass/_variables.light.scss
View File

@@ -96,7 +96,8 @@ $component-active-bg: $brand-primary !default;
// -------------------------
$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-menu-border: solid 1px white;

2
public/sass/components/_cards.scss
View File

@@ -27,7 +27,7 @@
&:nth-child(2) {
border-radius: 3px 0 0 3px;
border-right: 1px solid $panel-border;
border-right: $panel-border;
}
&:nth-child(1) {

61
public/sass/pages/_dashboard.scss
View File

@@ -55,7 +55,7 @@ div.flot-text {
.panel-title-container {
min-height: 9px;
padding-top: 4px;
padding: 2px 0;
cursor: pointer;
word-wrap: break-word;
}
@@ -69,6 +69,16 @@ div.flot-text {
display: block;
}
.panel-title-caret {
color: $text-color-faint;
margin-left: 10px;
padding: 3px 5px;
&:hover {
background: $dark-4;
}
}
.panel-loading {
position:absolute;
top: -3px;
@@ -78,8 +88,43 @@ div.flot-text {
.panel-header {
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 {
width: 0;
@@ -181,13 +226,13 @@ div.flot-text {
}
}
.panel-highlight {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
}
.panel-hover-highlight {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
}
// .panel-highlight {
// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
// }
//
// .panel-hover-highlight {
// box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
// }
.on-drag-hover {
.panel-container {