From a8f4b0227f310632ef2242da1de387fe3b70d789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 10 Apr 2016 14:58:52 -0400
Subject: [PATCH] fix(graph): Fixed issue with legend height in table mode with
 few series, affected iframe embedding as well, fixes #4640

---
 CHANGELOG.md                                  |  2 +-
 public/app/core/components/switch.ts          |  4 +-
 .../dashboard/partials/shareModal.html        | 52 +++++++++----------
 public/app/plugins/panel/graph/legend.js      |  4 +-
 public/sass/components/_modals.scss           |  6 +--
 5 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0741e2e0ec..8e77be6b6f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,7 @@
 * **Graph Panel**: Fixed issue with axis labels overlapping Y-axis, fixes [#4626](https://github.com/grafana/grafana/issues/4626)
 * **InfluxDB**: Fixed issue with templating query containing template variable, fixes [#4602](https://github.com/grafana/grafana/issues/4602)
 * **Graph Panel**: Fixed issue with hiding series and stacking, fixes [#4557](https://github.com/grafana/grafana/issues/4557)
-* **Mixed Datasources**: Fixed issue with mixing many datasources in same graph, fixes [#4604](https://github.com/grafana/grafana/issues/4604)
+* **Graph Panel**: Fixed issue with legend height in table mode with few series, affected iframe embedding as well, fixes [#4640](https://github.com/grafana/grafana/issues/4640)
 
 # 3.0.0-beta2 (2016-04-04)
 
diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index 1dddae20d49..10211b5b914 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -21,14 +21,14 @@ export class SwitchCtrl {
   id: any;
 
   /** @ngInject */
-  constructor($scope) {
+  constructor($scope, private $timeout) {
     this.show = true;
     this.id = $scope.$id;
   }
 
   internalOnChange() {
     return new Promise(resolve => {
-      setTimeout(() => {
+      this.$timeout(() => {
         this.onChange();
         resolve();
       });
diff --git a/public/app/features/dashboard/partials/shareModal.html b/public/app/features/dashboard/partials/shareModal.html
index 41c08fede0b..c8462c7bffc 100644
--- a/public/app/features/dashboard/partials/shareModal.html
+++ b/public/app/features/dashboard/partials/shareModal.html
@@ -38,31 +38,26 @@
 
 	<div ng-include src="'shareLinkOptions.html'"></div>
 
-	<div class="gf-form-group position-center">
-		<div class="gf-form width-30" >
+	<div class="gf-form-group section">
+		<div class="gf-form width-30">
 			<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
 		</div>
 	</div>
-	<div class="gf-form-group">
-		<div class="gf-form position-center">
-			<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
-		</div>
-	</div>
 </script>
 
 <script type="text/ng-template" id="shareLinkOptions.html">
-	<div class="gf-form-group position-center">
+	<div class="gf-form-group section">
+		<gf-form-switch class="gf-form"
+			label="Current time range" label-class="width-12" switch-class="max-width-6"
+			checked="options.forCurrent" on-change="buildUrl()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="Template variables" label-class="width-12" switch-class="max-width-6"
+			checked="options.includeTemplateVars" on-change="buildUrl()">
+		</gf-form-switch>
 		<div class="gf-form">
-			<span class="gf-form-label width-5">Include</span>
-			<editor-checkbox text="Current time range" model="options.forCurrent" change="buildUrl()"></editor-checkbox>
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-5">Include</span>
-			<editor-checkbox text="Template variables" model="options.includeTemplateVars" change="buildUrl()"></editor-checkbox>
-		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-5">Theme</span>
-			<div class="gf-form-select-wrapper max-width-10">
+			<span class="gf-form-label width-12">Theme</span>
+			<div class="gf-form-select-wrapper width-6">
 				<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
 			</div>
 		</div>
@@ -75,18 +70,19 @@
 	</div>
 
 	<div ng-include src="'shareLinkOptions.html'"></div>
-	<div class="gf-form-group position-center">
-		<div class="gf-form-inline">
-
-			<div class="gf-form width-30">
-				<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
-			</div>
-			<div class="gf-form pull-right">
-				<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+	<div>
+		<div class="gf-form-group section">
+			<div class="gf-form-inline">
+				<div class="gf-form width-30">
+					<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
+				</div>
+				<div class="gf-form pull-right">
+					<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div class="gf-form position-center" ng-show="modeSharePanel">
+	<div class="gf-form section" ng-show="modeSharePanel">
 		<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
 	</div>
 </script>
@@ -117,7 +113,7 @@
 			</p>
 		</div>
 
-		<div class="gf-form-group share-modal-options position-center">
+		<div class="gf-form-group share-modal-options">
 			<div class="gf-form" ng-if="step === 1">
 				<span class="gf-form-label width-12">Snapshot name</span>
 				<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js
index 4cad3c16844..5d9e1c24872 100644
--- a/public/app/plugins/panel/graph/legend.js
+++ b/public/app/plugins/panel/graph/legend.js
@@ -194,9 +194,9 @@ function (angular, _, $) {
             }
 
             var topPadding = 6;
-            $container.css("height", maxHeight - topPadding);
+            $container.css("max-height", maxHeight - topPadding);
           } else {
-            $container.css("height", "");
+            $container.css("max-height", "");
           }
         }
       }
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index c71302f34f1..357840062eb 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -127,6 +127,7 @@
 
   .share-modal-options {
     margin: 11px 20px 33px 20px;
+    display: inline-block;
   }
 
   .share-modal-big-icon {
@@ -162,8 +163,3 @@
   }
 }
 
-.modal-body {
-  .position-center {
-    display: inline-block;
-  }
-}