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,8 +5,6 @@
         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">
@@ -175,12 +173,9 @@
 
       <div class="clearfix"></div>
     </div>
-
   </div>
 </div>
 
-</div>
-
 <section class="grafana-metric-options">
 	<div class="grafana-target">
 		<div class="grafana-target-inner">

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

@@ -4,8 +4,6 @@
         ng-class="{'grafana-target-hidden': target.hide}"
         ng-controller="OpenTSDBQueryCtrl"
         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">
@@ -216,4 +214,3 @@
     </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;
+  }
+}
+
+