IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 10:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: more work on panel menu

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-04-11 10:05:30 +02:00
parent a47183f740
commit 702978eff7
11 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/routes/dashboard_loaders.js
View File

@ -34,7 +34,7 @@ function (coreModule) {
rows: [
{
title: 'Dashboard Row',
height: '250px',
height: '350px',
panels:[],
isNew: true,
}

2
public/app/features/dashboard/row/add_panel.ts
View File

@ -78,7 +78,7 @@ export class AddPanelCtrl {
}
addPanel(panelPluginInfo) {
var defaultSpan = 12;
var defaultSpan = 6;
var span = 12 - this.row.span;
var panel = {

2
public/app/features/panel/all.js
View File

@ -1,5 +1,5 @@
define([
'./panel_menu',
'./panel_header',
'./panel_directive',
'./solo_panel_ctrl',
'./query_ctrl',

2
public/app/features/panel/panel_directive.ts
View File

@ -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">

45
public/app/features/panel/panel_header.ts Normal file
View File

@ -0,0 +1,45 @@
///<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);

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

@ -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) {

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

@ -192,6 +192,8 @@ $dropdownLinkColorActive: $white;
$dropdownLinkBackgroundActive: $dark-4;
$dropdownLinkBackgroundHover: $dark-4;
$dropdown-link-color: $gray-3;
// COMPONENT VARIABLES
// --------------------------------------------------

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

@ -204,6 +204,7 @@ $dropdownLinkColorActive: $link-color;
$dropdownLinkBackgroundActive: $gray-6;
$dropdownLinkBackgroundHover: $gray-6;
$dropdown-link-color: $gray-3;
// COMPONENT VARIABLES
// --------------------------------------------------

10
public/sass/components/_dropdown.scss
View File

@ -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 {

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

@ -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;

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

@ -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)
// }