Merge pull request #4927 from tsiegleauq/better-motion-detail-ui

Overwork motion detail UI
2019-08-20 13:52:44 +02:00 · 2019-08-20 13:52:44 +02:00 · 1d1ddbd6e4
parent 14d7269959 d739b982bb
commit 1d1ddbd6e4
10 changed files with 107 additions and 80 deletions
--- a/client/src/app/core/ui-services/routing-state.service.ts
+++ b/client/src/app/core/ui-services/routing-state.service.ts
@ -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();
+    }
 }
--- a/client/src/app/shared/components/head-bar/head-bar.component.html
+++ b/client/src/app/shared/components/head-bar/head-bar.component.html
@ -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>
--- a/client/src/app/shared/components/head-bar/head-bar.component.ts
+++ b/client/src/app/shared/components/head-bar/head-bar.component.ts
@ -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 });
        }
--- a/client/src/app/shared/components/speaker-button/speaker-button.component.html
+++ b/client/src/app/shared/components/speaker-button/speaker-button.component.html
@ -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>&nbsp;</span>
+            <mat-basic-chip disableRipple class="lightblue" *ngIf="listOfSpeakers.waitingSpeakerAmount > 0">
+                <span>{{ listOfSpeakers.waitingSpeakerAmount }}</span>
+            </mat-basic-chip>
        </button>
    </ng-container>
 </ng-container>
--- a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
@ -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">
--- a/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.html
@ -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>

--- a/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss
+++ b/client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss
@ -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;
+}
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@ -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 -->
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.scss
@ -231,3 +231,8 @@ span {
    font-size: 12px;
    margin-top: 4px;
 }
+
+.show-entire-text-check {
+    font-size: 70%;
+    float: right;
+}
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@ -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%;