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. 238
      public/app/plugins/panel/graph/styleEditor.html
  2. 2
      public/sass/_variables.dark.scss
  3. 151
      public/sass/components/_switch.scss

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

@ -3,146 +3,136 @@
<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>
<div class="gf-form">
<label class="gf-form-label width-5">Points</label>
<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>
<div class="section">
<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">
<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">
<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">
<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>
</div>
<div class="section">
<h5 class="section-heading">Misc options</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Renderer</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Tooltip mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<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">
<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">
<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">
<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>
</div>
<div class="section">
<h5 class="section-heading">Misc options</h5>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Renderer</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Tooltip mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section">
<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">
<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
</div>
<div class="section">
<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">
<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 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">
<label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
</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">
<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 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">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</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">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div class="tight-form-container">
<div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</li>
<div class="section">
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div class="tight-form-container">
<div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</li>
<li class="tight-form-item">
alias or regex
</li>
<li class="tight-form-item">
alias or regex
</li>
<li>
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="input-medium tight-form-input" >
</li>
<li>
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="input-medium tight-form-input" >
</li>
<li class="tight-form-item" ng-repeat="option in currentOverrides">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'">
{{option.name}}: {{option.value}}
</span>
</li>
<li class="tight-form-item" ng-repeat="option in currentOverrides">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'">
{{option.name}}: {{option.value}}
</span>
</li>
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="ctrl.addSeriesOverride()">
Add series specific option
</button>
</div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="ctrl.addSeriesOverride()">
Add series specific option
</button>
</div>
</div>

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%);

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

@ -3,113 +3,64 @@ $switch-width: 3.5rem;
$switch-height: 1.5rem;
/* ============================================================
COMMON
SWITCH 3 - YES NO
============================================================ */
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + 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;
}
.gf-form-switch {
position: relative;
input.cmn-toggle-round:checked + label:after {
margin-left: $switch-width - $switch-height;
}
input {
position: absolute;
margin-left: -9999px;
visibility: hidden;
display: none;
}
/* ============================================================
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;
}
input + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
width: 5rem;
height: 2.65rem;
background-color: $page-bg;
}
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
font-family: "Open Sans";
font-size: $font-size-sm;
text-align: center;
line-height: 2.6rem;
}
input + label:before, input + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
font-family: "Open Sans";
font-size: $font-size-sm;
text-align: center;
line-height: 2.6rem;
}
input.cmn-toggle-yes-no + label:before {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
content: attr(data-off);
transition: transform 0.5s;
backface-visibility: hidden;
}
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);
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
content: attr(data-on);
transition: transform 0.5s;
transform: rotateY(180deg);
backface-visibility: hidden;
}
input + label:after {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
content: attr(data-on);
transition: transform 0.5s;
transform: rotateY(180deg);
backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
transform: rotateY(180deg);
}
input:checked + label:before {
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
transform: rotateY(0);
input:checked + label:after {
transform: rotateY(0);
}
}

Write Preview
Loading…
Cancel
Save