Random color.

src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html

@@ -15,6 +15,9 @@
                 [disabled]="step.isLocked">
             </sqx-editable-title>
         </div>
+        <div class="col-auto" *ngIf="step.isLocked">
+            <small class="text-decent">(Cannot be removed)</small>
+        </div>
         <div class="col-auto">
             <button type="button" class="btn btn-text-danger" (click)="remove.emit()" *ngIf="!step.isLocked">
                 <i class="icon-bin2"></i>
@@ -26,16 +29,27 @@
         <div class="col-auto">
             <i class="icon-arrow-right text-decent"></i>
         </div>
-        <div class="col-3 pl-2">
+        <div class="col col-step">
             <div class="transition-to">
                 <div class="color-circle" [style.background]="transition.step.color"></div> {{transition.to}}
             </div>
         </div>
-        <div class="col pl-2">
+        <div class="col-auto col-label">
+            <span class="text-decent">when</span>
+        </div>
+        <div class="col">
             <button class="btn btn-block btn-outline-secondary dashed">
                 Add Expression
             </button>
         </div>
+        <div class="col-auto col-label">
+            <span class="text-decent">for</span>
+        </div>
+        <div class="col">
+            <button class="btn btn-block btn-outline-secondary dashed">
+                Add Role
+            </button>
+        </div>
         <div class="col-auto pl-2">
             <button type="button" class="btn btn-text-danger" (click)="transitionRemove.emit(transition)">
                 <i class="icon-bin2"></i>
@@ -47,7 +61,7 @@
         <div class="col-auto">
             <i class="icon-arrow-right text-decent"></i>
         </div>
-        <div class="col-3 pl-2">
+        <div class="col col-step">
             <sqx-dropdown [items]="openSteps" [(ngModel)]="openStep">
                 <ng-template let-target="$implicit">
                     <div class="color-circle" [style.background]="target.color"></div> {{target.name}}

src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss

@@ -21,13 +21,12 @@
         padding-left: 1rem;
         margin-top: .25rem;
         margin-bottom: .5rem;
-        line-height: 2rem;
+        line-height: 2.2rem;
     }
 
     &-to {
         padding: .5rem .75rem;
-        background: transparent;
-        border: 1px solid transparent;
+        padding-right: 0;
         line-height: 1.2rem;
     }
 }
@@ -36,4 +35,14 @@
     & {
         margin-bottom: 1rem;
     }
+}
+
+.col-label {
+    padding: 0 .5rem;
+}
+
+.col-step {
+    min-width: 10rem;
+    max-width: 10rem;
+    padding-left: .5rem;
 }

src/Squidex/app/features/settings/pages/workflows/workflows-page.component.ts

