diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 9e05161179f5691939e14a6e75a55ae2b6adc00c..e9e6faa04f568be80c78e69c806807bfc009610c 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/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,
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
deleted file mode 100644
index 2bacd6d70f5aa9d924959b188db92b53c3120db9..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-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();
- }
-}
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html
deleted file mode 100644
index 792f824ff1a852dd28720a03bd8129724a430dbb..0000000000000000000000000000000000000000
--- a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<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>
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.ts
index b1d89ed5b8b88f434e641f202012926832757779..e21a2e08bfab526cb25c66288110d4fe92721544 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/properties.component.ts
@@ -1,46 +1,26 @@
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 { }
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
index 8e1fafe9ca9dadf45f92e9b6f5b298ed7ffa56c5..713ab240db333feec18e714c7c4b14c0953c5975 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
+++ b/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 {
diff --git a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts
index 74dad324cefa46dbcda8e64278cf0530337ad057..a0b69d7bdfeaf13a80ce4fa12e6e8e2d103269f7 100644
--- a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.ts
+++ b/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();
- }
}
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.html b/projects/editor/src/app/components/unit-view/unit-view.component.html
index df70391280b8f3264bf1cd80aa0ef167b0252bd8..141cd96d1b4bda421826ba608b150b30ac5daa5d 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.html
+++ b/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>
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.ts b/projects/editor/src/app/components/unit-view/unit-view.component.ts
index ebf3d628689499198cb221c40f2299a55bf08c8b..683e21434db50ee7a317bfe5aef26cb632ef60c9 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.ts
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.ts
@@ -1,10 +1,11 @@
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();
}
diff --git a/projects/editor/src/app/selection.service.ts b/projects/editor/src/app/selection.service.ts
index e2e176d0ca31f591d32f2c6fcb67a5c3defe2b04..566ece4587381283a933d5edc2965bfb3e7f7352 100644
--- a/projects/editor/src/app/selection.service.ts
+++ b/projects/editor/src/app/selection.service.ts
@@ -1,7 +1,7 @@
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) {
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 5842d6465b1bb3af0c78ee6674702ef8dbb49381..432b8f526324494380334aadd526158f6ef9a997 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/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 {