Panel system improved.

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

@@ -1,4 +1,4 @@
-<sqx-panel desiredWidth="16rem" isBlank="true">
+<sqx-panel desiredWidth="16rem" isBlank="true" [isLazyLoaded]="false">
     <ng-container title>
         Activity
     </ng-container>

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

@@ -1,7 +1,7 @@
 <sqx-title message="{app} | {schema} | Content" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.displayName"></sqx-title>
 
 <form [formGroup]="contentForm" (ngSubmit)="saveAndPublish()">
-    <sqx-panel desiredWidth="54rem" showSidebar="true">
+    <sqx-panel desiredWidth="*" showSidebar="true">
         <ng-container title>
             <a class="btn btn-link" (click)="back()">
                 <i class="icon-angle-left"></i>

src/Squidex/app/features/content/shared/contents-selector.component.html

@@ -4,11 +4,13 @@
     </ng-container>
 
     <ng-container tabs>
-        <sqx-search-form (queryChanged)="search($event)"></sqx-search-form>
+        <div class="text-right">
+            <button class="btn btn-link btn-secondary" (click)="load(true)">
+                <i class="icon-reset"></i> Refresh
+            </button>
             
-        <button class="btn btn-link btn-secondary" (click)="load(true)">
+            <sqx-search-form (queryChanged)="search($event)" [canArchive]="false"></sqx-search-form>
-            <i class="icon-reset"></i> Refresh
+        </div>
-        </button>
     </ng-container>
 
     <ng-container content>

src/Squidex/app/features/content/shared/references-editor.component.html

@@ -1,6 +1,6 @@
 <div class="references-container" [class.disabled]="isDisabled">
     <div class="drop-area-container" *ngIf="schema">
-        <div class="drop-area" (click)="selectorModal.show()">
+        <div class="drop-area" (click)="showModal()">
             Click here to link a content.
         </div>
     </div>
@@ -25,7 +25,7 @@
     </table>
 </div>
 
-<ng-container *sqxModalView="selectorModal;onRoot:true;closeAuto:false">
+<ng-container *sqxModalView="isModalVisibible;onRoot:true;closeAuto:false">
     <sqx-contents-selector
         [language]="language"
         [schema]="schema"

src/Squidex/app/features/content/shared/references-editor.component.ts

@@ -18,7 +18,6 @@ import {
     FieldDto,
     ImmutableArray,
     MathHelper,
-    ModalView,
     SchemaDetailsDto,
     SchemasService,
     Types
@@ -46,7 +45,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
     @Input()
     public language: AppLanguageDto;
 
-    public selectorModal = new ModalView();
+    public isModalVisibible = false;
 
     public schema: SchemaDetailsDto;
     public schemaFields: FieldDto[];
@@ -103,6 +102,14 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
         this.callTouched = fn;
     }
 
+    public showModal() {
+        this.isModalVisibible = true;
+    }
+
+    public hideModal() {
+        this.isModalVisibible = false;
+    }
+
     public onContentsSelected(contents: ContentDto[]) {
         for (let content of contents) {
             this.contentItems = this.contentItems.push(content);
@@ -112,7 +119,7 @@ export class ReferencesEditorComponent implements ControlValueAccessor, OnInit {
             this.updateValue();
         }
 
-        this.selectorModal.hide();
+        this.hideModal();
     }
 
     public onContentRemoving(content: ContentDto) {

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Directive, ElementRef, HostListener, Renderer } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener } from '@angular/core';
 
 import { PanelComponent } from './panel.component';
 