@@ -8,6 +8,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import {
+    MathHelper,
     WorkflowDto,
     WorkflowStep,
     WorkflowStepValues,
@@ -20,6 +21,8 @@ import {
     templateUrl: './workflows-page.component.html'
 })
 export class WorkflowsPageComponent implements OnInit {
+    private maxSteps = 1;
+
     public workflow: WorkflowDto;
 
     public ngOnInit() {
@@ -35,7 +38,9 @@ export class WorkflowsPageComponent implements OnInit {
     }
 
     public addStep() {
-        this.workflow = this.workflow.setStep(`Step${this.workflow.steps.length + 1}`, {});
+        this.workflow = this.workflow.setStep(`Step${this.maxSteps}`, { color: MathHelper.randomColor() });
+
+        this.maxSteps++;
     }
 
     public addTransiton(from: WorkflowStep, to: WorkflowStep) {

src/Squidex/app/framework/angular/forms/editable-title.component.html

@@ -3,7 +3,7 @@
         <div class="form-group mr-1">
             <sqx-control-errors for="name"></sqx-control-errors>
             
-            <input type="text" class="form-control form-underlined" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />
+            <input type="text" class="form-control form-underlined" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" spellcheck="false" />
         </div>
 
         <button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid || !renameForm.dirty">Save</button>

src/Squidex/app/framework/utils/math-helper.spec.ts

@@ -108,6 +108,54 @@ describe('MathHelper', () => {
         expect(color.a).toBe(0.5);
     });
 
+    it('should convert from hsv with red', () => {
+        const color = MathHelper.colorFromHsv(0, 1, 1);
+
+        expect(color.r).toBe(1);
+        expect(color.g).toBe(0);
+        expect(color.b).toBe(0);
+    });
+
+    it('should convert from hsv with yellow', () => {
+        const color = MathHelper.colorFromHsv(60, 1, 1);
+
+        expect(color.r).toBe(1);
+        expect(color.g).toBe(1);
+        expect(color.b).toBe(0);
+    });
+
+    it('should convert from hsv with blue', () => {
+        const color = MathHelper.colorFromHsv(120, 1, 1);
+
+        expect(color.r).toBe(0);
+        expect(color.g).toBe(1);
+        expect(color.b).toBe(0);
+    });
+
+    it('should convert from hsv with turkis', () => {
+        const color = MathHelper.colorFromHsv(180, 1, 1);
+
+        expect(color.r).toBe(0);
+        expect(color.g).toBe(1);
+        expect(color.b).toBe(1);
+    });
+
+    it('should convert from hsv with red', () => {
+        const color = MathHelper.colorFromHsv(240, 1, 1);
+
+        expect(color.r).toBe(0);
+        expect(color.g).toBe(0);
+        expect(color.b).toBe(1);
+    });
+
+    it('should convert from hsv with pink', () => {
+        const color = MathHelper.colorFromHsv(300, 1, 1);
+
+        expect(color.r).toBe(1);
+        expect(color.g).toBe(0);
+        expect(color.b).toBe(1);
+    });
+
     it('should convert to luminance', () => {
         expect(MathHelper.toLuminance(undefined!)).toBe(1);
 
@@ -116,4 +164,10 @@ describe('MathHelper', () => {
 
         expect(MathHelper.toLuminance({ r: 0.5, g: 0.5, b: 0.5, a: 1 })).toBe(0.5);
     });
+
+    it('should generate random color', () => {
+        const color = MathHelper.randomColor();
+
+        expect(color[0]).toEqual('#');
+    });
 });

src/Squidex/app/framework/utils/math-helper.ts

@@ -26,42 +26,35 @@ const ColorDefinitions: IColorDefinition[] = [
     {
         regex: /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([\d\.]{1,})\)$/,
         process: (bits) => {
-            return {
-                r: parseInt(bits[1], 10) / 255,
-                g: parseInt(bits[2], 10) / 255,
-                b: parseInt(bits[3], 10) / 255,
-                a: parseFloat(bits[4])
-            };
+            return createColor(
+                parseInt(bits[1], 10) / 255,
+                parseInt(bits[2], 10) / 255,
+                parseInt(bits[3], 10) / 255,
+                parseFloat(bits[4]));
         }
     }, {
         regex: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
         process: (bits) => {
-            return {
-                r: parseInt(bits[1], 10) / 255,
-                g: parseInt(bits[2], 10) / 255,
-                b: parseInt(bits[3], 10) / 255,
-                a: 1
-            };
+            return createColor(
+                parseInt(bits[1], 10) / 255,
+                parseInt(bits[2], 10) / 255,
+                parseInt(bits[3], 10) / 255);
         }
     }, {
         regex: /^(\w{2})(\w{2})(\w{2})$/,
         process: (bits) => {
-            return {
-                r: parseInt(bits[1], 16) / 255,
-                g: parseInt(bits[2], 16) / 255,
-                b: parseInt(bits[3], 16) / 255,
-                a: 1
-            };
+            return createColor(
+                parseInt(bits[1], 16) / 255,
+                parseInt(bits[2], 16) / 255,
+                parseInt(bits[3], 16) / 255);
         }
     }, {
         regex: /^(\w{1})(\w{1})(\w{1})$/,
         process: (bits) => {
-            return {
-                r: parseInt(bits[1] + bits[1], 16) / 255,
-                g: parseInt(bits[2] + bits[2], 16) / 255,
-                b: parseInt(bits[3] + bits[3], 16) / 255,
-                a: 1
-            };
+            return createColor(
+                parseInt(bits[1] + bits[1], 16) / 255,
+                parseInt(bits[2] + bits[2], 16) / 255,
+                parseInt(bits[3] + bits[3], 16) / 255);
         }
     }
 ];
@@ -165,6 +158,53 @@ export module MathHelper {
         return undefined;
     }
 
+    export function randomColor() {
+        return colorToString(colorFromHsv(Math.random() * 360, .9, .9));
+    }
+
+    export function colorToString(color: Color): string {
+        let r = Math.round(color.r * 255).toString(16);
+        let g = Math.round(color.g * 255).toString(16);
+        let b = Math.round(color.b * 255).toString(16);
+
+        if (r.length === 1) {
+            r = '0' + r;
+        }
+        if (g.length === 1) {
+            g = '0' + g;
+        }
+        if (b.length === 1) {
+            b = '0' + b;
+        }
+
+        return '#' + r + g + b;
+    }
+
+    export function colorFromHsv(h: number, s: number, v: number): Color {
+        const hi = Math.floor(h / 60) % 6;
+
+        const f = (h / 60) - Math.floor(h / 60);
+
+        const p = (v * (1 - s));
+        const q = (v * (1 - (f * s)));
+        const t = (v * (1 - ((1 - f) * s)));
+
+        switch (hi) {
+            case 0:
+                return createColor(v, t, p);
+            case 1:
+                return createColor(q, v, p);
+            case 2:
+                return createColor(p, v, t);
+            case 3:
+                return createColor(p, q, v);
+            case 4:
+                return createColor(t, p, v);
+            default:
+                return createColor(v, p, q);
+        }
+    }
+
     export function toLuminance(color: Color) {
         if (!color) {
             return 1;
@@ -172,4 +212,8 @@ export module MathHelper {
 
         return (0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b) / color.a;
     }
+}
+
+export function createColor(r: number, g: number, b: number, a = 1) {
+    return { r, g, b, a };
 }