From 1eab73f31ca5457224a5888b04136f6ca70df615 Mon Sep 17 00:00:00 2001
From: Ben-Fletcher-UK <ben.fletcher.uk@outlook.com>
Date: Thu, 24 Oct 2019 18:16:04 +0100
Subject: [PATCH] Work to convert move error toast notifications to move to
 top-right of content. (#431)

---
 .../pages/content/content-page.component.html | 24 ++++++-----
 .../pages/content/content-page.component.ts   |  2 +-
 .../pages/schemas/schema-form.component.html  |  2 +-
 .../angular/forms/form-error.component.ts     | 33 +++++++++++++--
 .../app/shared/state/contents.state.ts        |  6 +--
 src/Squidex/app/theme/_forms.scss             | 41 ++++++++++++++++++-
 6 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html
index 00b0cd4e3..e982edcd3 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@@ -36,9 +36,9 @@
                 <div class="dropdown dropdown-options ml-1" *ngIf="content">
                     <sqx-preview-button [schema]="schema" [content]="content"></sqx-preview-button>
 
-                    <button type="button" class="btn btn-outline-secondary btn-status" (click)="dropdown.toggle()" [disabled]="schema.isSingleton && !content.isPending" 
-                        [class.active]="dropdown.isOpen | async" #buttonOptions>
-                        <sqx-content-status
+                    <button type="button" class="btn btn-outline-secondary btn-status" (click)="dropdown.toggle()" [disabled]="schema.isSingleton && !content.isPending"
+                            [class.active]="dropdown.isOpen | async" #buttonOptions>
+                        <sqx-content-status 
                             [status]="content.status"
                             [statusColor]="content.statusColor"
                             [scheduledTo]="content.scheduleJob?.status"
@@ -56,7 +56,7 @@
                                 </a>
 
                                 <div class="dropdown-divider"></div>
-                                
+
                                 <a class="dropdown-item" (click)="publishChanges()" *ngIf="content.canDraftPublish">
                                     Publish changes
                                 </a>
@@ -69,10 +69,10 @@
                                     <div class="dropdown-divider"></div>
 
                                     <a class="dropdown-item dropdown-item-delete"
-                                        [class.disabled]="!content.canDelete"
-                                        (sqxConfirmClick)="delete()"
-                                        confirmTitle="Delete content" 
-                                        confirmText="Do you really want to delete the content?">
+                                       [class.disabled]="!content.canDelete"
+                                       (sqxConfirmClick)="delete()"
+                                       confirmTitle="Delete content"
+                                       confirmText="Do you really want to delete the content?">
                                         Delete
                                     </a>
                                 </ng-container>
@@ -80,11 +80,11 @@
                         </ng-container>
                     </ng-container>
                 </div>
-                
+
                 <button type="button" class="btn btn-secondary ml-1" (click)="saveAsDraft()" *ngIf="content.canDraftPropose">
                     Save as Draft
                 </button>
-                    
+
                 <ng-container *ngIf="content.canUpdate">
                     <button type="submit" class="btn btn-primary ml-1" title="CTRL + S">
                         Save
@@ -93,6 +93,10 @@
                     <sqx-shortcut keys="ctrl+s" (trigger)="saveAndPublish()"></sqx-shortcut>
                 </ng-container>
             </ng-template>
+
+            <div>
+                <sqx-form-error bubble="true" closeable="true" [error]="contentForm.error | async"></sqx-form-error>
+            </div>
         </ng-container>
 
         <ng-container content>
diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.ts b/src/Squidex/app/features/content/pages/content/content-page.component.ts
index bbff1383e..51291114e 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.ts
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.ts
@@ -220,7 +220,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
                     });
             }
         } else {
-            this.dialogs.notifyError('Content element not valid, please check the field with the red bar on the left in all languages (if localizable).');
+            this.contentForm.submitFailed('Content element not valid, please check the field with the red bar on the left in all languages (if localizable).');
         }
     }
 
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index 629e5fd70..de27923b4 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -11,7 +11,7 @@
         </ng-container>
 
         <ng-container content>
-            <sqx-form-error [error]="createForm.error | async"></sqx-form-error>
+            <sqx-form-error closeable="true" [error]="createForm.error | async"></sqx-form-error>
         
             <div class="form-group name-group">
                 <label for="schemaName">Name <small class="hint">(required)</small></label>
