X-Languages fix and modal fixes.

src/Squidex.Domain.Apps.Entities/Contents/ContextExtensions.cs

@@ -104,7 +104,7 @@ namespace Squidex.Domain.Apps.Entities.Contents
 
         public static IEnumerable<Language> Languages(this Context context)
         {
-            if (context.Headers.TryGetValue(HeaderResolveAssetUrls, out var value))
+            if (context.Headers.TryGetValue(HeaderLanguages, out var value))
             {
                 var languages = new HashSet<Language>();
 

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

@@ -33,7 +33,7 @@
                     <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" #optionsButton>
+                        [class.active]="dropdown.isOpen | async" #buttonOptions>
                         <sqx-content-status
                             [status]="content.status"
                             [statusColor]="content.statusColor"
@@ -46,7 +46,7 @@
 
                     <ng-container *ngIf="content.isPending || !schema.isSingleton">
                         <ng-container *sqxModal="dropdown;closeAlways:true">
-                            <div class="dropdown-menu" [sqxAnchoredTo]="optionsButton" @fade>
+                            <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" @fade>
                                 <a class="dropdown-item" (click)="discardChanges()" *ngIf="content.canDraftDiscard">
                                     Discard changes
                                 </a>
@@ -120,11 +120,11 @@
                     <i class="icon-comments"></i>
                 </a>
 
-                <a class="panel-link" routerLink="history" routerLinkActive="active" title="History" titlePosition="left" #historyLink>
+                <a class="panel-link" routerLink="history" routerLinkActive="active" title="History" titlePosition="left" #linkHistory>
                     <i class="icon-time"></i>
                 </a>
 
-                <sqx-onboarding-tooltip helpId="history" [for]="historyLink" position="left-top" after="120000">
+                <sqx-onboarding-tooltip helpId="history" [for]="linkHistory" position="left-top" after="120000">
                     The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
                 </sqx-onboarding-tooltip>
             </div>

src/Squidex/app/features/content/shared/content-item.component.html

@@ -52,12 +52,12 @@
 
 <td class="cell-actions" *ngIf="!isReadOnly && !isDirty" sqxStopClick>
     <div class="dropdown dropdown-options" *ngIf="content">
-        <button type="button" class="btn btn-text-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
+        <button type="button" class="btn btn-text-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #buttonOptions>
             <i class="icon-dots"></i>
         </button>
 
         <ng-container *sqxModal="dropdown;closeAlways:true">
-            <div class="dropdown-menu" [sqxAnchoredTo]="optionsButton" @fade>
+            <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" @fade>
                 <a class="dropdown-item" *ngFor="let info of content.statusUpdates" (click)="emitChangeStatus(info.status)">
                     Change to <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{info.status}}
                 </a>

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -25,12 +25,12 @@
                     </button>
 
                     <div class="dropdown dropdown-options">
-                        <button type="button" class="btn btn-text-secondary ml-1" (click)="dropdown.toggle()" [disabled]="!field.properties.isContentField && field.isLocked" [class.active]="dropdown.isOpen | async" #optionsButton>
+                        <button type="button" class="btn btn-text-secondary ml-1" (click)="dropdown.toggle()" [disabled]="!field.properties.isContentField && field.isLocked" [class.active]="dropdown.isOpen | async" #buttonOptions>
                             <i class="icon-dots"></i>
                         </button>
 
                         <ng-container *sqxModal="dropdown;closeAlways:true">
-                            <div class="dropdown-menu" [sqxAnchoredTo]="optionsButton" @fade>
+                            <div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" @fade>
                                 <ng-container *ngIf="field.properties.isContentField">
                                     <a class="dropdown-item" (click)="enableField()" *ngIf="field.canEnable">
                                         Enable in UI

src/Squidex/app/framework/angular/modals/modal.directive.ts

@@ -5,7 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, EmbeddedViewRef, Input, OnDestroy, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
+import { timer } from 'rxjs';
 
 import {
     DialogModel,
@@ -40,6 +41,9 @@ export class ModalDirective implements OnDestroy {
         }
     }
 
+    @Input('sqxModalOnRoot')
+    public placeOnRoot = true;
+
     @Input('sqxModalCloseAuto')
     public closeAuto = true;
 
@@ -50,7 +54,8 @@ export class ModalDirective implements OnDestroy {
         private readonly changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2,
         private readonly rootView: RootViewComponent,
-        private readonly templateRef: TemplateRef<any>
+        private readonly templateRef: TemplateRef<any>,
+        private readonly viewContainer: ViewContainerRef
     ) {
     }
 
@@ -70,7 +75,7 @@ export class ModalDirective implements OnDestroy {
 
         if (isOpen) {
             if (!this.renderedView) {
-                this.renderedView = this.rootView.viewContainer.createEmbeddedView(this.templateRef);
+                this.renderedView = this.getContainer().createEmbeddedView(this.templateRef);
                 this.renderRoots = this.renderedView.rootNodes.filter(x => !!x.style);
 
                 this.setupStyles();
@@ -91,6 +96,10 @@ export class ModalDirective implements OnDestroy {
         this.isOpen = isOpen;
     }
 
+    private getContainer() {
+        return this.placeOnRoot ? this.rootView.viewContainer : this.viewContainer;
+    }
+
     private setupStyles() {
         if (this.renderRoots) {
             for (let node of this.renderRoots) {
@@ -134,8 +143,12 @@ export class ModalDirective implements OnDestroy {
     }
 
     private documentClickListener = (event: MouseEvent) => {
+        const model = this.currentModel;
+
         if (!this.isClickedInside(event)) {
-            hideModal(this.currentModel);
+            this.eventsView.own(timer(0, 100).subscribe(() => {
+                hideModal(model);
+            }));
         }
     }
 

src/Squidex/app/shared/components/asset-uploader.component.html

@@ -8,38 +8,40 @@
                     <span>{{uploads.length}}</span>
                 </span>
 
-                <div class="dropdown-menu container" *ngIf="modalMenu.isOpen | async" (sqxDropFile)="addFiles($event)" @fade>
+                <ng-container *sqxModal="modalMenu;closeAuto:false;onRoot:false">
-                    <div class="uploads">
+                    <div class="dropdown-menu container" (sqxDropFile)="addFiles($event)" @fade>
-                        <small class="uploads-empty text-muted" *ngIf="uploads.length === 0">
+                        <div class="uploads">
-                            No upload in progress, drop files here.
+                            <small class="uploads-empty text-muted" *ngIf="uploads.length === 0">
-                        </small>
+                                No upload in progress, drop files here.
-            
+                            </small>
-                        <div class="upload row no-gutters" *ngFor="let upload of uploads; trackBy: trackByUpload">
+                
-                            <div class="col-auto" [ngSwitch]="upload.status">
+                            <div class="upload row no-gutters" *ngFor="let upload of uploads; trackBy: trackByUpload">
-                                <div *ngSwitchCase="'Failed'" class="upload-status upload-status-failed">
+                                <div class="col-auto" [ngSwitch]="upload.status">
-                                    <i class="icon-exclamation"></i>
+                                    <div *ngSwitchCase="'Failed'" class="upload-status upload-status-failed">
+                                        <i class="icon-exclamation"></i>
+                                    </div>
+                                    <div *ngSwitchCase="'Completed'" class="upload-status upload-status-success">
+                                        <i class="icon-checkmark"></i>
+                                    </div>
+                                    <div *ngSwitchDefault class="upload-status upload-status-running">
+                                        <i class="icon-hour-glass"></i>
+                                    </div>
                                 </div>
-                                <div *ngSwitchCase="'Completed'" class="upload-status upload-status-success">
+                                <div class="col-6">
-                                    <i class="icon-checkmark"></i>
+                                    <div class="upload-name">{{upload.name}}</div>
                                 </div>
-                                <div *ngSwitchDefault class="upload-status upload-status-running">
+                                <div class="col">
-                                    <i class="icon-hour-glass"></i>
+                                    <sqx-progress-bar [value]="upload.progress" [trailWidth]="1.5" [strokeWidth]="1.5" [showText]="false" [animated]="false"></sqx-progress-bar>
+                                </div>
+                                <div class="col-auto">
+                                    <button type="button" class="btn btn-text-secondary" (click)="stopUpload(upload)">
+                                        <i class="icon-close"></i>
+                                    </button>
                                 </div>
-                            </div>
-                            <div class="col-6">
-                                <div class="upload-name">{{upload.name}}</div>
-                            </div>
-                            <div class="col">
-                                <sqx-progress-bar [value]="upload.progress" [trailWidth]="1.5" [strokeWidth]="1.5" [showText]="false" [animated]="false"></sqx-progress-bar>
-                            </div>
-                            <div class="col-auto">
-                                <button type="button" class="btn btn-text-secondary" (click)="stopUpload(upload)">
-                                    <i class="icon-close"></i>
-                                </button>
                             </div>
                         </div>
                     </div>
-                </div>
+                </ng-container>
             </li>
         </ul>
     </ng-container>

src/Squidex/app/shell/pages/internal/apps-menu.component.scss

@@ -37,16 +37,19 @@ $color-apps-border: #65a6ff;
     }
 }
 
-.dropdown-button {
+.dropdown {
-    padding: 1rem 1.5rem;
+    &-button {
-}
+        padding: 1rem 1.5rem;
+    }
 
-.dropdown-menu {
+    &-menu {
-    @include absolute(2.65rem, auto, auto, auto);
+        @include absolute($size-navbar-height, auto, auto, 9rem);
-}
+        margin: 0;
+    }
 
-.dropdown-item {
+    &-item {
-    @include border-radius(0);
+        @include border-radius(0);
+    }
 }
 
 .btn-block {

src/Squidex/app/shell/pages/internal/profile-menu.component.scss

@@ -21,7 +21,8 @@
 
 .dropdown {
     &-menu {
-        @include absolute(2.6rem, 0, auto, auto);
+        @include absolute($size-navbar-height, .25rem, auto, auto);
+        margin: 0;
     }
 
     &-item {