diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts index 0f61fbdcb24da5d293a15524df34eba9131b1edc..4674d2dd42103e27363f3b4993e6be533da511e7 100644 --- a/projects/editor/src/app/app.module.ts +++ b/projects/editor/src/app/app.module.ts @@ -9,6 +9,7 @@ import { NgxTiptapModule } from 'ngx-tiptap'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatMenuModule } from '@angular/material/menu'; +import { MatSliderModule } from '@angular/material/slider'; import { AppComponent } from './app.component'; import { ToolbarComponent } from './toolbar/toolbar.component'; @@ -69,6 +70,7 @@ import { ElementSizingPropertiesComponent } from './unit-view/page-view/properti SharedModule, MatButtonToggleModule, MatMenuModule, + MatSliderModule, NgxTiptapModule, TranslateModule.forRoot({ loader: { diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html index 1269797832c6e7bfc5a081d782c3de8038f390ab..6f0e38feb9583b07e3db00cc26ffd82c63a9659a 100644 --- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html +++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html @@ -354,6 +354,26 @@ (input)="updateModel('lineColoringColor', $any($event.target).value)"> </mat-form-field> + <mat-checkbox *ngIf="combinedProperties.magnifier !== undefined" + [checked]="$any(combinedProperties.magnifier)" + (change)="updateModel('magnifier', $event.checked)"> + {{'propertiesPanel.magnifier' | translate }} + </mat-checkbox> + <mat-form-field *ngIf="combinedProperties.magnifier" appearance="fill"> + <mat-label>{{'propertiesPanel.magnifierSize' | translate }} in px</mat-label> + <input matInput type="number" #magnifierSize="ngModel" min="0" + [ngModel]="combinedProperties.magnifierSize" + (ngModelChange)="updateModel('magnifierSize', $event, magnifierSize.valid)"> + </mat-form-field> + + <mat-slider *ngIf="combinedProperties.magnifier" + min="1" max="3" step="0.1" [ngModel]="combinedProperties.magnifierZoom" + (change)="updateModel('magnifierZoom', $event.value)"> + </mat-slider> + <div *ngIf="combinedProperties.magnifier"> + {{combinedProperties.magnifierZoom}} + </div> + <mat-divider></mat-divider> <button mat-raised-button class="element-button" diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json index 1a5ddcb0c88e41296c7e2642087a1094cdc61daf..1ea5afe76df46810398b61bdc7c04170857fec40 100644 --- a/projects/editor/src/assets/i18n/de.json +++ b/projects/editor/src/assets/i18n/de.json @@ -101,6 +101,9 @@ "floating": "schwebend", "lineColoring": "Zeilenfärbung", "lineColoringColor": "Zeilenfarbe", + "magnifier": "Lupe", + "magnifierSize": "Größe der Lupe", + "magnifierZoom": "Vergrößerung der Lupe", "duplicateElement": "Element duplizieren", "deleteElement": "Element löschen", "noElementSelected": "Kein Element ausgewählt"