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(): created new gf-form-switch directive clean/refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-21 21:24:06 +01:00
parent 7403b94b9d
commit 98206ab49f
5 changed files with 86 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/app/core/components/switch.ts Normal file
View File

@ -0,0 +1,47 @@
///<reference path="../../headers/common.d.ts" />
import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import coreModule from 'app/core/core_module';
var template = `
<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
<div class="gf-form-switch {{ctrl.switchClass}}" >
<input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
</div>
`;
export class SwitchCtrl {
onChange: any;
internalOnChange() {
return new Promise(resolve => {
setTimeout(() => {
this.onChange();
resolve();
});
});
}
}
export function switchDirective() {
return {
restrict: 'E',
controller: SwitchCtrl,
controllerAs: 'ctrl',
bindToController: true,
scope: {
checked: "=",
label: "@",
labelClass: "@",
switchClass: "@",
onChange: "&",
},
template: template,
};
}
coreModule.directive('gfFormSwitch', switchDirective);

2
public/app/core/core.ts
View File

@ -29,6 +29,7 @@ import {colorPicker} from './components/colorpicker';
import {navbarDirective} from './components/navbar/navbar'; import {navbarDirective} from './components/navbar/navbar';
import {arrayJoin} from './directives/array_join'; import {arrayJoin} from './directives/array_join';
import {layoutSelector} from './components/layout_selector/layout_selector'; import {layoutSelector} from './components/layout_selector/layout_selector';
import {switchDirective} from './components/switch';
import 'app/core/controllers/all'; import 'app/core/controllers/all';
import 'app/core/services/all'; import 'app/core/services/all';
import 'app/core/routes/routes'; import 'app/core/routes/routes';
@ -44,5 +45,6 @@ export {
searchDirective, searchDirective,
colorPicker, colorPicker,
layoutSelector, layoutSelector,
switchDirective,
infoPopover infoPopover
}; };

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

@ -23,15 +23,16 @@
ng-change="ctrl.refresh()" ng-model-onblur></input> ng-change="ctrl.refresh()" ng-model-onblur></input>
</div> </div>
<div class="gf-form"> <div class="gf-form-inline">
<span class="gf-form-label"> <div class="gf-form">
<i class="fa fa-clock-o"></i> <span class="gf-form-label">
</span> <i class="fa fa-clock-o"></i>
<label class="gf-form-label width-12">Hide time override info</label> </span>
<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>
<gf-form-switch class="gf-form max-width-30"
label="Hide time override info" label-class="width-12"
checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.render()">
</gf-form-switch>
</div> </div>
</div> </div>

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

@ -1,27 +1,18 @@
<div class="editor-row gf-form-group"> <div class="editor-row gf-form-group">
<div class="section"> <div class="section">
<h5 class="section-heading">Draw Modes</h5> <h5 class="section-heading">Draw Modes</h5>
<div class="gf-form"> <gf-form-switch class="gf-form"
<label for="cmn-toggle-3" class="gf-form-label width-5">Bars</label> label="Bars" label-class="width-5"
<div class="gf-form-switch"> checked="ctrl.panel.bars" on-change="ctrl.render()">
<input id="cmn-toggle-3" type="checkbox" ng-model="ctrl.panel.bars"> </gf-form-switch>
<label for="cmn-toggle-3" data-on="Yes" data-off="No"></label> <gf-form-switch class="gf-form"
</div> label="Lines" label-class="width-5"
</div> checked="ctrl.panel.lines" on-change="ctrl.render()">
<div class="gf-form"> </gf-form-switch>
<label for="cmn-toggle-2" class="gf-form-label width-5">Lines</label> <gf-form-switch class="gf-form"
<div class="gf-form-switch"> label="Points" label-class="width-5"
<input id="cmn-toggle-2" type="checkbox" ng-model="ctrl.panel.lines"> checked="ctrl.panel.points" on-change="ctrl.render()">
<label for="cmn-toggle-2" data-on="Yes" data-off="No"></label> </gf-form-switch>
</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>
<div class="section"> <div class="section">
<h5 class="section-heading">Mode Options</h5> <h5 class="section-heading">Mode Options</h5>
@ -43,13 +34,10 @@
<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"> <gf-form-switch class="gf-form"
<label class="gf-form-label width-8">Staircase</label> label="Staircase" label-class="width-8"
<div class="gf-form-switch max-width-5"> checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
<input id="cmn-toggle-122" type="checkbox" ng-model="ctrl.panel.steppedLine"> </gf-form-switch>
<label for="cmn-toggle-122" data-on="Yes" data-off="No"></label>
</div>
</div>
</div> </div>
<div class="section"> <div class="section">
<h5 class="section-heading">Misc options</h5> <h5 class="section-heading">Misc options</h5>
@ -75,20 +63,14 @@
<div class="section"> <div class="section">
<h5 class="section-heading">Multiple Series</h5> <h5 class="section-heading">Multiple Series</h5>
<div class="gf-form"> <gf-form-switch class="gf-form"
<label class="gf-form-label width-7">Stack</label> label="Stack" label-class="width-7"
<div class="gf-form-switch"> checked="ctrl.panel.stack" on-change="ctrl.render()">
<input id="cmn-toggle-7" type="checkbox" ng-model="ctrl.panel.stack"> </gf-form-switch>
<label for="cmn-toggle-7" data-on="Yes" data-off="No"></label> <gf-form-switch class="gf-form" ng-show="ctrl.panel.stack"
</div> label="Percent" label-class="width-7"
</div> checked="ctrl.panel.percent" on-change="ctrl.render()">
<div class="gf-form" ng-show="ctrl.panel.stack"> </gf-form-switch>
<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"> <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">

12
public/sass/components/_gf-form.scss
View File

@ -1,9 +1,7 @@
$gf-form-margin: 0.25rem; $gf-form-margin: 0.25rem;
$gf-form-label-margin: 0.25rem;
.gf-form { .gf-form {
margin-bottom: $gf-form-margin; margin-bottom: $gf-form-margin;
margin-right: $gf-form-margin;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -38,20 +36,20 @@ $gf-form-label-margin: 0.25rem;
.gf-form-label { .gf-form-label {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
line-height: $input-line-height; line-height: $input-line-height;
flex-shrink: 0; flex-shrink: 0;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-label-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
} }
.gf-form-switch-wrapper { .gf-form-switch-wrapper {
margin-right: $gf-form-label-margin; margin-right: $gf-form-margin;
} }
.gf-form-checkbox { .gf-form-checkbox {
@ -71,6 +69,7 @@ $gf-form-label-margin: 0.25rem;
display: block; display: block;
width: 100%; width: 100%;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height; line-height: $input-line-height;
color: $input-color; color: $input-color;
@ -113,6 +112,7 @@ $gf-form-label-margin: 0.25rem;
} }
.gf-form-select-wrapper { .gf-form-select-wrapper {
margin-right: $gf-form-margin;
position: relative; position: relative;
background-color: $input-bg; background-color: $input-bg;
@ -143,10 +143,6 @@ $gf-form-label-margin: 0.25rem;
} }
} }
.gf-form-select-wrapper + .gf-form-select-wrapper {
margin-left: $gf-form-label-margin;
}
.gf-form-btn { .gf-form-btn {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
line-height: $input-line-height; line-height: $input-line-height;