Skip to content

N
nexpie-grafana-theme
Commit 467ddc19 by Torkel Ödegaard
Options

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

parent 5f7ad9dd
Showing with 45 additions and 57 deletions
public/app/features/panel/panel_menu.js
...@@ -14,7 +14,7 @@ function (angular, $, _, Tether) { ...@@ -14,7 +14,7 @@ function (angular, $, _, Tether) {
'<span class="panel-title drag-handle pointer">' + '<span class="panel-title drag-handle pointer">' +
'<span class="icon-gf panel-alert-icon"></span>' + '<span class="icon-gf panel-alert-icon"></span>' +
'<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</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-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 class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
'</span>'; '</span>';
...@@ -104,9 +104,9 @@ function (angular, $, _, Tether) { ...@@ -104,9 +104,9 @@ function (angular, $, _, Tether) {
$panelLinksBtn.css({display: showIcon ? 'inline' : 'none'}); $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
}); });
$scope.$watch('ctrl.panel.helpText', function(helpText) { $scope.$watch('ctrl.panel.description', function(description) {
helpText = sanitizeString(helpText); description = sanitizeString(description);
var showIcon = (helpText ? helpText.length > 0 : false) && ctrl.panel.title !== ''; var showIcon = (description ? description.length > 0 : false) && ctrl.panel.title !== '';
$panelHelpDrop.css({display: showIcon ? 'inline' : 'none'}); $panelHelpDrop.css({display: showIcon ? 'inline' : 'none'});
}); });
......
public/app/features/panellinks/module.html
...@@ -3,60 +3,44 @@ ...@@ -3,60 +3,44 @@
Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5> Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
</h5> </h5>
<div ng-repeat="link in panel.links" style="margin-top: 20px;"> <div class="gf-form-group" ng-repeat="link in panel.links">
<div class="gf-form-group"> <div class="section">
<div class="gf-form max-width-25">
<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> <span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper width-14"> <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> <select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form max-width-25">
<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span> <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)"> <input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input" ng-blur="dashboardChanged(link)">
<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span> <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"> <input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
</div> </div>
<div class="gf-form"> <div class="gf-form max-width-25">
<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
</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">
<div class="gf-form-label width-7">Title</div> <div class="gf-form-label width-7">Title</div>
<input type="text" ng-model="link.title" class="gf-form-input"> <input type="text" ng-model="link.title" class="gf-form-input">
</div> </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> </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> </div>
<div class="gf-form-inline"> <gf-form-switch class="gf-form" label-class="width-10" label="Include time range" checked="link.keepTime"></gf-form-switch>
<div class="gf-form width-2"> <gf-form-switch class="gf-form" label-class="width-10" label="Include variables" checked="link.includeVars"></gf-form-switch>
<i class="fa fa-fw fa-unlink invisible"></i> <gf-form-switch class="gf-form" label-class="width-10" label="Open in new tab " checked="link.targetBlank"></gf-form-switch>
</div> </div>
<div class="section">
<div class="gf-form"> <div class="gf-form">
<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox> <button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)"><i class="fa fa-trash"></i> Remove Link</button>
<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>
</div> </div>
</div> </div>
......
public/app/partials/panelgeneral.html
<div class="gf-form-group"> <div class="editor-row">
<div class="gf-form-inline"> <div class="section gf-form-group">
<div class="gf-form max-width-21"> <h5 class="section-heading">Info</h5>
<span class="gf-form-label width-8">Title</span> <div class="gf-form">
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input> <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 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>
</div> </div>
<div class="section gf-form-group">
<h5 class="section-heading">Dimensions</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Span</span> <span class="gf-form-label width-7">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> <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>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Height</span> <span class="gf-form-label width-7">Height</span>
<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input> <input type="text" class="gf-form-input width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
</div> </div>
<gf-form-switch class="gf-form" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch> <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>
<div class="gf-form-inline"> <div class="section gf-form-group">
<div class="gf-form max-width-21"> <h5 class="section-heading">Templating</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Repeat Panel</span> <span class="gf-form-label width-8">Repeat Panel</span>
<dash-repeat-option model="ctrl.panel"></dash-repeat-option> <dash-repeat-option model="ctrl.panel"></dash-repeat-option>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Min span</span> <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]"> <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> <option value=""></option>
</select> </select>
</div> </div>
</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>
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