Skip to content

N
nexpie-grafana-theme
Commit 488fe62f by Torkel Ödegaard
Options

fix(singletat): fixed/polished layout in singlestat ui options tab

parent faf6a5fd
Showing with 26 additions and 22 deletions
public/app/plugins/panel/singlestat/editor.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-4">Stat</label> <label class="gf-form-label width-6">Stat</label>
<div class="gf-form-select-wrapper width-7"> <div class="gf-form-select-wrapper width-7">
<select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select> <select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
</div> </div>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-4">Prefix</label> <label class="gf-form-label width-6">Prefix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur> <input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label> <label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
...@@ -27,26 +27,21 @@ ...@@ -27,26 +27,21 @@
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-4">Postfix</label> <label class="gf-form-label width-6">Postfix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur> <input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label> <label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select> <select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
</div> </div>
</div> </div>
</div> <div class="gf-form">
<label class="gf-form-label width-6">Unit</label>
<div class="section gf-form-group"> <div class="gf-form-dropdown-typeahead width-18" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
<h5 class="section-heading">Unit</h5> </div>
<div class="gf-form-inline"> <div class="gf-form">
<div class="gf-form"> <label class="gf-form-label width-6">Decimals</label>
<div class="gf-form-dropdown-typeahead" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div> <input type="number" class="gf-form-input width-18" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
</div> </div>
<div class="gf-form">
<label class="gf-form-label">Decimals</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
</div> </div>
<div class="section gf-form-group"> <div class="section gf-form-group">
...@@ -86,7 +81,7 @@ ...@@ -86,7 +81,7 @@
<h5 class="section-heading">Spark lines</h5> <h5 class="section-heading">Spark lines</h5>
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.sparkline.show"> <div ng-if="ctrl.panel.sparkline.show">
<gf-form-switch class="gf-form" label-class="width-9" label="Background mode" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-9" label="Full height" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-9">Line Color</label> <label class="gf-form-label width-9">Line Color</label>
<span class="gf-form-label"> <span class="gf-form-label">
...@@ -104,10 +99,10 @@ ...@@ -104,10 +99,10 @@
<div class="section gf-form-group"> <div class="section gf-form-group">
<h5 class="section-heading">Gauge</h5> <h5 class="section-heading">Gauge</h5>
<gf-form-switch class="gf-form" label-class="width-8" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.gauge.show"> <div ng-if="ctrl.panel.gauge.show">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Min</label> <label class="gf-form-label width-10">Min</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur> <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange"> <label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
&nbsp; <i class="fa fa-warning"></i> &nbsp; <i class="fa fa-warning"></i>
...@@ -115,11 +110,11 @@ ...@@ -115,11 +110,11 @@
</label> </label>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-8">Max</label> <label class="gf-form-label width-10">Max</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur> <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
</div> </div>
<gf-form-switch class="gf-form" label-class="width-10" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-10" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-10" switch-class="max-width-6" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
</div> </div>
</div> </div>
</div> </div>
public/sass/base/_forms.scss
...@@ -97,6 +97,15 @@ input[type="checkbox"]:focus { ...@@ -97,6 +97,15 @@ input[type="checkbox"]:focus {
@include tab-focus(); @include tab-focus();
} }
// not a big fan of number fields
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
// Placeholder // Placeholder
// ------------------------- // -------------------------
......
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