Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(inputs\multi-checkbox): add multi-checkbox directive

Browse source
This commit is contained in:
tibing 2016-07-08 17:00:07 +03:00
parent 73cec2fceb
commit fa854ad6cc
12 changed files with 191 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
View file

@ -1,14 +1,34 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components';
import {BaMultiCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'checkbox-inputs',
template: require('./checkboxInputs.html'),
directives: [BaCheckbox]
directives: [BaMultiCheckbox]
})
export class CheckboxInputs {
public checkboxModel = [{
name: 'Check 1',
checked: false,
class: 'col-md-4'
}, {
name: 'Check 2',
checked: true,
class: 'col-md-4'
}, {
name: 'Check 3',
checked: false,
class: 'col-md-4'
}];
public checkboxPropertiesMapping = {
model: 'checked',
value: 'name',
label: 'name',
baCheckboxClass: 'class'
};
constructor() {
}
}

9
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
View file

@ -1,8 +1,6 @@
<div class="checkbox-demo-row">
<div class="input-demo checkbox-demo row">
<ba-checkbox [(ngModel)]="value1" [baCheckboxClass]="'col-md-4'" [label]="'Check 1'" [disabled]="false" [value]="option1" id="inlineCheckbox01"></ba-checkbox>
<ba-checkbox [(ngModel)]="value2" [baCheckboxClass]="'col-md-4'" [label]="'Check 2'" [disabled]="false" [value]="option2" id="inlineCheckbox02"></ba-checkbox>
<ba-checkbox [(ngModel)]="value3" [baCheckboxClass]="'col-md-4'" [label]="'Check 3'" [disabled]="false" [value]="option3" id="inlineCheckbox03"></ba-checkbox>
<ba-multi-checkbox [(ngModel)]="checkboxModel" [propertiesMapping]="checkboxPropertiesMapping"></ba-multi-checkbox>
</div>
<div class="input-demo radio-demo row">
<div class="col-md-4">
@ -27,10 +25,7 @@
</div>
<div>
<div class="checkbox disabled">
<label class="custom-checkbox nowrap">
<input type="checkbox" value="" disabled>
<span>Checkbox is disabled</span>
</label>
<ba-checkbox [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
</div>
<div class="radio disabled">
<label class="custom-radio nowrap">

22
src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts
View file

@ -1,10 +1,32 @@
import {Component} from '@angular/core';
import {BaMultiCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'validation-inputs',
directives: [BaMultiCheckbox],
template: require('./validationInputs.html'),
})
export class ValidationInputs {
public checkboxModel = [{
name: 'Checkbox with success',
state: false,
class: 'has-success checkbox'
}, {
name: 'Checkbox with warning',
state: false,
class: 'has-warning checkbox',
}, {
name: 'Checkbox with error',
state: false,
class: 'has-error checkbox'
}];
public checkboxPropertiesMapping = {
model: 'state',
value: 'name',
label: 'name',
baCheckboxClass: 'class'
};
constructor() {
}

26
src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.html
View file

@ -10,31 +10,7 @@
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxSuccess" value="option1">
<span>Checkbox with success</span>
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxWarning" value="option1">
<span>Checkbox with warning</span>
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox" id="checkboxError" value="option1">
<span>Checkbox with error</span>
</label>
</div>
</div>
<ba-multi-checkbox [(ngModel)]="checkboxModel" [propertiesMapping]="checkboxPropertiesMapping"></ba-multi-checkbox>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">

3
src/app/theme/components/baCheckbox/baCheckbox.component.ts
View file

@ -16,9 +16,8 @@ export class BaCheckbox implements ControlValueAccessor {
@Input() disabled:boolean;
@Input() label:string;
@Input() value:string;
@Input() name:string;
@Input() baCheckboxClass:string;
public state: boolean;
onChange(value: any): void {}

2
src/app/theme/components/baCheckbox/baCheckbox.html
View file

@ -1,6 +1,6 @@
<div class="{{baCheckboxClass}}">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" [name]="name" [checked]=state
<input type="checkbox" [checked]=state
(change)="onChange($event.target.checked)"
[disabled]="disabled" [value]="value">
<span>{{label}}</span>

78
src/app/theme/components/baCheckbox/baCheckbox.scss Normal file
View file

@ -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;
}
}

40
src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts Normal file
View file

@ -0,0 +1,40 @@
import {Component, Provider, forwardRef, Input} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
import {BaCheckbox} from '../baCheckbox';
const BA_MULTI_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => BaMultiCheckbox),
multi: true
});
@Component({
selector: 'ba-multi-checkbox',
template: require('./baMultiCheckbox.html'),
directives: [BaCheckbox],
providers: [BA_MULTI_CHECKBOX_CONTROL_VALUE_ACCESSOR]
})
export class BaMultiCheckbox implements ControlValueAccessor {
@Input() baMultiCheckboxClass:string;
@Input() propertiesMapping:any;
private _model;
getProp(item: any, propName: string): string {
const prop = this.propertiesMapping[propName];
if (!prop) {
return item[propName];
} else if (typeof prop === 'function') {
return prop(item);
}
return item[prop];
}
onChange(value: any): void {}
onTouch(value: any): void {}
writeValue(value: any): void {
this._model = value;
}
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouch = fn; }
}

10
src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html Normal file
View file

@ -0,0 +1,10 @@
<div class="{{baMultiCheckboxClass}}">
<ba-checkbox *ngFor="let item of _model"
[(ngModel)]="item[propertiesMapping.model]"
[baCheckboxClass]="getProp(item, 'baCheckboxClass')"
[label]="getProp(item, 'label')"
[disabled]="getProp(item, 'disabled')"
[value]="getProp(item, 'value')"
id="{{getProp(item, 'id')}}">
</ba-checkbox>
</div>

1
src/app/theme/components/baMultiCheckbox/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './baMultiCheckbox.component'

1
src/app/theme/components/index.ts
View file

@ -8,3 +8,4 @@ export * from './baChartistChart';
export * from './baBackTop';
export * from './baFullCalendar';
export * from './baCheckbox';
export * from './baMultiCheckbox';

84
src/app/theme/sass/_form.scss
View file

@ -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;
}