Skip to content

Commit 7c10af0

Browse files
torkelotorkelo
committed
feat(singlestat): slight layout changes to options tab
1 parent 7b7ba46 commit 7c10af0

File tree

1 file changed

+120
-187
lines changed

1 file changed

+120
-187
lines changed

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

Lines changed: 120 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,125 @@
11
<div class="editor-row">
2-
<div class="section gf-form-group">
3-
<div class="gf-form-inline">
4-
<div class="gf-form">
5-
<label class="gf-form-label width-6"><strong>Big value</strong></label>
6-
</div>
7-
<div class="gf-form max-width-11">
8-
<label class="gf-form-label width-4">Prefix</label>
9-
<input type="text" class="gf-form-input" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
10-
</div>
11-
<div class="gf-form max-width-10">
12-
<label class="gf-form-label width-4">Value</label>
13-
<div class="gf-form-select-wrapper max-width-15">
14-
<select class="gf-form-input"
15-
ng-model="ctrl.panel.valueName"
16-
ng-options="f for f in ctrl.valueNameOptions"
17-
ng-change="ctrl.render()"></select>
18-
</div>
19-
</div>
20-
<div class="gf-form max-width-12">
21-
<label class="gf-form-label width-5">Postfix</label>
22-
<input type="text" class="gf-form-input last" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
23-
</div>
24-
</div>
25-
<div class="gf-form-inline">
26-
<div class="gf-form">
27-
<label class="gf-form-label width-6"><strong>Font size</strong></label>
28-
</div>
29-
<div class="gf-form max-width-11">
30-
<label class="gf-form-label width-4">Prefix</label>
31-
<div class="gf-form-select-wrapper max-width-15">
32-
<select class="gf-form-input"
33-
ng-model="ctrl.panel.prefixFontSize"
34-
ng-options="f for f in ctrl.fontSizes"
35-
ng-change="ctrl.render()"></select>
36-
</div>
37-
</div>
38-
<div class="gf-form max-width-10">
39-
<label class="gf-form-label width-4">Value</label>
40-
<div class="gf-form-select-wrapper max-width-15">
41-
<select class="gf-form-input"
42-
ng-model="ctrl.panel.valueFontSize"
43-
ng-options="f for f in ctrl.fontSizes"
44-
ng-change="ctrl.render()"></select>
45-
</div>
46-
</div>
47-
<div class="gf-form max-width-12">
48-
<label class="gf-form-label width-5">Postfix</label>
49-
<div class="gf-form-select-wrapper max-width-15">
50-
<select class="input-small gf-form-input last"
51-
ng-model="ctrl.panel.postfixFontSize"
52-
ng-options="f for f in ctrl.fontSizes"
53-
ng-change="ctrl.render()"></select>
54-
</div>
55-
</div>
56-
</div>
57-
<div class="gf-form-inline">
58-
<div class="gf-form">
59-
<label class="gf-form-label width-6"><strong>Unit</strong></label>
60-
</div>
61-
<div class="gf-form max-width-15">
62-
<div class="gf-form-dropdown-typeahead max-width-19"
63-
ng-model="ctrl.panel.format"
64-
dropdown-typeahead2="ctrl.unitFormats"
65-
dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
66-
</div>
67-
</div>
68-
<div class="gf-form max-width-11">
69-
<label class="gf-form-label width-6">Decimals</label>
70-
<input type="number" class="gf-form-input"
71-
placeholder="auto" data-placement="right"
72-
bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
73-
ng-model="ctrl.panel.decimals"
74-
ng-change="ctrl.refresh()"
75-
ng-model-onblur>
76-
</div>
77-
</div>
78-
</div>
79-
</div>
2+
<div class="section gf-form-group">
3+
<h5 class="section-heading">Value</h5>
804

81-
<div class="editor-row">
82-
<h5 class="section-heading">Coloring</h5>
83-
<div class="section gf-form-group">
84-
<div class="gf-form-inline">
85-
<gf-form-switch class="gf-form" label-class="width-8"
86-
label="Background"
87-
checked="ctrl.panel.colorBackground"
88-
on-change="ctrl.render()"></gf-form-switch>
89-
<gf-form-switch class="gf-form" label-class="width-4"
90-
label="Value"
91-
checked="ctrl.panel.colorValue"
92-
on-change="ctrl.render()"></gf-form-switch>
93-
</div>
94-
<div class="gf-form-inline">
95-
<div class="gf-form max-width-21">
96-
<label class="gf-form-label width-8">Thresholds
97-
<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
98-
</label>
99-
<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
100-
</div>
101-
<div class="gf-form">
102-
<label class="gf-form-label width-5">Colors</label>
103-
<span class="gf-form-label">
104-
<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
105-
</span>
106-
<span class="gf-form-label">
107-
<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
108-
</span>
109-
<span class="gf-form-label">
110-
<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
111-
</span>
112-
<div class="gf-form-button">
113-
<button class="btn btn-inverse" ng-click="ctrl.invertColorOrder()">
114-
invert order
115-
</button>
116-
</div>
117-
</div>
118-
</div>
119-
</div>
120-
</div>
5+
<div class="gf-form-inline">
6+
<div class="gf-form">
7+
<label class="gf-form-label width-4">Stat</label>
8+
<div class="gf-form-select-wrapper width-7">
9+
<select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
10+
</div>
11+
<label class="gf-form-label width-6">Font size</label>
12+
<div class="gf-form-select-wrapper">
13+
<select class="gf-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
14+
</div>
15+
</div>
16+
</div>
12117

