Starting css refactor for grafana-target

CHANGELOG.md

@@ -12,6 +12,7 @@
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
 - [Issue #1309](https://github.com/grafana/grafana/issues/1309). Graph: Fixed issue when using zero as a grid threshold
+- [Issue #1345](https://github.com/grafana/grafana/issues/1345). UI: Fixed position of confirm modal when scrolled down
 
 **Tech**
 - [Issue #1311](https://github.com/grafana/grafana/issues/1311). Tech: Updated Font-Awesome from 3.2 to 4.2

src/app/features/influxdb/partials/query.editor.html

@@ -5,180 +5,175 @@
         ng-class="{'grafana-target-hidden': target.hide}"
         ng-controller="InfluxQueryCtrl"
         ng-init="init()">
-
-    <div class="grafana-target-inner-wrapper">
-      <div class="grafana-target-inner">
-				<ul class="grafana-segment-list pull-right">
-					<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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
-								<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</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">
-					<li>
-						<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
-							<i class="fa fa-eye"></i>
+    <div class="grafana-target-inner">
+			<ul class="grafana-segment-list pull-right">
+				<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>
-          </li>
-        </ul>
+						<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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</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>
 
-				<!-- Raw Query mode  -->
-				<ul class="grafana-segment-list" ng-show="target.rawQuery">
-					<li>
-						<input type="text"
-               class="grafana-target-segment-input span10"
-               ng-model="target.query"
-               placeholder="select ..."
-               focus-me="target.rawQuery"
-               spellcheck='false'
-               data-min-length=0 data-items=100
-               ng-model-onblur
-							 ng-blur="get_data()">
-					</li>
-				</ul>
+			<ul class="grafana-segment-list">
+				<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>
 
-				<!-- Query editor mode -->
-        <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-					<li class="grafana-target-segment">
-						series
-					</li>
-          <li>
-            <input type="text"
-                   class="grafana-target-segment-input span8"
-                   ng-model="target.series"
-                   spellcheck='false'
-                   bs-typeahead="listSeries"
-                   match-all="true"
-                   min-length="3"
-                   placeholder="series name"
-                   data-min-length=0 data-items=100
-                   ng-blur="seriesBlur()">
-          </li>
+			<!-- Raw Query mode  -->
+			<ul class="grafana-segment-list" ng-show="target.rawQuery">
+				<li>
+					<input type="text"
+             class="grafana-target-segment-input span10"
+             ng-model="target.query"
+             placeholder="select ..."
+             focus-me="target.rawQuery"
+             spellcheck='false'
+             data-min-length=0 data-items=100
+             ng-model-onblur
+						 ng-blur="get_data()">
+				</li>
+			</ul>
 
-					<li class="grafana-target-segment">
-						alias
-					</li>
+			<!-- Query editor mode -->
+      <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
+				<li class="grafana-target-segment">
+					series
+				</li>
+        <li>
+          <input type="text"
+                 class="grafana-target-segment-input span8"
+                 ng-model="target.series"
+                 spellcheck='false'
+                 bs-typeahead="listSeries"
+                 match-all="true"
+                 min-length="3"
+                 placeholder="series name"
+                 data-min-length=0 data-items=100
+                 ng-blur="seriesBlur()">
+        </li>
 
-					<li>
-						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
-						spellcheck='false' placeholder="alias" ng-blur="get_data()">
-					</li>
+				<li class="grafana-target-segment">
+					alias
+				</li>
 
-        </ul>
+				<li>
+					<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
+					spellcheck='false' placeholder="alias" ng-blur="get_data()">
+				</li>
 
-        <div class="clearfix"></div>
-      </div>
+      </ul>
 
-      <div class="grafana-target-inner">
-				<!-- Raw Query mode  -->
-				<ul class="grafana-segment-list" ng-show="target.rawQuery">
-					<li class="grafana-target-segment">
-						<i class="fa fa-eye invisible"></i>
-					</li>
-					<li class="grafana-target-segment">
-            alias
-          </li>
-          <li>
-            <input type="text"
-                   class="input-medium grafana-target-segment-input"
-                   ng-model="target.alias"
-                   spellcheck='false'
-                   placeholder="alias"
-                   ng-blur="get_data()">
-          </li>
-					<li class="grafana-target-segment">
-						group by time
-					</li>
-					<li>
-						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
-									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-									 ng-model-onblur ng-change="get_data()" >
-					</li>
-				</ul>
+      <div class="clearfix"></div>
+    </div>
 
-				<!-- Query editor mode -->
-        <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-					<li class="grafana-target-segment">
-						<i class="fa fa-eye invisible"></i>
-					</li>
-					<li class="grafana-target-segment">
-						select
-					</li>
-					<li class="dropdown">
-						<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
-						</span>
-					</li>
+    <div class="grafana-target-inner">
+			<!-- Raw Query mode  -->
+			<ul class="grafana-segment-list" ng-show="target.rawQuery">
+				<li class="grafana-target-segment">
+					<i class="fa fa-eye invisible"></i>
+				</li>
+				<li class="grafana-target-segment">
+          alias
+        </li>
+        <li>
+          <input type="text"
+                 class="input-medium grafana-target-segment-input"
+                 ng-model="target.alias"
+                 spellcheck='false'
+                 placeholder="alias"
+                 ng-blur="get_data()">
+        </li>
+				<li class="grafana-target-segment">
+					group by time
+				</li>
+				<li>
+					<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
+								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
+								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+								 ng-model-onblur ng-change="get_data()" >
+				</li>
+			</ul>
 
-					<li class="grafana-target-segment">
-						where
-					</li>
-					<li>
-						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
-									 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
-					</li>
+			<!-- Query editor mode -->
+      <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
+				<li class="grafana-target-segment">
+					<i class="fa fa-eye invisible"></i>
+				</li>
+				<li class="grafana-target-segment">
+					select
+				</li>
+				<li class="dropdown">
+					<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
+					</span>
+				</li>
 
-					<li class="grafana-target-segment">
-						group by time
-					</li>
-					<li>
-						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
-									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-									 ng-model-onblur ng-change="get_data()" >
-					</li>
+				<li class="grafana-target-segment">
+					where
+				</li>
+				<li>
+					<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
+								 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
+				</li>
 
-					<li class="grafana-target-segment">
-						and
-					</li>
+				<li class="grafana-target-segment">
+					group by time
+				</li>
+				<li>
+					<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
+								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
+								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+								 ng-model-onblur ng-change="get_data()" >
+				</li>
 
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
-									 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
-					</li>
+				<li class="grafana-target-segment">
+					and
+				</li>
 
-					<li class="dropdown">
-						<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
-							<span ng-show="target.fill">
-								fill ({{target.fill}})
-							</span>
-							<span ng-show="!target.fill">
-								no fill
-							</span>
-					  </a>
-						<ul class="dropdown-menu">
-							<li><a ng-click="target.fill = ''">no fill</a></li>
-							<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
-							<li><a ng-click="target.fill = '0'">fill (0)</a></li>
-						</ul>
-					</li>
+				<li>
+					<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
+								 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
+				</li>
 
-        </ul>
+				<li class="dropdown">
+					<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
+						<span ng-show="target.fill">
+							fill ({{target.fill}})
+						</span>
+						<span ng-show="!target.fill">
+							no fill
+						</span>
+				  </a>
+					<ul class="dropdown-menu">
+						<li><a ng-click="target.fill = ''">no fill</a></li>
+						<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
+						<li><a ng-click="target.fill = '0'">fill (0)</a></li>
+					</ul>
+				</li>
 
-        <div class="clearfix"></div>
-      </div>
+      </ul>
 
+      <div class="clearfix"></div>
     </div>
   </div>
-
 </div>
 
 <section class="grafana-metric-options">

src/app/features/opentsdb/partials/query.editor.html

@@ -4,216 +4,213 @@
         ng-class="{'grafana-target-hidden': target.hide}"
         ng-controller="OpenTSDBQueryCtrl"
         ng-init="init()">
+    <div class="grafana-target-inner">
+			<ul class="grafana-segment-list pull-right">
+				<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>
+						</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>
 
-    <div class="grafana-target-inner-wrapper">
-      <div class="grafana-target-inner">
-				<ul class="grafana-segment-list pull-right">
-					<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>
-							</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">
-          <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>
+      <ul class="grafana-segment-list">
+        <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>
 
-        <ul class="grafana-segment-list" role="menu">
-          <li>
-            <input type="text"
-                   class="grafana-target-segment-input"
-                   ng-model="target.metric"
-                   spellcheck='false'
-                   bs-typeahead="suggestMetrics"
-                   placeholder="metric name"
-                   data-min-length=0 data-items=100
-                   ng-blur="targetBlur()"
-                   >
-            <a bs-tooltip="target.errors.metric"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.metric">
-              <i class="fa fa-warning"></i>
-            </a>
-          </li>
-					<li class="grafana-target-segment">
-            Aggregator
-          </li>
-          <li>
-            <select ng-model="target.aggregator"
-                    class="grafana-target-segment-input input-small"
-                    ng-options="agg for agg in aggregators"
-                    ng-change="targetBlur()">
-            </select>
-            <a bs-tooltip="target.errors.aggregator"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.aggregator">
-              <i class="fa fa-warning"></i>
-            </a>
-          </li>
+      <ul class="grafana-segment-list" role="menu">
+        <li>
+          <input type="text"
+                 class="grafana-target-segment-input"
+                 ng-model="target.metric"
+                 spellcheck='false'
+                 bs-typeahead="suggestMetrics"
+                 placeholder="metric name"
+                 data-min-length=0 data-items=100
+                 ng-blur="targetBlur()"
+                 >
+          <a bs-tooltip="target.errors.metric"
+             style="color: rgb(229, 189, 28)"
+             ng-show="target.errors.metric">
+            <i class="fa fa-warning"></i>
+          </a>
+        </li>
+				<li class="grafana-target-segment">
+          Aggregator
+        </li>
+        <li>
+          <select ng-model="target.aggregator"
+                  class="grafana-target-segment-input input-small"
+                  ng-options="agg for agg in aggregators"
+                  ng-change="targetBlur()">
+          </select>
+          <a bs-tooltip="target.errors.aggregator"
+             style="color: rgb(229, 189, 28)"
+             ng-show="target.errors.aggregator">
+            <i class="fa fa-warning"></i>
+          </a>
+        </li>
 
-          <li class="grafana-target-segment">
-              Rate:
-              <input type="checkbox"
-                     class="grafana-target-option-checkbox"
-                     ng-model="target.shouldComputeRate"
-                     ng-change="targetBlur()"
-                     >
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
-            Counter:
+        <li class="grafana-target-segment">
+            Rate:
             <input type="checkbox"
                    class="grafana-target-option-checkbox"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.isCounter"
-                   ng-change="targetBlur()">
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.isCounter">
-            Counter Max:
-          </li>
-          <li ng-hide="!target.isCounter">
-            <input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.counterMax"
-                   spellcheck='false'
-                   placeholder="Counter max value"
-                   ng-blur="targetBlur()"
-                   />
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.isCounter">
-            Counter Reset Value:
-          </li>
-          <li ng-hide="!target.isCounter">
-            <input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.counterResetValue"
-                   spellcheck='false'
-                   placeholder="Counter reset value"
-                   ng-blur="targetBlur()"
-                   />
-          </li>
-          <li class="grafana-target-segment">
-            Alias:
-          </li>
-					<li>
-						<input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-model="target.alias"
-                   spellcheck='false'
-                   placeholder="series alias"
-                   data-min-length=0 data-items=100
-                   ng-blur="targetBlur()"
-                   />
-          </li>
+                   ng-model="target.shouldComputeRate"
+                   ng-change="targetBlur()"
+                   >
+        </li>
+        <li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
+          Counter:
+          <input type="checkbox"
+                 class="grafana-target-option-checkbox"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.isCounter"
+                 ng-change="targetBlur()">
+        </li>
+        <li class="grafana-target-segment" ng-hide="!target.isCounter">
+          Counter Max:
+        </li>
+        <li ng-hide="!target.isCounter">
+          <input type="text"
+                 class="grafana-target-segment-input input-medium"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.counterMax"
+                 spellcheck='false'
+                 placeholder="Counter max value"
+                 ng-blur="targetBlur()"
+                 />
+        </li>
+        <li class="grafana-target-segment" ng-hide="!target.isCounter">
+          Counter Reset Value:
+        </li>
+        <li ng-hide="!target.isCounter">
+          <input type="text"
+                 class="grafana-target-segment-input input-medium"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.counterResetValue"
+                 spellcheck='false'
+                 placeholder="Counter reset value"
+                 ng-blur="targetBlur()"
+                 />
+        </li>
+        <li class="grafana-target-segment">
+          Alias:
+        </li>
+				<li>
+					<input type="text"
+                 class="grafana-target-segment-input input-medium"
+                 ng-model="target.alias"
+                 spellcheck='false'
+                 placeholder="series alias"
+                 data-min-length=0 data-items=100
+                 ng-blur="targetBlur()"
+                 />
+        </li>
 
-        </ul>
+      </ul>
 
-        <div class="clearfix"></div>
-      </div>
+      <div class="clearfix"></div>
+    </div>
 
-      <div class="grafana-target-inner">
-        <ul class="grafana-segment-list" role="menu">
+    <div class="grafana-target-inner">
+      <ul class="grafana-segment-list" role="menu">
 
-          <li class="grafana-target-segment">
-            Downsample:
-            <input type="checkbox"
-                   class="grafana-target-option-checkbox"
-                   ng-model="target.shouldDownsample"
-                   ng-change="targetBlur(target)"
-                   >
-          </li>
+        <li class="grafana-target-segment">
+          Downsample:
+          <input type="checkbox"
+                 class="grafana-target-option-checkbox"
+                 ng-model="target.shouldDownsample"
+                 ng-change="targetBlur(target)"
+                 >
+        </li>
 
-          <li ng-hide="!target.shouldDownsample">
-            <input type="text"
-                   class="input-small grafana-target-segment-input"
-                   ng-disabled="!target.shouldDownsample"
-                   ng-model="target.downsampleInterval"
-                   ng-change="targetBlur()"
-                   placeholder="interval"
-                   >
-          </li>
+        <li ng-hide="!target.shouldDownsample">
+          <input type="text"
+                 class="input-small grafana-target-segment-input"
+                 ng-disabled="!target.shouldDownsample"
+                 ng-model="target.downsampleInterval"
+                 ng-change="targetBlur()"
+                 placeholder="interval"
+                 >
+        </li>
 
-          <li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
-            Aggregator
-          </li>
+        <li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
+          Aggregator
+        </li>
 
-          <li ng-hide="!target.shouldDownsample">
-            <select ng-model="target.downsampleAggregator"
-                    class="grafana-target-segment-input input-small"
-                    ng-options="agg for agg in aggregators"
-                    ng-change="targetBlur()">
-            </select>
-          </li>
+        <li ng-hide="!target.shouldDownsample">
+          <select ng-model="target.downsampleAggregator"
+                  class="grafana-target-segment-input input-small"
+                  ng-options="agg for agg in aggregators"
+                  ng-change="targetBlur()">
+          </select>
+        </li>
 
-          <li class="grafana-target-segment">
-              Tags:
-          </li>
-          <li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
-            {{key}}&nbsp;=&nbsp;{{value}}
-            <a ng-click="removeTag(key)">
-              <i class="fa fa-remove"></i>
-            </a>
-          </li>
+        <li class="grafana-target-segment">
+            Tags:
+        </li>
+        <li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
+          {{key}}&nbsp;=&nbsp;{{value}}
+          <a ng-click="removeTag(key)">
+            <i class="fa fa-remove"></i>
+          </a>
+        </li>
+
+        <li class="grafana-target-segment" ng-hide="addTagMode">
+          <a ng-click="addTag()">
+            <i class="fa fa-plus"></i>
+          </a>
+        </li>
 
-          <li class="grafana-target-segment" ng-hide="addTagMode">
+        <li ng-show="addTagMode">
+            <input type="text"
+                   class="input-small grafana-target-segment-input"
+                   spellcheck='false'
+                   bs-typeahead="suggestTagKeys"
+                   data-min-length=0 data-items=100
+                   ng-model="target.currentTagKey"
+                   placeholder="key">
+            <input type="text"
+                   class="input-small grafana-target-segment-input"
+                   spellcheck='false'
+                   bs-typeahead="suggestTagValues"
+                   data-min-length=0 data-items=100
+                   ng-model="target.currentTagValue"
+                   placeholder="value">
             <a ng-click="addTag()">
               <i class="fa fa-plus"></i>
             </a>
-          </li>
-
-          <li ng-show="addTagMode">
-              <input type="text"
-                     class="input-small grafana-target-segment-input"
-                     spellcheck='false'
-                     bs-typeahead="suggestTagKeys"
-                     data-min-length=0 data-items=100
-                     ng-model="target.currentTagKey"
-                     placeholder="key">
-              <input type="text"
-                     class="input-small grafana-target-segment-input"
-                     spellcheck='false'
-                     bs-typeahead="suggestTagValues"
-                     data-min-length=0 data-items=100
-                     ng-model="target.currentTagValue"
-                     placeholder="value">
-              <a ng-click="addTag()">
-                <i class="fa fa-plus"></i>
-              </a>
-              <a bs-tooltip="target.errors.tags"
-                 style="color: rgb(229, 189, 28)"
-                 ng-show="target.errors.tags">
-                <i class="fa fa-warning"></i>
-              </a>
-          </li>
-        </ul>
+            <a bs-tooltip="target.errors.tags"
+               style="color: rgb(229, 189, 28)"
+               ng-show="target.errors.tags">
+              <i class="fa fa-warning"></i>
+            </a>
+        </li>
+      </ul>
 
-        <div class="clearfix"></div>
-      </div>
+      <div class="clearfix"></div>
     </div>
   </div>
 </div>

src/css/less/forms.less

@@ -26,3 +26,4 @@ input[type="checkbox"]:checked+label {
   background: url(@checkboxImageUrl) 0px -18px no-repeat;
 }
 
+

src/css/less/grafana.less

@@ -7,6 +7,7 @@
 @import "panel.less";
 @import "forms.less";
 @import "singlestat.less";
+@import "tightform.less";
 
 .row-control-inner {
   padding:0px;
@@ -101,175 +102,6 @@
   position:relative;
 }
 
-.grafana-target:last-child {
-  border-bottom: 1px solid @grafanaTargetBorder;
-}
-
-.grafana-target-inner {
-  border-top: 1px solid @grafanaTargetBorder;
-  border-left: 1px solid @grafanaTargetBorder;
-  border-right: 1px solid @grafanaTargetBorder;
-  background: @grafanaTargetBackground;
-  width: 100%;
-}
-
-.grafana-target-onoff {
-  display: inline-block;
-  padding: 5px 7px;
-  display: inline-block;
-}
-
-.grafana-segment-list {
-  list-style: none;
-  margin: 0;
-  >li {
-    float: left;
-  }
-}
-
-.grafana-metric-options {
-  margin-top: 35px;
-}
-
-// fix for fixed positioned panel & scrolling
-.grafana-segment-dropdown-menu {
-  margin-bottom: 70px;
-}
-
-.grafana-target-segment {
-  padding: 8px 7px;
-  display: inline-block;
-  font-weight: normal;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  color: @grafanaTargetColor;
-  display: inline-block;
-
-  .has-open-function & {
-    padding-top: 25px;
-  }
-
-  .grafana-target-hidden & {
-    color: @grafanaTargetColorHide;
-  }
-
-  &:hover, &:focus {
-    text-decoration: none;
-  }
-  &a:hover {
-    background: @grafanaTargetFuncBackground;
-  }
-
-  &.template-param-name {
-    border-right: none;
-    padding-right: 3px;
-  }
-  &.annotation-segment {
-    padding: 8px 15px;
-  }
-
-  &.last {
-    border-right: none;
-  }
-}
-
-.grafana-target-segment-icon {
-  i {
-    width: 15px;
-    text-align: center;
-    display: inline-block;
-  }
-}
-
-.grafana-target-function {
-  background: @grafanaTargetFuncBackground;
-  > a {
-    color: @grafanaTargetColor;
-  }
-  > a:hover {
-    color: @linkColor;
-  }
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
-}
-
-input[type=text].grafana-function-param-input {
-  background: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-input[type=text].grafana-target-text-input {
-  padding: 8px 7px;
-  border: none;
-  margin: 0px;
-  background: transparent;
-  float: left;
-  color: @grafanaTargetColor;
-  border-radius: 0;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-}
-
-[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
-  border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  margin: 0px;
-  border-radius: 0;
-  padding: 8px 4px;
-  &.last {
-    border-right: none;
-  }
-}
-
-input[type=checkbox].grafana-target-option-checkbox {
-  margin: 0;
-}
-
-select.grafana-target-segment-input {
-  border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  margin: 0px;
-  border-radius: 0;
-  height: 36px;
-  padding: 8px 5px;
-  &.last {
-    border-right: none;
-  }
-}
-
-.grafana-target .dropdown {
-  padding: 0; margin: 0;
-}
-
-.graphite-func-controls {
-  display: none;
-  text-align: center;
-
-  .fa-arrow-left {
-    float: left;
-    position: relative;
-    top: 2px;
-  }
-  .fa-arrow-right {
-    float: right;
-    position: relative;
-    top: 2px;
-  }
-  .fa-remove {
-    margin-left: 10px;
-  }
-}
-
-.grafana-target {
-  .popover-content {
-    padding: 0;
-  }
-}
-
 .scrollable {
   max-height: 300px;
   overflow: auto;

src/css/less/tightform.less

@@ -0,0 +1,165 @@
+
+// old graphite-target
+.tight-form:last-child {
+  border-bottom: 1px solid @grafanaTargetBorder;
+  .dropdown {
+    padding: 0; margin: 0;
+  }
+}
+
+// old graphite-target-inner
+.tight-form-row {
+  border-top: 1px solid @grafanaTargetBorder;
+  border-left: 1px solid @grafanaTargetBorder;
+  border-right: 1px solid @grafanaTargetBorder;
+  background: @grafanaTargetBackground;
+  width: 100%;
+}
+
+// old graphite-segment-list
+.tight-form-list {
+  list-style: none;
+  margin: 0;
+  >li {
+    float: left;
+  }
+}
+
+.grafana-metric-options {
+  margin-top: 35px;
+}
+
+// old grafana-target-segment {
+.tight-form-item {
+  padding: 8px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  color: @grafanaTargetColor;
+  display: inline-block;
+
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
+  // old .grafana-target-hidden & {
+  .tight-form-disabled & {
+    color: @grafanaTargetColorHide;
+  }
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &a:hover {
+    background: @grafanaTargetFuncBackground;
+  }
+
+  &.template-param-name {
+    border-right: none;
+    padding-right: 3px;
+  }
+  &.annotation-segment {
+    padding: 8px 15px;
+  }
+
+  &.last {
+    border-right: none;
+  }
+}
+
+//.grafana-target-segment-icon {
+.tight-form-item-icon {
+  i {
+    width: 15px;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+//.grafana-target-function {
+.tight-form-item-func {
+  background: @grafanaTargetFuncBackground;
+  > a {
+    color: @grafanaTargetColor;
+  }
+  > a:hover {
+    color: @linkColor;
+  }
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+//input[type=text].grafana-function-param-input {
+input[type=text].tight-form-func-param {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+//input[type=text].grafana-target-text-input {
+// input[type=text].tight-form-input {
+//   padding: 8px 7px;
+//   border: none;
+//   margin: 0px;
+//   background: transparent;
+//   float: left;
+//   color: @grafanaTargetColor;
+//   border-radius: 0;
+//   border-right: 1px solid @grafanaTargetSegmentBorder;
+// }
+
+//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
+[type=text].tight-form-input, [type=number].tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  padding: 8px 4px;
+  &.last {
+    border-right: none;
+  }
+}
+
+// input[type=checkbox].grafana-target-option-checkbox {
+//   margin: 0;
+// }
+
+select.tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 36px;
+  padding: 8px 5px;
+  &.last {
+    border-right: none;
+  }
+}
+
+//.graphite-func-controls {
+.tight-form-func-controls {
+  display: none;
+  text-align: center;
+
+  .fa-arrow-left {
+    float: left;
+    position: relative;
+    top: 2px;
+  }
+  .fa-arrow-right {
+    float: right;
+    position: relative;
+    top: 2px;
+  }
+  .fa-remove {
+    margin-left: 10px;
+  }
+}
+
+