Toggle button

src/Squidex.Core/Schemas/BooleanFieldEditor.cs

@@ -10,6 +10,7 @@ namespace Squidex.Core.Schemas
 {
     public enum BooleanFieldEditor
     {
-        Checkbox
+        Checkbox,
+        Toggle
     }
 }

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -68,10 +68,13 @@
                             <div *ngSwitchCase="'Checkbox'">
                                 <div class="form-check form-check-inline">
                                     <label class="form-check-label">
-                                        <input class="form-check-input" type="checkbox" [formControlName]="language">
+                                        <input class="form-check-input" type="checkbox" [formControlName]="language" [indeterminate]="true">
                                     </label>
                                 </div>
                             </div>
+                            <div *ngSwitchCase="'Toggle'">
+                                <sqx-toggle [formControlName]="language"></sqx-toggle>
+                            </div>
                         </div>
                     </div>
                     <div *ngSwitchCase="'DateTime'">

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html

@@ -21,6 +21,13 @@
 
                 <span class="radio-label">Checkbox</span>
             </label>
+            <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Toggle'">
+                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" />
+
+                <i class="icon-control-Toggle"></i>
+
+                <span class="radio-label">Toggle</span>
+            </label>
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.html

@@ -7,11 +7,11 @@
         </div>
     </div>
 
-    <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
-        <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
+        <label class="col col-3 col-form-checkbox-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">
-            <input type="number" class="form-control" id="field-default-value" formControlName="defaultValue" />
+            <input type="checkbox" class="form-check-input" id="field-default-value" formControlName="defaultValue" [indeterminate]="true" />
         </div>
     </div>
 </div>

src/Squidex/app/features/schemas/pages/schema/types/date-time-validation.component.html

@@ -23,7 +23,7 @@
         </div>
     </div>
 
-    <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
         <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
         <div class="col col-9">

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.html

@@ -20,7 +20,7 @@
         </div>
     </div>
 
-    <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
         <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -27,7 +27,7 @@
             <input type="text" class="form-control" id="field-pattern" formControlName="pattern" placeholder="Regex Pattern" />
         </div>
     </div>
-    <div class="form-group row" [class.hidden]="hidePatternMessage | async">
+    <div class="form-group row" *ngIf="!(hidePatternMessage | async)">
         <label class="col col-3 col-form-label" for="field-pattern-message">Pattern Message</label>
 
         <div class="col col-6">
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
+    <div class="form-group row" *ngIf="!(hideDefaultValue | async)">
         <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
         <div class="col col-6">

src/Squidex/app/framework/angular/autocomplete.component.ts

@@ -26,8 +26,7 @@ export class AutocompleteItem {
 const KEY_ENTER = 13;
 const KEY_UP = 38;
 const KEY_DOWN = 40;
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AutocompleteComponent), multi: true

src/Squidex/app/framework/angular/date-time-editor.component.ts

@@ -11,8 +11,7 @@ import * as moment from 'moment';
 
 let Pikaday = require('pikaday/pikaday');
 
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_DATE_TIME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeEditorComponent), multi: true

src/Squidex/app/framework/angular/indeterminate.directive.ts

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

src/Squidex/app/framework/angular/json-editor.component.ts

@@ -13,8 +13,7 @@ import { ResourceLoaderService } from './../services/resource-loader.service';
 
 declare var ace: any;
 
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => JsonEditorComponent), multi: true

src/Squidex/app/framework/angular/markdown-editor.component.ts

@@ -12,8 +12,7 @@ import { ResourceLoaderService } from './../services/resource-loader.service';
 
 declare var SimpleMDE: any;
 
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MarkdownEditorComponent), multi: true

src/Squidex/app/framework/angular/rich-editor.component.ts

@@ -12,8 +12,7 @@ import { ResourceLoaderService } from './../services/resource-loader.service';
 
 declare var tinymce: any;
 
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true

src/Squidex/app/framework/angular/slider.component.ts

@@ -8,8 +8,7 @@
 import { Component, ElementRef, forwardRef, Input, Renderer, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export const SQX_SLIDER_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true

src/Squidex/app/framework/angular/tag-editor.component.ts

@@ -9,8 +9,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const KEY_ENTER = 13;
-/* tslint:disable:no-empty */
+const NOOP = () => { /* NOOP */ };
-const NOOP = () => { };
 
 export interface Converter {
     convert(input: string): any;

src/Squidex/app/framework/angular/toggle.component.html

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

src/Squidex/app/framework/angular/toggle.component.scss

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

src/Squidex/app/framework/angular/toggle.component.ts

@@ -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();
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -16,6 +16,7 @@ export * from './angular/date-time.pipes';
 export * from './angular/focus-on-change.directive';
 export * from './angular/focus-on-init.directive';
 export * from './angular/http-utils';
+export * from './angular/indeterminate.directive';
 export * from './angular/json-editor.component';
 export * from './angular/markdown-editor.component';
 export * from './angular/modal-view.directive';
@@ -29,6 +30,7 @@ export * from './angular/shortcut.component';
 export * from './angular/slider.component';
 export * from './angular/tag-editor.component';
 export * from './angular/title.component';
+export * from './angular/toggle.component';
 export * from './angular/user-report.component';
 export * from './configurations';
 

src/Squidex/app/framework/module.ts

@@ -47,6 +47,7 @@ import {
     TagEditorComponent,
     TitleService,
     TitleComponent,
+    ToggleComponent,
     UserReportComponent
 } from './declarations';
 
@@ -86,6 +87,7 @@ import {
         SliderComponent,
         TagEditorComponent,
         TitleComponent,
+        ToggleComponent,
         UserReportComponent
     ],
     exports: [
@@ -116,6 +118,7 @@ import {
         SliderComponent,
         TagEditorComponent,
         TitleComponent,
+        ToggleComponent,
         UserReportComponent,
         HttpModule,
         FormsModule,

src/Squidex/app/theme/_forms.scss

@@ -79,6 +79,10 @@ select {
     &:last-child {
         margin-bottom: 0;
     }
+
+    &~.hidden {
+        margin-bottom: 0;
+    }
 }
 
 .search-form {