From 22df4bda42c0a5dbf1434d5cbdbcab9b3922c27a Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 2 Jul 2019 13:18:33 +0200
Subject: [PATCH] Improvements to tag editor.

---
 .../pages/workflows/workflow.component.html   | 20 ++++--
 .../pages/workflows/workflow.component.scss   | 11 +++
 .../angular/forms/tag-editor.component.html   |  4 +-
 .../angular/forms/tag-editor.component.scss   | 13 ++++
 .../angular/forms/tag-editor.component.ts     |  5 +-
 .../angular/modals/modal-view.directive.ts    | 69 ++++++++-----------
 .../shared/components/asset.component.html    |  2 +-
 7 files changed, 73 insertions(+), 51 deletions(-)

diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow.component.html b/src/Squidex/app/features/settings/pages/workflows/workflow.component.html
index ca2dea003..dcfac9bda 100644
--- a/src/Squidex/app/features/settings/pages/workflows/workflow.component.html
+++ b/src/Squidex/app/features/settings/pages/workflows/workflow.component.html
@@ -1,12 +1,21 @@
 <div class="table-items-row table-items-row-expandable workflow"> 
-    <div class="table-items-row-summary" (click)="toggleEditing()">        
+    <div class="table-items-row-summary">        
         <div class="row no-gutters">
-            <div class="col">
-                {{workflow.displayName}}
+            <div class="col col-name">
+                <span class="workflow-name">{{workflow.displayName}}</span>
+            </div>
+            <div class="col col-tags">
+                <sqx-tag-editor [converter]="schemasSource" [ngModel]="workflow.schemaIds"
+                 placeholder=""
+                    styleGray="true"
+                    styleBlank="true"
+                    singleLine="true"
+                    disabled="true">
+                </sqx-tag-editor>
             </div>
             <div class="col-options">
                 <div class="float-right">
-                    <button type="button" class="btn btn-secondary table-items-edit-button mr-1" [class.active]="isEditing" (click)="toggleEditing()" sqxStopClick>
+                    <button type="button" class="btn btn-secondary table-items-edit-button mr-1" [class.active]="isEditing" (click)="toggleEditing()">
                         <i class="icon-settings"></i>
                     </button>
 
@@ -14,8 +23,7 @@
                         [disabled]="!workflow.canDelete"
                         (sqxConfirmClick)="remove()"
                         confirmTitle="Remove workflow" 
-                        confirmText="Do you really want to remove the workflow?"
-                        sqxStopClick>
+                        confirmText="Do you really want to remove the workflow?">
                         <i class="icon-bin2"></i>
                     </button>
                 </div>
diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow.component.scss b/src/Squidex/app/features/settings/pages/workflows/workflow.component.scss
index bfb99a1aa..b39e484f1 100644
--- a/src/Squidex/app/features/settings/pages/workflows/workflow.component.scss
+++ b/src/Squidex/app/features/settings/pages/workflows/workflow.component.scss
@@ -7,11 +7,22 @@
     }
 }
 
+.workflow {
+    &-name {
+        @include truncate;
+    }
+}
+
 .col-form-label {
     min-width: 4rem;
     max-width: 4rem;
 }
 
+.col-tags {
+    padding: .6rem 1rem;
+    padding-bottom: 0;
+}
+
 .form-group {
     margin-bottom: 2rem;
     margin-left: 2rem;
diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.html b/src/Squidex/app/framework/angular/forms/tag-editor.component.html
index 927fe127f..14147ae43 100644
--- a/src/Squidex/app/framework/angular/forms/tag-editor.component.html
+++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.html
@@ -1,10 +1,10 @@
 <ng-container>
-    <div class="form-control {{class}}" #form (click)="input.focus()" 
+    <div class="form-control" [class.blank]="styleBlank" [class.gray]="styleGray" #form (click)="input.focus()" 
         [class.single-line]="singleLine"
         [class.focus]="snapshot.hasFocus" 
         [class.disabled]="addInput.disabled">
         <span class="item" *ngFor="let item of snapshot.items; let i = index" [class.disabled]="addInput.disabled">
-            {{item}} <i class="icon-close" (click)="remove(i)"></i>
+            {{item}} <i class="icon-close" *ngIf="!addInput.disabled" (click)="remove(i)"></i>
         </span>
 
         <input type="text" class="blank" #input
diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.scss b/src/Squidex/app/framework/angular/forms/tag-editor.component.scss
index fd6999714..333514721 100644
--- a/src/Squidex/app/framework/angular/forms/tag-editor.component.scss
+++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.scss
@@ -58,11 +58,24 @@ div {
         outline: none;
     }
 
+    &.disabled,
+    &:disabled {
+        background: transparent;
+    }
+
     &:hover {
         background: transparent;
     }
 }
 
+.gray {
+    .item {
+        background: $color-border;
+        color: $color-text;
+        cursor: default;
+    }
+}
+
 .icon-close {
     font-size: .6rem;
 }
