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

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();
+    }
 }

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>
+            <mat-icon>{{ mainButtonIcon }}</mat-icon>
-        </button>
-        <button
-            mat-icon-button
-            *ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
-            (click)="sendMainEvent()"
-        >
-            <mat-icon>edit</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>

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 });
         }

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>

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">

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>
 

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;
+}

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)"
+    [mainButton]="perms.isAllowed('can_create_amendments', motion)"
-    mainButtonIcon="edit"
+    mainActionTooltip="New amendment"
-    [prevUrl]="getPrevUrl()"
+    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 -->
+            <mat-divider></mat-divider>
-            <os-speaker-button [object]="motion" [menuItem]="true"></os-speaker-button>
             <!-- 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>
-
+            <mat-divider></mat-divider>
-            <div *ngIf="perms.isAllowed('manage')">
+            <!-- Edit-->
-                <mat-divider></mat-divider>
+            <button mat-menu-item (click)="setEditMode(true)" *ngIf="perms.isAllowed('update', motion)">
-                <!-- Delete -->
+                <mat-icon>edit</mat-icon>
-                <button mat-menu-item class="red-warning-text" (click)="deleteMotionButton()">
+                <span translate>Edit</span>
-                    <mat-icon>delete</mat-icon>
+            </button>
-                    <span translate>Delete</span>
+            <!-- Delete -->
-                </button>
+            <button
-            </div>
+                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 -->

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;
+}

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%;