IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-13 17:15:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): checkbox v2 tweaks

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-21 14:08:18 +01:00
parent ae255a7adf
commit fc983f9751
4 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/panel/partials/panelTime.html
View File

@ -9,7 +9,7 @@
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
ng-change="ctrl.refresh()" ng-model-onblur></input>
</div>
<div class="gf-form">
@ -20,14 +20,18 @@
<span class="gf-form-label width-6">Amount</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
ng-change="ctrl.refresh()" ng-model-onblur>
ng-change="ctrl.refresh()" ng-model-onblur></input>
</div>
<div class="gf-form">
<span class="gf-form-label">
<i class="fa fa-clock-o"></i>
</span>
<editor-checkbox text="Hide time override info" model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()"></editor-checkbox>
<label class="gf-form-label width-12">Hide time override info</label>
<div class="gf-form-switch max-width-6">
<input id="cmn-toggle-122" type="checkbox" ng-model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()">
<label for="cmn-toggle-122" data-on="Yes" data-off="No"></label>
</div>
</div>
</div>

15
public/app/plugins/panel/graph/styleEditor.html
View File

@ -2,14 +2,14 @@
<div class="section">
<h5 class="section-heading">Draw Modes</h5>
<div class="gf-form">
<label class="gf-form-label width-5">Bars</label>
<label for="cmn-toggle-3" class="gf-form-label width-5">Bars</label>
<div class="gf-form-switch">
<input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars">
<label for="cmn-toggle-3" data-on="Yes" data-off="No"></label>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Lines</label>
<label for="cmn-toggle-2" class="gf-form-label width-5">Lines</label>
<div class="gf-form-switch">
<input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines">
<label for="cmn-toggle-2" data-on="Yes" data-off="No"></label>
@ -27,25 +27,28 @@
<h5 class="section-heading">Mode Options</h5>
<div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Fill</label>
<div class="gf-form-select-wrapper">
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper">
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper">
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Staircase</label>
<editor-checkbox text="" model="ctrl.panel.steppedLine" change="ctrl.render()"></editor-checkbox>
<div class="gf-form-switch max-width-5">
<input id="cmn-toggle-122" type="checkbox" ng-model="ctrl.panel.steppedLine">
<label for="cmn-toggle-122" data-on="Yes" data-off="No"></label>
</div>
</div>
</div>
<div class="section">

6
public/sass/components/_switch.scss
View File

@ -8,6 +8,9 @@ $switch-height: 1.5rem;
.gf-form-switch {
position: relative;
max-width: 4.5rem;
flex-grow: 1;
min-width: 4.0rem;
input {
position: absolute;
@ -22,7 +25,7 @@ $switch-height: 1.5rem;
cursor: pointer;
outline: none;
user-select: none;
width: 5rem;
width: 100%;
height: 2.65rem;
background-color: $page-bg;
}
@ -35,7 +38,6 @@ $switch-height: 1.5rem;
bottom: 0;
right: 0;
color: #fff;
font-family: "Open Sans";
font-size: $font-size-sm;
text-align: center;
line-height: 2.6rem;

4
public/sass/utils/_widths.scss
View File

@ -6,13 +6,13 @@
// widths
@for $i from 1 through 30 {
.width-#{$i} {
width: ($spacer * $i) - $gf-form-margin;
width: ($spacer * $i) - $gf-form-margin !important;
}
}
@for $i from 1 through 30 {
.max-width-#{$i} {
max-width: ($spacer * $i) - $gf-form-margin;
max-width: ($spacer * $i) - $gf-form-margin !important;
flex-grow: 1;
}
}