Skip to content
Snippets Groups Projects
Commit aa541c48 authored by rhenck's avatar rhenck
Browse files

[editor] Improve button properties panel

- Add fieldset to make it look nicer.
- Improve image to have fixed size, scale properly and show buttons only 
on hover.
- Improve translations
- Add tooltip to actionparam dropdown: When having selected pageNav it 
shows a tooltip to get across that only valid pages can show up.

#240
parent 732d6502
No related branches found
No related tags found
No related merge requests found
...@@ -8,59 +8,73 @@ import { FileService } from 'common/services/file.service'; ...@@ -8,59 +8,73 @@ import { FileService } from 'common/services/file.service';
@Component({ @Component({
selector: 'aspect-button-properties', selector: 'aspect-button-properties',
template: ` template: `
<mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill"> <fieldset *ngIf="combinedProperties.asLink !== undefined">
<mat-label>{{'propertiesPanel.action' | translate }}</mat-label> <legend>Knopf</legend>
<mat-select [value]="combinedProperties.action" <mat-checkbox *ngIf="combinedProperties.asLink !== undefined"
(selectionChange)="updateModel.emit({ property: 'action', value: $event.value })"> [checked]="$any(combinedProperties.asLink)"
<mat-option [value]="null"> (change)="updateModel.emit({ property: 'asLink', value: $event.checked })">
{{ 'propertiesPanel.none' | translate }} {{'propertiesPanel.asLink' | translate }}
</mat-option> </mat-checkbox>
<mat-option *ngFor="let option of ['unitNav', 'pageNav']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.action" appearance="fill"> <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label> <mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
<ng-container *ngIf="combinedProperties.action === 'unitNav'"> <mat-select [value]="combinedProperties.action"
<mat-select [value]="combinedProperties.actionParam" (selectionChange)="updateModel.emit({ property: 'action', value: $event.value })">
(selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })"> <mat-option [value]="null">
<mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']" {{ 'propertiesPanel.none' | translate }}
</mat-option>
<mat-option *ngFor="let option of ['unitNav', 'pageNav']"
[value]="option"> [value]="option">
{{ 'propertiesPanel.' + option | translate }} {{ 'propertiesPanel.' + option | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</ng-container> </mat-form-field>
<ng-container *ngIf="combinedProperties.action === 'pageNav'">
<mat-select [value]="combinedProperties.actionParam" <mat-form-field appearance="fill">
(selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })"> <mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label>
<ng-container *ngFor="let page of unitService.unit.pages; index as i"> <mat-select [disabled]="combinedProperties.action === null"
<mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i" [value]="combinedProperties.actionParam"
[value]="i"> [matTooltipDisabled]="combinedProperties.action !== 'pageNav'"
{{ unitService.unit.pages[0].alwaysVisible ? i : i + 1 }} [matTooltip]="'propertiesPanel.pageNavSelectionHint' | translate"
</mat-option> (selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
</ng-container>
</mat-select>
</ng-container>
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.asLink !== undefined" <ng-container *ngIf="combinedProperties.action === 'pageNav'">
[checked]="$any(combinedProperties.asLink)" <ng-container *ngFor="let page of unitService.unit.pages; index as i">
(change)="updateModel.emit({ property: 'asLink', value: $event.checked })"> <mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i"
{{'propertiesPanel.asLink' | translate }} [value]="i">
</mat-checkbox> {{ unitService.unit.pages[0].alwaysVisible ? i : i + 1 }}
</mat-option>
</ng-container>
</ng-container>
<ng-container *ngIf="combinedProperties.imageSrc !== undefined"> <ng-container *ngIf="combinedProperties.action === 'unitNav'">
<button mat-raised-button (click)="loadImage()">{{'loadImage' | translate }}</button> <mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
<button mat-raised-button (click)="removeImage()">{{'removeImage' | translate }}</button> [value]="option">
<img [src]="combinedProperties.imageSrc" {{ 'propertiesPanel.' + option | translate }}
[style.object-fit]="'scale-down'" </mat-option>
[width]="200"> </ng-container>
</ng-container> </mat-select>
</mat-form-field>
<div class="image-panel" (mouseenter)="hoveringImage = true" (mouseleave)="hoveringImage = false">
<button *ngIf="combinedProperties.imageSrc === null || hoveringImage"
class="add-image-button" mat-raised-button
(click)="loadImage()">{{'loadImage' | translate }}</button>
<button *ngIf="combinedProperties.imageSrc !== null && hoveringImage"
class="remove-image-button" mat-raised-button
(click)="removeImage()">{{'removeImage' | translate }}</button>
<img *ngIf="combinedProperties.imageSrc"
[src]="combinedProperties.imageSrc">
</div>
</fieldset>
`, `,
styles: [ styles: [
'mat-checkbox {margin-bottom: 10px;}',
'mat-form-field {width: 100%;}',
'.image-panel {width: 250px; height: 150px; border: 1px solid; text-align: center; position: relative;}',
'.image-panel .add-image-button {position: absolute; left: 50%; top: 35%; transform: translate(-50%, -35%);}',
'.image-panel .remove-image-button {position: absolute; left: 50%; top: 70%; transform: translate(-50%, -70%);}',
'.image-panel img {width:100%; height:100%;}'
] ]
}) })
export class ButtonPropertiesComponent { export class ButtonPropertiesComponent {
...@@ -68,6 +82,8 @@ export class ButtonPropertiesComponent { ...@@ -68,6 +82,8 @@ export class ButtonPropertiesComponent {
@Output() updateModel = @Output() updateModel =
new EventEmitter<{ property: string; value: string | number | boolean | null, isInputValid?: boolean | null }>(); new EventEmitter<{ property: string; value: string | number | boolean | null, isInputValid?: boolean | null }>();
hoveringImage = false;
constructor(public unitService: UnitService, public selectionService: SelectionService) { } constructor(public unitService: UnitService, public selectionService: SelectionService) { }
async loadImage(): Promise<void> { async loadImage(): Promise<void> {
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
"alwaysVisibleAspectRatio": "Seitenverhältnis (in Prozent)" "alwaysVisibleAspectRatio": "Seitenverhältnis (in Prozent)"
}, },
"propertiesPanel": { "propertiesPanel": {
"asLink": "als Link", "asLink": "als Hyperlink-Text darstellen",
"backgroundColor": "Hintergrundfarbe", "backgroundColor": "Hintergrundfarbe",
"fontColor": "Schriftfarbe", "fontColor": "Schriftfarbe",
"font": "Schriftart", "font": "Schriftart",
...@@ -95,6 +95,7 @@ ...@@ -95,6 +95,7 @@
"last": "Letzte Unit", "last": "Letzte Unit",
"end": "Beenden", "end": "Beenden",
"undefined": "undefiniert", "undefined": "undefiniert",
"pageNavSelectionHint": "Hier erscheinen nur Seiten, welche als Ziel zu Verfügung stehen.",
"preset": "Vorbelegung", "preset": "Vorbelegung",
"true": "wahr", "true": "wahr",
"false": "falsch", "false": "falsch",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment