From d6f9ff34ce828a18969415d3c8357f6e98e5c2d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 15:37:22 +0100
Subject: [PATCH] More work on new grap axis & grid edit tab, #1331

---
 .../features/annotations/partials/editor.html |   4 +-
 .../graphite/partials/query.editor.html       |  98 ++++++++--------
 src/app/panels/graph/axisEditor.html          | 111 ++++++++++++------
 src/css/less/grafana.less                     |   7 +-
 4 files changed, 130 insertions(+), 90 deletions(-)

diff --git a/src/app/features/annotations/partials/editor.html b/src/app/features/annotations/partials/editor.html
index b6118f15d63..14208dc2ab2 100644
--- a/src/app/features/annotations/partials/editor.html
+++ b/src/app/features/annotations/partials/editor.html
@@ -53,7 +53,7 @@
 					<label class="small">Datasource</label>
 					<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
 				</div>
-				<div class="editor-option">
+				<div class="editor-option text-center">
 					<label class="small">Icon color</label>
 					<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
 				</div>
@@ -62,7 +62,7 @@
 					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
 				</div>
 				<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
-				<div class="editor-option">
+				<div class="editor-option text-center">
 					<label class="small">Line color</label>
 					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
 				</div>
diff --git a/src/app/features/graphite/partials/query.editor.html b/src/app/features/graphite/partials/query.editor.html
index 8857ab83983..9487106ecdf 100755
--- a/src/app/features/graphite/partials/query.editor.html
+++ b/src/app/features/graphite/partials/query.editor.html
@@ -7,66 +7,68 @@
         ng-init="init()">
 
     <div class="grafana-target-inner">
-      <ul class="grafana-target-controls">
-        <li ng-show="parserError">
+      <ul class="grafana-segment-list pull-right">
+        <li ng-show="parserError" class="grafana-target-segment">
           <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
             <i class="fa fa-warning"></i>
           </a>
         </li>
-        <li>
+        <li class="grafana-target-segment">
           <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
             <i class="fa fa-pencil"></i>
           </a>
         </li>
-        <li class="dropdown">
-          <a  class="pointer dropdown-toggle"
-              data-toggle="dropdown"
-              tabindex="1">
-            <i class="fa fa-bars"></i>
-          </a>
-          <ul class="dropdown-menu pull-right" role="menu">
-            <li role="menuitem">
-              <a  tabindex="1"
-                  ng-click="duplicate()">
-                Duplicate
-              </a>
-            </li>
-						<li role="menuitem">
-              <a  tabindex="1"
-                  ng-click="moveMetricQuery($index, $index-1)">
-                Move up
-              </a>
-            </li>
-						<li role="menuitem">
-							<a  tabindex="1"
-                  ng-click="moveMetricQuery($index, $index+1)">
-                Move down
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-            <i class="fa fa-remove"></i>
-          </a>
-        </li>
-      </ul>
+        <li class="grafana-target-segment">
+					<div class="dropdown">
+						<a  class="pointer dropdown-toggle"
+							data-toggle="dropdown"
+							tabindex="1">
+							<i class="fa fa-bars"></i>
+						</a>
+						<ul class="dropdown-menu pull-right" role="menu">
+							<li role="menuitem">
+								<a  tabindex="1"
+									ng-click="duplicate()">
+									Duplicate
+								</a>
+							</li>
+							<li role="menuitem">
+								<a  tabindex="1"
+									ng-click="moveMetricQuery($index, $index-1)">
+									Move up
+								</a>
+							</li>
+							<li role="menuitem">
+								<a  tabindex="1"
+									ng-click="moveMetricQuery($index, $index+1)">
+									Move down
+								</a>
+							</li>
+						</ul>
+					</div>
+				</li>
+				<li class="grafana-target-segment last">
+					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+						<i class="fa fa-remove"></i>
+					</a>
+				</li>
+			</ul>
 
-      <ul class="grafana-segment-list">
+			<ul class="grafana-segment-list">
 				<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
 					{{targetLetters[$index]}}
-        </li>
-        <li>
-          <a  class="grafana-target-segment"
-              ng-click="target.hide = !target.hide; get_data();"
-              role="menuitem">
-            <i class="fa fa-eye"></i>
-          </a>
-        </li>
-      </ul>
+				</li>
+				<li>
+					<a  class="grafana-target-segment"
+						ng-click="target.hide = !target.hide; get_data();"
+						role="menuitem">
+						<i class="fa fa-eye"></i>
+					</a>
+				</li>
+			</ul>
 
