UI fixes.

frontend/app/features/content/pages/contents/custom-view-editor.component.html

@@ -15,9 +15,9 @@
             <i class="icon-drag2 drag-handle"></i> 
             
             <div class="custom-control custom-checkbox">
-                <input class="custom-control-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}">
+                <input class="custom-control-input" type="checkbox" checked (click)="removeField(field)" id="field_{{field}}" [disabled]="!field">
                 <label class="custom-control-label" for="field_{{field}}">
-                    {{field}}
+                    {{field || '--'}}
                 </label>
             </div>
         </div>

frontend/app/features/content/pages/contents/custom-view-editor.component.scss

@@ -13,7 +13,7 @@
     visibility: hidden;
 }
 
-.form-check {
+.custom-checkbox {
     display: inline-block;
     padding-left: 2rem;
     padding-right: .5rem;

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

@@ -1,12 +1,19 @@
 <div class="step">
     <div class="row no-gutters step-header">
         <div class="col-auto">
-            <button class="btn btn-initial mr-1" (click)="makeInitial.emit()" [class.enabled]="step.name !== workflow.initial && !step.isLocked" [class.active]="step.name === workflow.initial" [disabled]="step.name === workflow.initial || step.isLocked || disabled">
+            <button class="btn btn-initial mr-1" (click)="makeInitial.emit()" 
+                [class.enabled]="step.name !== workflow.initial && !step.isLocked" 
+                [class.active]="step.name === workflow.initial"
+                [disabled]="step.name === workflow.initial || step.isLocked || disabled">
                 <i class="icon-arrow-right text-decent" *ngIf="!step.isLocked"></i>
             </button>
         </div>
         <div class="col-auto color pr-2">
-            <sqx-color-picker mode="Circle" [ngModelOptions]="onBlur" [ngModel]="step.color" (ngModelChange)="changeColor($event)" [disabled]="disabled">
+            <sqx-color-picker mode="Circle"
+                [disabled]="disabled"
+                [ngModelOptions]="onBlur" 
+                [ngModel]="step.color" 
+                (ngModelChange)="changeColor($event)" >
             </sqx-color-picker>
         </div>
         <div class="col">
@@ -26,7 +33,11 @@
     </div>
 
     <div class="step-inner">
-        <sqx-workflow-transition *ngFor="let transition of transitions; trackBy: trackByTransition" [transition]="transition" [disabled]="disabled" [roles]="roles" (remove)="transitionRemove.emit(transition)" (update)="changeTransition(transition, $event)">
+        <sqx-workflow-transition *ngFor="let transition of transitions; trackBy: trackByTransition" [transition]="transition" 
+            [disabled]="disabled"
+            [roles]="roles" 
+            (remove)="transitionRemove.emit(transition)" 
+            (update)="changeTransition(transition, $event)">
         </sqx-workflow-transition>
 
         <div class="row transition no-gutters" *ngIf="openSteps.length > 0 && !disabled">
@@ -47,11 +58,14 @@
             </div>
         </div>
 
-        <div class="row transition-prevent-updates no-gutters">
+        <div class="row transition-prevent-updates no-gutters align-items-center">
             <div class="col col-arrow"></div>
             <div class="col col-step">
                 <div class="custom-control custom-checkbox float-right">
-                    <input class="custom-control-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}" [disabled]="disabled" [ngModel]="step.noUpdate" (ngModelChange)="changeNoUpdate($event)">
+                    <input class="custom-control-input transition-prevent-updates-checkbox" type="checkbox" id="preventUpdates_{{step.name}}"
+                        [disabled]="disabled" 
+                        [ngModel]="step.noUpdate" 
+                        (ngModelChange)="changeNoUpdate($event)">
 
                     <label class="custom-control-label" for="preventUpdates_{{step.name}}">
                         {{ 'workflows.preventUpdates' | sqxTranslate }}
@@ -63,13 +77,24 @@
                     <span class="text-decent">{{ 'workflows.syntax.when' | sqxTranslate }}</span>
                 </div>
                 <div class="col col-step-expression">
-                    <input class="form-control" [class.dashed]="!step.noUpdateExpression" spellcheck="false" [disabled]="disabled" [ngModelOptions]="onBlur" [ngModel]="step.noUpdateExpression" (ngModelChange)="changeNoUpdateExpression($event)" placeholder="{{ 'workflows.syntax.expression' | sqxTranslate }}">
+                    <input class="form-control" [class.dashed]="!step.noUpdateExpression" spellcheck="false" 
+                        [disabled]="disabled" 
+                        [ngModelOptions]="onBlur" 
+                        [ngModel]="step.noUpdateExpression" 
+                        (ngModelChange)="changeNoUpdateExpression($event)" 
+                        placeholder="{{ 'workflows.syntax.expression' | sqxTranslate }}">
                 </div>
                 <div class="col-auto col-label">
                     <span class="text-decent">{{ 'workflows.syntax.for' | sqxTranslate }}</span>
                 </div>
                 <div class="col col-roles">
-                    <sqx-tag-editor [allowDuplicates]="false" [dashed]="true" [disabled]="disabled" (ngModelChange)="changeNoUpdateRoles($event)" [ngModel]="step.noUpdateRoles" [ngModelOptions]="onBlur" [singleLine]="true" [suggestions]="roles" placeholder="{{ 'common.role' | sqxTranslate }}">
+                    <sqx-tag-editor [allowDuplicates]="false" [dashed]="true" 
+                        [disabled]="disabled" 
+                        [ngModelOptions]="onBlur" 
+                        [ngModel]="step.noUpdateRoles"
+                        (ngModelChange)="changeNoUpdateRoles($event)"
+                        [singleLine]="true"
+                        [suggestions]="roles" placeholder="{{ 'common.role' | sqxTranslate }}">
                     </sqx-tag-editor>
                 </div>
                 <div class="col col-button"></div>

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

@@ -84,9 +84,9 @@
 
 .transition-prevent-updates {
     & {
-        line-height: 2.5rem;
         margin-bottom: 1rem;
         margin-top: .25rem;
+        min-height: 2.5rem;
     }
 
     &-to {

frontend/app/features/settings/pages/workflows/workflow-transition.component.html

@@ -11,13 +11,25 @@
         <span class="text-decent">{{ 'workflows.syntax.when' | sqxTranslate }}</span>
     </div>
     <div class="col">
-        <input class="form-control" [class.dashed]="!transition.expression" spellcheck="false" [disabled]="disabled" [ngModelOptions]="onBlur" [ngModel]="transition.expression" (ngModelChange)="changeExpression($event)" placeholder="{{ 'workflows.syntax.expression' | sqxTranslate }}"> 
+        <input class="form-control" [class.dashed]="!transition.expression" spellcheck="false"
+            [disabled]="disabled" 
+            [ngModelOptions]="onBlur" 
+            [ngModel]="transition.expression" 
+            (ngModelChange)="changeExpression($event)" 
+            placeholder="{{ 'workflows.syntax.expression' | sqxTranslate }}"> 
     </div>
     <div class="col-auto col-label">
         <span class="text-decent">{{ 'workflows.syntax.for' | sqxTranslate }}</span>
     </div>
     <div class="col col-roles">
-        <sqx-tag-editor [allowDuplicates]="false" [dashed]="true" [disabled]="disabled" (ngModelChange)="changeRole($event)" [ngModel]="transition.roles" [ngModelOptions]="onBlur" [singleLine]="true" [suggestions]="roles" placeholder="{{ 'common.role' | sqxTranslate }}">
+        <sqx-tag-editor [allowDuplicates]="false" 
+            [dashed]="true" 
+            [disabled]="disabled" 
+            [ngModelOptions]="onBlur"
+            [ngModel]="transition.roles" 
+            (ngModelChange)="changeRole($event)" 
+            [singleLine]="true" 
+            [suggestions]="roles" placeholder="{{ 'common.role' | sqxTranslate }}">
         </sqx-tag-editor>
     </div>
 

frontend/app/features/settings/pages/workflows/workflow.component.html

@@ -59,7 +59,10 @@
                     <label class="col-form-label" for="{{workflow.id}}_name">{{ 'common.name' | sqxTranslate }}</label>
             
                     <div class="col">
-                        <input class="form-control" id="{{workflow.id}}_name" [ngModelOptions]="onBlur" [ngModel]="workflow.name" (ngModelChange)="rename($event)">
+                        <input class="form-control" id="{{workflow.id}}_name" 
+                            [ngModelOptions]="onBlur" 
+                            [ngModel]="workflow.name"
+                            (ngModelChange)="rename($event)">
             
                         <sqx-form-hint>
                             {{ 'workflows.workflowNameHint' | sqxTranslate }}

frontend/app/features/settings/pages/workflows/workflows-page.component.html

@@ -34,7 +34,8 @@
                         {{ 'workflows.empty' | sqxTranslate }}
                     </div>
 
-                    <sqx-workflow *ngFor="let workflow of workflows; trackBy: trackByWorkflow" [workflow]="workflow" [roles]="roles" [schemasSource]="schemasSource">
+                    <sqx-workflow *ngFor="let workflow of workflows; trackBy: trackByWorkflow" 
+                        [workflow]="workflow" [roles]="roles" [schemasSource]="schemasSource">
                     </sqx-workflow>
 
                     <sqx-workflow-add-form *ngIf="workflowsState.canCreate | async"></sqx-workflow-add-form>