[editor] Move page properties to menu on the page tab

This also removes all page selection logic from the selection service.

projects/editor/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { EditorModule } from '@tinymce/tinymce-angular';
 
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
@@ -25,7 +26,6 @@ import {
   ConfirmationDialog, TextEditDialog, MultilineTextEditDialog, RichTextEditDialogTinyMCE
 } from './dialog.service';
 import { EditorTranslateLoader } from './editor-translate-loader';
-import { PagePropertiesComponent } from './components/unit-view/page-view/properties/page-properties.component';
 import { SectionPropertiesComponent } from './components/unit-view/page-view/properties/section-properties.component';
 import { ElementPropertiesComponent } from './components/unit-view/page-view/properties/element-properties.component';
 import { StaticViewOnlyElementOverlayComponent } from './components/unit-view/page-view/canvas/static-view-only-element-overlay.component';
@@ -47,7 +47,6 @@ import { DynamicViewOnlyElementOverlayComponent } from './components/unit-view/p
     TextEditDialog,
     MultilineTextEditDialog,
     RichTextEditDialogTinyMCE,
-    PagePropertiesComponent,
     SectionPropertiesComponent,
     ElementPropertiesComponent,
     StaticViewOnlyElementOverlayComponent,
@@ -61,6 +60,7 @@ import { DynamicViewOnlyElementOverlayComponent } from './components/unit-view/p
     MatButtonToggleModule,
     MatSlideToggleModule,
     EditorModule,
+    MatMenuModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts

