Work to convert move error toast notifications to move to top-right of content. (#431)

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -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>

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).');
         }
     }
 

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>

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">
+        <ng-container *ngIf="show">
-            <div class="form-alert form-alert-error" [innerHTML]="error"></div>
+            <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;
+    }
 }

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> {

src/Squidex/app/theme/_forms.scss

@@ -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
 //