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
2019-08-20 12:42:50 +02:00 · 2019-08-20 12:42:50 +02:00 · d739b982bb
parent bbe294a1ad
commit d739b982bb
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%;