-      <input  type="text"
-              class="grafana-target-text-input span10"
+			<input  type="text"
+			class="grafana-target-text-input span10"
               ng-model="target.target"
               focus-me="showTextEditor"
               spellcheck='false'
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 3bc49e3a1f0..6af8cb5c25a 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -1,10 +1,10 @@
 
 <div class="editor-row">
-  <div class="section">
+	<div class="section" style="margin-bottom: 20px">
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Left Y</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -19,7 +19,7 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.leftMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -27,7 +27,7 @@
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.leftMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -35,7 +35,7 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="text" class="input-small grafana-target-segment-input"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
@@ -43,7 +43,7 @@
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Right Y</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -58,7 +58,7 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.rightMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -66,7 +66,7 @@
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.rightMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -74,15 +74,20 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="text" class="input-small grafana-target-segment-input"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+		</div>
+	</div>
+
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+		<div class="grafana-target-inner">
+			<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Show Axis</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -100,24 +105,17 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-
-		</div>
-	</div>
-</div>
-
-<div class="editor-row" style="margin-top: 20px">
-	<div class="section">
-		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Thresholds</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Level 1
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input">
+						<input type="number" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
@@ -126,56 +124,93 @@
 						Level 2
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input">
+						<input type="number" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 					</li>
 					<li class="grafana-target-segment">
-						Line mode
+						Line mode&nbsp;
+						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
+								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
+						<label for="panel.grid.thresholdLine" class="cr1"></label>
+
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-
 		</div>
 	</div>
 </div>
 
-<div class="editor-row" style="margin-top: 20px">
+<div class="editor-row">
 	<div class="section">
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Legend</strong>
 					</li>
 					<li class="grafana-target-segment">
-						Show: <input type="checkbox">
+						Show&nbsp;
+						<input class="cr1" id="panel.legend.show" type="checkbox"
+						    ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
+						<label for="panel.legend.show" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Table: <input type="checkbox">
+						Table&nbsp;
+						<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
+						    ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
+						<label for="panel.legend.alignAsTable" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Right side: <input type="checkbox">
+						Right side&nbsp;
+						<input class="cr1" id="panel.legend.rightSide" type="checkbox"
+						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
+						<label for="panel.legend.rightSide" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Hide empty: <input type="checkbox">
+						Hide empty&nbsp;
+						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
+						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
+						<label for="panel.legend.hideEmpty" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</div>
+	<div class="section">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 100px">
+						<strong>Legend values</strong>
 					</li>
 					<li class="grafana-target-segment">
-						Min: <input type="checkbox">
+						Min&nbsp;
+						<input class="cr1" id="panel.legend.min" type="checkbox"
+						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render()">
+						<label for="panel.legend.min" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Max: <input type="checkbox">
+						Max&nbsp;
+						<input class="cr1" id="panel.legend.max" type="checkbox"
+						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render()">
+						<label for="panel.legend.max" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Avg: <input type="checkbox">
+						Avg&nbsp;
+						<input class="cr1" id="panel.legend.avg" type="checkbox"
+						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
+						<label for="panel.legend.avg" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Total: <input type="checkbox">
-					</li>
-					<li class="grafana-target-segment">
-						Current: <input type="checkbox">
+						Current&nbsp;
+						<input class="cr1" id="panel.legend.current" type="checkbox"
+						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
+						<label for="panel.legend.total" class="cr1"></label>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index d5dad2c7920..6038356fafb 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -122,7 +122,6 @@
 .grafana-segment-list {
   list-style: none;
   margin: 0;
-  margin-right: 90px;
   >li {
     float: left;
   }
@@ -168,6 +167,9 @@
     padding: 8px 15px;
   }
 
+  &.last {
+    border-right: none;
+  }
 }
 
 .grafana-target-segment-icon {
@@ -243,7 +245,7 @@ input[type=text].grafana-target-text-input {
   border-right: 1px solid @grafanaTargetSegmentBorder;
 }
 
-input[type=text].grafana-target-segment-input {
+[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
   border: none;
   border-right: 1px solid @grafanaTargetSegmentBorder;
   margin: 0px;
@@ -347,6 +349,7 @@ select.grafana-target-segment-input {
   background: inherit;
   border: none;
   color: inherit;
+  padding: 0;
 }
 
 .sp-replacer:hover, .sp-replacer.sp-active {