From c3cd000abca2c9daea2b024c55ce60bd756d341d Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Fri, 20 Feb 2026 09:31:58 +0100 Subject: [PATCH] Expanded left panel. (#1288) * Expanded left panel. * Fix panel label. --- backend/i18n/frontend_de.json | 1 + backend/i18n/frontend_en.json | 1 + backend/i18n/frontend_fr.json | 1 + backend/i18n/frontend_it.json | 1 + backend/i18n/frontend_nl.json | 1 + backend/i18n/frontend_pt.json | 1 + backend/i18n/frontend_zh.json | 1 + backend/i18n/source/frontend_en.json | 1 + .../pages/schemas/schemas-page.component.html | 2 +- .../pages/schemas/schemas-page.component.html | 4 +- .../framework/angular/layout.component.html | 22 ++++- .../app/framework/angular/layout.component.ts | 81 +++++++++++++++---- .../app/framework/angular/layout.stories.ts | 2 +- frontend/src/app/theme/_panels2.scss | 14 ---- 14 files changed, 94 insertions(+), 39 deletions(-) diff --git a/backend/i18n/frontend_de.json b/backend/i18n/frontend_de.json index 0b8f823cc..43d4b1ca5 100644 --- 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 index d24ee97ad..5c5cc43ea 100644 --- 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 index ab5ba9a18..2688d1076 100644 --- 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 index 64faac1fc..d6259e241 100644 --- 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 index 75e970f3b..b963e73aa 100644 --- 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 index f4fd44d35..3c2ecdc88 100644 --- 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 index 2f76f965b..a24e46ecf 100644 --- 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 index d24ee97ad..5c5cc43ea 100644 --- 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 index 5d7190f36..64bd7b155 100644 --- 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 @@ @if (!isEmbedded) { - +
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 index 7b2e61576..540536a51 100644 --- 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 @@ - + -
+
@if (schemasState.canCreate | async) {
+
{{ titleCollapsed || titleText | sqxTranslate }}
} @@ -130,6 +144,6 @@ - +
diff --git a/frontend/src/app/framework/angular/layout.component.ts b/frontend/src/app/framework/angular/layout.component.ts index 68d404cf8..abbbe36bd 100644 --- 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; @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 index c4268270f..b1015ec93 100644 --- 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: `
- +
diff --git a/frontend/src/app/theme/_panels2.scss b/frontend/src/app/theme/_panels2.scss index 0bf824dc1..b6c9e7d5d 100644 --- 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 {