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>
<div class="gf-form">
<label class="gf-form-label width-5">Bars</label>
<div class="gf-form-switch-wrapper">
<div class="switch">
<input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.bars">
<label for="cmn-toggle-3"></label>
</div>
<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>
<div class="gf-form-switch-wrapper">
<div class="switch">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.lines">
<label for="cmn-toggle-2"></label>
</div>
<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>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Points</label>
<div class="gf-form-switch-wrapper">
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.points">
<label for="cmn-toggle-1"></label>
</div>
<div class="gf-form-switch">
<input id="cmn-toggle-1" type="checkbox" ng-model="ctrl.panel.points">
<label for="cmn-toggle-1" data-on="Yes" data-off="No"></label>
</div>
</div>
</div>
@ -80,22 +74,18 @@
<h5 class="section-heading">Multiple Series</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Stack</label>
<div class="gf-form-switch-wrapper">
<div class="switch">
<input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" ng-model="ctrl.panel.stack">
<div class="gf-form-switch">
<input id="cmn-toggle-7" type="checkbox" ng-model="ctrl.panel.stack">
<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-7">Percent</label>
<div class="gf-form-switch-wrapper">
<div class="switch">
<input id="cmn-toggle-8" class="cmn-toggle cmn-toggle-yes-no" type="checkbox" ng-model="ctrl.panel.percent">
<div class="gf-form-switch">
<input id="cmn-toggle-8" type="checkbox" ng-model="ctrl.panel.percent">
<label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
</div>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-7">Tooltip value</label>
<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-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-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;
/* ============================================================
COMMON
SWITCH 3 - YES NO
============================================================ */
.cmn-toggle {
.gf-form-switch {
position: relative;
input {
position: absolute;
margin-left: -9999px;
visibility: hidden;
display: none;
}
.cmn-toggle + label {
input + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-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;
height: 2.6rem;
padding: $input-padding-y $input-padding-x;
background-color: $input-bg;
height: 2.65rem;
background-color: $page-bg;
}
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
input + label:before, input + label:after {
display: block;
position: absolute;
top: 0;
@ -90,15 +41,14 @@ input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
line-height: 2.6rem;
}
input.cmn-toggle-yes-no + label:before {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
input + label:before {
@include buttonBackground($input-bg, lighten($input-bg, 5%));
content: attr(data-off);
transition: transform 0.5s;
backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
//@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
input + label:after {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
content: attr(data-on);
transition: transform 0.5s;
@ -106,10 +56,11 @@ input.cmn-toggle-yes-no + label:after {
backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
input:checked + label:before {
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
input:checked + label:after {
transform: rotateY(0);
}
}

Write Preview
Loading…
Cancel
Save