Simple color editor.

src/Squidex.Domain.Apps.Core.Model/Schemas/StringFieldEditor.cs

@@ -10,6 +10,7 @@ namespace Squidex.Domain.Apps.Core.Schemas
     public enum StringFieldEditor
     {
         Input,
+        Color,
         Markdown,
         Dropdown,
         Radio,

src/Squidex/app/features/content/module.ts

@@ -8,6 +8,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DndModule } from 'ng2-dnd';
+import { ColorPickerModule  } from 'ngx-color-picker';
 
 import {
     CanDeactivateGuard,
@@ -81,6 +82,7 @@ const routes: Routes = [
 
 @NgModule({
     imports: [
+        ColorPickerModule,
         DndModule,
         SqxFrameworkModule,
         SqxSharedModule,

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -69,6 +69,13 @@
 								</label>
 							</div>
 						</ng-container>
+						<ng-container *ngSwitchCase="'Color'">
+                            <input class="form-control" type="text" [style.background]="control.value" [formControl]="control" [placeholder]="field.displayPlaceholder"
+                                cpPosition="bottom"
+                                cpOutputFormat="hex"
+                                [colorPicker]="control.value"
+                                (colorPickerChange)="control.setValue($event)" />
+						</ng-container>
 					</ng-container>
 				</ng-container>
 				<ng-container *ngSwitchCase="'Boolean'">

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

@@ -74,6 +74,13 @@
 
                 <span class="radio-label">Radio</span>
             </label>
+            <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Color'">
+                <input type="radio" class="radio-input" formControlName="editor" value="Color" />
+
+                <i class="icon-control-Color"></i>
+
+                <span class="radio-label">Color</span>
+            </label>
         </div>
     </div>
     <div class="form-group row" [class.hidden]="hideAllowedValues | async">

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

@@ -194,6 +194,7 @@ export class TagEditorComponent implements AfterViewInit, ControlValueAccessor,
 
     public markTouched() {
         this.callTouched();
+        this.resetAutocompletion();
 
         this.hasFocus = false;
     }

src/Squidex/app/theme/icomoon/demo-files/demo.css

@@ -150,16 +150,16 @@ p {
   font-size: 32px;
 }
 .fs2 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs3 {
   font-size: 32px;
 }
 .fs4 {
-  font-size: 28px;
+  font-size: 24px;
 }
 .fs5 {
-  font-size: 32px;
+  font-size: 28px;
 }
 .fs6 {
   font-size: 20px;

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -83,6 +83,8 @@
 <glyph unicode="&#xe949;" glyph-name="document-lock" d="M358.4 848.457c-28.314 0-51.2-22.886-51.2-51.2v-204.8h51.2v204.8h307.2v-153.6c0-28.314 22.886-51.2 51.2-51.2h153.6v-512h-307.2v-51.2h307.2c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2zM716.8 761.057l117.4-117.4h-117.4zM153.6 310.857v-281.6h358.4v281.6zM179.2 310.857v76.8c0 84.48 69.12 153.6 153.6 153.6s153.6-69.12 153.6-153.6v-76.8h-51.2v76.8c0 56.32-46.080 102.4-102.4 102.4s-102.4-46.080-102.4-102.4v-76.8z" />
 <glyph unicode="&#xe94a;" glyph-name="type-Tags" d="M295.954 137.249h-94.705c-47.353 0-88.786 41.434-88.786 88.786v491.283c0 47.353 41.434 88.786 88.786 88.786h94.705v59.191h-94.705c-82.867 0-147.977-65.11-147.977-147.977v-491.283c0-82.867 65.11-147.977 147.977-147.977h94.705v59.191zM970.728 486.474c-82.867 171.653-201.249 378.821-272.277 378.821h-112.462v-59.191h112.462c35.514-11.838 136.139-177.572 213.087-337.387-76.948-153.896-177.572-325.549-213.087-337.387h-112.462v-59.191h112.462c71.029 0 183.491 207.168 272.277 384.74l5.919 11.838-5.919 17.757zM266.358 622.659v-260.462h59.191v260.462zM479.422 622.659v-260.462h59.191v260.462z" />
 <glyph unicode="&#xe94b;" glyph-name="orleans" d="M512 924.477l-424.96-242.8v-485.64l424.96-242.8 424.96 242.8v485.64l-424.96 242.8zM512 715.337l245.76-138.24v-276.48l-245.76-138.24-245.76 138.24v276.48l245.76 138.24z" />
+<glyph unicode="&#xe94c;" glyph-name="prerender" d="M66.337 384.509l276.668 171.531v57.177l-331.627-207.614v-42.189l331.627-207.614v57.177zM957.663 384.51l-276.668 171.531v57.177l331.627-207.614v-42.189l-331.627-207.614v57.177zM583.295 745.817l-200.825-621.623 53.007-17.527 200.837 621.623z" />
+<glyph unicode="&#xe94d;" glyph-name="control-Color" d="M832 544h-320v-64h-64v96h384v192h-32v-96c0-17.664-14.336-32-32-32h-576c-17.696 0-32 14.336-32 32v128c0 17.696 14.304 32 32 32h576c17.664 0 32-14.304 32-32h64v-256h-32zM736 800h-512v-32h512v32zM544 128c0-35.328-28.672-64-64-64s-64 28.672-64 64v320h128v-320zM480 173.344c-17.696 0-32-14.336-32-32 0-17.696 14.304-32 32-32 17.664 0 32 14.304 32 32 0 17.664-14.336 32-32 32z" />
 <glyph unicode="&#xe94f;" glyph-name="control-Slug" d="M512 960c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h128v-870.4h-128c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h307.2c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-128v870.4h128c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-307.2zM51.2 755.2c-28.16 0-51.2-23.040-51.2-51.2v-460.8c0-28.16 23.040-51.2 51.2-51.2h537.6v51.2h-512c-15.36 0-25.6 10.24-25.6 25.6v409.6c0 15.36 10.24 25.6 25.6 25.6h512v51.2h-537.6zM742.4 755.2v-51.2h204.8c15.36 0 25.6-10.24 25.6-25.6v-409.6c0-15.36-10.24-25.6-25.6-25.6h-204.8v-51.2h230.4c28.16 0 51.2 23.040 51.2 51.2v460.8c0 28.16-23.040 51.2-51.2 51.2h-230.4zM386.56 353.28c0-12.8-7.68-23.040-20.48-25.6-28.16-10.24-58.88-15.36-92.16-15.36-35.84 0-66.56 10.24-84.48 25.6s-25.6 38.4-25.6 66.56 10.24 51.2 25.6 66.56c17.92 17.92 46.080 23.040 84.48 23.040h69.12v38.4c0 35.84-25.6 53.76-64 53.76-23.040 0-46.080-7.68-69.12-20.48-2.56-2.56-5.12-2.56-10.24-2.56-10.24 0-20.48 7.68-20.48 20.48 0 7.68 2.56 12.8 10.24 17.92 30.72 20.48 61.44 25.6 92.16 25.6 56.32 0 104.96-30.72 104.96-92.16v-181.76zM345.6 458.24h-69.12c-61.44 0-69.12-28.16-69.12-53.76s7.68-56.32 69.12-56.32c23.040 0 46.080 2.56 69.12 10.24v99.84z" />
 <glyph unicode="&#xe950;" glyph-name="clock" d="M658.744 210.744l-210.744 210.746v282.51h128v-229.49l173.256-173.254zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
 <glyph unicode="&#xe951;" glyph-name="circle" d="M1024 448c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?6ptey9');
-  src:  url('fonts/icomoon.eot?6ptey9#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?6ptey9') format('truetype'),
-    url('fonts/icomoon.woff?6ptey9') format('woff'),
-    url('fonts/icomoon.svg?6ptey9#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?l885ee');
+  src:  url('fonts/icomoon.eot?l885ee#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?l885ee') format('truetype'),
+    url('fonts/icomoon.woff?l885ee') format('woff'),
+    url('fonts/icomoon.svg?l885ee#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,125 +24,20 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-star-full:before {
-  content: "\e95d";
-}
-.icon-star-empty:before {
-  content: "\e95e";
-}
-.icon-twitter:before {
-  content: "\e95c";
-}
-.icon-hour-glass:before {
-  content: "\e954";
-}
-.icon-spinner:before {
-  content: "\e953";
-}
-.icon-clock:before {
-  content: "\e950";
-}
-.icon-bin2:before {
-  content: "\e902";
-}
-.icon-earth:before {
-  content: "\e9ca";
-}
-.icon-elapsed:before {
-  content: "\e943";
-}
-.icon-google:before {
-  content: "\e93b";
-}
-.icon-lock:before {
-  content: "\e934";
-}
-.icon-microsoft:before {
-  content: "\e940";
-}
-.icon-pause:before {
-  content: "\e92f";
-}
-.icon-play:before {
-  content: "\e930";
-}
-.icon-reset:before {
-  content: "\e92e";
-}
-.icon-settings2:before {
-  content: "\e92d";
-}
-.icon-timeout:before {
-  content: "\e944";
-}
-.icon-unlocked:before {
-  content: "\e933";
-}
-.icon-backup:before {
-  content: "\e95b";
-}
-.icon-support:before {
-  content: "\e95a";
-}
-.icon-control-RichText:before {
-  content: "\e939";
-}
-.icon-download:before {
-  content: "\e93e";
-}
-.icon-logo:before {
-  content: "\e91c";
-}
-.icon-media:before {
-  content: "\e91d";
-}
-.icon-type-Assets:before {
-  content: "\e91d";
-}
-.icon-trigger-AssetChanged:before {
-  content: "\e91d";
-}
-.icon-more:before {
-  content: "\e91e";
-}
-.icon-dots:before {
-  content: "\e91e";
-}
-.icon-pencil:before {
-  content: "\e91f";
-}
-.icon-reference:before {
-  content: "\e920";
-}
-.icon-schemas:before {
-  content: "\e921";
+.icon-control-Color:before {
+  content: "\e94d";
 }
-.icon-search:before {
-  content: "\e922";
-}
-.icon-settings:before {
-  content: "\e923";
-}
-.icon-type-Boolean:before {
-  content: "\e924";
-}
-.icon-type-DateTime:before {
-  content: "\e925";
-}
-.icon-type-Json:before {
-  content: "\e91a";
-}
-.icon-json:before {
-  content: "\e91a";
+.icon-browser:before {
+  content: "\e935";
 }
-.icon-type-Number:before {
-  content: "\e926";
+.icon-checkmark:before {
+  content: "\e942";
 }
-.icon-type-String:before {
-  content: "\e927";
+.icon-control-Stars:before {
+  content: "\e93a";
 }
-.icon-user:before {
-  content: "\e928";
+.icon-prerender:before {
+  content: "\e94c";
 }
 .icon-circle:before {
   content: "\e951";
@@ -297,6 +192,114 @@
 .icon-user:before {
   content: "\e928";
 }
+.icon-star-full:before {
+  content: "\e95d";
+}
+.icon-star-empty:before {
+  content: "\e95e";
+}
+.icon-twitter:before {
+  content: "\e95c";
+}
+.icon-hour-glass:before {
+  content: "\e954";
+}
+.icon-spinner:before {
+  content: "\e953";
+}
+.icon-clock:before {
+  content: "\e950";
+}
+.icon-bin2:before {
+  content: "\e902";
+}
+.icon-earth:before {
+  content: "\e9ca";
+}
+.icon-elapsed:before {
+  content: "\e943";
+}
+.icon-google:before {
+  content: "\e93b";
+}
+.icon-lock:before {
+  content: "\e934";
+}
+.icon-microsoft:before {
+  content: "\e940";
+}
+.icon-pause:before {
+  content: "\e92f";
+}
+.icon-play:before {
+  content: "\e930";
+}
+.icon-reset:before {
+  content: "\e92e";
+}
+.icon-settings2:before {
+  content: "\e92d";
+}
+.icon-timeout:before {
+  content: "\e944";
+}
+.icon-unlocked:before {
+  content: "\e933";
+}
+.icon-backup:before {
+  content: "\e95b";
+}
+.icon-support:before {
+  content: "\e95a";
+}
+.icon-control-RichText:before {
+  content: "\e939";
+}
+.icon-download:before {
+  content: "\e93e";
+}
+.icon-orleans:before {
+  content: "\e94b";
+}
+.icon-document-lock:before {
+  content: "\e949";
+}
+.icon-document-unpublish:before {
+  content: "\e93f";
+}
+.icon-angle-down:before {
+  content: "\e900";
+}
+.icon-angle-left:before {
+  content: "\e901";
+}
+.icon-angle-right:before {
+  content: "\e931";
+}
+.icon-angle-up:before {
+  content: "\e903";
+}
+.icon-api:before {
+  content: "\e945";
+}
+.icon-assets:before {
+  content: "\e948";
+}
+.icon-bug:before {
+  content: "\e93d";
+}
+.icon-caret-down:before {
+  content: "\e92c";
+}
+.icon-caret-left:before {
+  content: "\e92a";
+}
+.icon-caret-right:before {
+  content: "\e929";
+}
+.icon-caret-up:before {
+  content: "\e92b";
+}
 .icon-single-content:before {
   content: "\e958";
 }
@@ -378,21 +381,6 @@
 .icon-rules:before {
   content: "\e947";
 }
-.icon-browser:before {
-  content: "\e935";
-}
-.icon-checkmark:before {
-  content: "\e942";
-}
-.icon-browser:before {
-  content: "\e935";
-}
-.icon-checkmark:before {
-  content: "\e942";
-}
-.icon-control-Stars:before {
-  content: "\e93a";
-}
 .icon-info:before {
   content: "\e93c";
 }

src/Squidex/package.json

@@ -34,6 +34,7 @@
     "moment": "2.22.2",
     "mousetrap": "1.6.2",
     "ng2-dnd": "5.0.2",
+    "ngx-color-picker": "^6.7.0",
     "oidc-client": "1.5.2",
     "pikaday": "1.7.0",
     "progressbar.js": "1.0.1",