diff --git a/src/Squidex/app/framework/angular/forms/form-error.component.ts b/src/Squidex/app/framework/angular/forms/form-error.component.ts
index ab22b0d87..40dc68e2c 100644
--- a/src/Squidex/app/framework/angular/forms/form-error.component.ts
+++ b/src/Squidex/app/framework/angular/forms/form-error.component.ts
@@ -5,17 +5,42 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 @Component({
     selector: 'sqx-form-error',
     template: `
-        <ng-container *ngIf="error">
-            <div class="form-alert form-alert-error" [innerHTML]="error"></div>
+        <ng-container *ngIf="show">
+            <div [class.form-bubble]="bubble">
+                <div class="form-alert form-alert-error" [class.closeable]="closeable">
+                    <a class="form-alert-close" (click)="close()">
+                        <i class="icon-close"></i>
+                    </a>
+                    <div [innerHTML]="error"></div>
+                </div>
+            </div>
         </ng-container>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FormErrorComponent {
+export class FormErrorComponent implements OnChanges {
     @Input()
     public error: string | null | undefined;
+
+    @Input()
+    public bubble = false;
+
+    @Input()
+    public closeable = false;
+
+    public show: boolean;
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['error']) {
+            this.show = !!this.error;
+        }
+    }
+
+    public close() {
+        this.show = false;
+    }
 }
\ No newline at end of file
diff --git a/src/Squidex/app/shared/state/contents.state.ts b/src/Squidex/app/shared/state/contents.state.ts
index 958c62cb9..7fc07c492 100644
--- a/src/Squidex/app/shared/state/contents.state.ts
+++ b/src/Squidex/app/shared/state/contents.state.ts
@@ -197,7 +197,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
                     return { ...s, contents, contentsPager };
                 });
             }),
-            shareSubscribed(this.dialogs));
+            shareSubscribed(this.dialogs, {silent: true}));
     }
 
     public changeManyStatus(contents: ReadonlyArray<ContentDto>, status: string, dueTime: string | null): Observable<any> {
@@ -263,7 +263,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
 
                 this.replaceContent(updated, content.version);
             }),
-            shareSubscribed(this.dialogs));
+            shareSubscribed(this.dialogs, {silent: true}));
     }
 
     public proposeDraft(content: ContentDto, request: any): Observable<ContentDto> {
@@ -273,7 +273,7 @@ export abstract class ContentsStateBase extends State<Snapshot> {
 
                 this.replaceContent(updated, content.version);
             }),
-            shareSubscribed(this.dialogs));
+            shareSubscribed(this.dialogs, {silent: true}));
     }
 
     public discardDraft(content: ContentDto): Observable<ContentDto> {
diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss
index 90cb21331..27b991ff8 100644
--- a/src/Squidex/app/theme/_forms.scss
+++ b/src/Squidex/app/theme/_forms.scss
@@ -67,7 +67,7 @@
 
 //
 // Form alerts.
-//  
+//
 .form-alert {
     & {
         @include border-radius(4px);
@@ -77,6 +77,13 @@
         font-size: .9rem;
         font-weight: normal;
         padding: .5rem;
+        padding-right: 1.5rem;
+    }
+
+    &-close {
+        @include absolute(0, 0, auto, auto);
+        padding: .5rem;
+        display: none;
     }
 
     &-error {
@@ -87,11 +94,43 @@
         background: $color-theme-green-dark;
     }
 
+    &.closeable {
+        position: relative;
+
+        .form-alert-close {
+            display: inline-block;
+        }
+    }
+
     ul {
         margin: 0;
     }
 }
 
+.form-bubble {
+    & {
+        position: relative;
+    }
+
+    .form-alert {
+        @include absolute(.25rem, 0, auto, auto);
+        min-width: 200px;
+        max-width: 400px;
+        z-index: 1000;
+        text-align: left;
+
+        &::after {
+            @include absolute(-.75rem, .625rem, auto, auto);
+            content: '';
+            height: 0;
+            border-style: solid;
+            border-width: .4rem;
+            border-color: transparent transparent $color-theme-error;
+            width: 0;
+        }
+    }
+}
+
 //
 // Control Dropdown item
 //