apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux(): new checkbox tweaks

Browse Source
pull/4491/head
Torkel Ödegaard 10 years ago
parent 530b6a5088
commit ae255a7adf
3 changed files with 166 additions and 225 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 36
      public/app/plugins/panel/graph/styleEditor.html
  2. 2
      public/sass/_variables.dark.scss
  3. 85
      public/sass/components/_switch.scss

36
public/app/plugins/panel/graph/styleEditor.html
Unescape View File

@ -3,29 +3,23 @@
<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 class="gf-form-label width-5">Bars</label>
<div class="gf-form-switch-wrapper"> <div class="gf-form-switch">
<div class="switch"> <input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars">
<input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.bars"> <label for="cmn-toggle-3" data-on="Yes" data-off="No"></label>
<label for="cmn-toggle-3"></label>
</div>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-5">Lines</label> <label class="gf-form-label width-5">Lines</label>
<div class="gf-form-switch-wrapper"> <div class="gf-form-switch">
<div class="switch"> <input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.lines"> <label for="cmn-toggle-2" data-on="Yes" data-off="No"></label>
<label for="cmn-toggle-2"></label>
</div>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-5">Points</label> <label class="gf-form-label width-5">Points</label>
<div class="gf-form-switch-wrapper"> <div class="gf-form-switch">
<div class="switch"> <input id="cmn-toggle-1" type="checkbox" ng-model="ctrl.panel.points">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.points"> <label for="cmn-toggle-1" data-on="Yes" data-off="No"></label>
<label for="cmn-toggle-1"></label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -80,22 +74,18 @@
<h5 class="section-heading">Multiple Series</h5> <h5 class="section-heading">Multiple Series</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-7">Stack</label> <label class="gf-form-label width-7">Stack</label>
<div class="gf-form-switch-wrapper"> <div class="gf-form-switch">
<div class="switch"> <input id="cmn-toggle-7" type="checkbox" ng-model="ctrl.panel.stack">
<input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" ng-model="ctrl.panel.stack">
<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label> <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
</div> </div>
</div> </div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack"> <div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-7">Percent</label> <label class="gf-form-label width-7">Percent</label>
<div class="gf-form-switch-wrapper"> <div class="gf-form-switch">
<div class="switch"> <input id="cmn-toggle-8" type="checkbox" ng-model="ctrl.panel.percent">
<input id="cmn-toggle-8" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" ng-model="ctrl.panel.percent">
<label for="cmn-toggle-8" data-on="Yes" data-off="No"></label> <label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
</div> </div>
</div> </div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack"> <div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-7">Tooltip value</label> <label class="gf-form-label width-7">Tooltip value</label>
<div class="gf-form-select-wrapper max-width-8"> <div class="gf-form-select-wrapper max-width-8">

2
public/sass/_variables.dark.scss
Unescape View File

@ -124,7 +124,7 @@ $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark; $btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 3%); $btn-secondary-bg-hl: lighten($blue-dark, 5%);
$btn-success-bg: lighten($green, 3%); $btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%); $btn-success-bg-hl: darken($green, 3%);

85
public/sass/components/_switch.scss
Unescape View File

@ -3,80 +3,31 @@ $switch-width: 3.5rem;
$switch-height: 1.5rem; $switch-height: 1.5rem;
/* ============================================================ /* ============================================================
COMMON SWITCH 3 - YES NO
============================================================ */ ============================================================ */
.cmn-toggle {
.gf-form-switch {
position: relative;
input {
position: absolute; position: absolute;
margin-left: -9999px; margin-left: -9999px;
visibility: hidden; visibility: hidden;
display: none;
} }
.cmn-toggle + label {
input + label {
display: block; display: block;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
}
/* ============================================================
SWITCH 1 - ROUND
============================================================ */
input.cmn-toggle-round + label {
padding: 2px;
width: $switch-width;
height: $switch-height;
background-color: $dark-1;
border-radius: $switch-border-radius;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round + label:before {
right: 1px;
background-color: $card-background;
border-radius: $switch-border-radius;
box-shadow: $card-shadow;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: $switch-height;
background-color: $dark-5;
border-radius: 100%;
box-shadow: $card-shadow;
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-color: $blue;
}
input.cmn-toggle-round:checked + label:after {
margin-left: $switch-width - $switch-height;
}
/* ============================================================
SWITCH 3 - YES NO
============================================================ */
input.cmn-toggle-yes-no + label {
padding: 2px;
width: 5rem; width: 5rem;
height: 2.6rem; height: 2.65rem;
padding: $input-padding-y $input-padding-x; background-color: $page-bg;
background-color: $input-bg;
} }
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after { input + label:before, input + label:after {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
@ -90,15 +41,14 @@ input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
line-height: 2.6rem; line-height: 2.6rem;
} }
input.cmn-toggle-yes-no + label:before { input + label:before {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl); @include buttonBackground($input-bg, lighten($input-bg, 5%));
content: attr(data-off); content: attr(data-off);
transition: transform 0.5s; transition: transform 0.5s;
backface-visibility: hidden; backface-visibility: hidden;
} }
input.cmn-toggle-yes-no + label:after { input + label:after {
//@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
content: attr(data-on); content: attr(data-on);
transition: transform 0.5s; transition: transform 0.5s;
@ -106,10 +56,11 @@ input.cmn-toggle-yes-no + label:after {
backface-visibility: hidden; backface-visibility: hidden;
} }
input.cmn-toggle-yes-no:checked + label:before { input:checked + label:before {
transform: rotateY(180deg); transform: rotateY(180deg);
} }
input.cmn-toggle-yes-no:checked + label:after { input:checked + label:after {
transform: rotateY(0); transform: rotateY(0);
} }
}

Write Preview
Loading…
Cancel
Save