From c4748ad4bdb67beaf14437b56be1f4daf30f5899 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 16 Aug 2022 08:51:58 +0200
Subject: [PATCH] Improve expanded mode.

---
 .../shared/forms/array-editor.component.html  |  6 ++--
 .../shared/forms/array-editor.component.scss  | 18 +++++++++++
 .../shared/forms/array-editor.component.ts    |  3 ++
 .../shared/forms/assets-editor.component.html |  6 +++-
 .../shared/forms/assets-editor.component.scss | 30 +++++++++----------
 .../shared/forms/assets-editor.component.ts   |  3 ++
 .../shared/forms/field-editor.component.html  |  7 +++--
 .../shared/forms/field-editor.component.scss  |  1 +
 .../references-editor.component.html          |  2 +-
 .../references-editor.component.scss          | 23 ++++++++------
 .../references/references-editor.component.ts |  3 ++
 frontend/src/app/theme/_mixins.scss           |  2 +-
 frontend/src/app/theme/_vars.scss             |  1 -
 13 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.html b/frontend/src/app/features/content/shared/forms/array-editor.component.html
index 08a507741..6ae26c21a 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="formModel.itemChanges | async; let items">
-    <div class="array-container" *ngIf="items.length > 0 && items.length <= 20;"
+    <div class="array-container" [class.expanded]="isExpanded" *ngIf="items.length > 0 && items.length <= 20;"
         cdkDropList
         [cdkDropListDisabled]="false"
         [cdkDropListData]="items"
@@ -31,7 +31,7 @@
         </div>
     </div>
 
-    <div class="array-container" *ngIf="items.length > 20">
+    <div class="array-container" [class.expanded]="isExpanded" *ngIf="items.length > 20">
         <virtual-scroller #scroll [items]="$any(items)" [enableUnequalChildrenSizes]="true">
             <div *ngFor="let itemForm of scroll.viewPortItems; index as i" class="item"
                 [class.first]="scroll.viewPortInfo.startIndexWithBuffer + i === 0"
@@ -59,7 +59,7 @@
         </virtual-scroller>
     </div>
 
