Expanded left panel. (#1288)

SebastianStehle · web-flow · commit c3cd000abca2 · 2026-02-20T09:31:58.000+01:00
* Expanded left panel.

* Fix panel label.
diff --git a/backend/i18n/frontend_de.json b/backend/i18n/frontend_de.json
@@ -404,6 +404,7 @@
   "common.templates": "Vorlagen",
   "common.time": "Zeit",
   "common.to": "Bis",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Aktualisieren",
   "common.upload": "Hochladen",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json
@@ -404,6 +404,7 @@
   "common.templates": "Templates",
   "common.time": "Time",
   "common.to": "To",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Update",
   "common.upload": "Upload",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_fr.json b/backend/i18n/frontend_fr.json
@@ -404,6 +404,7 @@
   "common.templates": "Modèles",
   "common.time": "Temps",
   "common.to": "Pour",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Mise à jour",
   "common.upload": "Télécharger",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json
@@ -404,6 +404,7 @@
   "common.templates": "Templates",
   "common.time": "Ora",
   "common.to": "To",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Aggiorna",
   "common.upload": "Carica",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json
@@ -404,6 +404,7 @@
   "common.templates": "Templates",
   "common.time": "Tijd",
   "common.to": "Naar",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Update",
   "common.upload": "Upload",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_pt.json b/backend/i18n/frontend_pt.json
@@ -404,6 +404,7 @@
   "common.templates": "Modelos",
   "common.time": "Hora",
   "common.to": "Para",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Atualização",
   "common.upload": "Upload",
   "common.url": "URL",
diff --git a/backend/i18n/frontend_zh.json b/backend/i18n/frontend_zh.json
@@ -404,6 +404,7 @@
   "common.templates": "Templates",
   "common.time": "时间",
   "common.to": "To",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "更新",
   "common.upload": "上传",
   "common.url": "URL",
diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json
@@ -404,6 +404,7 @@
   "common.templates": "Templates",
   "common.time": "Time",
   "common.to": "To",
+  "common.togglePanel": "Toggle panel size",
   "common.update": "Update",
   "common.upload": "Upload",
   "common.url": "URL",
diff --git a/frontend/src/app/features/content/pages/schemas/schemas-page.component.html b/frontend/src/app/features/content/pages/schemas/schemas-page.component.html
@@ -1,6 +1,6 @@
 <sqx-title message="i18n:contents.schemasPageTitle" />
 @if (!isEmbedded) {
-    <sqx-layout layout="left" overflow="true" padding="true" titleCollapsed="i18n:common.schemas" white="true" width="18">
+    <sqx-layout expandedWidth="32" layout="left" overflow="true" padding="true" titleCollapsed="i18n:common.schemas" white="true" width="18">
         <ng-container menu>
             <div class="search-form">
                 <input class="form-control" [formControl]="schemasFilter" placeholder="{{ 'contents.searchSchemasPlaceholder' | sqxTranslate }}" />
diff --git a/frontend/src/app/features/schemas/pages/schemas/schemas-page.component.html b/frontend/src/app/features/schemas/pages/schemas/schemas-page.component.html
@@ -1,7 +1,7 @@
 <sqx-title message="i18n:common.schemas" />
-<sqx-layout layout="left" overflow="true" padding="true" titleCollapsed="i18n:common.schemas" white="true" width="18">
+<sqx-layout expandedWidth="32" layout="left" overflow="true" padding="true" titleCollapsed="i18n:common.schemas" white="true" width="18">
     <ng-container menu>
-        <div class="row g-0">
+        <div class="row g-0 flex-grow-1">
             @if (schemasState.canCreate | async) {
                 <div class="col-auto">
                     <button
diff --git a/frontend/src/app/framework/angular/layout.component.html b/frontend/src/app/framework/angular/layout.component.html
@@ -39,7 +39,12 @@ <h3>
     }
 
     @if (layout === "left") {
-        <div class="panel2-slice left" [class.collapsed]="isCollapsed" (click)="expand($event)" [style.maxWidth]="desiredWidth" [style.minWidth]="desiredWidth">
+        <div
+            class="panel2-slice left"
+            [class.collapsed]="displayMode === 'Collapsed'"
+            (click)="switchToNormalFromDiv($event)"
+            [style.maxWidth]="desiredWidth"
+            [style.minWidth]="desiredWidth">
             @if (!hideHeader) {
                 <div class="panel2-header left">
                     <div class="panel2-header-inner left">
@@ -58,9 +63,18 @@ <h3>
                             <ng-container *ngTemplateOutlet="menuTemplate"></ng-container>
                         </div>
                     </div>
-                    <button class="btn panel2-collapse" attr.aria-label="{{ 'common.collapse' | sqxTranslate }}" (click)="toggle()" sqxStopClick>
-                        <i class="icon-angle-left"></i>
+                    <button class="btn panel2-collapse" attr.aria-label="{{ 'common.togglePanel' | sqxTranslate }}" (click)="toggle()" sqxStopClick>
+                        @if (displayMode === "Collapsed" && expandedWidth > 0) {
+                            <i class="icon-angle-right"></i>
+                        } @else if (displayMode === "Collapsed") {
+                            <i class="icon-angle-right"></i>
+                        } @else if (displayMode === "Normal") {
+                            <i class="icon-angle-left"></i>
+                        } @else if (displayMode === "Expanded") {
+                            <i class="icon-angle-left"></i>
+                        }
                     </button>
+
                     <div class="panel2-sidebar-title">{{ titleCollapsed || titleText | sqxTranslate }}</div>
                 </div>
             }
@@ -130,6 +144,6 @@ <h3>
     <ng-template #titleTemplate> <ng-content select="[title]"></ng-content> </ng-template>
 
     <ng-template #menuTemplate> <ng-content select="[menu]"></ng-content> </ng-template>
-    
+
     <ng-template #headerTemplate> <ng-content select="[header]"></ng-content> </ng-template>
 </div>
diff --git a/frontend/src/app/framework/angular/layout.component.ts b/frontend/src/app/framework/angular/layout.component.ts
@@ -14,6 +14,8 @@ import { TranslatePipe } from './pipes/translate.pipe';
 import { StopClickDirective } from './stop-click.directive';
 import { SidebarMenuDirective } from './template.directive';
 
+type DisplayMode = 'Normal' | 'Expanded' | 'Collapsed';
+
 @Component({
     selector: 'sqx-layout',
     styleUrls: ['./layout.component.scss'],
@@ -74,21 +76,56 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
     @Input({ transform: booleanAttribute })
     public customHeader = false;
 
+    @Input({ transform: numberAttribute })
+    public expandedWidth = -1;
+
+    @Input({ transform: numberAttribute })
+    public collapsedWidth = 3;
+
     @ViewChild('panel', { static: false })
     public panel!: ElementRef<HTMLElement>;
 
     @ContentChild(SidebarMenuDirective)
     public sidebarMenuTemplate?: SidebarMenuDirective;
 
-    public isCollapsed = false;
+    public displayMode: DisplayMode = 'Normal';
+
     public isMinimized = false;
 
     public get desiredInnerWidth() {
-        return this.innerWidth <= 0 ? '100%' : `${this.innerWidth}rem`;
+        if (this.innerWidth > 0) {
+          return `${this.innerWidth}rem`;
+        }
+
+        return '100%';
     }
 
     public get desiredWidth() {
-        return this.width <= 0 ? '100%' : `${this.width}rem`;
+        if (this.actualWidth >= 0) {
+            return `${this.actualWidth}rem`;
+        }
+
+        return '100%';
+    }
+
+    public get actualWidth() {
+        const { displayMode, layout, expandedWidth, collapsedWidth, width } = this;
+
+        if (layout === 'left') {
+            if (displayMode === 'Expanded' && expandedWidth > 0) {
+                return expandedWidth
+            }
+
+            if (displayMode === 'Collapsed' && collapsedWidth > 0) {
+                return collapsedWidth
+            }
+        } else if (layout === 'right') {
+            if (displayMode === 'Collapsed' || this.isMinimized) {
+                return 0;
+            }
+        }
+
+        return width;
     }
 
     public get isViewInit() {
@@ -128,7 +165,6 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 
     public ngAfterViewInit() {
         this.isViewInitField = true;
-
         this.container.invalidate();
     }
 
@@ -137,15 +173,17 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
             return this.width;
         }
 
-        const isMinimized = availableWidth < 1200 && numberOfLayouts > 1;
-
-        if (isMinimized !== this.isMinimized) {
-            this.isCollapsed = !this.isMinimized;
-            this.isMinimized = isMinimized;
+        const isCollapsed = availableWidth < 1200 && numberOfLayouts > 1;
+        if (this.isMinimized !== isCollapsed) {
+            this.isMinimized = isCollapsed;
             this.changeDetector.detectChanges();
         }
 
-        return this.isMinimized || this.isCollapsed ? (this.layout === 'left' ? 3 : 0) : this.width;
+        if (this.layout === 'left' && isCollapsed) {
+            return this.collapsedWidth;
+        }
+
+        return this.actualWidth;
     }
 
     public measure(size: string) {
@@ -156,7 +194,6 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
         this.widthPrevious = size;
 
         const element = this.panel.nativeElement;
-
         if (!element) {
             return;
         }
@@ -187,20 +224,30 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     public toggle() {
-        this.setCollapsed(!this.isCollapsed);
+        if (this.displayMode === 'Collapsed') {
+            if (this.expandedWidth > 0) {
+                this.setDisplayMode('Expanded');
+            } else {
+                this.setDisplayMode('Normal')
+            }
+        } else if (this.displayMode === 'Expanded') {
+            this.setDisplayMode('Normal');
+        } else {
+            this.setDisplayMode('Collapsed');
+        }
     }
 
-    public expand(event: MouseEvent) {
+    public switchToNormalFromDiv(event: MouseEvent) {
         if ((event.target as any)?.['nodeName'] !== 'DIV') {
             return;
         }
 
-        this.setCollapsed(false);
+        this.setDisplayMode('Normal');
     }
 
-    private setCollapsed(isCollapsed: boolean) {
-        if (this.isCollapsed !== isCollapsed) {
-            this.isCollapsed = isCollapsed;
+    private setDisplayMode(mode: DisplayMode) {
+        if (this.displayMode !== mode) {
+            this.displayMode = mode;
             this.container.invalidate();
         }
     }
diff --git a/frontend/src/app/framework/angular/layout.stories.ts b/frontend/src/app/framework/angular/layout.stories.ts
@@ -145,7 +145,7 @@ export const Complex: Story = {
         template: `
             <sqx-root-view>
                 <div sqxLayoutContainer>
-                    <sqx-layout titleText="Left" layout="left" width="15">
+                    <sqx-layout titleText="Left" layout="left" width="15" expandedWidth="30">
                         <div>
                             <sqx-list-view>
                                 <div class="card">
diff --git a/frontend/src/app/theme/_panels2.scss b/frontend/src/app/theme/_panels2.scss
@@ -90,8 +90,6 @@
             }
 
             &.collapsed {
-                @include force-width-important(3.25rem);
-
                 .panel2-sidebar-title {
                     opacity: 1;
                 }
@@ -104,10 +102,6 @@
                     display: none;
                 }
 
-                .panel2-collapse {
-                    transform: rotate(180deg);
-                }
-
                 & {
                     cursor: pointer;
                 }
@@ -119,14 +113,6 @@
             background-color: $color-white;
             border: 0;
             border-left: 1px solid $color-border;
-
-            &.collapsed {
-                width: 3rem !important;
-
-                .panel2-collapse {
-                    transform: rotate(180deg);
-                }
-            }
         }
 
         &.main {
