From 467ddc19c3f1f6dd767e904230f748b2bb18a5aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 14 Dec 2016 17:22:19 +0100
Subject: [PATCH] feat(panel): worked on panel description tooltip, #6847

---
 public/app/features/panel/panel_menu.js    |  8 +--
 public/app/features/panellinks/module.html | 78 +++++++++-------------
 public/app/partials/panelgeneral.html      | 54 ++++++++-------
 3 files changed, 64 insertions(+), 76 deletions(-)

diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js
index 3524a0c019f..a6a3fa9ae78 100644
--- a/public/app/features/panel/panel_menu.js
+++ b/public/app/features/panel/panel_menu.js
@@ -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'});
           });
 
diff --git a/public/app/features/panellinks/module.html b/public/app/features/panellinks/module.html
index 0cc977f7a9b..96d9b785a1b 100644
--- a/public/app/features/panellinks/module.html
+++ b/public/app/features/panellinks/module.html
@@ -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>
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html
index d86ae54c0de..a69884dc5cc 100644
--- a/public/app/partials/panelgeneral.html
+++ b/public/app/partials/panelgeneral.html
@@ -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>