From d739b982bbcaa3b558282b297be39080ba0077b4 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Tue, 20 Aug 2019 12:42:50 +0200
Subject: [PATCH] Overwork motion detail UI

set Default action to "create amendment" (if permitted)
put edit in the menu
put next and prev motion in the menu (mobile)
resort motion menu
move "show enitre motion text" under the motion-preview
change "show entire motion text" from button to checkbox
create a custom tooltip for the main action in os-head-bar
create a custom "cancel edit" function in os-head-bar
overwork location.back logic
---
 .../core/ui-services/routing-state.service.ts | 20 ++--
 .../head-bar/head-bar.component.html          | 21 ++--
 .../components/head-bar/head-bar.component.ts | 23 ++++-
 .../speaker-button.component.html             |  4 +
 .../amendment-create-wizard.component.html    |  2 +-
 .../manage-submitters.component.html          |  2 +-
 .../manage-submitters.component.scss          |  8 ++
 .../motion-detail.component.html              | 95 +++++++++----------
 .../motion-detail.component.scss              |  5 +
 client/src/styles.scss                        |  7 --
 10 files changed, 107 insertions(+), 80 deletions(-)

diff --git a/client/src/app/core/ui-services/routing-state.service.ts b/client/src/app/core/ui-services/routing-state.service.ts
index 7bb2d5a5d..320209b2f 100644
--- 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();
+    }
 }
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.html b/client/src/app/shared/components/head-bar/head-bar.component.html
index 442df3bb1..fb0ca493c 100644
--- 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>
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.ts b/client/src/app/shared/components/head-bar/head-bar.component.ts
index f644bbc54..54fdd4d2d 100644
--- 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 });
         }
diff --git a/client/src/app/shared/components/speaker-button/speaker-button.component.html b/client/src/app/shared/components/speaker-button/speaker-button.component.html
index e4b92c517..74cc4befa 100644
--- 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>
diff --git 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
index d801bbe76..398c5052b 100644
--- 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">
diff --git 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
index b181f2c84..ecd6eca8a 100644
--- 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>
 
diff --git 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
index defee54f2..c9cdece4b 100644
--- 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;
+}
diff --git 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
index 9ab256f1a..fdd21765d 100644
--- 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 -->
diff --git 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
index d343a32b0..915155600 100644
--- 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;
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 8cdca6abb..473ecf050 100644
--- 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%;