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 d85568a282a45adf920024331635fceb2bf64e52..69c5e228148f4629c457c0b81800870a52a70d84 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 @@ -187,6 +187,39 @@ {{'propertiesPanel.verticalOrientation' | translate }} </mat-checkbox> + <ng-container *ngIf="!unitService.expertMode"> + <mat-divider [style.margin.px]="15"></mat-divider> + <mat-checkbox #maxWidthEnabled [checked]="$any(combinedProperties.dimensions).maxWidth !== null" + (change)="toggleProperty('maxWidth', $event.checked)"> + {{'propertiesPanel.maxWidthEnabled' | translate }} + </mat-checkbox> + <mat-form-field> + <mat-label> + {{'propertiesPanel.maxWidth' | translate }} + </mat-label> + <input matInput type="number" min="0" + [disabled]="!maxWidthEnabled.checked" + [ngModel]="$any(combinedProperties.dimensions).maxWidth" + (ngModelChange)="updateDimensionProperty('maxWidth', $event)"> + </mat-form-field> + + <ng-container *ngIf="combinedProperties.type === 'drop-list' || combinedProperties.type === 'text-field-simple'"> + <mat-checkbox #fixedWidth [checked]="$any(combinedProperties.dimensions).isWidthFixed" + (change)="updateDimensionProperty('isWidthFixed', $event.checked)"> + {{'propertiesPanel.isWidthFixed' | translate }} + </mat-checkbox> + <mat-form-field appearance="fill"> + <mat-label>{{'propertiesPanel.width' | translate }}</mat-label> + <input matInput type="number" min="0" + [disabled]="!fixedWidth.checked" + [ngModel]="$any(combinedProperties.dimensions).width" + (ngModelChange)="updateDimensionProperty('width', $event)" + (change)="$any(combinedProperties.dimensions).width = + $any(combinedProperties.dimensions).width ? $any(combinedProperties.dimensions).width : 0"> + </mat-form-field> + </ng-container> + </ng-container> + <mat-checkbox *ngIf="unitService.expertMode" [style.margin-top.px]="20" [checked]="$any(combinedProperties.isRelevantForPresentationComplete)" (change)="updateModel diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts index a38aa5542b4d7128cf0f89e6b33a4d39c877ea66..cffea84d0f25ce5f52c27a588e056e5d684dbe68 100644 --- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts +++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts @@ -86,6 +86,16 @@ export class ElementModelPropertiesComponent implements OnDestroy { this.updateModel.emit({ property: 'src', value: mediaSrc }); } + toggleProperty(property: string, checked:boolean): void { + if (!checked) { + this.elementService.updateElementsDimensionsProperty(this.selectionService.getSelectedElements(), property, null); + } + } + + updateDimensionProperty(property: string, value: any): void { + this.elementService.updateElementsDimensionsProperty(this.selectionService.getSelectedElements(), property, value); + } + ngOnDestroy(): void { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete();