diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css index 7b3c282c87ba1cae9103c55f390efb423f915b10..5b88bc5b96ef0307af5c7d77c3f20db11bc364a0 100644 --- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css +++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css @@ -32,3 +32,19 @@ button:not(.media-src-button):not(.mat-mini-fab):not(.mat-icon-button) { :host ::ng-deep .option-draggable:last-child { border: none; } + +.fx-column-start-stretch { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: start; + align-items: stretch; +} + +.fx-align-self-center { + align-self: center; +} + +.fx-align-self-start { + align-self: start; +} diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html index e5ad7f6929a0942d8f0dc0125a95c381eec46593..d631783ed1343ed7eb45f9e4d4f7b1ba1213e70b 100644 --- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html +++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html @@ -1,4 +1,4 @@ -<div fxLayout="column"> +<div class='fx-column-start-stretch'> <mat-form-field appearance="fill"> <mat-label>{{'propertiesPanel.id' | translate }}</mat-label> <input matInput type="text" *ngIf="selectedElements.length === 1" [value]="combinedProperties.id" @@ -40,19 +40,22 @@ (updateModel)="updateModel.emit($event)"></aspect-border-properties> <button *ngIf="combinedProperties.document" - mat-raised-button fxFlexAlign="center" + class="fx-align-self-center" + mat-raised-button (click)="unitService.showDefaultEditDialog(selectedElements[0])"> Text editieren </button> <button *ngIf="combinedProperties.src" - mat-fab color="primary" fxFlexAlign="center" class="media-src-button" + class="media-src-button fx-align-self-center" + mat-fab color="primary" [matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'" (click)="changeMediaSrc(combinedProperties.type)"> <mat-icon>upload_file</mat-icon> </button> <button *ngIf="combinedProperties.player" - mat-raised-button fxFlexAlign="center" + class="fx-align-self-center" + mat-raised-button (click)="unitService.showDefaultEditDialog(selectedElements[0])"> Medienoptionen </button> @@ -112,7 +115,8 @@ <ng-container *ngIf="combinedProperties.type === 'checkbox'"> {{'preset' | translate }} - <mat-button-toggle-group [value]="combinedProperties.value" fxFlexAlign="start" + <mat-button-toggle-group class="fx-align-self-start" + [value]="combinedProperties.value" (change)="updateModel.emit({ property: 'value', value: $event.value })"> <mat-button-toggle [value]="true">{{'propertiesPanel.true' | translate }}</mat-button-toggle> <mat-button-toggle [value]="false">{{'propertiesPanel.false' | translate }}</mat-button-toggle>