122-
<div class="editor-row">
123-
<h5 class="section-heading">Spark lines</h5>
124-
<div class="section gf-form-group">
125-
<div class="gf-form-inline">
126-
<gf-form-switch class="gf-form" label-class="width-4"
127-
label="Show"
128-
checked="ctrl.panel.sparkline.show"
129-
on-change="ctrl.render()"></gf-form-switch>
130-
<gf-form-switch class="gf-form" label-class="width-10"
131-
label="Background mode"
132-
checked="ctrl.panel.sparkline.full"
133-
on-change="ctrl.render()"></gf-form-switch>
134-
<div class="gf-form">
135-
<label class="gf-form-label width-6">Line Color</label>
136-
<span class="gf-form-label">
137-
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
138-
</span>
139-
</div>
140-
<div class="gf-form">
141-
<label class="gf-form-label width-6">Fill Color</label>
142-
<span class="gf-form-label">
143-
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
144-
</span>
145-
</div>
146-
</div>
147-
</div>
148-
</div>
18+
<div class="gf-form-inline">
19+
<div class="gf-form">
20+
<label class="gf-form-label width-4">Prefix</label>
21+
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
22+
<label class="gf-form-label width-6">Font size</label>
23+
<div class="gf-form-select-wrapper">
24+
<select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
25+
</div>
26+
</div>
27+
</div>
14928

150-
<div class="editor-row">
151-
<h5 class="section-heading">Gauge</h5>
152-
<div class="section gf-form-group">
153-
<div class="gf-form-inline">
154-
<gf-form-switch class="gf-form" label-class="width-4"
155-
label="Show"
156-
checked="ctrl.panel.gauge.show"
157-
on-change="ctrl.render()"></gf-form-switch>
158-
<div class="gf-form max-width-11">
159-
<label class="gf-form-label width-4">Min</label>
160-
<input type="number" class="gf-form-input"
161-
placeholder="0" data-placement="right"
162-
ng-model="ctrl.panel.gauge.minValue"
163-
ng-change="ctrl.refresh()"
164-
ng-model-onblur>
165-
</div>
166-
<div class="gf-form max-width-11">
167-
<label class="gf-form-label width-4">Max</label>
168-
<input type="number" class="gf-form-input"
169-
placeholder="0" data-placement="right"
170-
ng-model="ctrl.panel.gauge.maxValue"
171-
ng-change="ctrl.refresh()"
172-
ng-model-onblur>
173-
</div>
174-
<div class="gf-form" ng-show="ctrl.invalidGaugeRange">
175-
<label class="gf-form-label alert-state-critical">
176-
&nbsp; <i class="fa fa-warning"></i>
177-
Min value is bigger than max.
178-
</label>
179-
</div>
180-
</div>
181-
<div class="gf-form-inline">
182-
<gf-form-switch class="gf-form" label-class="width-10"
183-
label="Threshold labels"
184-
checked="ctrl.panel.gauge.thresholdLabels"
185-
on-change="ctrl.render()"></gf-form-switch>
186-
<gf-form-switch class="gf-form" label-class="width-11"
187-
label="Threshold markers"
188-
checked="ctrl.panel.gauge.thresholdMarkers"
189-
on-change="ctrl.render()"></gf-form-switch>
190-
</div>
191-
</div>
29+
<div class="gf-form">
30+
<label class="gf-form-label width-4">Postfix</label>
31+
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
32+
<label class="gf-form-label width-6">Font size</label>
33+
<div class="gf-form-select-wrapper">
34+
<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>
35+
</div>
36+
</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>
50+
</div>
51+
52+
<div class="section gf-form-group">
53+
<h5 class="section-heading">Coloring</h5>
54+
<div class="gf-form-inline">
55+
<gf-form-switch class="gf-form" label-class="width-8" label="Background" checked="ctrl.panel.colorBackground" on-change="ctrl.render()"></gf-form-switch>
56+
<gf-form-switch class="gf-form" label-class="width-4" label="Value" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
57+
</div>
58+
<div class="gf-form-inline">
59+
<div class="gf-form max-width-21">
60+
<label class="gf-form-label width-8">Thresholds
61+
<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
62+
</label>
63+
<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
64+
</div>
65+
</div>
66+
<div class="gf-form">
67+
<label class="gf-form-label width-8">Colors</label>
68+
<span class="gf-form-label">
69+
<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
70+
</span>
71+
<span class="gf-form-label">
72+
<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
73+
</span>
74+
<span class="gf-form-label">
75+
<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
76+
</span>
77+
<span class="gf-form-label">
78+
<a ng-click="ctrl.invertColorOrder()">
79+
Invert
80+
</a>
81+
</span>
82+
</div>
83+
</div>
84+
85+
<div class="section gf-form-group">
86+
<h5 class="section-heading">Spark lines</h5>
87+
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
88+
<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>
90+
<div class="gf-form">
91+
<label class="gf-form-label width-9">Line Color</label>
92+
<span class="gf-form-label">
93+
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
94+
</span>
95+
</div>
96+
<div class="gf-form">
97+
<label class="gf-form-label width-9">Fill Color</label>
98+
<span class="gf-form-label">
99+
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
100+
</span>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<div class="section gf-form-group">
106+
<h5 class="section-heading">Gauge</h5>
107+
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
108+
<div ng-if="ctrl.panel.gauge.show">
109+
<div class="gf-form">
110+
<label class="gf-form-label width-9">Min</label>
111+
<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>
112+
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
113+
&nbsp; <i class="fa fa-warning"></i>
114+
Min value is bigger than max.
115+
</label>
116+
</div>
117+
<div class="gf-form">
118+
<label class="gf-form-label width-9">Max</label>
119+
<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>
120+
</div>
121+
<gf-form-switch class="gf-form" label-class="width-9" 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-9" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
123+
</div>
124+
</div>
192125
</div>

0 commit comments

Comments
 (0)