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="section gf-form-group">
<div class="gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-12">Apply to columns named</label>
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Name pattern</label>
<input
type="text"
placeholder="Name or regex"
class="gf-form-input width-13"
class="gf-form-input max-width-15"
ng-model="style.pattern"
bs-tooltip="'Specify regex using /my.*regex/ syntax'"
bs-typeahead="editor.getColumnNames"
......@@ -19,11 +19,11 @@
/>
</div>
</div>
<div class="gf-form" ng-if="style.type !== 'hidden'">
<label class="gf-form-label width-12">Column Header</label>
<div class="gf-form gf-form--grow" ng-if="style.type !== 'hidden'">
<label class="gf-form-label width-8">Column Header</label>
<input
type="text"
class="gf-form-input width-12"
class="gf-form-input max-width-15"
ng-model="style.alias"
ng-change="editor.render()"
ng-model-onblur
......@@ -32,18 +32,18 @@
</div>
<gf-form-switch
class="gf-form"
label-class="width-12"
label-class="width-8"
label="Render value as link"
checked="style.link"
on-change="editor.render()"
></gf-form-switch>
</div>
<div class="section gf-form-group">
<div class="gf-form-group">
<h5 class="section-heading">Type</h5>
<div class="gf-form">
<label class="gf-form-label width-10">Type</label>
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Type</label>
<div class="gf-form-select-wrapper width-16">
<select
class="gf-form-input"
......@@ -53,8 +53,8 @@
></select>
</div>
</div>
<div class="gf-form" ng-if="style.type === 'date'">
<label class="gf-form-label width-10">Date Format</label>
<div class="gf-form gf-form--grow" ng-if="style.type === 'date'">
<label class="gf-form-label width-8">Date Format</label>
<gf-form-dropdown
model="style.dateFormat"
css-class="gf-form-input width-16"
......@@ -69,7 +69,7 @@
<div ng-if="style.type === 'string'">
<gf-form-switch
class="gf-form"
label-class="width-10"
label-class="width-8"
ng-if="style.type === 'string'"
label="Sanitize HTML"
checked="style.sanitize"
......@@ -78,11 +78,11 @@
</div>
<div ng-if="style.type !== 'hidden'">
<div class="gf-form">
<label class="gf-form-label width-10">Align</label>
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-8">Align</label>
<gf-form-dropdown
model="style.align"
css-class="gf-form-input width-16"
css-class="gf-form-input"
lookup-text="true"
get-options="editor.alignTypes"
allow-custom="false"
......@@ -105,11 +105,11 @@
<div ng-if="style.type === 'number'">
<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>
</div>
<div class="gf-form">
<label class="gf-form-label width-10">Decimals</label>
<label class="gf-form-label width-8">Decimals</label>
<input
type="number"
class="gf-form-input width-4"
......@@ -122,7 +122,7 @@
</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>
<div class="editor-row">
<div class="gf-form-group">
......@@ -190,7 +190,7 @@
</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>
<div class="gf-form">
<label class="gf-form-label width-8"
......@@ -300,8 +300,6 @@
<hr />
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<icon name="'plus'"></icon>&nbsp;Add column style
</button>
</div>
<button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
<icon name="'plus'"></icon>&nbsp;Add column style
</button>
public/app/plugins/panel/table-old/editor.html
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Data</h5>
<div class="gf-form-group">
<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">
<label class="gf-form-label width-10">Table Transform</label>
<div class="gf-form-select-wrapper max-width-15">
<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>
<label class="gf-form-label width-8">Columns</label>
</div>
<div class="gf-form" ng-repeat="column in editor.panel.columns">
<label class="gf-form-label">
<icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
<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-inline">
<div class="gf-form">
<label class="gf-form-label width-10">Columns</label>
</div>
<div class="gf-form" ng-repeat="column in editor.panel.columns">
<label class="gf-form-label">
<icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
<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 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 class="section gf-form-group">
<h5 class="section-heading">Paging</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Rows per page</label>
<input
type="number"
class="gf-form-input width-7"
placeholder="100"
data-placement="right"
ng-model="editor.panel.pageSize"
<div class="gf-form-group">
<h5 class="section-heading">Paging</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Rows per page</label>
<input
type="number"
class="gf-form-input width-7"
placeholder="100"
data-placement="right"
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-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()"
></select>
</div>
></select>
</div>
</div>
</div>
public/sass/components/_gf-form.scss
......@@ -237,6 +237,9 @@ $input-border: 1px solid $input-border-color;
&--dropdown {
padding-right: $space-lg;
position: relative;
display: flex;
align-items: center;
&::after {
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