mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
21 changed files with 179 additions and 23 deletions
@ -0,0 +1,22 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, OnInit } from '@angular/core'; |
|||
|
|||
@Directive({ |
|||
selector: '[indeterminate]' |
|||
}) |
|||
export class IndeterminateDirective implements OnInit { |
|||
constructor( |
|||
private readonly element: ElementRef |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.element.nativeElement.indeterminate = true; |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
<div class="toggle-container" (click)="changeState()" |
|||
[class.disabled]="isDisabled" |
|||
[class.checked]="isChecked === true" |
|||
[class.unchecked]="isChecked === false"> |
|||
<div class="toggle-button"></div> |
|||
</div> |
|||
@ -0,0 +1,60 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$toggle-width: 3.2rem; |
|||
$toggle-height: 2rem; |
|||
$toggle-button-size: $toggle-height - .3rem; |
|||
|
|||
.toggle { |
|||
&-button { |
|||
@include circle($toggle-button-size); |
|||
@include box-shadow(0, 2px, 2px, .2); |
|||
@include absolute($toggle-height * .5, auto, auto, $toggle-width * .5); |
|||
@include transition(left .3s ease); |
|||
background: $color-accent-dark; |
|||
border: 0; |
|||
margin-left: -$toggle-button-size * .5; |
|||
margin-top: -$toggle-button-size * .5; |
|||
} |
|||
|
|||
&-container { |
|||
& { |
|||
@include border-radius($toggle-height * .5); |
|||
@include box-shadow-inner; |
|||
@include transition(background-color .3s ease); |
|||
position: relative; |
|||
background: lighten($color-border, 6%); |
|||
border: 0; |
|||
height: $toggle-height; |
|||
width: $toggle-width; |
|||
} |
|||
|
|||
&.checked { |
|||
& { |
|||
background: $color-theme-green-dark; |
|||
} |
|||
|
|||
.toggle-button { |
|||
left: $toggle-height * .5; |
|||
} |
|||
} |
|||
|
|||
&.unchecked { |
|||
& { |
|||
background: $color-theme-error; |
|||
} |
|||
|
|||
.toggle-button { |
|||
left: $toggle-width - $toggle-height * .5; |
|||
} |
|||
} |
|||
|
|||
&.disabled { |
|||
& { |
|||
background: $color-disabled; |
|||
border: 0; |
|||
cursor: not-allowed; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, forwardRef } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
const NOOP = () => { /* NOOP */ }; |
|||
|
|||
export const SQX_TOGGLE_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ToggleComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-toggle', |
|||
styleUrls: ['./toggle.component.scss'], |
|||
templateUrl: './toggle.component.html', |
|||
providers: [SQX_TOGGLE_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class ToggleComponent implements ControlValueAccessor { |
|||
private changeCallback: (value: any) => void = NOOP; |
|||
private touchedCallback: () => void = NOOP; |
|||
|
|||
public isChecked: boolean | undefined = undefined; |
|||
public isDisabled = false; |
|||
|
|||
public writeValue(value: any) { |
|||
this.isChecked = value; |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.changeCallback = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.touchedCallback = fn; |
|||
} |
|||
|
|||
public changeState() { |
|||
if (this.isDisabled) { |
|||
return; |
|||
} |
|||
this.isChecked = !(this.isChecked === true); |
|||
|
|||
this.changeCallback(this.isChecked); |
|||
this.touchedCallback(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue