Skip to content

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

ux(color popover): refactored color popover to use drop lib

parent 3231d767
Showing with 162 additions and 52 deletions
pkg/api/index.go
...@@ -59,9 +59,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -59,9 +59,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}, },
}) })
// data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"})
// data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"})
if c.OrgRole == m.ROLE_ADMIN { if c.OrgRole == m.ROLE_ADMIN {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Data Sources", Text: "Data Sources",
......
public/app/core/components/colorpicker/colorpicker.ts 0 → 100644
///<reference path="../../../headers/common.d.ts" />
import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import coreModule from 'app/core/core_module';
var template = `
<div class="graph-legend-popover">
<a class="drop-popopver-close" ng-click="ctrl.close();" href="" ng-hide="ctrl.autoClose">
<i class="fa fa-times-circle"></i>
</a>
<div ng-show="ctrl.series" class="p-b-1">
<label>Y Axis:</label>
<button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
ng-class="{'btn-success': ctrl.series.yaxis === 1,
'btn-inverse': ctrl.series.yaxis === 2}">
Left
</button>
<button ng-click="ctrl.toggleAxis(yaxis);"
class="btn btn-small"
ng-class="{'btn-success': ctrl.series.yaxis === 2,
'btn-inverse': ctrl.series.yaxis === 1}">
Right
</button>
</div>
<p class="m-b-0">
<i ng-repeat="color in ctrl.colors" class="pointer fa fa-circle"
ng-style="{color:color}"
ng-click="ctrl.colorSelected(color);">&nbsp;</i>
</p>
</div>
`;
export class ColorPickerCtrl {
colors: any;
autoClose: boolean;
series: any;
showAxisControls: boolean;
/** @ngInject */
constructor(private $scope, private $rootScope) {
this.colors = $rootScope.colors;
this.autoClose = $scope.autoClose;
this.series = $scope.series;
}
toggleAxis(yaxis) {
this.$scope.toggleAxis();
if (!this.$scope.autoClose) {
this.$scope.dismiss();
}
}
colorSelected(color) {
this.$scope.colorSelected(color);
if (!this.$scope.autoClose) {
this.$scope.dismiss();
}
}
close() {
this.$scope.dismiss();
}
}
export function colorPicker() {
return {
restrict: 'E',
controller: ColorPickerCtrl,
bindToController: true,
controllerAs: 'ctrl',
template: template,
};
}
coreModule.directive('gfColorPicker', colorPicker);
public/app/core/core.ts
...@@ -25,6 +25,7 @@ import {grafanaAppDirective} from './components/grafana_app'; ...@@ -25,6 +25,7 @@ import {grafanaAppDirective} from './components/grafana_app';
import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {sideMenuDirective} from './components/sidemenu/sidemenu';
import {searchDirective} from './components/search/search'; import {searchDirective} from './components/search/search';
import {popoverDirective} from './components/popover/popover'; import {popoverDirective} from './components/popover/popover';
import {colorPicker} from './components/colorpicker/colorpicker';
import {navbarDirective} from './components/navbar/navbar'; import {navbarDirective} from './components/navbar/navbar';
import {arrayJoin} from './directives/array_join'; import {arrayJoin} from './directives/array_join';
import 'app/core/controllers/all'; import 'app/core/controllers/all';
...@@ -40,5 +41,6 @@ export { ...@@ -40,5 +41,6 @@ export {
sideMenuDirective, sideMenuDirective,
navbarDirective, navbarDirective,
searchDirective, searchDirective,
colorPicker,
popoverDirective popoverDirective
}; };
public/app/core/services/popover_srv.ts
...@@ -7,40 +7,48 @@ import coreModule from 'app/core/core_module'; ...@@ -7,40 +7,48 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop'; import Drop from 'tether-drop';
/** @ngInject **/ /** @ngInject **/
function popoverSrv($templateCache, $timeout, $q, $http, $compile) { function popoverSrv($compile, $rootScope) {
this.getTemplate = function(url) {
return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
};
this.show = function(options) { this.show = function(options) {
var popoverScope = _.extend($rootScope.$new(true), options.model);
var drop;
options.scope.dismiss = function() { function destroyDrop() {
var popover = options.element.data('popover'); setTimeout(function() {
if (popover) { if (drop.tether) {
popover.destroy(); drop.destroy();
} }
options.scope.$destroy(); });
}
popoverScope.dismiss = function() {
popoverScope.$destroy();
destroyDrop();
}; };
this.getTemplate(options.templateUrl).then(function(result) { var contentElement = document.createElement('div');
$timeout(function() { contentElement.innerHTML = options.template;
var template = _.isString(result) ? result : result.data;
var drop = new Drop({ $compile(contentElement)(popoverScope);
target: options.element[0],
content: template, drop = new Drop({
position: 'bottom top', target: options.element,
classes: 'drop-help', content: contentElement,
openOn: 'click', position: options.position,
classes: 'drop-popover',
openOn: options.openOn || 'hover',
hoverCloseDelay: 200,
tetherOptions: { tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}]
} }
}); });
drop.open(); drop.on('close', () => {
//$compile(popover.$tip)(popover.scope); popoverScope.dismiss({fromDropClose: true});
}, 1); destroyDrop();
}); });
drop.open();
}; };
} }
......
public/app/features/datasources/partials/edit.html
...@@ -15,11 +15,10 @@ ...@@ -15,11 +15,10 @@
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Name</span> <span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required> <input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
<gf-popover offset="0px -85px"> <gf-popover offset="0px -85px">
The name is used when you select the data source in panels. The name is used when you select the data source in panels.
The <code>Default</code> data source is preselected in new The <code>Default</code> data source is preselected in new
new panels. panels.
</gf-popover> </gf-popover>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox> <editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
......
public/app/plugins/panel/graph/legend.js
...@@ -10,7 +10,7 @@ function (angular, _, $) { ...@@ -10,7 +10,7 @@ function (angular, _, $) {
var module = angular.module('grafana.directives'); var module = angular.module('grafana.directives');
module.directive('graphLegend', function(popoverSrv) { module.directive('graphLegend', function(popoverSrv, $timeout) {
return { return {
link: function(scope, elem) { link: function(scope, elem) {
...@@ -41,13 +41,24 @@ function (angular, _, $) { ...@@ -41,13 +41,24 @@ function (angular, _, $) {
var el = $(e.currentTarget).find('.fa-minus'); var el = $(e.currentTarget).find('.fa-minus');
var index = getSeriesIndexForElement(el); var index = getSeriesIndexForElement(el);
var seriesInfo = seriesList[index]; var series = seriesList[index];
var popoverScope = scope.$new();
popoverScope.series = seriesInfo; $timeout(function() {
popoverSrv.show({ popoverSrv.show({
element: el, element: el[0],
templateUrl: 'public/app/plugins/panel/graph/legend.popover.html', position: 'bottom center',
scope: popoverScope template: '<gf-color-picker></gf-color-picker>',
model: {
autoClose: true,
series: series,
toggleAxis: function() {
ctrl.toggleAxis(series);
},
colorSelected: function(color) {
ctrl.changeSeriesColor(series, color);
}
},
});
}); });
} }
......
public/app/plugins/panel/graph/legend.popover.html
<div class="graph-legend-popover"> <div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row" style="padding-bottom: 0;"> <div class="editor-row" style="padding-bottom: 0;">
<label>Axis:</label> <label>Axis:</label>
<button ng-click="ctrl.toggleYAxis(series);dismiss();" <button ng-click="ctrl.toggleYAxis(series);dismiss();"
...@@ -19,7 +17,7 @@ ...@@ -19,7 +17,7 @@
<i ng-repeat="color in ctrl.colors" class="pointer" <i ng-repeat="color in ctrl.colors" class="pointer"
ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}" ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}"
ng-style="{color:color}" ng-style="{color:color}"
ng-click="ctrl.changeSeriesColor(series, color);dismiss();">&nbsp;</i> ng-click="ctrl.changeSeriesColor(series, color);">&nbsp;</i>
</div> </div>
</div> </div>
public/app/plugins/panel/graph/module.ts
...@@ -261,13 +261,13 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -261,13 +261,13 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
} }
toggleYAxis(info) { toggleAxis(info) {
var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias }); var override = _.findWhere(this.panel.seriesOverrides, {alias: info.alias});
if (!override) { if (!override) {
override = { alias: info.alias }; override = { alias: info.alias };
this.panel.seriesOverrides.push(override); this.panel.seriesOverrides.push(override);
} }
override.yaxis = info.yaxis === 2 ? 1 : 2; info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2;
this.render(); this.render();
}; };
......
public/app/plugins/panel/graph/seriesOverridesCtrl.js
...@@ -53,22 +53,21 @@ define([ ...@@ -53,22 +53,21 @@ define([
}; };
$scope.openColorSelector = function() { $scope.openColorSelector = function() {
var popoverScope = $scope.$new();
popoverScope.colorSelected = $scope.colorSelected;
popoverScope.colors = $scope.ctrl.colors;
popoverSrv.show({ popoverSrv.show({
element: $element.find(".dropdown"), element: $element.find(".dropdown")[0],
placement: 'top', position: 'top center',
templateUrl: 'public/app/partials/colorpicker.html', openOn: 'click',
scope: popoverScope template: '<gf-color-picker></gf-color-picker>',
model: {
colorSelected: $scope.colorSelected,
}
}); });
}; };
$scope.removeOverride = function(option) { $scope.removeOverride = function(option) {
delete $scope.override[option.propertyName]; delete $scope.override[option.propertyName];
$scope.updateCurrentOverrides(); $scope.updateCurrentOverrides();
$scope.ctrl.render(); $scope.ctrl.refresh();
}; };
$scope.getSeriesNames = function() { $scope.getSeriesNames = function() {
......
public/sass/_variables.dark.scss
...@@ -247,6 +247,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1; ...@@ -247,6 +247,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25); $popoverArrowOuterColor: rgba(0,0,0,.25);
// popover // popover
$popover-bg: $dark-4;
$popover-color: $text-color;
$popover-help-bg: $btn-secondary-bg; $popover-help-bg: $btn-secondary-bg;
$popover-help-color: $text-color; $popover-help-color: $text-color;
......
public/sass/_variables.light.scss
...@@ -274,6 +274,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1; ...@@ -274,6 +274,9 @@ $popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25); $popoverArrowOuterColor: rgba(0,0,0,.25);
// popover // popover
$popover-bg: $dark-4;
$popover-color: $text-color;
$popover-help-bg: $blue-dark; $popover-help-bg: $blue-dark;
$popover-help-color: $gray-6; $popover-help-color: $gray-6;
......
public/sass/components/_drop.scss
...@@ -25,6 +25,16 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); ...@@ -25,6 +25,16 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
box-sizing: border-box; box-sizing: border-box;
} }
.drop-popopver-close {
position: absolute;
top: -5px;
right: 0;
font-size: $font-size-lg;
}
@include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-theme("help", $popover-help-bg, $popover-help-color);
@include drop-theme("popover", $popover-bg, $popover-color);
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
public/sass/components/_panel_graph.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
} }
.graph-legend { .graph-legend {
margin: 0 20px; margin: 0 $spacer;
text-align: center; text-align: center;
.popover-content { .popover-content {
...@@ -181,7 +181,6 @@ ...@@ -181,7 +181,6 @@
.graph-legend-popover { .graph-legend-popover {
width: 200px; width: 200px;
min-height: 100px;
label { label {
display: inline-block; display: inline-block;
} }
......
public/sass/mixins/_drop_element.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
font-family: inherit; font-family: inherit;
background: $theme-bg; background: $theme-bg;
color: $theme-color; color: $theme-color;
padding: 1em; padding: $spacer;
font-size: $font-size-sm; font-size: $font-size-sm;
max-width: 20rem; max-width: 20rem;
......
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