From e1f410d32e63d9a24d4ee4e95370777c10b334b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Jan 2015 08:35:32 +0100 Subject: [PATCH] Starting css refactor for grafana-target --- CHANGELOG.md | 1 + .../influxdb/partials/query.editor.html | 329 ++++++++------- .../opentsdb/partials/query.editor.html | 391 +++++++++--------- src/css/less/forms.less | 1 + src/css/less/grafana.less | 170 +------- src/css/less/tightform.less | 165 ++++++++ 6 files changed, 524 insertions(+), 533 deletions(-) create mode 100644 src/css/less/tightform.less diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c82ce61a35..aa3114b39af 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/app/features/influxdb/partials/query.editor.html b/src/app/features/influxdb/partials/query.editor.html index e93cb232b28..7b7553d3b1e 100644 --- a/src/app/features/influxdb/partials/query.editor.html +++ b/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()"> - -
-
- - + -
-
+ + + + + +
+
+ +
+ + + + + + +
-
diff --git a/src/app/features/opentsdb/partials/query.editor.html b/src/app/features/opentsdb/partials/query.editor.html index e2f6f995dac..f1eec0de2a6 100644 --- a/src/app/features/opentsdb/partials/query.editor.html +++ b/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()"> +
+ -
-
- + - +
- -
- + +
+
+ +
+ -
  • - - - - - - - - -
    • - - -
    -
    +
    diff --git a/src/css/less/forms.less b/src/css/less/forms.less index 5018b9329da..aa9381e74ff 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -26,3 +26,4 @@ input[type="checkbox"]:checked+label { background: url(@checkboxImageUrl) 0px -18px no-repeat; } + diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index ad93c1c3f99..db0989de421 100644 --- a/src/css/less/grafana.less +++ b/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; diff --git a/src/css/less/tightform.less b/src/css/less/tightform.less new file mode 100644 index 00000000000..d107369f1dc --- /dev/null +++ b/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; + } +} + +