@@ -17,8 +17,7 @@ export class PanelContainerDirective implements AfterViewInit {
     private containerWidth = 0;
 
     constructor(
-        private readonly element: ElementRef,
+        private readonly element: ElementRef
-        private readonly renderer: Renderer
     ) {
     }
 
@@ -48,28 +47,38 @@ export class PanelContainerDirective implements AfterViewInit {
             this.containerWidth = this.element.nativeElement.getBoundingClientRect().width;
         }
 
-        let currentPosition = 0;
+        const panels = this.panels;
-        let currentLayer = this.panels.length * 10;
 
-        const last = this.panels[this.panels.length - 1];
+        let currentSize = 0;
+        let panelsWidthSpread = 0;
 
-        for (let panel of this.panels) {
+        for (let panel of panels) {
-            const panelRoot = panel.panel.nativeElement;
+            if (panel.desiredWidth !== '*') {
+                const layoutWidth = panel.desiredWidth;
 
-            let layoutWidth = '';
+                panel.measure(layoutWidth);
 
-            if (panel.desiredWidth === '*' && panel === last) {
+                currentSize += panel.renderWidth;
-                layoutWidth = (this.containerWidth - currentPosition) + 'px';
             } else {
-                layoutWidth = panel.desiredWidth;
+                panelsWidthSpread++;
             }
+        }
+
+        for (let panel of panels) {
+            if (panel.desiredWidth === '*') {
+                const layoutWidth = (this.containerWidth - currentSize) / panelsWidthSpread;
+
+                panel.measure(layoutWidth + 'px');
+
+                currentSize += panel.renderWidth;
+            }
+        }
+
+        let currentPosition = 0;
+        let currentLayer = panels.length * 10;
 
-            this.renderer.setElementStyle(panelRoot, 'top', '0px');
+        for (let panel of panels) {
-            this.renderer.setElementStyle(panelRoot, 'left', currentPosition + 'px');
+            panel.arrange(currentPosition + 'px', currentLayer.toString());
-            this.renderer.setElementStyle(panelRoot, 'width', layoutWidth);
-            this.renderer.setElementStyle(panelRoot, 'bottom', '0px');
-            this.renderer.setElementStyle(panelRoot, 'position', 'absolute');
-            this.renderer.setElementStyle(panelRoot, 'z-index', currentLayer.toString());
 
             currentPosition += panel.renderWidth;
             currentLayer -= 10;

src/Squidex/app/framework/angular/panel.component.html

@@ -13,7 +13,7 @@
                 </h3>
             </div>
 
-            <a class="panel-close" sqxParentLink isLazyLoaded="true" *ngIf="showClose">
+            <a class="panel-close" sqxParentLink [isLazyLoaded]="isLazyLoaded" *ngIf="showClose">
                 <i class="icon-close"></i>
             </a>
 

src/Squidex/app/framework/angular/panel.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer, ViewChild } from '@angular/core';
 
 import { slideRightAnimation } from './animations';
 
@@ -20,6 +20,8 @@ import { PanelContainerDirective } from './panel-container.directive';
     ]
 })
 export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
+    private styleWidth: string;
+
     public renderWidth = 0;
 
     @Input()
@@ -34,6 +36,9 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     @Input()
     public isFullSize = false;
 
+    @Input()
+    public isLazyLoaded = true;
+
     @Input()
     public showScrollbar = false;
 
@@ -53,7 +58,8 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     public panel: ElementRef;
 
     constructor(
-        private readonly container: PanelContainerDirective
+        private readonly container: PanelContainerDirective,
+        private readonly renderer: Renderer
     ) {
     }
 
@@ -66,8 +72,24 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
     }
 
     public ngAfterViewInit() {
-        this.renderWidth = this.panel.nativeElement.getBoundingClientRect().width;
-
         this.container.invalidate();
     }
+
+    public measure(size: string) {
+        if (this.styleWidth !== size) {
+            this.styleWidth = size;
+
+            this.renderer.setElementStyle(this.panel.nativeElement, 'width', size);
+
+            this.renderWidth = this.panel.nativeElement.getBoundingClientRect().width;
+        }
+    }
+
+    public arrange(left: any, layer: any) {
+        this.renderer.setElementStyle(this.panel.nativeElement, 'top', '0px');
+        this.renderer.setElementStyle(this.panel.nativeElement, 'left', left);
+        this.renderer.setElementStyle(this.panel.nativeElement, 'bottom', '0px');
+        this.renderer.setElementStyle(this.panel.nativeElement, 'position', 'absolute');
+        this.renderer.setElementStyle(this.panel.nativeElement, 'z-index', layer);
+    }
 }