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

feat(panel): worked on panel description tooltip, #6847

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-12-14 17:22:19 +01:00
parent 5f7ad9ddb6
commit 467ddc19c3
3 changed files with 64 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@ function (angular, $, _, Tether) {
'<span class="panel-title drag-handle pointer">' +
'<span class="icon-gf panel-alert-icon"></span>' +
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
'<span class="panel-help-text"><info-popover mode="bold">{{ctrl.panel.helpText}}</info-popover></span>' +
'<span class="panel-help-text"><info-popover mode="bold">{{ctrl.panel.description}}</info-popover></span>' +
'<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
'<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
'</span>';
@@ -104,9 +104,9 @@ function (angular, $, _, Tether) {
$panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
});
$scope.$watch('ctrl.panel.helpText', function(helpText) {
helpText = sanitizeString(helpText);
var showIcon = (helpText ? helpText.length > 0 : false) && ctrl.panel.title !== '';
$scope.$watch('ctrl.panel.description', function(description) {
description = sanitizeString(description);
var showIcon = (description ? description.length > 0 : false) && ctrl.panel.title !== '';
$panelHelpDrop.css({display: showIcon ? 'inline' : 'none'});
});

78
public/app/features/panellinks/module.html
View File

@@ -3,60 +3,44 @@
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
</h5>
<div ng-repeat="link in panel.links" style="margin-top: 20px;">
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink"></i>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper width-14">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
</div>
<div class="gf-form">
<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
<div class="gf-form-group" ng-repeat="link in panel.links">
<div class="section">
<div class="gf-form max-width-25">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper gf-form--grow">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</div>
<div class="gf-form max-width-25">
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input" ng-blur="dashboardChanged(link)">
<div class="gf-form">
<div class="gf-form-label width-7">Title</div>
<input type="text" ng-model="link.title" class="gf-form-input">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Url params</span>
<input type="text" ng-model="link.params" class="gf-form-input">
</div>
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
</div>
<div class="gf-form-inline">
<div class="gf-form width-2">
<i class="fa fa-fw fa-unlink invisible"></i>
</div>
<div class="gf-form max-width-25">
<div class="gf-form-label width-7">Title</div>
<input type="text" ng-model="link.title" class="gf-form-input">
</div>
<div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
</div>
</div>
<div class="section">
<div class="gf-form">
<span class="gf-form-label width-10">Url params</span>
<input type="text" ng-model="link.params" class="gf-form-input width-10">
</div>
<gf-form-switch class="gf-form" label-class="width-10" label="Include time range" checked="link.keepTime"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-10" label="Include variables" checked="link.includeVars"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-10" label="Open in new tab " checked="link.targetBlank"></gf-form-switch>
</div>
<div class="section">
<div class="gf-form">
<button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)"><i class="fa fa-trash"></i> Remove Link</button>
</div>
</div>
</div>

54
public/app/partials/panelgeneral.html
View File

@@ -1,40 +1,44 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Info</h5>
<div class="gf-form">
<span class="gf-form-label width-6">Span</span>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
<span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Height</span>
<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
<div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" placeholder="Panel description, supports markdown & links"></textarea>
</div>
<gf-form-switch class="gf-form" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Repeat Panel</span>
<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
<div class="section gf-form-group">
<h5 class="section-heading">Dimensions</h5>
<div class="gf-form">
<span class="gf-form-label width-7">Span</span>
<select class="gf-form-input width-6" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Min span</span>
<span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
</div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Templating</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Repeat Panel</span>
<dash-repeat-option model="ctrl.panel"></dash-repeat-option>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Min span</span>
<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option>
</select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-42">
<span class="gf-form-label width-8">Help Text</span>
<input type="text" class="gf-form-input width-30" ng-model='ctrl.panel.helpText'></input>
</div>
</div>
</div>
</div>
<panel-links-editor panel="ctrl.panel"></panel-links-editor>
<panel-links-editor panel="ctrl.panel"></panel-links-editor>