Skip to content

Commit 3929769

Browse files
alexanderzobnintorkelo
alexanderzobnin
authored and
torkelo
committed
fix(table panel): update Table Panel options tab styles. (grafana#6087)
1 parent 1b02632 commit 3929769

File tree

1 file changed

+145
-149
lines changed

1 file changed

+145
-149
lines changed

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

Lines changed: 145 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,169 @@
11
<div class="editor-row">
2-
<div class="section">
3-
<h5>Data</h5>
4-
<div class="tight-form-container">
5-
<div class="tight-form">
6-
<ul class="tight-form-list">
7-
<li class="tight-form-item" style="width: 140px">
8-
To Table Transform
9-
</li>
10-
<li>
11-
<select class="input-large tight-form-input"
2+
<div class="section gf-form-group">
3+
<h5 class="section-heading">Data</h5>
4+
<div class="gf-form-inline">
5+
<div class="gf-form">
6+
<label class="gf-form-label width-10">To Table Transform</label>
7+
<div class="gf-form-select-wrapper max-width-15">
8+
<select class="gf-form-input"
129
ng-model="editor.panel.transform"
1310
ng-options="k as v.description for (k, v) in editor.transformers"
1411
ng-change="editor.transformChanged()"></select>
15-
</li>
16-
</ul>
17-
<div class="clearfix"></div>
12+
</div>
1813
</div>
19-
<div class="tight-form">
20-
<ul class="tight-form-list">
21-
<li class="tight-form-item" style="width: 140px">
22-
Columns
23-
</li>
24-
<li class="tight-form-item" ng-repeat="column in editor.panel.columns">
25-
<i class="pointer fa fa-remove" ng-click="editor.removeColumn(column)"></i>
26-
<span>
27-
{{column.text}}
28-
</span>
29-
</li>
30-
<li>
31-
<metric-segment segment="editor.addColumnSegment" get-options="editor.getColumnOptions()" on-change="editor.addColumn()"></metric-segment>
32-
</li>
33-
</ul>
34-
<div class="clearfix"></div>
14+
<div class="gf-form gf-form--grow">
15+
<div class="gf-form-label gf-form-label--grow"></div>
16+
</div>
17+
</div>
18+
<div class="gf-form-inline">
19+
<div class="gf-form">
20+
<label class="gf-form-label width-10">Columns</label>
21+
</div>
22+
<div class="gf-form" ng-repeat="column in editor.panel.columns">
23+
<label class="gf-form-label">
24+
<i class="pointer fa fa-remove" ng-click="editor.removeColumn(column)"></i>
25+
<span>{{column.text}}</span>
26+
</label>
27+
</div>
28+
<div class="gf-form">
29+
<metric-segment segment="editor.addColumnSegment" get-options="editor.getColumnOptions()" on-change="editor.addColumn()"></metric-segment>
3530
</div>
3631
</div>
3732
</div>
3833

39-
<div class="section">
40-
<h5>Table Display</h5>
41-
<div class="tight-form-container">
42-
<div class="tight-form">
43-
<ul class="tight-form-list">
44-
<li class="tight-form-item">
45-
Pagination (Page size)
46-
</li>
47-
<li>
48-
<input type="number" class="input-small tight-form-input" placeholder="100"
49-
empty-to-null ng-model="editor.panel.pageSize" ng-change="editor.render()" ng-model-onblur>
50-
</li>
51-
<li class="tight-form-item">
52-
<editor-checkbox text="Scroll" model="editor.panel.scroll" change="editor.render()"></editor-checkbox>
53-
</li>
54-
<li class="tight-form-item">
55-
Font size
56-
</li>
57-
<li>
58-
<select class="input-small tight-form-input" ng-model="editor.panel.fontSize" ng-options="f for f in editor.fontSizes" ng-change="editor.render()"></select>
59-
</li>
60-
</ul>
61-
<div class="clearfix"></div>
34+
<div class="section gf-form-group">
35+
<h5 class="section-heading">Table Display</h5>
36+
<div class="gf-form-inline">
37+
<div class="gf-form max-width-17">
38+
<label class="gf-form-label width-11">Pagination (Page size)</label>
39+
<input type="number" class="gf-form-input"
40+
placeholder="100" data-placement="right"
41+
ng-model="editor.panel.pageSize"
42+
ng-change="editor.render()"
43+
ng-model-onblur>
44+
</div>
45+
<gf-form-switch class="gf-form" label-class="width-4"
46+
label="Scroll"
47+
checked="editor.panel.scroll"
48+
change="editor.render()"></gf-form-switch>
49+
<div class="gf-form max-width-17">
50+
<label class="gf-form-label width-6">Font size</label>
51+
<div class="gf-form-select-wrapper max-width-15">
52+
<select class="gf-form-input"
53+
ng-model="editor.panel.fontSize"
54+
ng-options="f for f in editor.fontSizes"
55+
ng-change="editor.render()"></select>
56+
</div>
6257
</div>
6358
</div>
6459
</div>
6560
</div>
6661

67-
<div class="editor-row" style="margin-top: 20px">
68-
<h5>Column Styles</h5>
69-
70-
<div class="tight-form-container">
62+
<div class="editor-row">
63+
<div class="section gf-form-group">
64+
<h5 class="section-heading">Column Styles</h5>
7165
<div ng-repeat="style in editor.panel.styles">
72-
<div class="tight-form">
73-
<ul class="tight-form-list pull-right">
74-
<li class="tight-form-item last">
75-
<i class="fa fa-remove pointer" ng-click="editor.removeColumnStyle(style)"></i>
76-
</li>
77-
</ul>
78-
79-
<ul class="tight-form-list">
80-
<li class="tight-form-item">
81-
Name or regex
82-
</li>
83-
<li>
84-
<input type="text" ng-model="style.pattern" bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
85-
</li>
86-
<li class="tight-form-item" style="width: 86px">
87-
Type
88-
</li>
89-
<li>
90-
<select class="input-small tight-form-input"
91-
ng-model="style.type"
92-
ng-options="c.value as c.text for c in editor.columnTypes"
93-
ng-change="editor.render()"
94-
style="width: 150px"
95-
></select>
96-
</li>
97-
</ul>
98-
<ul class="tight-form-list" ng-if="style.type === 'date'">
99-
<li class="tight-form-item">
100-
Format
101-
</li>
102-
<li>
103-
<metric-segment-model property="style.dateFormat" options="editor.dateFormats" on-change="editor.render()" custom="true"></metric-segment-model>
104-
</li>
105-
</ul>
106-
<ul class="tight-form-list" ng-if="style.type === 'string'">
107-
<li class="tight-form-item">
108-
<editor-checkbox text="Sanitize HTML" model="style.sanitize" change="editor.render()"></editor-checkbox>
109-
</li>
110-
</ul>
111-
<div class="clearfix"></div>
66+
<div class="gf-form-inline">
67+
<div class="gf-form max-width-19">
68+
<label class="gf-form-label width-8">Name or regex</label>
69+
<input type="text" class="gf-form-input"
70+
ng-model="style.pattern"
71+
bs-typeahead="editor.getColumnNames"
72+
ng-blur="editor.render()"
73+
data-min-length=0 data-items=100 ng-model-onblur>
74+
</div>
75+
<div class="gf-form max-width-18">
76+
<label class="gf-form-label width-8">Type</label>
77+
<div class="gf-form-select-wrapper max-width-10">
78+
<select class="gf-form-input"
79+
ng-model="style.type"
80+
ng-options="c.value as c.text for c in editor.columnTypes"
81+
ng-change="editor.render()"></select>
82+
</div>
83+
</div>
84+
<div class="gf-form max-width-25" ng-if="style.type === 'date'">
85+
<label class="gf-form-label width-5">Format</label>
86+
<metric-segment-model property="style.dateFormat" options="editor.dateFormats" on-change="editor.render()" custom="true"></metric-segment-model>
87+
</div>
88+
<gf-form-switch class="gf-form" label-class="width-8"
89+
ng-if="style.type === 'string'"
90+
label="Sanitize HTML"
91+
checked="style.sanitize"
92+
change="editor.render()"></gf-form-switch>
93+
<div class="gf-form gf-form--grow" ng-if="style.type !== 'date'">
94+
<div class="gf-form-label gf-form-label--grow"></div>
95+
</div>
96+
<div class="gf-form">
97+
<label class="gf-form-label">
98+
<a class="pointer" ng-click="editor.removeColumnStyle(style)">
99+
<i class="fa fa-trash"></i>
100+
</a>
101+
</label>
102+
</div>
112103
</div>
113-
<div class="tight-form" ng-if="style.type === 'number'">
114-
<ul class="tight-form-list">
115-
<li class="tight-form-item text-right" style="width: 93px">
116-
Coloring
117-
</li>
118-
<li>
119-
<select class="input-small tight-form-input"
120-
ng-model="style.colorMode"
121-
ng-options="c.value as c.text for c in editor.colorModes"
122-
ng-change="editor.render()"
123-
style="width: 150px"
124-
></select>
125-
</li>
126-
<li class="tight-form-item">
127-
Thresholds<tip>Comma separated values</tip>
128-
</li>
129-
<li>
130-
<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="style.thresholds" ng-blur="editor.render()" placeholder="50,80" array-join></input>
131-
</li>
132-
<li class="tight-form-item" style="width: 60px">
133-
Colors
134-
</li>
135-
<li class="tight-form-item">
136-
<spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()" ></spectrum-picker>
137-
<spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()" ></spectrum-picker>
138-
<spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()" ></spectrum-picker>
139-
</li>
140-
<li class="tight-form-item last">
104+
<div class="gf-form-inline" ng-if="style.type === 'number'">
105+
<div class="gf-form max-width-20">
106+
<label class="gf-form-label width-8">Coloring</label>
107+
<div class="gf-form-select-wrapper max-width-12">
108+
<select class="gf-form-input"
109+
ng-model="style.colorMode"
110+
ng-options="c.value as c.text for c in editor.colorModes"
111+
ng-change="editor.render()"></select>
112+
</div>
113+
</div>
114+
<div class="gf-form max-width-17">
115+
<label class="gf-form-label width-8">Thresholds<tip>Comma separated values</tip></label>
116+
<input type="text" class="gf-form-input"
117+
ng-model="style.thresholds"
118+
placeholder="50,80"
119+
ng-blur="editor.render()"
120+
array-join ng-model-onblur>
121+
</div>
122+
<div class="gf-form max-width-18">
123+
<label class="gf-form-label width-5">Colors</label>
124+
<span class="gf-form-label">
125+
<spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()"></spectrum-picker>
126+
</span>
127+
<span class="gf-form-label">
128+
<spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()"></spectrum-picker>
129+
</span>
130+
<span class="gf-form-label">
131+
<spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()"></spectrum-picker>
132+
</span>
133+
<span class="gf-form-label">
141134
<a class="pointer" ng-click="editor.invertColorOrder($index)">invert order</a>
142-
</li>
143-
</ul>
144-
<div class="clearfix"></div>
135+
</span>
136+
</div>
137+
<!-- <div class="gf-form gf-form--grow">
138+
<div class="gf-form-label gf-form-label--grow"></div>
139+
</div> -->
145140
</div>
146-
<div class="tight-form" ng-if="style.type === 'number'">
147-
<ul class="tight-form-list">
148-
<li class="tight-form-item text-right" style="width: 93px">
149-
Unit
150-
</li>
151-
<li class="dropdown" style="width: 150px"
141+
<div class="gf-form-inline" ng-if="style.type === 'number'">
142+
<div class="gf-form">
143+
<label class="gf-form-label width-8">Unit</label>
144+
</div>
145+
<div class="gf-form max-width-11">
146+
<div class="gf-form-dropdown-typeahead max-width-19"
152147
ng-model="style.unit"
153-
dropdown-typeahead="editor.unitFormats"
148+
dropdown-typeahead2="editor.unitFormats"
154149
dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)">
155-
</li>
156-
<li class="tight-form-item" style="width: 86px">
157-
Decimals
158-
</li>
159-
<li style="width: 105px">
160-
<input type="number" class="input-mini tight-form-input" ng-model="style.decimals" ng-change="editor.render()" ng-model-onblur>
161-
</li>
162-
</ul>
163-
<div class="clearfix"></div>
150+
</div>
151+
</div>
152+
<div class="gf-form max-width-15">
153+
<label class="gf-form-label width-8">Decimals</label>
154+
<input type="number" class="gf-form-input" data-placement="right"
155+
ng-model="style.decimals"
156+
ng-change="editor.render()" ng-model-onblur>
157+
</div>
158+
<div class="gf-form gf-form--grow">
159+
<div class="gf-form-label gf-form-label--grow"></div>
160+
</div>
164161
</div>
165-
166162
</div>
167163
</div>
168-
169-
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="editor.addColumnStyle()">
170-
Add column style rule
171-
</button>
164+
<div class="gf-form-button">
165+
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
166+
<i class="fa fa-plus"></i>&nbsp;Add column style rule
167+
</button>
168+
</div>
172169
</div>
173-

0 commit comments

Comments
 (0)