Skip to content

N
nexpie-grafana-theme
Commit becdaafd by Torkel Ödegaard
Options

Refactored away the graphite-target-inner / tight-form-row

parent 72d7a7d9
Showing with 34 additions and 64 deletions
src/app/features/graphite/funcEditor.js
...@@ -126,7 +126,7 @@ function (angular, _, $) { ...@@ -126,7 +126,7 @@ function (angular, _, $) {
} }
function toggleFuncControls() { function toggleFuncControls() {
var targetDiv = elem.closest('.tight-form-row'); var targetDiv = elem.closest('.tight-form');
if (elem.hasClass('show-function-controls')) { if (elem.hasClass('show-function-controls')) {
elem.removeClass('show-function-controls'); elem.removeClass('show-function-controls');
......
src/app/features/graphite/partials/query.editor.html
...@@ -5,8 +5,6 @@ ...@@ -5,8 +5,6 @@
ng-class="{'tight-form-disabled': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="GraphiteQueryCtrl" ng-controller="GraphiteQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="tight-form-row">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li ng-show="parserError" class="tight-form-item"> <li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem"> <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
...@@ -86,13 +84,10 @@ ...@@ -86,13 +84,10 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
</div> </div>
<section class="grafana-metric-options"> <section class="grafana-metric-options">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i> <i class="fa fa-wrench"></i>
...@@ -125,7 +120,7 @@ ...@@ -125,7 +120,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
...@@ -158,8 +153,6 @@ ...@@ -158,8 +153,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
</div>
</section> </section>
<div class="editor-row"> <div class="editor-row">
......
src/app/features/influxdb/partials/query.editor.html
<div class="editor-row"> <div class="editor-row">
<div ng-repeat="target in panel.targets" ng-controller="InfluxQueryCtrl" ng-init="init()" ng-class="{'tight-form-disabled': target.hide}" class="tight-form-container">
<div ng-repeat="target in panel.targets" <div class="tight-form">
class="tight-form"
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="InfluxQueryCtrl"
ng-init="init()">
<div class="tight-form-row">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li class="tight-form-item"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
...@@ -85,7 +80,7 @@ ...@@ -85,7 +80,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<!-- Raw Query mode --> <!-- Raw Query mode -->
<ul class="tight-form-list" ng-show="target.rawQuery"> <ul class="tight-form-list" ng-show="target.rawQuery">
<li class="tight-form-item"> <li class="tight-form-item">
...@@ -168,9 +163,7 @@ ...@@ -168,9 +163,7 @@
<li><a ng-click="target.fill = '0'">fill (0)</a></li> <li><a ng-click="target.fill = '0'">fill (0)</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
...@@ -178,7 +171,6 @@ ...@@ -178,7 +171,6 @@
<section class="grafana-metric-options"> <section class="grafana-metric-options">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i> <i class="fa fa-wrench"></i>
...@@ -197,7 +189,7 @@ ...@@ -197,7 +189,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
...@@ -220,7 +212,6 @@ ...@@ -220,7 +212,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div>
</section> </section>
<div class="editor-row"> <div class="editor-row">
......
src/app/features/opentsdb/partials/query.editor.html
<div class="editor-row" style="margin-top: 10px;"> <div class="editor-row" style="margin-top: 10px;">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets"
class="tight-form" class="tight-form-container"
ng-class="{'tight-form-disabled': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="OpenTSDBQueryCtrl" ng-controller="OpenTSDBQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="tight-form-row">
<div class="tight-form">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li class="tight-form-item"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
...@@ -134,7 +136,7 @@ ...@@ -134,7 +136,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list" role="menu"> <ul class="tight-form-list" role="menu">
<li class="tight-form-item"> <li class="tight-form-item">
...@@ -209,7 +211,6 @@ ...@@ -209,7 +211,6 @@
</a> </a>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
......
src/app/features/panellinkeditor/module.html
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5> <h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<div class="tight-form" ng-repeat="link in panel.links"j> <div class="tight-form" ng-repeat="link in panel.links"j>
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i> <i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
...@@ -42,7 +41,6 @@ ...@@ -42,7 +41,6 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
......
src/app/panels/graph/axisEditor.html
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Left Y</strong> <strong>Left Y</strong>
...@@ -41,7 +40,7 @@ ...@@ -41,7 +40,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Right Y</strong> <strong>Right Y</strong>
...@@ -81,11 +80,9 @@ ...@@ -81,11 +80,9 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Show Axis</strong> <strong>Show Axis</strong>
...@@ -105,7 +102,7 @@ ...@@ -105,7 +102,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Thresholds</strong> <strong>Thresholds</strong>
...@@ -141,13 +138,11 @@ ...@@ -141,13 +138,11 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Legend</strong> <strong>Legend</strong>
...@@ -180,10 +175,8 @@ ...@@ -180,10 +175,8 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
<div class="section"> <div class="section">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong> <strong>Legend values</strong>
...@@ -222,6 +215,5 @@ ...@@ -222,6 +215,5 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
src/app/panels/graph/styleEditor.html
...@@ -67,7 +67,6 @@ ...@@ -67,7 +67,6 @@
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5> <h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div> <div>
<div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> <div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i> <i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
...@@ -96,7 +95,6 @@ ...@@ -96,7 +95,6 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
<button class="btn btn-success" style="margin-top: 20px" ng-click="addSeriesOverride()">Add series override rule</button> <button class="btn btn-success" style="margin-top: 20px" ng-click="addSeriesOverride()">Add series override rule</button>
</div> </div>
......
src/app/panels/singlestat/editor.html
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Big value</strong> <strong>Big value</strong>
...@@ -29,7 +28,7 @@ ...@@ -29,7 +28,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Font size</strong> <strong>Font size</strong>
...@@ -55,7 +54,7 @@ ...@@ -55,7 +54,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form-row"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Unit</strong> <strong>Unit</strong>
...@@ -69,13 +68,11 @@ ...@@ -69,13 +68,11 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Coloring</strong> <strong>Coloring</strong>
...@@ -113,13 +110,11 @@ ...@@ -113,13 +110,11 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Spark lines</strong> <strong>Spark lines</strong>
...@@ -152,13 +147,11 @@ ...@@ -152,13 +147,11 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="tight-form"> <div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
<strong>Value to text mapping</strong> <strong>Value to text mapping</strong>
...@@ -186,5 +179,4 @@ ...@@ -186,5 +179,4 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl"> <div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form"> <div class="tight-form" style="border-top: none">
<div class="tight-form-row" style="border-top: none">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
...@@ -38,5 +37,4 @@ ...@@ -38,5 +37,4 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div>
src/css/less/tightform.less
.tight-form {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
// old graphite-target
.tight-form:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
.dropdown { .dropdown {
padding: 0; margin: 0; padding: 0; margin: 0;
} }
&:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
}
} }
// old graphite-target-inner .tight-form-container {
.tight-form-row { .tight-form:last-child {
border-top: 1px solid @grafanaTargetBorder; border-bottom: none;
border-left: 1px solid @grafanaTargetBorder; }
border-right: 1px solid @grafanaTargetBorder; &:last-child {
background: @grafanaTargetBackground; border-bottom: 1px solid @grafanaTargetBorder;
width: 100%; }
} }
// old graphite-segment-list // old graphite-segment-list
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment