mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(): created new gf-form-switch directive clean/refactoring
This commit is contained in:
parent
7403b94b9d
commit
98206ab49f
47
public/app/core/components/switch.ts
Normal file
47
public/app/core/components/switch.ts
Normal 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);
|
@ -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
|
||||||
};
|
};
|
||||||
|
@ -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-inline">
|
||||||
<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>
|
||||||
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
@ -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">
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user