From 98206ab49f704c66b00aeb3f7a186ec4a2677ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 21 Mar 2016 21:24:06 +0100 Subject: [PATCH] ux(): created new gf-form-switch directive clean/refactoring --- public/app/core/components/switch.ts | 47 +++++++++++++ public/app/core/core.ts | 2 + .../features/panel/partials/panelTime.html | 17 ++--- .../app/plugins/panel/graph/styleEditor.html | 66 +++++++------------ public/sass/components/_gf-form.scss | 12 ++-- 5 files changed, 86 insertions(+), 58 deletions(-) create mode 100644 public/app/core/components/switch.ts diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts new file mode 100644 index 00000000000..72e54857e26 --- /dev/null +++ b/public/app/core/components/switch.ts @@ -0,0 +1,47 @@ +/// + +import config from 'app/core/config'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; + +var template = ` + +
+ + +
+`; + +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); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 2ab7ea01410..b0922af3f39 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -29,6 +29,7 @@ import {colorPicker} from './components/colorpicker'; import {navbarDirective} from './components/navbar/navbar'; import {arrayJoin} from './directives/array_join'; import {layoutSelector} from './components/layout_selector/layout_selector'; +import {switchDirective} from './components/switch'; import 'app/core/controllers/all'; import 'app/core/services/all'; import 'app/core/routes/routes'; @@ -44,5 +45,6 @@ export { searchDirective, colorPicker, layoutSelector, + switchDirective, infoPopover }; diff --git a/public/app/features/panel/partials/panelTime.html b/public/app/features/panel/partials/panelTime.html index 77a554faa86..4047558317f 100644 --- a/public/app/features/panel/partials/panelTime.html +++ b/public/app/features/panel/partials/panelTime.html @@ -23,15 +23,16 @@ ng-change="ctrl.refresh()" ng-model-onblur> -
- - - - -
- - +
+
+ + +
+ +
diff --git a/public/app/plugins/panel/graph/styleEditor.html b/public/app/plugins/panel/graph/styleEditor.html index f1079341f6d..17a9d702329 100644 --- a/public/app/plugins/panel/graph/styleEditor.html +++ b/public/app/plugins/panel/graph/styleEditor.html @@ -1,27 +1,18 @@
Draw Modes
-
- -
- - -
-
-
- -
- - -
-
-
- -
- - -
-
+ + + + + +
Mode Options
@@ -43,13 +34,10 @@
-
- -
- - -
-
+ +
Misc options
@@ -75,20 +63,14 @@
Multiple Series
-
- -
- - -
-
-
- -
- - -
-
+ + + +
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index cd500052d9a..cecbf6e5996 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,9 +1,7 @@ $gf-form-margin: 0.25rem; -$gf-form-label-margin: 0.25rem; .gf-form { margin-bottom: $gf-form-margin; - margin-right: $gf-form-margin; display: flex; flex-direction: row; align-items: center; @@ -38,20 +36,20 @@ $gf-form-label-margin: 0.25rem; .gf-form-label { padding: $input-padding-y $input-padding-x; + margin-right: $gf-form-margin; line-height: $input-line-height; flex-shrink: 0; background-color: $input-label-bg; display: block; font-size: $font-size-sm; - margin-right: $gf-form-label-margin; border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); } .gf-form-switch-wrapper { - margin-right: $gf-form-label-margin; + margin-right: $gf-form-margin; } .gf-form-checkbox { @@ -71,6 +69,7 @@ $gf-form-label-margin: 0.25rem; display: block; width: 100%; padding: $input-padding-y $input-padding-x; + margin-right: $gf-form-margin; font-size: $font-size-base; line-height: $input-line-height; color: $input-color; @@ -113,6 +112,7 @@ $gf-form-label-margin: 0.25rem; } .gf-form-select-wrapper { + margin-right: $gf-form-margin; position: relative; 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 { padding: $input-padding-y $input-padding-x; line-height: $input-line-height;