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 97776e3773fab6d2c431d60229bdbb1c87c8ba93..df70391280b8f3264bf1cd80aa0ef167b0252bd8 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 @@ -17,8 +17,15 @@ (selectedIndexChange)="selectPage($event)"> <mat-tab *ngFor="let page of unit.pages; let i = index"> <ng-template mat-tab-label> - <mat-icon *ngIf="page.alwaysVisible" class="page-alwaysVisible-icon">assignment</mat-icon> - {{'pageIndication' | translate: {index: i + 1} }} + <ng-container *ngIf="page.alwaysVisible"> + <mat-icon class="page-alwaysVisible-icon">assignment</mat-icon> + </ng-container> + <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === false"> + Seite {{i + 1}} + </ng-container> + <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> 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 36697e6059672282e9b5f6d095a9de61034793e5..ebf3d628689499198cb221c40f2299a55bf08c8b 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 @@ -14,7 +14,6 @@ import { Unit } from '../../../../../common/unit'; '.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;}', - '.page-alwaysVisible-icon {position: absolute; left: 15px}', '.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}', diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts index 9506367e23f3a62d2417632e698ffe23073d51ef..89255bd8f4b3d254ef91a8b116b664ea062c598f 100644 --- a/projects/editor/src/app/unit.service.ts +++ b/projects/editor/src/app/unit.service.ts @@ -73,14 +73,29 @@ export class UnitService { } updatePageProperty(page: UnitPage, property: string, value: number | boolean): void { - if (property === 'alwaysVisible' && value === true && !this.isSetPageAlwaysVisibleAllowed()) { - this.messageService.showError('Kann nur für eine Seite gesetzt werden'); + if (property === 'alwaysVisible' && value === true) { + this.handlePageAlwaysVisiblePropertyChange(page); } else { page[property] = value; } this.veronaApiService.sendVoeDefinitionChangedNotification(); } + 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; + } + } + /* 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;