From a30bb592c931fa77e8254a62698058393a361d70 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 22 May 2024 15:00:18 +0200
Subject: [PATCH] [editor] Fix fieldset width globally
Fieldsets have a browser-style of "min-width: min-content". This
inverses the usual sizing where children adhere to the parent size,
which is not wanted here or anywhere else. To prevent running into this
hard to find problem again, it changed globally.
---
.../canvas/section-menu.component.ts | 16 ++++----
.../util/size-input-panel.component.ts | 40 +++++++++----------
projects/editor/src/styles.css | 4 ++
3 files changed, 31 insertions(+), 29 deletions(-)
diff --git a/projects/editor/src/app/components/canvas/section-menu.component.ts b/projects/editor/src/app/components/canvas/section-menu.component.ts
index 098dd4f04..3f155a599 100644
--- a/projects/editor/src/app/components/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/canvas/section-menu.component.ts
@@ -23,8 +23,8 @@ import { SelectionService } from '../../services/selection.service';
[matTooltipPosition]="'left'">
<mat-icon>list</mat-icon>
</button>
- <mat-menu #elementListMenu="matMenu" class="layoutMenu" xPosition="before">
- <mat-action-list>
+ <mat-menu #elementListMenu="matMenu" xPosition="before">
+ <mat-action-list [style.padding.px]="5">
<ng-container *ngIf="section.elements.length === 0">
Keine Elemente im Abschnitt
</ng-container>
@@ -48,12 +48,13 @@ import { SelectionService } from '../../services/selection.service';
[matTooltip]="'Sichtbarkeit'" [matTooltipPosition]="'left'">
<mat-icon>disabled_visible</mat-icon>
</button>
+
<button mat-mini-fab [matMenuTriggerFor]="layoutMenu"
[matTooltip]="'Layout'" [matTooltipPosition]="'left'">
<mat-icon>space_dashboard</mat-icon>
</button>
- <mat-menu #layoutMenu="matMenu" class="layoutMenu" xPosition="before">
- <div (click)="$event.stopPropagation()">
+ <mat-menu #layoutMenu="matMenu" xPosition="before">
+ <div (click)="$event.stopPropagation()" class="layoutMenu">
<mat-checkbox class="menuItem" [checked]="section.dynamicPositioning"
(click)="$any($event).stopPropagation()"
(change)="updateModel('dynamicPositioning', $event.checked)">
@@ -71,7 +72,6 @@ import { SelectionService } from '../../services/selection.service';
<div *ngIf="section.dynamicPositioning">
<fieldset>
<legend>{{'section-menu.columns' | translate }}</legend>
-
<mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
(click)="$any($event).stopPropagation()"
(change)="updateModel('autoColumnSize', $event.checked)">
@@ -163,9 +163,9 @@ import { SelectionService } from '../../services/selection.service';
</button>
`,
styles: [
- '::ng-deep .layoutMenu {padding: 0 15px; width: 250px;}',
- '::ng-deep .layoutMenu fieldset {margin: 10px 0; display: flex; flex-direction: column; align-items: flex-start;}',
- '::ng-deep .layoutMenu .section-height-input {margin-top: 10px;}',
+ '.layoutMenu {padding: 5px; width: 250px;}',
+ 'aspect-size-input-panel {max-width: 100%;}',
+ '.layoutMenu fieldset {display: flex; flex-direction: column; align-items: flex-start;}',
'.menuItem {margin-bottom: 5px;}',
'::ng-deep .activeAfterID-menu .mat-mdc-form-field {width:90%; margin-left: 10px;}'
]
diff --git a/projects/editor/src/app/components/util/size-input-panel.component.ts b/projects/editor/src/app/components/util/size-input-panel.component.ts
index 6f854f7a3..549d23391 100644
--- a/projects/editor/src/app/components/util/size-input-panel.component.ts
+++ b/projects/editor/src/app/components/util/size-input-panel.component.ts
@@ -6,29 +6,27 @@ import { Measurement } from 'common/models/elements/element';
@Component({
selector: 'aspect-size-input-panel',
template: `
- <div class="panel">
- <mat-form-field [style.width.px]="125">
- <mat-label>{{label}}</mat-label>
- <input matInput type="number"
- [(ngModel)]="value"
- (change)="valueUpdated.emit(getCombinedString())">
- </mat-form-field>
- <mat-form-field [style.width.px]="160">
- <mat-label>Einheit</mat-label>
- <mat-select [(ngModel)]="unit"
- (selectionChange)="valueUpdated.emit(getCombinedString())">
- <mat-option *ngIf="allowedUnits.includes('fr')"
- value="fr">{{'section-menu.fraction' | translate }}</mat-option>
- <mat-option *ngIf="allowedUnits.includes('px')"
- value="px">{{'section-menu.pixel' | translate }}</mat-option>
- <mat-option *ngIf="allowedUnits.includes('%')"
- value="%">{{'section-menu.percent' | translate }}</mat-option>
- </mat-select>
- </mat-form-field>
- </div>
+ <mat-form-field [style.width.%]="40">
+ <mat-label>{{label}}</mat-label>
+ <input matInput type="number"
+ [(ngModel)]="value"
+ (change)="valueUpdated.emit(getCombinedString())">
+ </mat-form-field>
+ <mat-form-field [style.width.%]="60">
+ <mat-label>Einheit</mat-label>
+ <mat-select [(ngModel)]="unit"
+ (selectionChange)="valueUpdated.emit(getCombinedString())">
+ <mat-option *ngIf="allowedUnits.includes('fr')"
+ value="fr">{{'section-menu.fraction' | translate }}</mat-option>
+ <mat-option *ngIf="allowedUnits.includes('px')"
+ value="px">{{'section-menu.pixel' | translate }}</mat-option>
+ <mat-option *ngIf="allowedUnits.includes('%')"
+ value="%">{{'section-menu.percent' | translate }}</mat-option>
+ </mat-select>
+ </mat-form-field>
`,
styles: [
- '.panel {display: flex; flex-direction: row;}'
+ ':host {display: flex; flex-direction: row;}'
]
})
export class SizeInputPanelComponent {
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index c069d4316..c9ebed485 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -6,6 +6,10 @@ input[type=color] {
cursor: pointer;
}
+fieldset {
+ min-width: 0;
+}
+
/*Flex Styles*/
.fx-column-start-stretch {
--
GitLab