Merge pull request #4927 from tsiegleauq/better-motion-detail-ui
Overwork motion detail UI
This commit is contained in:
commit
1d1ddbd6e4
@ -1,3 +1,4 @@
|
||||
import { Location } from '@angular/common';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Router, RoutesRecognized } from '@angular/router';
|
||||
|
||||
@ -14,7 +15,7 @@ export class RoutingStateService {
|
||||
/**
|
||||
* Hold the previous URL
|
||||
*/
|
||||
private _previousUrl: string;
|
||||
private previousUrl: string;
|
||||
|
||||
/**
|
||||
* Unsafe paths that the user should not go "back" to
|
||||
@ -23,14 +24,11 @@ export class RoutingStateService {
|
||||
private unsafeUrls: string[] = ['/login', '/privacypolicy', '/legalnotice'];
|
||||
|
||||
/**
|
||||
* @return Get the previous URL
|
||||
* Checks if the previous URL is safe to navigate to.
|
||||
* If this fails, the open nav button should be shown
|
||||
*/
|
||||
public get previousUrl(): string {
|
||||
return this._previousUrl ? this._previousUrl : null;
|
||||
}
|
||||
|
||||
public get isSafePrevUrl(): boolean {
|
||||
return !!this.previousUrl && !this.unsafeUrls.includes(this.previousUrl);
|
||||
return !this.previousUrl || !this.unsafeUrls.includes(this.previousUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -38,14 +36,18 @@ export class RoutingStateService {
|
||||
*
|
||||
* @param router Angular Router
|
||||
*/
|
||||
public constructor(private router: Router) {
|
||||
public constructor(private router: Router, private location: Location) {
|
||||
this.router.events
|
||||
.pipe(
|
||||
filter(e => e instanceof RoutesRecognized),
|
||||
pairwise()
|
||||
)
|
||||
.subscribe((event: any[]) => {
|
||||
this._previousUrl = event[0].urlAfterRedirects;
|
||||
this.previousUrl = event[0].urlAfterRedirects;
|
||||
});
|
||||
}
|
||||
|
||||
public goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
|
@ -11,7 +11,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Cancel edit button -->
|
||||
<button mat-icon-button *ngIf="editMode" (click)="sendMainEvent()">
|
||||
<button mat-icon-button *ngIf="editMode" (click)="cancelEditEvent ? sendCancelEditEvent() : sendMainEvent()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
|
||||
@ -35,21 +35,17 @@
|
||||
<!-- Main action button - desktop -->
|
||||
<button
|
||||
mat-icon-button
|
||||
*ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
|
||||
*ngIf="mainButton && !editMode && !vp.isMobile && !multiSelectMode"
|
||||
(click)="sendMainEvent()"
|
||||
matTooltip="{{ mainActionTooltip | translate }}"
|
||||
>
|
||||
<mat-icon>add_circle</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
*ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
|
||||
(click)="sendMainEvent()"
|
||||
>
|
||||
<mat-icon>edit</mat-icon>
|
||||
<mat-icon>{{ mainButtonIcon }}</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Save button -->
|
||||
<button mat-button *ngIf="editMode" [disabled]="!isSaveButtonEnabled" (click)="save()"><strong translate class="upper">Save</strong></button>
|
||||
<button mat-button *ngIf="editMode" [disabled]="!isSaveButtonEnabled" (click)="save()">
|
||||
<strong translate class="upper">Save</strong>
|
||||
</button>
|
||||
|
||||
<!-- Menu button slot -->
|
||||
<ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
|
||||
@ -60,9 +56,10 @@
|
||||
|
||||
<button
|
||||
mat-fab
|
||||
class="head-button "
|
||||
class="head-button"
|
||||
*ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode"
|
||||
(click)="sendMainEvent()"
|
||||
matTooltip="{{ mainActionTooltip | translate }}"
|
||||
>
|
||||
<mat-icon>{{ mainButtonIcon }}</mat-icon>
|
||||
</button>
|
||||
|
@ -63,7 +63,7 @@ export class HeadBarComponent {
|
||||
* Custom icon if necessary
|
||||
*/
|
||||
@Input()
|
||||
public mainButtonIcon = 'add';
|
||||
public mainButtonIcon = 'add_circle';
|
||||
|
||||
/**
|
||||
* Determine edit mode
|
||||
@ -105,12 +105,24 @@ export class HeadBarComponent {
|
||||
@Input()
|
||||
public prevUrl = '../';
|
||||
|
||||
/**
|
||||
* Optional tooltip for the main action
|
||||
*/
|
||||
@Input()
|
||||
public mainActionTooltip: string;
|
||||
|
||||
/**
|
||||
* Emit a signal to the parent component if the main button was clicked
|
||||
*/
|
||||
@Output()
|
||||
public mainEvent = new EventEmitter<void>();
|
||||
|
||||
/**
|
||||
* Optional custom event for cancel the edit
|
||||
*/
|
||||
@Output()
|
||||
public cancelEditEvent = new EventEmitter<void>();
|
||||
|
||||
/**
|
||||
* Sends a signal if a detail view should be saved
|
||||
*/
|
||||
@ -139,6 +151,13 @@ export class HeadBarComponent {
|
||||
this.mainEvent.next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a signal to for custom cancel edits
|
||||
*/
|
||||
public sendCancelEditEvent(): void {
|
||||
this.cancelEditEvent.next();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clicking the burger-menu-icon should toggle the menu
|
||||
*/
|
||||
@ -159,7 +178,7 @@ export class HeadBarComponent {
|
||||
*/
|
||||
public onBackButton(): void {
|
||||
if (this.goBack) {
|
||||
this.router.navigateByUrl(this.routingState.previousUrl);
|
||||
this.routingState.goBack();
|
||||
} else {
|
||||
this.router.navigate([this.prevUrl], { relativeTo: this.route });
|
||||
}
|
||||
|
@ -14,6 +14,10 @@
|
||||
<button type="button" *ngIf="menuItem" mat-menu-item [routerLink]="listOfSpeakers.listOfSpeakersUrl">
|
||||
<mat-icon>{{ icon }}</mat-icon>
|
||||
<span translate>List of speakers</span>
|
||||
<span> </span>
|
||||
<mat-basic-chip disableRipple class="lightblue" *ngIf="listOfSpeakers.waitingSpeakerAmount > 0">
|
||||
<span>{{ listOfSpeakers.waitingSpeakerAmount }}</span>
|
||||
</mat-basic-chip>
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<os-head-bar [nav]="false">
|
||||
<os-head-bar [nav]="false" [goBack]="false">
|
||||
<!-- Title -->
|
||||
<div class="title-slot"><h2 translate>New amendment</h2></div>
|
||||
<div class="menu-slot">
|
||||
|
@ -14,7 +14,7 @@
|
||||
|
||||
<div *ngIf="!isEditMode || !perms.isAllowed('change_metadata')">
|
||||
<mat-chip-list *ngFor="let user of motion.submittersAsUsers" class="user">
|
||||
<mat-chip disableRipple *ngIf="user">{{ user.getTitle() }}</mat-chip>
|
||||
<mat-basic-chip disableRipple *ngIf="user">{{ user.getTitle() }}</mat-basic-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
||||
|
@ -19,3 +19,11 @@ h4 {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user .mat-chip {
|
||||
border-radius: 16px !important;
|
||||
padding: 5px 15px !important;
|
||||
margin: 5px 0;
|
||||
border: 1px solid #dddddd;
|
||||
height: auto;
|
||||
}
|
||||
|
@ -1,11 +1,13 @@
|
||||
<os-head-bar
|
||||
[mainButton]="perms.isAllowed('update', motion)"
|
||||
mainButtonIcon="edit"
|
||||
[prevUrl]="getPrevUrl()"
|
||||
[mainButton]="perms.isAllowed('can_create_amendments', motion)"
|
||||
mainActionTooltip="New amendment"
|
||||
prevUrl="../.."
|
||||
[goBack]="motion && !!motion.parent_id"
|
||||
[nav]="false"
|
||||
[editMode]="editMotion"
|
||||
[isSaveButtonEnabled]="contentForm.valid"
|
||||
(mainEvent)="setEditMode(!editMotion)"
|
||||
(mainEvent)="createAmendment()"
|
||||
(cancelEditEvent)="setEditMode(false)"
|
||||
(saveEvent)="saveMotion()"
|
||||
>
|
||||
<!-- Title -->
|
||||
@ -24,15 +26,6 @@
|
||||
<div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot">
|
||||
<div *ngIf="previousMotion">
|
||||
<button mat-button (click)="navigateToMotion(previousMotion)">
|
||||
<!-- possible icons:
|
||||
arrow_left
|
||||
chevron_left
|
||||
first_page
|
||||
arrow_back
|
||||
arrow_back_ios
|
||||
navigate_before
|
||||
fast_rewind
|
||||
-->
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
<span>{{ previousMotion.identifier }}</span>
|
||||
</button>
|
||||
@ -40,15 +33,6 @@
|
||||
<div *ngIf="nextMotion">
|
||||
<button mat-button (click)="navigateToMotion(nextMotion)">
|
||||
<span>{{ nextMotion.identifier }}</span>
|
||||
<!-- possible icons:
|
||||
arrow_right
|
||||
chevron_right
|
||||
last_page
|
||||
arrow_forward
|
||||
arrow_forward_ios
|
||||
navigate_next
|
||||
fast_forward
|
||||
-->
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@ -63,13 +47,25 @@
|
||||
|
||||
<mat-menu #motionExtraMenu="matMenu">
|
||||
<div *ngIf="motion">
|
||||
<div *ngIf="vp.isMobile">
|
||||
<button mat-menu-item (click)="navigateToMotion(previousMotion)" *ngIf="previousMotion">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
<span>{{ 'Motion' | translate }} {{ previousMotion.identifier }}</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="navigateToMotion(nextMotion)" *ngIf="nextMotion">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
<span>{{ 'Motion' | translate }} {{ nextMotion.identifier }}</span>
|
||||
</button>
|
||||
<mat-divider *ngIf="previousMotion || nextMotion"></mat-divider>
|
||||
</div>
|
||||
<!-- List of speakers -->
|
||||
<os-speaker-button [object]="motion" [menuItem]="true"></os-speaker-button>
|
||||
<!-- PDF -->
|
||||
<button mat-menu-item (click)="onDownloadPdf()">
|
||||
<mat-icon>picture_as_pdf</mat-icon>
|
||||
<span translate>PDF</span>
|
||||
</button>
|
||||
<!-- List of speakers -->
|
||||
<os-speaker-button [object]="motion" [menuItem]="true"></os-speaker-button>
|
||||
<mat-divider></mat-divider>
|
||||
<!-- Project -->
|
||||
<os-projector-button
|
||||
[object]="motion"
|
||||
@ -87,21 +83,6 @@
|
||||
<span translate>Remove from agenda</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- New amendment -->
|
||||
<button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
|
||||
<mat-icon>add</mat-icon>
|
||||
<span translate>New amendment</span>
|
||||
</button>
|
||||
<!-- Show entire motion text -->
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="showAmendmentContext = !showAmendmentContext"
|
||||
*ngIf="motion && motion.isParagraphBasedAmendment()"
|
||||
>
|
||||
<mat-icon>{{ !showAmendmentContext ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
|
||||
<span translate>Show entire motion text</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
mat-menu-item
|
||||
*osPerms="'core.can_see_history'"
|
||||
@ -113,15 +94,22 @@
|
||||
History
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div *ngIf="perms.isAllowed('manage')">
|
||||
<mat-divider></mat-divider>
|
||||
<!-- Delete -->
|
||||
<button mat-menu-item class="red-warning-text" (click)="deleteMotionButton()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span translate>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<!-- Edit-->
|
||||
<button mat-menu-item (click)="setEditMode(true)" *ngIf="perms.isAllowed('update', motion)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span translate>Edit</span>
|
||||
</button>
|
||||
<!-- Delete -->
|
||||
<button
|
||||
mat-menu-item
|
||||
class="red-warning-text"
|
||||
(click)="deleteMotionButton()"
|
||||
*ngIf="perms.isAllowed('manage')"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span translate>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</os-head-bar>
|
||||
@ -901,6 +889,17 @@
|
||||
<div class="paragraphcontext" [innerHtml]="sanitizedText(paragraph.textPost)"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Show entire motion text -->
|
||||
<div>
|
||||
<mat-checkbox
|
||||
(change)="showAmendmentContext = !showAmendmentContext"
|
||||
*ngIf="motion && motion.isParagraphBasedAmendment()"
|
||||
class="show-entire-text-check"
|
||||
>
|
||||
<span translate>Show entire motion text</span>
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Line number Menu -->
|
||||
|
@ -231,3 +231,8 @@ span {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.show-entire-text-check {
|
||||
font-size: 70%;
|
||||
float: right;
|
||||
}
|
||||
|
@ -520,13 +520,6 @@ mat-expansion-panel {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.mat-chip-list.user .mat-chip {
|
||||
border-radius: 16px !important;
|
||||
padding: 5px 15px !important;
|
||||
border: 1px solid;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// to display quantities. Use in span or div
|
||||
.os-amount-chip {
|
||||
border-radius: 50%;
|
||||
|
Loading…
Reference in New Issue
Block a user