diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts index bb15abac87c62062061f6c8d2a086b7fc0800b0a..c4dd9d9d324b865772b7adc085a5d7a3748e2425 100644 --- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts +++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts @@ -3,7 +3,7 @@ import { } from '@angular/core'; import { UnitService } from '../../../../services/unit.service'; import { SelectionService } from '../../../../services/selection.service'; -import { UIElement } from '../../../../../../../common/models/uI-element'; +import { PositionedElement, UIElement } from '../../../../../../../common/models/uI-element'; @Component({ selector: 'app-element-sizing-properties', @@ -42,9 +42,25 @@ import { UIElement } from '../../../../../../../common/models/uI-element'; (ngModelChange)="updateModel.emit( { property: 'yPosition', value: $event, isInputValid: yPosition.valid && $event !== null })"> </mat-form-field> + <ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1"> + {{'propertiesPanel.alignment' | translate }} + <div class="alignment-button-group" fxLayout="row" fxLayoutAlign="center center"> + <button (click)="alignElements('left')"> + <mat-icon>align_horizontal_left</mat-icon> + </button> + <button (click)="alignElements('right')"> + <mat-icon>align_horizontal_right</mat-icon> + </button> + <button (click)="alignElements('top')"> + <mat-icon>align_vertical_top</mat-icon> + </button> + <button (click)="alignElements('bottom')"> + <mat-icon>align_vertical_bottom</mat-icon> + </button> + </div> + </ng-container> </ng-container> <ng-template #elseBlock> - <mat-checkbox *ngIf="combinedProperties.positionProps !== undefined" matTooltip="Element ist nicht mehr dynamisch. Die eingestellte Größe wird benutzt." [checked]="$any(combinedProperties.fixedSize)" @@ -53,10 +69,10 @@ import { UIElement } from '../../../../../../../common/models/uI-element'; </mat-checkbox> <mat-form-field appearance="fill" *ngIf="combinedProperties.positionProps !== undefined"> - <mat-label *ngIf="!combinedProperties.positionProps.fixedSize"> + <mat-label *ngIf="!combinedProperties.fixedSize"> {{'propertiesPanel.minWidth' | translate }} </mat-label> - <mat-label *ngIf="combinedProperties.positionProps.fixedSize"> + <mat-label *ngIf="combinedProperties.fixedSize"> {{'propertiesPanel.width' | translate }} </mat-label> <input matInput type="number" #width="ngModel" min="0" @@ -66,20 +82,20 @@ import { UIElement } from '../../../../../../../common/models/uI-element'; isInputValid: width.valid && $event !== null })"> </mat-form-field> - <mat-checkbox *ngIf="combinedProperties.positionProps && !combinedProperties.positionProps.fixedSize" + <mat-checkbox *ngIf="combinedProperties.positionProps && !combinedProperties.fixedSize" [checked]="$any(combinedProperties.useMinHeight)" (change)="updateModel.emit({ property: 'useMinHeight', value: $event.checked })"> {{'propertiesPanel.useMinHeight' | translate }} </mat-checkbox> <mat-form-field *ngIf="combinedProperties.positionProps && - combinedProperties.positionProps.useMinHeight || + combinedProperties.useMinHeight || combinedProperties.positionProps && - combinedProperties.positionProps.fixedSize" appearance="fill"> - <mat-label *ngIf="!combinedProperties.positionProps.fixedSize"> + combinedProperties.fixedSize" appearance="fill"> + <mat-label *ngIf="!combinedProperties.fixedSize"> {{'propertiesPanel.minHeight' | translate }} </mat-label> - <mat-label *ngIf="combinedProperties.positionProps.fixedSize"> + <mat-label *ngIf="combinedProperties.fixedSize"> {{'propertiesPanel.height' | translate }} </mat-label> <input matInput type="number" #height="ngModel" min="0" @@ -156,7 +172,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element'; </div> </ng-template> - <mat-form-field *ngIf="combinedProperties.positionProps" appearance="fill"> + <mat-form-field *ngIf="combinedProperties.zIndex !== undefined" appearance="fill"> <mat-label>{{'propertiesPanel.zIndex' | translate }}</mat-label> <input matInput type="number" #zIndex="ngModel" [ngModel]="combinedProperties.zIndex" @@ -166,30 +182,13 @@ import { UIElement } from '../../../../../../../common/models/uI-element'; matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne."> <!-- TODO translate--> </mat-form-field> - <ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1"> - {{'propertiesPanel.alignment' | translate }} - <div class="alignment-button-group" fxLayout="row" fxLayoutAlign="center center"> - <button (click)="alignElements('left')"> - <mat-icon>align_horizontal_left</mat-icon> - </button> - <button (click)="alignElements('right')"> - <mat-icon>align_horizontal_right</mat-icon> - </button> - <button (click)="alignElements('top')"> - <mat-icon>align_vertical_top</mat-icon> - </button> - <button (click)="alignElements('bottom')"> - <mat-icon>align_vertical_bottom</mat-icon> - </button> - </div> - </ng-container> </div> `, styles: [ '.centered-form-field {margin-left: 25%}', '.right-form-field {margin-left: 15%}', '.input-group {background-color: rgba(0,0,0,.04); margin-bottom: 10px;}', - '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 95px; margin: 0 5px;}' + '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 100px; margin: 0 5px;}' ] }) export class ElementSizingPropertiesComponent {