Skip to content

Commit 488fe62

Browse files
torkelotorkelo
committed
fix(singletat): fixed/polished layout in singlestat ui options tab
1 parent faf6a5f commit 488fe62

File tree

2 files changed

+26
-22
lines changed

2 files changed

+26
-22
lines changed

‎public/app/plugins/panel/singlestat/editor.html

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ <h5 class="section-heading">Value</h5>
44

55
<div class="gf-form-inline">
66
<div class="gf-form">
7-
<label class="gf-form-label width-4">Stat</label>
7+
<label class="gf-form-label width-6">Stat</label>
88
<div class="gf-form-select-wrapper width-7">
99
<select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
1010
</div>
@@ -17,7 +17,7 @@ <h5 class="section-heading">Value</h5>
1717

1818
<div class="gf-form-inline">
1919
<div class="gf-form">
20-
<label class="gf-form-label width-4">Prefix</label>
20+
<label class="gf-form-label width-6">Prefix</label>
2121
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
2222
<label class="gf-form-label width-6">Font size</label>
2323
<div class="gf-form-select-wrapper">
@@ -27,26 +27,21 @@ <h5 class="section-heading">Value</h5>
2727
</div>
2828

2929
<div class="gf-form">
30-
<label class="gf-form-label width-4">Postfix</label>
30+
<label class="gf-form-label width-6">Postfix</label>
3131
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
3232
<label class="gf-form-label width-6">Font size</label>
3333
<div class="gf-form-select-wrapper">
3434
<select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
3535
</div>
3636
</div>
37-
</div>
38-
39-
<div class="section gf-form-group">
40-
<h5 class="section-heading">Unit</h5>
41-
<div class="gf-form-inline">
42-
<div class="gf-form">
43-
<div class="gf-form-dropdown-typeahead" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
44-
</div>
45-
<div class="gf-form">
46-
<label class="gf-form-label">Decimals</label>
47-
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
48-
</div>
49-
</div>
37+
<div class="gf-form">
38+
<label class="gf-form-label width-6">Unit</label>
39+
<div class="gf-form-dropdown-typeahead width-18" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
40+
</div>
41+
<div class="gf-form">
42+
<label class="gf-form-label width-6">Decimals</label>
43+
<input type="number" class="gf-form-input width-18" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
44+
</div>
5045
</div>
5146

5247
<div class="section gf-form-group">
@@ -86,7 +81,7 @@ <h5 class="section-heading">Coloring</h5>
8681
<h5 class="section-heading">Spark lines</h5>
8782
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
8883
<div ng-if="ctrl.panel.sparkline.show">
89-
<gf-form-switch class="gf-form" label-class="width-9" label="Background mode" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
84+
<gf-form-switch class="gf-form" label-class="width-9" label="Full height" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
9085
<div class="gf-form">
9186
<label class="gf-form-label width-9">Line Color</label>
9287
<span class="gf-form-label">
@@ -104,22 +99,22 @@ <h5 class="section-heading">Spark lines</h5>
10499

105100
<div class="section gf-form-group">
106101
<h5 class="section-heading">Gauge</h5>
107-
<gf-form-switch class="gf-form" label-class="width-8" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
102+
<gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
108103
<div ng-if="ctrl.panel.gauge.show">
109104
<div class="gf-form">
110-
<label class="gf-form-label width-8">Min</label>
105+
<label class="gf-form-label width-10">Min</label>
111106
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
112107
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
113108
&nbsp; <i class="fa fa-warning"></i>
114109
Min value is bigger than max.
115110
</label>
116111
</div>
117112
<div class="gf-form">
118-
<label class="gf-form-label width-8">Max</label>
113+
<label class="gf-form-label width-10">Max</label>
119114
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
120115
</div>
121-
<gf-form-switch class="gf-form" label-class="width-10" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
122-
<gf-form-switch class="gf-form" label-class="width-10" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
116+
<gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
117+
<gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
123118
</div>
124119
</div>
125120
</div>

‎public/sass/base/_forms.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,15 @@ input[type="checkbox"]:focus {
9797
@include tab-focus();
9898
}
9999

100+
// not a big fan of number fields
101+
input[type="number"]::-webkit-outer-spin-button,
102+
input[type="number"]::-webkit-inner-spin-button {
103+
-webkit-appearance: none;
104+
margin: 0;
105+
}
106+
input[type="number"] {
107+
-moz-appearance: textfield;
108+
}
100109
// Placeholder
101110
// -------------------------
102111

0 commit comments

Comments
 (0)