Skip to content

N
nexpie-grafana-theme
Commit 28d29668 by Matt
Options

Merge branch 'master' of https://github.com/grafana/grafana into select-form-updates

parents f2486702 92efd179
Showing with 180 additions and 249 deletions
pkg/api/index.go
......@@ -61,9 +61,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 {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
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';
import {sideMenuDirective} from './components/sidemenu/sidemenu';
import {searchDirective} from './components/search/search';
import {popoverDirective} from './components/popover/popover';
import {colorPicker} from './components/colorpicker/colorpicker';
import {navbarDirective} from './components/navbar/navbar';
import {arrayJoin} from './directives/array_join';
import 'app/core/controllers/all';
......@@ -40,5 +41,6 @@ export {
sideMenuDirective,
navbarDirective,
searchDirective,
colorPicker,
popoverDirective
};
public/app/core/services/popover_srv.ts
......@@ -4,45 +4,51 @@ import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import coreModule from 'app/core/core_module';
import Drop from 'tether-drop';
/** @ngInject **/
function popoverSrv($templateCache, $timeout, $q, $http, $compile) {
this.getTemplate = function(url) {
return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
};
function popoverSrv($compile, $rootScope) {
this.show = function(options) {
options.scope.dismiss = function() {
var popover = options.element.data('popover');
if (popover) {
popover.destroy();
}
options.scope.$destroy();
var popoverScope = _.extend($rootScope.$new(true), options.model);
var drop;
function destroyDrop() {
setTimeout(function() {
if (drop.tether) {
drop.destroy();
}
});
}
popoverScope.dismiss = function() {
popoverScope.$destroy();
destroyDrop();
};
this.getTemplate(options.templateUrl).then(function(result) {
$timeout(function() {
var template = _.isString(result) ? result : result.data;
var contentElement = document.createElement('div');
contentElement.innerHTML = options.template;
$compile(contentElement)(popoverScope);
options.element.popover({
content: template,
placement: options.placement || 'bottom',
html: true
});
var popover = options.element.data('popover');
popover.hasContent = function () {
return template;
};
drop = new Drop({
target: options.element,
content: contentElement,
position: options.position,
classes: 'drop-popover',
openOn: options.openOn || 'hover',
hoverCloseDelay: 200,
tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}]
}
});
popover.toggle();
popover.scope = options.scope;
$compile(popover.$tip)(popover.scope);
}, 1);
drop.on('close', () => {
popoverScope.dismiss({fromDropClose: true});
destroyDrop();
});
drop.open();
};
}
......
public/app/features/datasources/partials/edit.html
......@@ -15,11 +15,10 @@
<div class="gf-form">
<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>
<gf-popover offset="0px -85px">
The name is used when you select the data source in panels.
The <code>Default</code> data source is preselected in new
new panels.
panels.
</gf-popover>
<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
......
public/app/partials/colorpicker.html deleted 100644 → 0
<div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row">
<i ng-repeat="color in colors" class="pointer fa fa-circle"
ng-style="{color:color}"
ng-click="colorSelected(color);dismiss();">&nbsp;</i>
</div>
</div>
public/app/partials/edit_json.html
<div ng-controller="JsonEditorCtrl">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-edit"></i>
......@@ -11,12 +10,13 @@
</button>
</div>
<div class="gf-box-body" style="height: 500px">
<textarea ng-model="json" rows="20" spellcheck="false" style="width: 100%;"></textarea>
<br>
<br>
<div class="gf-box-body json-box-body">
<div class="gf-form">
<textarea class="gf-form-input" ng-model="json" rows="20" spellcheck="false"></textarea>
</div>
<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
<div class="gf-form-button-row">
<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
</div>
</div>
</div>
public/app/plugins/panel/graph/legend.js
......@@ -10,7 +10,7 @@ function (angular, _, $) {
var module = angular.module('grafana.directives');
module.directive('graphLegend', function(popoverSrv) {
module.directive('graphLegend', function(popoverSrv, $timeout) {
return {
link: function(scope, elem) {
......@@ -41,13 +41,24 @@ function (angular, _, $) {
var el = $(e.currentTarget).find('.fa-minus');
var index = getSeriesIndexForElement(el);
var seriesInfo = seriesList[index];
var popoverScope = scope.$new();
popoverScope.series = seriesInfo;
popoverSrv.show({
element: el,
templateUrl: 'public/app/plugins/panel/graph/legend.popover.html',
scope: popoverScope
var series = seriesList[index];
$timeout(function() {
popoverSrv.show({
element: el[0],
position: 'bottom center',
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 deleted 100644 → 0
<div class="graph-legend-popover">
<a class="close" ng-click="dismiss();" href="">×</a>
<div class="editor-row" style="padding-bottom: 0;">
<label>Axis:</label>
<button ng-click="ctrl.toggleYAxis(series);dismiss();"
class="btn btn-small"
ng-class="{'btn-success': series.yaxis === 1, 'btn-inverse': series.yaxis === 2}">
Left
</button>
<button ng-click="ctrl.toggleYAxis(series);dismiss();"
class="btn btn-small"
ng-class="{'btn-success': series.yaxis === 2, 'btn-inverse': series.yaxis === 1}">
Right
</button>
</div>
<div class="editor-row">
<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-style="{color:color}"
ng-click="ctrl.changeSeriesColor(series, color);dismiss();">&nbsp;</i>
</div>
</div>
public/app/plugins/panel/graph/module.ts
......@@ -261,13 +261,13 @@ class GraphCtrl extends MetricsPanelCtrl {
}
}
toggleYAxis(info) {
var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias });
toggleAxis(info) {
var override = _.findWhere(this.panel.seriesOverrides, {alias: info.alias});
if (!override) {
override = { alias: info.alias };
this.panel.seriesOverrides.push(override);
}
override.yaxis = info.yaxis === 2 ? 1 : 2;
info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2;
this.render();
};
......
public/app/plugins/panel/graph/seriesOverridesCtrl.js
......@@ -53,22 +53,21 @@ define([
};
$scope.openColorSelector = function() {
var popoverScope = $scope.$new();
popoverScope.colorSelected = $scope.colorSelected;
popoverScope.colors = $scope.ctrl.colors;
popoverSrv.show({
element: $element.find(".dropdown"),
placement: 'top',
templateUrl: 'public/app/partials/colorpicker.html',
scope: popoverScope
element: $element.find(".dropdown")[0],
position: 'top center',
openOn: 'click',
template: '<gf-color-picker></gf-color-picker>',
model: {
colorSelected: $scope.colorSelected,
}
});
};
$scope.removeOverride = function(option) {
delete $scope.override[option.propertyName];
$scope.updateCurrentOverrides();
$scope.ctrl.render();
$scope.ctrl.refresh();
};
$scope.getSeriesNames = function() {
......
public/sass/_grafana.scss
......@@ -56,7 +56,6 @@
@import "components/filter-table";
@import "components/scrollbar";
@import "components/old_stuff";
@import "components/popovers";
@import "components/typeahead";
@import "components/modals";
@import "components/dropdown";
......
public/sass/_variables.dark.scss
......@@ -237,16 +237,10 @@ $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: $link-color;
$popoverBackground: $dropdownBackground;
$popoverArrowWidth: 10px;
$popoverArrowColor: $popoverBackground;
$popoverTitleBackground: $popoverBackground;
// Special enhancement for popovers
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// popover
$popover-bg: $dark-4;
$popover-color: $text-color;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $text-color;
......
public/sass/_variables.light.scss
......@@ -264,16 +264,10 @@ $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: darken($white,11%);
$popoverBackground: $white;
$popoverArrowWidth: 15px;
$popoverArrowColor: $white;
$popoverTitleBackground: $white;
// Special enhancement for popovers
$popoverArrowOuterWidth: $popoverArrowWidth + 1;
$popoverArrowOuterColor: rgba(0,0,0,.25);
// popover
$popover-bg: $dark-4;
$popover-color: $text-color;
$popover-help-bg: $blue-dark;
$popover-help-color: $gray-6;
......
public/sass/_variables.scss
......@@ -192,7 +192,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-popover: 1010;
$zindex-tooltip: 1020;
$zindex-navbar-fixed: 1030;
$zindex-modal-backdrop: 1040;
......
public/sass/components/_dashboard.scss
......@@ -286,3 +286,6 @@ div.flot-text {
}
}
.json-box-body {
min-height: 500px;
}
public/sass/components/_drop.scss
......@@ -25,6 +25,16 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
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("popover", $popover-bg, $popover-color);
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
public/sass/components/_navbar.scss
......@@ -76,7 +76,7 @@
img {
width: 30px;
position: relative;
top: -2px;
top: -1px;
}
.navbar-brand-btn-background {
......
public/sass/components/_panel_graph.scss
......@@ -22,7 +22,7 @@
}
.graph-legend {
margin: 0 20px;
margin: 0 $spacer;
text-align: center;
.popover-content {
......@@ -181,7 +181,6 @@
.graph-legend-popover {
width: 200px;
min-height: 100px;
label {
display: inline-block;
}
......
public/sass/components/_popovers.scss deleted 100644 → 0
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
display: none;
max-width: 480px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: $popoverBackground;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: $popoverTitleBackground;
&:empty {
display: none;
}
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: $popoverArrowOuterWidth;
}
.popover .arrow:after {
border-width: $popoverArrowWidth;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -$popoverArrowOuterWidth;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: $popoverArrowOuterColor;
bottom: -$popoverArrowOuterWidth;
&:after {
bottom: 1px;
margin-left: -$popoverArrowWidth;
border-bottom-width: 0;
border-top-color: $popoverArrowColor;
}
}
&.right .arrow {
top: 50%;
left: -$popoverArrowOuterWidth;
margin-top: -$popoverArrowOuterWidth;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: $popoverArrowOuterColor;
&:after {
left: 1px;
bottom: -$popoverArrowWidth;
border-left-width: 0;
border-right-color: $popoverArrowColor;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -$popoverArrowOuterWidth;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: $popoverArrowOuterColor;
top: -$popoverArrowOuterWidth;
&:after {
top: 1px;
margin-left: -$popoverArrowWidth;
border-top-width: 0;
border-bottom-color: $popoverArrowColor;
}
}
&.left .arrow {
top: 50%;
right: -$popoverArrowOuterWidth;
margin-top: -$popoverArrowOuterWidth;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: $popoverArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: $popoverArrowColor;
bottom: -$popoverArrowWidth;
}
}
}
public/sass/components/_tightform.scss
......@@ -17,6 +17,7 @@
display: inline;
padding-right: 4px;
margin-bottom: 0;
cursor: pointer;
}
}
......
public/sass/mixins/_drop_element.scss
......@@ -10,7 +10,7 @@
font-family: inherit;
background: $theme-bg;
color: $theme-color;
padding: 1em;
padding: $spacer;
font-size: $font-size-sm;
max-width: 20rem;
......
public/test/specs/seriesOverridesCtrl-specs.js
......@@ -20,6 +20,7 @@ define([
// beforeEach(function() {
ctx.scope = $rootScope.$new();
ctx.scope.ctrl = {
refresh: sinon.spy(),
render: sinon.spy(),
seriesList: []
};
......
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