From 721880444000f81ea2537a9302488db04cc2b600 Mon Sep 17 00:00:00 2001 From: tibing Date: Thu, 7 Jul 2016 15:25:08 +0300 Subject: [PATCH] feat(ba-checkbox): create checkbox component --- .../checkboxInputs.component.ts | 3 + .../checkboxInputs/checkboxInputs.html | 20 +---- .../validationInputs.component.ts | 2 + .../validationInputs/validationInputs.html | 28 +------ .../baCheckbox/baCheckbox.component.ts | 31 +++++++ .../components/baCheckbox/baCheckbox.html | 8 ++ .../components/baCheckbox/baCheckbox.scss | 78 +++++++++++++++++ src/app/theme/components/baCheckbox/index.ts | 1 + src/app/theme/components/index.ts | 1 + src/app/theme/sass/_form.scss | 84 +++---------------- 10 files changed, 142 insertions(+), 114 deletions(-) create mode 100644 src/app/theme/components/baCheckbox/baCheckbox.component.ts create mode 100644 src/app/theme/components/baCheckbox/baCheckbox.html create mode 100644 src/app/theme/components/baCheckbox/baCheckbox.scss create mode 100644 src/app/theme/components/baCheckbox/index.ts diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts index c6a0194d..0b2f4c1d 100644 --- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts +++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts @@ -1,11 +1,14 @@ import {Component} from '@angular/core'; +import {BaCheckbox} from '../../../../../../theme/components'; @Component({ selector: 'checkbox-inputs', template: require('./checkboxInputs.html'), + directives: [BaCheckbox] }) export class CheckboxInputs { constructor() { } + } diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html index 04ae9ab1..70307ed4 100644 --- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html +++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html @@ -1,22 +1,13 @@
- +
- +
- +
@@ -42,10 +33,7 @@
- +
-
-
- -
-
-
-
- -
-
-
-
- -
-
- + + +
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.component.ts b/src/app/theme/components/baCheckbox/baCheckbox.component.ts new file mode 100644 index 00000000..1029ae55 --- /dev/null +++ b/src/app/theme/components/baCheckbox/baCheckbox.component.ts @@ -0,0 +1,31 @@ +import {Component, Provider, forwardRef, Input} from "@angular/core"; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common"; + +const BA_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider( + NG_VALUE_ACCESSOR, { + useExisting: forwardRef(() => BaCheckbox), + multi: true + }); + +@Component({ + selector: 'ba-checkbox', + template: require('./baCheckbox.html'), + providers: [BA_CHECKBOX_CONTROL_VALUE_ACCESSOR] +}) +export class BaCheckbox implements ControlValueAccessor { + @Input() disabled:boolean; + @Input() label:string; + @Input() value:string; + @Input() baCheckboxClass:string; + + public state: boolean; + + onChange(value: any): void {} + onTouch(value: any): void {} + writeValue(value: any): void { + this.state = value; + } + + registerOnChange(fn: any): void { this.onChange = fn; } + registerOnTouched(fn: any): void { this.onTouch = fn; } +} diff --git a/src/app/theme/components/baCheckbox/baCheckbox.html b/src/app/theme/components/baCheckbox/baCheckbox.html new file mode 100644 index 00000000..b8409ea6 --- /dev/null +++ b/src/app/theme/components/baCheckbox/baCheckbox.html @@ -0,0 +1,8 @@ +
+ +
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.scss b/src/app/theme/components/baCheckbox/baCheckbox.scss new file mode 100644 index 00000000..065ec15d --- /dev/null +++ b/src/app/theme/components/baCheckbox/baCheckbox.scss @@ -0,0 +1,78 @@ +label.custom-checkbox > span { + display: block; + margin-top: -13px; + margin-right: 10px; +} + +label.custom-checkbox { + padding-right: 0; + padding-left: 0; + margin-bottom: 0; + & > input { + height: 0; + z-index: -100 !important; + opacity: 0; + position: absolute; + &:checked { + & + span { + &:before { + content: "\f00c"; + font-weight: $font-light; + } + } + } + &:disabled { + & + span { + color: $disabled; + cursor: not-allowed; + &:before { + border-color: $disabled !important; + cursor: not-allowed; + } + } + } + } + & > span { + position: relative; + display: inline-block; + margin: 0; + line-height: 16px; + font-weight: $font-light; + cursor: pointer; + padding-left: 22px; + width: 100%; + &:before { + cursor: pointer; + font-family: fontAwesome; + font-weight: $font-light; + font-size: 12px; + color: $content-text; + content: "\a0"; + background-color: transparent; + border: 1px solid $border; + border-radius: 0; + display: inline-block; + text-align: center; + height: 16px; + line-height: 14px; + min-width: 16px; + margin-right: 6px; + position: relative; + top: 0; + margin-left: -22px; + float: left; + } + &:hover { + &:before { + border-color: $primary-bg; + } + } + } +} + +.form-horizontal { + .checkbox, .checkbox-inline{ + padding-top: 0; + } +} + diff --git a/src/app/theme/components/baCheckbox/index.ts b/src/app/theme/components/baCheckbox/index.ts new file mode 100644 index 00000000..5bd11d98 --- /dev/null +++ b/src/app/theme/components/baCheckbox/index.ts @@ -0,0 +1 @@ +export * from './baCheckbox.component'; diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts index 4d80824e..9d4c20f7 100644 --- a/src/app/theme/components/index.ts +++ b/src/app/theme/components/index.ts @@ -7,3 +7,4 @@ export * from './baAmChart'; export * from './baChartistChart'; export * from './baBackTop'; export * from './baFullCalendar'; +export * from './baCheckbox'; diff --git a/src/app/theme/sass/_form.scss b/src/app/theme/sass/_form.scss index 2a7b0d8c..ff93ab56 100644 --- a/src/app/theme/sass/_form.scss +++ b/src/app/theme/sass/_form.scss @@ -1,3 +1,5 @@ +@import "../components/baCheckbox/baCheckbox"; + .label { border-radius: 0; } @@ -75,12 +77,6 @@ textarea.form-control { button[type="submit"] { margin-left: 12px; } - - label.custom-checkbox > span { - display: block; - margin-top: -13px; - margin-right: 10px; - } } @mixin setSwitchBorder($color) { @@ -182,71 +178,6 @@ textarea.form-control { } } -label.custom-checkbox { - padding-right: 0; - padding-left: 0; - margin-bottom: 0; - & > input { - height: 0; - z-index: -100 !important; - opacity: 0; - position: absolute; - &:checked { - & + span { - &:before { - content: "\f00c"; - font-weight: $font-light; - } - } - } - &:disabled { - & + span { - color: $disabled; - cursor: not-allowed; - &:before { - border-color: $disabled !important; - cursor: not-allowed; - } - } - } - } - & > span { - position: relative; - display: inline-block; - margin: 0; - line-height: 16px; - font-weight: $font-light; - cursor: pointer; - padding-left: 22px; - width: 100%; - &:before { - cursor: pointer; - font-family: fontAwesome; - font-weight: $font-light; - font-size: 12px; - color: $content-text; - content: "\a0"; - background-color: transparent; - border: 1px solid $border; - border-radius: 0; - display: inline-block; - text-align: center; - height: 16px; - line-height: 14px; - min-width: 16px; - margin-right: 6px; - position: relative; - top: 0; - margin-left: -22px; - float: left; - } - &:hover { - &:before { - border-color: $primary-bg; - } - } - } -} .nowrap { white-space: nowrap; @@ -307,7 +238,7 @@ label.custom-input-danger { } .form-horizontal { - .radio, .checkbox, .radio-inline, .checkbox-inline { + .radio, .radio-inline { padding-top: 0; } } @@ -327,7 +258,6 @@ label.custom-input-danger { border-color: $focusColor; } } - label.custom-checkbox { color: $color; & > span { @@ -582,3 +512,11 @@ label.custom-input-danger { .sub-little-text { font-size: 12px; } + +.rating { + font-size: 20px; +} + +rating-inputs span { + vertical-align: middle; +}