[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

projects/editor/src/app/components/unit-view/page-view/properties-panel/model-properties-tab/input-groups/button-properties.component.ts

@@ -8,59 +8,73 @@ import { FileService } from 'common/services/file.service';
 @Component({
   selector: 'aspect-button-properties',
   template: `
-    <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
-      <mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
-      <mat-select [value]="combinedProperties.action"
-                  (selectionChange)="updateModel.emit({ property: 'action', value: $event.value })">
-        <mat-option [value]="null">
-          {{ 'propertiesPanel.none' | translate }}
-        </mat-option>
-        <mat-option *ngFor="let option of ['unitNav', 'pageNav']"
-                    [value]="option">
-          {{ 'propertiesPanel.' + option | translate }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    <fieldset *ngIf="combinedProperties.asLink !== undefined">
+      <legend>Knopf</legend>
+      <mat-checkbox *ngIf="combinedProperties.asLink !== undefined"
+                    [checked]="$any(combinedProperties.asLink)"
+                    (change)="updateModel.emit({ property: 'asLink', value: $event.checked })">
+        {{'propertiesPanel.asLink' | translate }}
+      </mat-checkbox>
 
-    <mat-form-field *ngIf="combinedProperties.action" appearance="fill">
-      <mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label>
-      <ng-container *ngIf="combinedProperties.action === 'unitNav'">
-        <mat-select [value]="combinedProperties.actionParam"
-                    (selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
-          <mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
+      <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
+        <mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
+        <mat-select [value]="combinedProperties.action"
+                    (selectionChange)="updateModel.emit({ property: 'action', value: $event.value })">
+          <mat-option [value]="null">
+            {{ 'propertiesPanel.none' | translate }}
+          </mat-option>
+          <mat-option *ngFor="let option of ['unitNav', 'pageNav']"
                       [value]="option">
             {{ 'propertiesPanel.' + option | translate }}
           </mat-option>
         </mat-select>
-      </ng-container>
-      <ng-container *ngIf="combinedProperties.action === 'pageNav'">
-        <mat-select [value]="combinedProperties.actionParam"
-                    (selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
-          <ng-container *ngFor="let page of unitService.unit.pages; index as i">
-            <mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i"
-                        [value]="i">
-              {{ unitService.unit.pages[0].alwaysVisible ? i : i + 1 }}
-            </mat-option>
-          </ng-container>
-        </mat-select>
-      </ng-container>
-    </mat-form-field>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>{{'propertiesPanel.actionParam' | translate }}</mat-label>
+          <mat-select [disabled]="combinedProperties.action === null"
+                      [value]="combinedProperties.actionParam"
+                      [matTooltipDisabled]="combinedProperties.action !== 'pageNav'"
+                      [matTooltip]="'propertiesPanel.pageNavSelectionHint' | translate"
+                      (selectionChange)="updateModel.emit({ property: 'actionParam', value: $event.value })">
 
-    <mat-checkbox *ngIf="combinedProperties.asLink !== undefined"
-                  [checked]="$any(combinedProperties.asLink)"
-                  (change)="updateModel.emit({ property: 'asLink', value: $event.checked })">
-      {{'propertiesPanel.asLink' | translate }}
-    </mat-checkbox>
+            <ng-container *ngIf="combinedProperties.action === 'pageNav'">
+              <ng-container *ngFor="let page of unitService.unit.pages; index as i">
+                <mat-option *ngIf="!page.alwaysVisible && selectionService.selectedPageIndex !== i"
+                            [value]="i">
+                  {{ unitService.unit.pages[0].alwaysVisible ? i : i + 1 }}
+                </mat-option>
+              </ng-container>
+            </ng-container>
 
-    <ng-container *ngIf="combinedProperties.imageSrc !== undefined">
-      <button mat-raised-button (click)="loadImage()">{{'loadImage' | translate }}</button>
-      <button mat-raised-button (click)="removeImage()">{{'removeImage' | translate }}</button>
-      <img [src]="combinedProperties.imageSrc"
-           [style.object-fit]="'scale-down'"
-           [width]="200">
-    </ng-container>
+            <ng-container *ngIf="combinedProperties.action === 'unitNav'">
+              <mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
+                          [value]="option">
+                {{ 'propertiesPanel.' + option | translate }}
+              </mat-option>
+            </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: [
+    '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 {
@@ -68,6 +82,8 @@ export class ButtonPropertiesComponent {
   @Output() updateModel =
   new EventEmitter<{ property: string; value: string | number | boolean | null, isInputValid?: boolean | null }>();
 
+  hoveringImage = false;
+
   constructor(public unitService: UnitService, public selectionService: SelectionService) { }
 
   async loadImage(): Promise<void> {

projects/editor/src/assets/i18n/de.json

@@ -43,7 +43,7 @@
     "alwaysVisibleAspectRatio": "Seitenverhältnis (in Prozent)"
   },
   "propertiesPanel": {
-    "asLink": "als Link",
+    "asLink": "als Hyperlink-Text darstellen",
     "backgroundColor": "Hintergrundfarbe",
     "fontColor": "Schriftfarbe",
     "font": "Schriftart",
@@ -95,6 +95,7 @@
     "last": "Letzte Unit",
     "end": "Beenden",
     "undefined": "undefiniert",
+    "pageNavSelectionHint": "Hier erscheinen nur Seiten, welche als Ziel zu Verfügung stehen.",
     "preset": "Vorbelegung",
     "true": "wahr",
     "false": "falsch",