Skip to content

N
nexpie-grafana-theme
Commit e333d61b by Torkel Ödegaard Committed by GitHub
Options

OldTable: Make old table options align & look better (#24485)

parent 1fafcd15
Showing with 85 additions and 86 deletions
public/app/plugins/panel/table-old/column_options.html
<div class="edit-tab-content" ng-repeat="style in editor.panel.styles"> <div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
<div class="section gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Options</h5> <h5 class="section-heading">Options</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-12">Apply to columns named</label> <label class="gf-form-label width-8">Name pattern</label>
<input <input
type="text" type="text"
placeholder="Name or regex" placeholder="Name or regex"
class="gf-form-input width-13" class="gf-form-input max-width-15"
ng-model="style.pattern" ng-model="style.pattern"
bs-tooltip="'Specify regex using /my.*regex/ syntax'" bs-tooltip="'Specify regex using /my.*regex/ syntax'"
bs-typeahead="editor.getColumnNames" bs-typeahead="editor.getColumnNames"
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
/> />
</div> </div>
</div> </div>
<div class="gf-form" ng-if="style.type !== 'hidden'"> <div class="gf-form gf-form--grow" ng-if="style.type !== 'hidden'">
<label class="gf-form-label width-12">Column Header</label> <label class="gf-form-label width-8">Column Header</label>
<input <input
type="text" type="text"
class="gf-form-input width-12" class="gf-form-input max-width-15"
ng-model="style.alias" ng-model="style.alias"
ng-change="editor.render()" ng-change="editor.render()"
ng-model-onblur ng-model-onblur
...@@ -32,18 +32,18 @@ ...@@ -32,18 +32,18 @@
</div> </div>
<gf-form-switch <gf-form-switch
class="gf-form" class="gf-form"
label-class="width-12" label-class="width-8"
label="Render value as link" label="Render value as link"
checked="style.link" checked="style.link"
on-change="editor.render()" on-change="editor.render()"
></gf-form-switch> ></gf-form-switch>
</div> </div>
<div class="section gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Type</h5> <h5 class="section-heading">Type</h5>
<div class="gf-form"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-10">Type</label> <label class="gf-form-label width-8">Type</label>
<div class="gf-form-select-wrapper width-16"> <div class="gf-form-select-wrapper width-16">
<select <select
class="gf-form-input" class="gf-form-input"
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
></select> ></select>
</div> </div>
</div> </div>
<div class="gf-form" ng-if="style.type === 'date'"> <div class="gf-form gf-form--grow" ng-if="style.type === 'date'">
<label class="gf-form-label width-10">Date Format</label> <label class="gf-form-label width-8">Date Format</label>
<gf-form-dropdown <gf-form-dropdown
model="style.dateFormat" model="style.dateFormat"
css-class="gf-form-input width-16" css-class="gf-form-input width-16"
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
<div ng-if="style.type === 'string'"> <div ng-if="style.type === 'string'">
<gf-form-switch <gf-form-switch
class="gf-form" class="gf-form"
label-class="width-10" label-class="width-8"
ng-if="style.type === 'string'" ng-if="style.type === 'string'"
label="Sanitize HTML" label="Sanitize HTML"
checked="style.sanitize" checked="style.sanitize"
...@@ -78,11 +78,11 @@ ...@@ -78,11 +78,11 @@
</div> </div>
<div ng-if="style.type !== 'hidden'"> <div ng-if="style.type !== 'hidden'">
<div class="gf-form"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-10">Align</label> <label class="gf-form-label width-8">Align</label>
<gf-form-dropdown <gf-form-dropdown
model="style.align" model="style.align"
css-class="gf-form-input width-16" css-class="gf-form-input"
lookup-text="true" lookup-text="true"
get-options="editor.alignTypes" get-options="editor.alignTypes"
allow-custom="false" allow-custom="false"
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
<div ng-if="style.type === 'number'"> <div ng-if="style.type === 'number'">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-10">Unit</label> <label class="gf-form-label width-8">Unit</label>
<unit-picker onChange="editor.setUnitFormat(style)" value="style.unit" width="16"></unit-picker> <unit-picker onChange="editor.setUnitFormat(style)" value="style.unit" width="16"></unit-picker>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-10">Decimals</label> <label class="gf-form-label width-8">Decimals</label>
<input <input
type="number" type="number"
class="gf-form-input width-4" class="gf-form-input width-4"
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
</div> </div>
</div> </div>
<div class="section gf-form-group" ng-if="style.type === 'string'"> <div class="gf-form-group" ng-if="style.type === 'string'">
<h5 class="section-heading">Value Mappings</h5> <h5 class="section-heading">Value Mappings</h5>
<div class="editor-row"> <div class="editor-row">
<div class="gf-form-group"> <div class="gf-form-group">
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
</div> </div>
</div> </div>
<div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1"> <div class="gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
<h5 class="section-heading">Thresholds</h5> <h5 class="section-heading">Thresholds</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8" <label class="gf-form-label width-8"
...@@ -300,8 +300,6 @@ ...@@ -300,8 +300,6 @@
<hr /> <hr />
</div> </div>
<div class="gf-form-button-row"> <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()"> <icon name="'plus'"></icon>&nbsp;Add column style
<icon name="'plus'"></icon>&nbsp;Add column style </button>
</button>
</div>
public/app/plugins/panel/table-old/editor.html
<div class="editor-row"> <div class="gf-form-group">
<div class="section gf-form-group"> <h5 class="section-heading">Data</h5>
<h5 class="section-heading">Data</h5> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Table Transform</label>
<div class="gf-form-select-wrapper">
<select
class="gf-form-input"
ng-model="editor.panel.transform"
ng-options="k as v.description for (k, v) in editor.transformers"
ng-change="editor.transformChanged()"
></select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-10">Table Transform</label> <label class="gf-form-label width-8">Columns</label>
<div class="gf-form-select-wrapper max-width-15"> </div>
<select <div class="gf-form" ng-repeat="column in editor.panel.columns">
class="gf-form-input" <label class="gf-form-label">
ng-model="editor.panel.transform" <icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
ng-options="k as v.description for (k, v) in editor.transformers" <span>{{ column.text }}</span>
ng-change="editor.transformChanged()" </label>
></select> </div>
</div> <div class="gf-form" ng-show="editor.canSetColumns">
<metric-segment
segment="editor.addColumnSegment"
get-options="editor.getColumnOptions()"
on-change="editor.addColumn()"
></metric-segment>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form" ng-hide="editor.canSetColumns">
<div class="gf-form"> <label class="gf-form-label">
<label class="gf-form-label width-10">Columns</label> Auto
</div> <info-popover mode="right-normal" ng-if="editor.columnsHelpMessage">
<div class="gf-form" ng-repeat="column in editor.panel.columns"> {{ editor.columnsHelpMessage }}
<label class="gf-form-label"> </info-popover>
<icon name="'times'" ng-click="editor.removeColumn(column)"></icon> </label>
<span>{{ column.text }}</span>
</label>
</div>
<div class="gf-form" ng-show="editor.canSetColumns">
<metric-segment
segment="editor.addColumnSegment"
get-options="editor.getColumnOptions()"
on-change="editor.addColumn()"
></metric-segment>
</div>
<div class="gf-form" ng-hide="editor.canSetColumns">
<label class="gf-form-label">
Auto
<info-popover mode="right-normal" ng-if="editor.columnsHelpMessage">
{{ editor.columnsHelpMessage }}
</info-popover>
</label>
</div>
</div> </div>
</div> </div>
</div>
<div class="section gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Paging</h5> <h5 class="section-heading">Paging</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Rows per page</label> <label class="gf-form-label width-8">Rows per page</label>
<input <input
type="number" type="number"
class="gf-form-input width-7" class="gf-form-input width-7"
placeholder="100" placeholder="100"
data-placement="right" data-placement="right"
ng-model="editor.panel.pageSize" ng-model="editor.panel.pageSize"
ng-change="editor.render()"
ng-model-onblur
/>
</div>
<div class="gf-form max-width-17">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper width-7">
<select
class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.render()" ng-change="editor.render()"
ng-model-onblur ></select>
/>
</div>
<div class="gf-form max-width-17">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper width-7">
<select
class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.render()"
></select>
</div>
</div> </div>
</div> </div>
</div> </div>
public/sass/components/_gf-form.scss
...@@ -237,6 +237,9 @@ $input-border: 1px solid $input-border-color; ...@@ -237,6 +237,9 @@ $input-border: 1px solid $input-border-color;
&--dropdown { &--dropdown {
padding-right: $space-lg; padding-right: $space-lg;
position: relative;
display: flex;
align-items: center;
&::after { &::after {
position: absolute; position: absolute;
......
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