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 098dd4f041832e1e3f7945548bd86fc9ae3acd9e..3f155a59988df0dd44af66cd5c69d0da8737ae76 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 6f854f7a375527c9b6b9a631284d7f4af2ba2f8a..549d233911c360dc8df70d4fe036f8f402a845cd 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 c069d4316aa81f0aec51070812b1cd1b69063ae4..c9ebed4855c0a6bce7b82d1bdc37781e6e35e3c9 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 {