diff --git a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
index a0f6a4472..3a943d2fc 100644
--- a/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
+++ b/src/Squidex/app/framework/angular/forms/tag-editor.component.ts
@@ -163,7 +163,10 @@ export class TagEditorComponent extends StatefulControlComponent<State, any[]> i
     public singleLine = false;
 
     @Input()
-    public class: string;
+    public styleBlank = false;
+
+    @Input()
+    public styleGray = false;
 
     @Input()
     public placeholder = ', to add tag';
diff --git a/src/Squidex/app/framework/angular/modals/modal-view.directive.ts b/src/Squidex/app/framework/angular/modals/modal-view.directive.ts
index 01cd544fb..22dc8c01e 100644
--- a/src/Squidex/app/framework/angular/modals/modal-view.directive.ts
+++ b/src/Squidex/app/framework/angular/modals/modal-view.directive.ts
@@ -21,9 +21,7 @@ import { RootViewComponent } from './root-view.component';
 })
 export class ModalViewDirective implements OnChanges, OnDestroy {
     private modalSubscription: Subscription | null = null;
-    private documentClickListener: Function | null = null;
     private renderedView: EmbeddedViewRef<any> | null = null;
-    private static clickCounter = 0;
 
     @Input('sqxModalView')
     public modalView: DialogModel | ModalModel | any;
@@ -44,13 +42,6 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
         private readonly templateRef: TemplateRef<any>,
         private readonly viewContainer: ViewContainerRef
     ) {
-        if (ModalViewDirective.clickCounter === 0) {
-            this.renderer.listen('document', 'click', () => {
-                ModalViewDirective.clickCounter++;
-            });
-
-            ModalViewDirective.clickCounter = 1;
-        }
     }
 
     public ngOnDestroy() {
@@ -95,7 +86,7 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
                 this.renderer.setStyle(this.renderedView.rootNodes[0], 'display', 'block');
             }
 
-            this.startListening(ModalViewDirective.clickCounter + 1);
+            this.startListening();
 
             this.changeDetector.detectChanges();
         } else if (!isOpen && this.renderedView) {
@@ -114,40 +105,39 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
         return this.placeOnRoot ? this.rootView.viewContainer : this.viewContainer;
     }
 
-    private startListening(clickCounter: number) {
-        if (!this.closeAuto) {
+    private startListening() {
+        if (this.closeAuto) {
+            document.addEventListener('click', this.documentClickListener, true);
+        }
+    }
+
+    private documentClickListener = (event: MouseEvent) => {
+        if (!event.target || this.renderedView === null) {
             return;
         }
 
-        this.documentClickListener =
-            this.renderer.listen('document', 'click', (event: MouseEvent) => {
-                if (!event.target || this.renderedView === null || ModalViewDirective.clickCounter === clickCounter) {
-                    return;
-                }
+        if (this.renderedView.rootNodes.length === 0) {
+            return;
+        }
 
-                if (this.renderedView.rootNodes.length === 0) {
-                    return;
-                }
+        if (this.closeAlways) {
+            this.modalView.hide();
+        } else {
+            try {
+                const rootNode = this.renderedView.rootNodes[0];
+                const rootBounds = rootNode.getBoundingClientRect();
+
+                if (rootBounds.width > 0 && rootBounds.height > 0) {
+                    const clickedInside = rootNode.contains(event.target);
 
-                if (this.closeAlways) {
-                    this.modalView.hide();
-                } else {
-                    try {
-                        const rootNode = this.renderedView.rootNodes[0];
-                        const rootBounds = rootNode.getBoundingClientRect();
-
-                        if (rootBounds.width > 0 && rootBounds.height > 0) {
-                            const clickedInside = rootNode.contains(event.target);
-
-                            if (!clickedInside && this.modalView) {
-                                this.modalView.hide();
-                            }
-                        }
-                    } catch (ex) {
-                        return;
+                    if (!clickedInside && this.modalView) {
+                        this.modalView.hide();
                     }
                 }
-            });
+            } catch (ex) {
+                return;
+            }
+        }
     }
 
     private unsubscribeToModal() {
@@ -158,9 +148,6 @@ export class ModalViewDirective implements OnChanges, OnDestroy {
     }
 
     private unsubscribeToClick() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
-        }
+        document.removeEventListener('click', this.documentClickListener);
     }
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/components/asset.component.html b/src/Squidex/app/shared/components/asset.component.html
index 7fe2798ce..e3d78800e 100644
--- a/src/Squidex/app/shared/components/asset.component.html
+++ b/src/Squidex/app/shared/components/asset.component.html
@@ -69,7 +69,7 @@
                     </div>
                 </div>
                 <div class="file-tags tags">
-                    <sqx-tag-editor [disabled]="true" [ngModel]="asset.tags" class="blank" placeholder="+Tag"></sqx-tag-editor>
+                    <sqx-tag-editor [ngModel]="asset.tags" disabled="true" styleBlank="true" placeholder="+Tag"></sqx-tag-editor>
                 </div>
                 <div class="file-info">
                     <ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}