-    <div class="row g-0 align-items-center">
+    <div class="array-buttons row g-0 align-items-center" [class.expanded]="isExpanded">
         <div class="col-auto">
             <ng-container *ngIf="isArray; else component">
                 <ng-container *ngIf="hasField">
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.scss b/frontend/src/app/features/content/shared/forms/array-editor.component.scss
index d9546e750..17456fe8f 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.scss
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.scss
@@ -23,6 +23,24 @@ virtual-scroller {
     background: $color-border-lighter;
     margin: 0;
     margin-bottom: 1rem;
+    overflow-y: auto;
+
+    &.expanded {
+        @include absolute(3rem, 1.25rem, 2.375rem + 1rem + .75rem, 1.25rem);
+        margin: 0;
+
+        virtual-scroller {
+            @include absolute(0, 0, 0, 0);
+            height: 100%;
+        }
+    }
+}
+
+.array-buttons {
+    &.expanded {
+        @include absolute(null, 1.25rem, .75rem, 1.25rem);
+        max-height: none;
+    }
 }
 
 .drag-container {
diff --git a/frontend/src/app/features/content/shared/forms/array-editor.component.ts b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
index 46ccac253..f677c71aa 100644
--- a/frontend/src/app/features/content/shared/forms/array-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/array-editor.component.ts
@@ -35,6 +35,9 @@ export class ArrayEditorComponent implements OnChanges {
     @Input()
     public isComparing = false;
 
+    @Input()
+    public isExpanded = false;
+
     @Input()
     public canUnset?: boolean | null;
 
diff --git a/frontend/src/app/features/content/shared/forms/assets-editor.component.html b/frontend/src/app/features/content/shared/forms/assets-editor.component.html
index 06ebd134e..67563ca28 100644
--- a/frontend/src/app/features/content/shared/forms/assets-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/assets-editor.component.html
@@ -1,4 +1,8 @@
-<div class="assets-container" (sqxDropFile)="addFiles($event)" [sqxDropDisabled]="snapshot.isDisabled" tabindex="1000">
+<div class="assets-container"
+    [class.expanded]="isExpanded"
+    (sqxDropFile)="addFiles($event)" 
+    [sqxDropDisabled]="snapshot.isDisabled" 
+    tabindex="1000">
     <div class="header list">
         <div class="row gx-2">
             <div class="col" [class.disabled]="snapshot.isDisabled">
diff --git a/frontend/src/app/features/content/shared/forms/assets-editor.component.scss b/frontend/src/app/features/content/shared/forms/assets-editor.component.scss
index 49146cb54..e859021a7 100644
--- a/frontend/src/app/features/content/shared/forms/assets-editor.component.scss
+++ b/frontend/src/app/features/content/shared/forms/assets-editor.component.scss
@@ -1,19 +1,23 @@
 @import 'mixins';
 @import 'vars';
 
-.disabled {
-    pointer-events: none;
+.assets-container {
+    background: $color-background;
+    max-height: 26.5rem;
+    min-height: 26.5rem;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 1rem;
+    padding-bottom: 0;
+
+    &.expanded {
+        @include absolute(3rem, 1.25rem, .75rem, 1.25rem);
+        max-height: none;
+    }
 }
 
-.assets {
-    &-container {
-        background: $color-background;
-        height: $asset-height + 2rem;
-        overflow-x: hidden;
-        overflow-y: scroll;
-        padding: 1rem;
-        padding-bottom: 0;
-    }
+.disabled {
+    pointer-events: none;
 }
 
 .list-view {
@@ -26,10 +30,6 @@
     min-height: 1px;
 }
 
-.unrow {
-    display: block;
-}
-
 .drop-area {
     @include truncate-nowidth;
     border: 2px dashed darken($color-border, 10%);
diff --git a/frontend/src/app/features/content/shared/forms/assets-editor.component.ts b/frontend/src/app/features/content/shared/forms/assets-editor.component.ts
index a0b3d3911..ea39f02f9 100644
--- a/frontend/src/app/features/content/shared/forms/assets-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/assets-editor.component.ts
@@ -50,6 +50,9 @@ export class AssetsEditorComponent extends StatefulControlComponent<State, Reado
     @Input()
     public folderId?: string;
 
+    @Input()
+    public isExpanded = false;
+
     @Input()
     public set disabled(value: boolean | undefined | null) {
         this.setDisabledState(value === true);
diff --git a/frontend/src/app/features/content/shared/forms/field-editor.component.html b/frontend/src/app/features/content/shared/forms/field-editor.component.html
index 2f7490153..61484eb80 100644
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.html
@@ -48,12 +48,13 @@
                         [formModel]="$any(formModel)"
                         [formContext]="formContext"
                         [isComparing]="isComparing"
+                        [isExpanded]="isExpanded"
                         [language]="language"
                         [languages]="languages">
                     </sqx-array-editor>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Assets'">
-                    <sqx-assets-editor [formControl]="$any(fieldForm)" [folderId]="field.rawProperties.folderId"></sqx-assets-editor>
+                    <sqx-assets-editor [formControl]="$any(fieldForm)" [folderId]="field.rawProperties.folderId" [isExpanded]="isExpanded"></sqx-assets-editor>
                 </ng-container>
                 <ng-container *ngSwitchCase="'Boolean'">
                     <ng-container [ngSwitch]="field.rawProperties.editor">
@@ -88,6 +89,7 @@
                         [formModel]="$any(formModel)"
                         [formContext]="formContext"
                         [isComparing]="isComparing"
+                        [isExpanded]="isExpanded"
                         [language]="language"
                         [languages]="languages">
                     </sqx-array-editor>
@@ -124,9 +126,10 @@
                     <ng-container [ngSwitch]="field.rawProperties.editor">
                         <ng-container *ngSwitchCase="'List'">
                             <sqx-references-editor
-                                [formControl]="$any(fieldForm)" 
                                 [allowDuplicates]="field.rawProperties.allowDuplicated"
                                 [formContext]="formContext"
+                                [formControl]="$any(fieldForm)"
+                                [isExpanded]="isExpanded"
                                 [language]="language"
                                 [languages]="languages"
                                 [schemaIds]="field.rawProperties.schemaIds">
diff --git a/frontend/src/app/features/content/shared/forms/field-editor.component.scss b/frontend/src/app/features/content/shared/forms/field-editor.component.scss
index b70c8115a..fe992d934 100644
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.scss
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.scss
@@ -20,6 +20,7 @@
         overflow-x: hidden;
         overflow-y: auto;
         padding: .75rem 1.25rem;
+        padding-top: 1.5rem;
         z-index: 500;
     }
 }
diff --git a/frontend/src/app/features/content/shared/references/references-editor.component.html b/frontend/src/app/features/content/shared/references/references-editor.component.html
index 1119acb23..b3b56846e 100644
--- a/frontend/src/app/features/content/shared/references/references-editor.component.html
+++ b/frontend/src/app/features/content/shared/references/references-editor.component.html
@@ -1,4 +1,4 @@
-<div class="references-container"
+<div class="references-container" [class.expanded]="isExpanded"
     (sqxResizeCondition)="setCompact($event)"
     [sqxResizeMinWidth]="600"
     [sqxResizeMaxWidth]="0">
diff --git a/frontend/src/app/features/content/shared/references/references-editor.component.scss b/frontend/src/app/features/content/shared/references/references-editor.component.scss
index 931a4aa3c..3724d1d9d 100644
--- a/frontend/src/app/features/content/shared/references/references-editor.component.scss
+++ b/frontend/src/app/features/content/shared/references/references-editor.component.scss
@@ -1,6 +1,20 @@
 @import 'mixins';
 @import 'vars';
 
+.references-container {
+    background: $color-background;
+    max-height: 20rem;
+    min-height: 6rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1rem;
+
+    &.expanded {
+        @include absolute(3rem, 1.25rem, .75rem, 1.25rem);
+        max-height: none;
+    }
+}
+
 .disabled {
     pointer-events: none;
 }
@@ -13,15 +27,6 @@
     text-align: center;
 }
 
-.references-container {
-    background: $color-background;
-    max-height: 20rem;
-    min-height: 6rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 1rem;
-}
-
 .drop-area {
     border: 2px dashed darken($color-border, 10%);
     border-radius: $border-radius;
diff --git a/frontend/src/app/features/content/shared/references/references-editor.component.ts b/frontend/src/app/features/content/shared/references/references-editor.component.ts
index fd82f43e9..59af78a5c 100644
--- a/frontend/src/app/features/content/shared/references/references-editor.component.ts
+++ b/frontend/src/app/features/content/shared/references/references-editor.component.ts
@@ -44,6 +44,9 @@ export class ReferencesEditorComponent extends StatefulControlComponent<State, R
     @Input()
     public formContext!: any;
 
+    @Input()
+    public isExpanded = false;
+
     @Input()
     public allowDuplicates?: boolean | null = true;
 
diff --git a/frontend/src/app/theme/_mixins.scss b/frontend/src/app/theme/_mixins.scss
index b4aa84d70..7c5c17814 100644
--- a/frontend/src/app/theme/_mixins.scss
+++ b/frontend/src/app/theme/_mixins.scss
@@ -20,7 +20,7 @@
     background: $background;
     border-color: $color;
     color: $color;
-    z-index: 1000;
+    z-index: 100;
 }
 
 @mixin build-text-button($color) {
diff --git a/frontend/src/app/theme/_vars.scss b/frontend/src/app/theme/_vars.scss
index df4b514f0..4e77171d0 100644
--- a/frontend/src/app/theme/_vars.scss
+++ b/frontend/src/app/theme/_vars.scss
@@ -85,7 +85,6 @@ $history-dot-sm-offset-x: -($history-dot-sm-size * .5 + 1px);
 
 $asset-width:               14.5rem;
 $asset-folder-height:       4rem;
-$asset-height:              19rem;
 $asset-header:              12rem;
 $asset-image:               12rem;
 $asset-footer:              7rem;