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

48
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>

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

@ -1,9 +1,8 @@
<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"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-10">Table Transform</label> <label class="gf-form-label width-8">Table Transform</label>
<div class="gf-form-select-wrapper max-width-15"> <div class="gf-form-select-wrapper">
<select <select
class="gf-form-input" class="gf-form-input"
ng-model="editor.panel.transform" ng-model="editor.panel.transform"
@ -14,7 +13,7 @@
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-10">Columns</label> <label class="gf-form-label width-8">Columns</label>
</div> </div>
<div class="gf-form" ng-repeat="column in editor.panel.columns"> <div class="gf-form" ng-repeat="column in editor.panel.columns">
<label class="gf-form-label"> <label class="gf-form-label">
@ -38,9 +37,9 @@
</label> </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>
@ -65,5 +64,4 @@
></select> ></select>
</div> </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;