-import {
-  Component, OnInit, OnDestroy
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { UnitPage } from '../../../../../../../common/unit';
-import { UnitService } from '../../../../unit.service';
-import { SelectionService } from '../../../../selection.service';
-import { MessageService } from '../../../../../../../common/message.service';
-
-@Component({
-  selector: 'app-page-properties',
-  template: `
-    <div fxLayout="column">
-      <div class="input-group" fxLayoutAlign="space-between center">
-        Reihenfolge
-        <button mat-icon-button matSuffix color="accent"
-                [style.margin-left.px]="50"
-                (click)="movePage('up')">
-          <mat-icon>north</mat-icon>
-        </button>
-        <button mat-icon-button color="accent"
-                [style.margin-right.px]="20"
-                (click)="movePage('down')">
-          <mat-icon>south</mat-icon>
-        </button>
-      </div>
-      <div class="input-group">
-        <mat-checkbox [checked]="selectedPage.hasMaxWidth"
-                      (change)="updateModel('hasMaxWidth', $any($event.source).checked)">
-          Maximalbreite festlegen
-        </mat-checkbox>
-        <mat-form-field *ngIf="selectedPage.hasMaxWidth" appearance="fill"
-                        [style.margin-top.px]="10">
-          <mat-label>Maximalbreite</mat-label>
-          <input matInput type="number" min="0" #maxWidth="ngModel"
-                 [ngModel]="selectedPage.maxWidth"
-                 (ngModelChange)="updateModel('maxWidth', $event, maxWidth.valid)">
-        </mat-form-field>
-      </div>
-      <mat-form-field appearance="fill">
-        <mat-label>Randbreite</mat-label>
-        <input matInput type="number" min="0" #margin="ngModel"
-               [ngModel]="selectedPage.margin"
-               (ngModelChange)="updateModel('margin', $event, margin.valid)">
-      </mat-form-field>
-      <mat-form-field>
-        <mat-label>Hintergrundfarbe</mat-label>
-        <input matInput type="color"
-               [value]="selectedPage.backgroundColor"
-               (change)="updateModel('backgroundColor', $any($event.target).value)">
-      </mat-form-field>
-      <div class="input-group">
-        <mat-checkbox [disabled]="alwaysVisibleDisabled" [ngModel]="selectedPage.alwaysVisible"
-                      (change)="updateModel('alwaysVisible', $any($event.source).checked)">
-          Immer angezeigt
-        </mat-checkbox>
-        <mat-form-field *ngIf="selectedPage.alwaysVisible"
-                        [style.margin-top.px]="10">
-          <mat-label>Seitenverhältnis (in Prozent)</mat-label>
-          <input matInput type="number" min="0" max="100"
-                 [ngModel]="selectedPage.alwaysVisibleAspectRatio"
-                 (ngModelChange)="updateModel('alwaysVisibleAspectRatio', $event)">
-        </mat-form-field>
-      </div>
-    </div>
-    `,
-  styles: [
-    '.input-group {background-color: rgba(0,0,0,.04); margin-bottom: 10px}'
-  ]
-})
-export class PagePropertiesComponent implements OnInit, OnDestroy {
-  selectedPage!: UnitPage;
-  alwaysVisibleDisabled: boolean = false;
-  private ngUnsubscribe = new Subject<void>();
-
-  constructor(public selectionService: SelectionService,
-              private unitService: UnitService,
-              private messageService: MessageService) { }
-
-  ngOnInit(): void {
-    this.selectionService.selectedPage
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe((page: UnitPage) => {
-        this.selectedPage = page;
-        this.alwaysVisibleDisabled = (!this.unitService.isSetPageAlwaysVisibleAllowed() && !page.alwaysVisible);
-      });
-  }
-
-  movePage(direction: 'up' | 'down'): void {
-    this.unitService.movePage(this.selectedPage, direction);
-  }
-
-  updateModel(property: string, value: number | boolean, isInputValid: boolean | null = true): void {
-    if (isInputValid && value != null) {
-      this.unitService.updatePageProperty(this.selectedPage, property, value);
-    } else {
-      this.messageService.showWarning('Eingabe ungültig');
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-  }
-}

projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html

-<mat-accordion multi>
-  <mat-expansion-panel [expanded]="!expandElementView">
-    <mat-expansion-panel-header>
-      <mat-panel-title>Seite</mat-panel-title>
-    </mat-expansion-panel-header>
-      <app-page-properties></app-page-properties>
-  </mat-expansion-panel>
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      <mat-panel-title>Seitenabschnitt</mat-panel-title>
-    </mat-expansion-panel-header>
-      <app-section-properties></app-section-properties>
-  </mat-expansion-panel>
-  <mat-expansion-panel [expanded]="expandElementView">
-    <mat-expansion-panel-header>
-      <mat-panel-title>Element</mat-panel-title>
-    </mat-expansion-panel-header>
-      <app-element-properties></app-element-properties>
-  </mat-expansion-panel>
-</mat-accordion>

projects/editor/src/app/components/unit-view/page-view/properties/properties.component.ts

 import { Component } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { UnitPage, UnitUIElement } from '../../../../../../../common/unit';
-import { SelectionService } from '../../../../selection.service';
 
 @Component({
   selector: 'app-properties',
-  templateUrl: './properties.component.html',
+  template: `
+    <mat-accordion multi>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Seitenabschnitt</mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-section-properties></app-section-properties>
+      </mat-expansion-panel>
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>Element</mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-element-properties></app-element-properties>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styles: [
     'mat-expansion-panel-header {font-size: larger}',
-    'mat-expansion-panel {font-size: large;}',
-    '.delete-element-button {margin-bottom: 5px; border: 1px solid red;}',
-    '.duplicate-element-button {margin-bottom: 5px}',
-    '.alignment-button-group button {margin: 5px;}',
-    '::ng-deep app-properties .mat-tab-label {min-width: 0 !important;}'
+    'mat-expansion-panel {font-size: large;}'
   ]
 })
-export class PropertiesComponent {
-  selectedPage!: UnitPage;
-  expandElementView: boolean = false;
-  private ngUnsubscribe = new Subject<void>();
-
-  constructor(public selectionService: SelectionService) { }
-
-  ngOnInit(): void {
-    this.selectionService.selectedPage
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe((page: UnitPage) => {
-        this.selectedPage = page;
-        this.expandElementView = false;
-      });
-    this.selectionService.selectedElements
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe((elements: UnitUIElement[]) => {
-        if (elements.length > 0) {
-          this.expandElementView = true;
-        }
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-  }
-}
+export class PropertiesComponent { }

projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts

@@ -122,19 +122,7 @@ export class SectionPropertiesComponent implements OnInit, OnDestroy {
   }
 
   updateModel(property: string, value: string | number | boolean): void {
-    let selectedPage: UnitPage;
-    this.selectionService.selectedPage
-      .pipe(take(1))
-      .subscribe(_selectedPage => {
-        selectedPage = _selectedPage;
-      })
-      .unsubscribe();
-
-    if (property === 'width' && value > selectedPage!.maxWidth) {
-      this.messageService.showError('Darf nicht breiter als die Seite sein.');
-    } else {
-      this.unitService.updateSectionProperty(this.selectedPageSection, property, value);
-    }
+    this.unitService.updateSectionProperty(this.selectedPageSection, property, value);
   }
 
   ngOnDestroy(): void {

projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts

@@ -23,11 +23,4 @@ export class UiElementToolboxComponent {
       .subscribe(pageSection => this.unitService.addElementToSection(elementType, pageSection))
       .unsubscribe();
   }
-
-  addSection(): void {
-    this.selectionService.selectedPage
-      .pipe(take(1))
-      .subscribe(section => this.unitService.addSection(section))
-      .unsubscribe();
-  }
 }

projects/editor/src/app/components/unit-view/unit-view.component.html

@@ -13,7 +13,7 @@
     <mat-drawer-content>
       <mat-tab-group *ngIf="pagesLoaded"
                      [style.height.%]="100" mat-align-tabs="start"
-                     [selectedIndex]="selectionService.selectedPageIndex | async"
+                     [selectedIndex]="selectedPageIndex"
                      (selectedIndexChange)="selectPage($event)">
         <mat-tab *ngFor="let page of unit.pages; let i = index">
           <ng-template mat-tab-label>
@@ -26,9 +26,67 @@
             <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === true">
               Seite {{i}}
             </ng-container>
-            <button class="delete-page-button" mat-button (click)="deletePage()">
-              <mat-icon>delete</mat-icon>
+
+            <button mat-icon-button class="menu-button" [matMenuTriggerFor]="pageMenu">
+              <mat-icon>more_vert</mat-icon>
             </button>
+            <mat-menu #pageMenu="matMenu">
+              <button *ngIf="!page.alwaysVisible"
+                      mat-menu-item (click)="movePage(page,'up')">
+                <mat-icon>west</mat-icon>
+                <span>nach vorn</span>
+              </button>
+              <button *ngIf="!page.alwaysVisible"
+                      mat-menu-item (click)="movePage(page, 'down')">
+                <mat-icon>east</mat-icon>
+                <span>nach hinten</span>
+              </button>
+              <button mat-menu-item (click)="deletePage(page)">
+                <mat-icon>delete</mat-icon>
+                <span>Löschen</span>
+              </button>
+              <mat-divider></mat-divider>
+              <mat-checkbox class="menuItem" [checked]="page.hasMaxWidth"
+                            (click)="$any($event).stopPropagation()"
+                            (change)="updateModel(page, 'hasMaxWidth', $any($event.source).checked)">
+                Maximalbreite
+              </mat-checkbox>
+              <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
+                <mat-label>Maximalbreite</mat-label>
+                <input matInput type="number" min="0" #maxWidth="ngModel"
+                       [ngModel]="page.maxWidth"
+                       (click)="$any($event).stopPropagation()">
+              </mat-form-field>
+              <mat-form-field class="menuItem" appearance="fill">
+                <mat-label>Randbreite</mat-label>
+                <input matInput type="number" min="0" #margin="ngModel"
+                       [ngModel]="page.margin"
+                       (click)="$any($event).stopPropagation()"
+                       (ngModelChange)="updateModel(page,'margin', $event, margin.valid)">
+              </mat-form-field>
+              <mat-form-field class="menuItem" appearance="fill">
+                <mat-label>Hintergrundfarbe</mat-label>
+                <input matInput type="color"
+                       [value]="page.backgroundColor"
+                       (change)="updateModel(page,'backgroundColor', $any($event.target).value)">
+              </mat-form-field>
+              <mat-checkbox class="menuItem"
+                            [disabled]="unit.pages.length < 2 || unit.pages[0].alwaysVisible && i != 0"
+                            [ngModel]="page.alwaysVisible"
+                            (click)="$any($event).stopPropagation()"
+                            (change)="updateModel(page, 'alwaysVisible', $any($event.source).checked)">
+                Immer angezeigt
+              </mat-checkbox>
+              <mat-form-field class="menuItem" appearance="fill"
+                              *ngIf="page.alwaysVisible">
+                <mat-label>Seitenverhältnis (in Prozent)</mat-label>
+                <input matInput type="number" min="0" max="100"
+                       [ngModel]="page.alwaysVisibleAspectRatio"
+                       (click)="$any($event).stopPropagation()"
+                       (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event)">
+              </mat-form-field>
+            </mat-menu>
+
           </ng-template>
           <app-page-view [page]="page"></app-page-view>
         </mat-tab>

projects/editor/src/app/components/unit-view/unit-view.component.ts

 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { UnitService } from '../../unit.service';
 import { DialogService } from '../../dialog.service';
 import { SelectionService } from '../../selection.service';
-import { Unit } from '../../../../../common/unit';
+import { Unit, UnitPage } from '../../../../../common/unit';
+import { MessageService } from '../../../../../common/message.service';
 
 @Component({
   selector: 'app-unit-view',
@@ -12,23 +13,28 @@ import { Unit } from '../../../../../common/unit';
   styles: [
     '.toolbox_drawer {width: 230px}',
     '.properties_drawer {width: 320px}',
-    '.delete-page-button {min-width: 0; padding: 0;position: absolute; left: 130px; bottom: 6px; visibility: hidden}',
-    '::ng-deep .mat-tab-label:hover .delete-page-button {visibility: visible;}',
     '.drawer-button {font-size: large;background-color: lightgray; min-width: 0; width: 2%; border: none; cursor: pointer}',
     '.show-elements-button span {transform: rotate(-90deg); display: inherit}',
     '.show-properties-button {padding-bottom: 140px}',
     '.show-properties-button span {transform: rotate(90deg); display: inherit;}',
-    '::ng-deep .mat-drawer-content .mat-tab-body-wrapper {height: 100%}'
+    '::ng-deep .mat-drawer-content .mat-tab-body-wrapper {height: 100%}',
+    '.menuItem {padding: 0 16px}',
+    'mat-checkbox.menuItem {padding: 0 16px 10px 16px}',
+    'mat-divider {margin-bottom: 10px}',
+    '::ng-deep .mat-tab-label:hover .menu-button {visibility: visible}',
+    '.menu-button {position: absolute; left: 130px; bottom: 6px; visibility: hidden}'
   ]
 })
 export class UnitViewComponent implements OnInit, OnDestroy {
   unit!: Unit;
-  private ngUnsubscribe = new Subject<void>();
+  selectedPageIndex: number = 0;
   pagesLoaded = true;
+  private ngUnsubscribe = new Subject<void>();
 
   constructor(public selectionService: SelectionService,
               public unitService: UnitService,
-              private dialogService: DialogService) { }
+              private dialogService: DialogService,
+              private messageService: MessageService) { }
 
   ngOnInit(): void {
     this.unitService.unit
@@ -49,27 +55,38 @@ export class UnitViewComponent implements OnInit, OnDestroy {
   }
 
   selectPage(newIndex: number): void {
-    this.selectionService.selectPageIndex(newIndex);
+    this.selectedPageIndex = newIndex;
   }
 
   addPage(): void {
     this.unitService.addPage();
-    this.selectionService.selectPageIndex(this.unit.pages.length - 1);
+    this.selectedPageIndex -= 1;
+  }
+
+  movePage(page: UnitPage, direction: 'up' | 'down'): void {
+    this.unitService.movePage(page, direction);
   }
 
-  deletePage(): void {
+  deletePage(page: UnitPage): void {
     this.showConfirmDialog().pipe(takeUntil(this.ngUnsubscribe)).subscribe((result: boolean) => {
       if (result) {
-        this.selectionService.selectedPageIndex
-          .pipe(take(1))
-          .subscribe(index => {
-            this.unitService.deletePage(index);
-            this.selectionService.selectPageIndex(index - 1);
-          }).unsubscribe();
+        this.unitService.deletePage(page);
+        this.selectedPageIndex -= 1;
       }
     });
   }
 
+  updateModel(page: UnitPage, property: string, value: number | boolean, isInputValid: boolean | null = true): void {
+    if (isInputValid && value != null) {
+      this.unitService.updatePageProperty(page, property, value);
+      if (property === 'alwaysVisible') {
+        this.selectedPageIndex = 0;
+      }
+    } else {
+      this.messageService.showWarning('Eingabe ungültig');
+    }
+  }
+
   showConfirmDialog(): Observable<boolean> {
     return this.dialogService.showConfirmDialog();
   }

projects/editor/src/app/selection.service.ts

 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import {
-  Unit, UnitPage, UnitPageSection, UnitUIElement
+  Unit, UnitPageSection, UnitUIElement
 } from '../../../common/unit';
 import { UnitService } from './unit.service';
 
@@ -11,9 +11,6 @@ import { UnitService } from './unit.service';
 export class SelectionService {
   private unit!: Unit;
 
-  private _selectedPage!: Subject<UnitPage>;
-  private _selectedPageIndex: BehaviorSubject<number>;
-
   private _selectedPageSection!: BehaviorSubject<UnitPageSection>;
   private selectedPageSectionComponent!: any;
   private selectedSection!: UnitPageSection;
@@ -26,28 +23,10 @@ export class SelectionService {
     unitService.unit.subscribe((unit: Unit) => {
       this.unit = unit;
     });
-    this._selectedPage = new BehaviorSubject(this.unit.pages[0]);
-    this._selectedPageIndex = new BehaviorSubject(0);
     this._selectedPageSection = new BehaviorSubject(this.unit.pages[0].sections[0]);
     this._selectedElements = new BehaviorSubject([] as UnitUIElement[]);
   }
 
-  // === PAGE =======
-  selectPageIndex(index: number): void {
-    this._selectedPage.next(this.unit.pages[index]);
-    this._selectedPageSection.next(this.unit.pages[index].sections[0]);
-    this._selectedPageIndex.next(index);
-  }
-
-  get selectedPage(): Observable<UnitPage> {
-    return this._selectedPage.asObservable();
-  }
-
-  get selectedPageIndex(): Observable<number> {
-    return this._selectedPageIndex.asObservable();
-  }
-  // ### PAGE ######
-
   // === SECTION =====
   selectSection(sectionComponent: any): void {
     if (this.selectedPageSectionComponent) {

projects/editor/src/app/unit.service.ts

@@ -52,8 +52,8 @@ export class UnitService {
     this.veronaApiService.sendVoeDefinitionChangedNotification();
   }
 
-  deletePage(index: number): void {
-    this._unit.value.pages.splice(index, 1);
+  deletePage(page: UnitPage): void {
+    this._unit.value.pages.splice(this._unit.value.pages.indexOf(page), 1);
     this._unit.next(this._unit.value);
     this.veronaApiService.sendVoeDefinitionChangedNotification();
   }
@@ -62,8 +62,11 @@ export class UnitService {
   movePage(selectedPage: UnitPage, direction: 'up' | 'down'): void {
     const oldPageIndex = this._unit.value.pages.indexOf(selectedPage);
     if ((this._unit.value.pages.length > 1) &&
-        !(direction === 'down' && oldPageIndex + 1 === this._unit.value.pages.length) &&
-        !(direction === 'up' && oldPageIndex === 0)) {
+        !(direction === 'down' && oldPageIndex + 1 === this._unit.value.pages.length) && // dont allow last page down
+        !(direction === 'up' && oldPageIndex === 0) && // dotn allow first page up
+        // dont allow second page to go before always shown page
+        !(direction === 'up' && oldPageIndex === 1 && this._unit.value.pages[0].alwaysVisible) &&
+        !(selectedPage.alwaysVisible)) {
       const newPageIndex = direction === 'up' ? oldPageIndex - 1 : oldPageIndex + 1;
       const page = this._unit.value.pages.splice(oldPageIndex, 1);
       this._unit.value.pages.splice(newPageIndex, 0, page[0]);
@@ -83,23 +86,14 @@ export class UnitService {
   }
 
   private handlePageAlwaysVisiblePropertyChange(page: UnitPage): void {
-    if (!this.isSetPageAlwaysVisibleAllowed()) {
-      this.messageService.showError('Kann nur für eine Seite gesetzt werden');
-    } else {
-      const pageIndex = this._unit.value.pages.indexOf(page);
-      if (pageIndex !== 0) { // Make page first element in page array
-        this._unit.value.pages.splice(pageIndex, 1);
-        this._unit.value.pages.splice(0, 0, page);
-        this._unit.next(this._unit.value);
-        this.pageMoved.next();
-      }
-      page.alwaysVisible = true;
+    const pageIndex = this._unit.value.pages.indexOf(page);
+    if (pageIndex !== 0) { // Make page first element in page array
+      this._unit.value.pages.splice(pageIndex, 1);
+      this._unit.value.pages.splice(0, 0, page);
+      this._unit.next(this._unit.value);
+      this.pageMoved.next();
     }
-  }
-
-  /* Disallow when not more than 1 page or when is already set. */
-  isSetPageAlwaysVisibleAllowed(): boolean {
-    return this._unit.value.pages.length > 1 && this._unit.value.pages.find(page => page.alwaysVisible) === undefined;
+    page.alwaysVisible = true;
   }
 
   addSection(page: UnitPage, index: number | null = null): void {