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

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
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" <input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span 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>
<div class="gf-form"> <div class="gf-form">
@@ -20,14 +20,18 @@
<span class="gf-form-label width-6">Amount</span> <span class="gf-form-label width-6">Amount</span>
<input type="text" class="gf-form-input max-width-8" placeholder="1h" <input type="text" class="gf-form-input max-width-8" placeholder="1h"
empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span 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>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label"> <span class="gf-form-label">
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>
</span> </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>
</div> </div>

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

@@ -2,14 +2,14 @@
<div class="section"> <div class="section">
<h5 class="section-heading">Draw Modes</h5> <h5 class="section-heading">Draw Modes</h5>
<div class="gf-form"> <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"> <div class="gf-form-switch">
<input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars"> <input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars">
<label for="cmn-toggle-3" data-on="Yes" data-off="No"></label> <label for="cmn-toggle-3" data-on="Yes" data-off="No"></label>
</div> </div>
</div> </div>
<div class="gf-form"> <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"> <div class="gf-form-switch">
<input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines"> <input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines">
<label for="cmn-toggle-2" data-on="Yes" data-off="No"></label> <label for="cmn-toggle-2" data-on="Yes" data-off="No"></label>
@@ -27,25 +27,28 @@
<h5 class="section-heading">Mode Options</h5> <h5 class="section-heading">Mode Options</h5>
<div class="gf-form" ng-show="ctrl.panel.lines"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Fill</label> <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> <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> </div>
<div class="gf-form" ng-show="ctrl.panel.lines"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Line Width</label> <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> <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> </div>
<div class="gf-form" ng-show="ctrl.panel.points"> <div class="gf-form" ng-show="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label> <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> <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> </div>
<div class="gf-form" ng-show="ctrl.panel.lines"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Staircase</label> <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> </div>
<div class="section"> <div class="section">

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

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

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

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