IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2020-05-10 17:11:51 +02:00 committed by GitHub
parent 1fafcd1562
commit e333d61b97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/app/plugins/panel/table-old/column_options.html
View File

@ -1,13 +1,13 @@
<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 @@
/> />
</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 @@
</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 @@
></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 @@
<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 @@
</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 @@
<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 @@
</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 @@
</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 @@
<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>

122
public/app/plugins/panel/table-old/editor.html
View File

@ -1,69 +1,67 @@
<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">
<div class="gf-form"> <label class="gf-form-label width-8">Table Transform</label>
<label class="gf-form-label width-10">Table Transform</label> <div class="gf-form-select-wrapper">
<div class="gf-form-select-wrapper max-width-15"> <select
<select class="gf-form-input"
class="gf-form-input" ng-model="editor.panel.transform"
ng-model="editor.panel.transform" ng-options="k as v.description for (k, v) in editor.transformers"
ng-options="k as v.description for (k, v) in editor.transformers" ng-change="editor.transformChanged()"
ng-change="editor.transformChanged()" ></select>
></select>
</div>
</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> </div>
</div> </div>
<div class="gf-form-inline">
<div class="section gf-form-group">
<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">Columns</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>
<div class="gf-form max-width-17"> <div class="gf-form" ng-repeat="column in editor.panel.columns">
<label class="gf-form-label width-8">Font size</label> <label class="gf-form-label">
<div class="gf-form-select-wrapper width-7"> <icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
<select <span>{{ column.text }}</span>
class="gf-form-input" </label>
ng-model="editor.panel.fontSize" </div>
ng-options="f for f in editor.fontSizes" <div class="gf-form" ng-show="editor.canSetColumns">
ng-change="editor.render()" <metric-segment
></select> segment="editor.addColumnSegment"
</div> 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 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()"
></select>
</div> </div>
</div> </div>
</div> </div>

3
public/sass/components/_gf-form.scss
View File

@ -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;