From 2499ee905882c6332e7ea527d35889e8ee7a5324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Thu, 14 Feb 2019 08:54:35 +0100
Subject: [PATCH] UI improvements for motion detail/list view

---
 .../motions/motion-repository.service.ts      | 20 ++++----
 .../motion-block-detail.component.scss        |  2 -
 .../motion-detail.component.html              | 36 +++++++-------
 .../motion-detail.component.scss              |  7 ++-
 .../motion-list/motion-list.component.html    | 49 ++++++++++---------
 .../motion-list/motion-list.component.scss    | 43 +++++++---------
 client/src/styles.scss                        | 12 ++++-
 7 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/client/src/app/core/repositories/motions/motion-repository.service.ts b/client/src/app/core/repositories/motions/motion-repository.service.ts
index 158b8626d..200dd174c 100644
--- a/client/src/app/core/repositories/motions/motion-repository.service.ts
+++ b/client/src/app/core/repositories/motions/motion-repository.service.ts
@@ -853,7 +853,7 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
 
     /**
      * Get the label for the motion's current state with the extension
-     * attached (if present). For cross-referencing other motions, `[motion:id]`
+     * attached (if available). For cross-referencing other motions, `[motion:id]`
      * will replaced by the referenced motion's identifier (see {@link solveExtensionPlaceHolder})
      *
      * @param motion
@@ -872,21 +872,19 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
 
     /**
      * Get the label for the motion's current recommendation with the extension
-     * attached (if present)
+     * attached (if available)
      *
      * @param motion
-     * @returns the translated extension with the extension attached, 'not set'
-     * if no recommendation si set
+     * @returns the translated extension with the extension attached
      */
     public getExtendedRecommendationLabel(motion: ViewMotion): string {
-        if (!motion.recommendation) {
-            return this.translate.instant('not set');
+        if (motion.recommendation) {
+            let rec = this.translate.instant(motion.recommendation.recommendation_label);
+            if (motion.recommendationExtension && motion.recommendation.show_recommendation_extension_field) {
+                rec += ' ' + this.solveExtensionPlaceHolder(motion.recommendationExtension);
+            }
+            return rec;
         }
-        let rec = this.translate.instant(motion.recommendation.recommendation_label);
-        if (motion.recommendationExtension && motion.recommendation.show_recommendation_extension_field) {
-            rec += ' ' + this.solveExtensionPlaceHolder(motion.recommendationExtension);
-        }
-        return rec;
     }
 
     /**
diff --git a/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.scss b/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.scss
index 2d4194ec0..9a8150135 100644
--- a/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.scss
+++ b/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.scss
@@ -24,8 +24,6 @@
 
 .chip-container {
     display: block;
-    height: 5em;
-    line-height: 5em;
 }
 
 .os-headed-listview-table {
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
index 1473e6cd7..e516406e1 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@@ -184,7 +184,7 @@
             <!-- support button -->
             <button
                 type="button"
-                mat-raised-button
+                mat-stroked-button
                 color="primary"
                 (click)="support()"
                 *ngIf="perms.isAllowed('support', motion)"
@@ -198,7 +198,7 @@
                 type="button"
                 *ngIf="perms.isAllowed('unsupport', motion)"
                 (click)="unsupport()"
-                mat-raised-button
+                mat-stroked-button
                 color="primary"
             >
                 <mat-icon>thumb_down</mat-icon>
@@ -208,10 +208,10 @@
             <button type="button" *ngIf="motion.hasSupporters()" (click)="openSupportersDialog()" mat-button>
                 {{ motion.supporters.length }} {{ 'supporters' | translate }}
             </button>
-            <p *ngIf="showSupporters">
-                <mat-chip-list *ngFor="let supporter of motion.supporters">
-                    <mat-chip>{{ supporter.full_name }}</mat-chip>
-                </mat-chip-list>
+            <p *ngIf="showSupporters" class="supporters">
+                <span *ngFor="let supporter of motion.supporters; let last = last">
+                    {{ supporter.full_name }}<span *ngIf="!last">, </span>
+                </span>
             </p>
         </div>
 
@@ -251,7 +251,7 @@
 
         <!-- Recommendation -->
         <div *ngIf="recommender && !editMotion">
-            <h4>{{ recommender }}</h4>
+            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || recommendationLabel">{{ recommender }}</h4>
             <mat-menu #recommendationMenu="matMenu">
                 <button
                     *ngFor="let recommendation of motion.possibleRecommendations"
@@ -272,7 +272,7 @@
             </mat-menu>
             <div *ngIf="perms.isAllowed('change_metadata', motion)">
                 <mat-basic-chip [matMenuTriggerFor]="recommendationMenu" class="bluegrey">
-                    {{ recommendationLabel }}
+                    {{ recommendationLabel || '–' }}
                 </mat-basic-chip>
                 <div
                     *ngIf="motion.recommendation && motion.recommendation.show_recommendation_extension_field"
@@ -300,10 +300,10 @@
                     </form>
                 </div>
             </div>
-            <div *ngIf="!perms.isAllowed('change_metadata', motion)">
+            <div *ngIf="!perms.isAllowed('change_metadata', motion) && recommendationLabel">
                 <mat-basic-chip class="bluegrey"> {{ recommendationLabel }} </mat-basic-chip>
             </div>
-            <button mat-button *ngIf="canFollowRecommendation()" (click)="onFollowRecButton()">
+            <button mat-stroked-button *ngIf="canFollowRecommendation()" (click)="onFollowRecButton()" class="spacer-top-10">
                 <span translate>Follow recommendation</span>
             </button>
         </div>
@@ -311,7 +311,7 @@
         <!-- Category -->
         <!-- Disabled during "new motion" since changing has no effect -->
         <div *ngIf="!editMotion && categoryObserver.value.length > 0">
-            <h4 translate>Category</h4>
+            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.category" translate>Category</h4>
             <mat-menu #categoryMenu="matMenu">
                 <button
                     mat-menu-item
@@ -327,10 +327,10 @@
                 [matMenuTriggerFor]="categoryMenu"
                 class="grey"
             >
-                {{ motion.category ? motion.category : '–' }}
+                {{ motion.category || '–' }}
             </mat-basic-chip>
-            <mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion)" class="grey">
-                {{ motion.category ? motion.category : '–' }}
+            <mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion) && motion.category" class="grey">
+                {{ motion.category }}
             </mat-basic-chip>
         </div>
 
@@ -373,7 +373,7 @@
 
         <!-- Block -->
         <div *ngIf="!editMotion && blockObserver.value.length > 0">
-            <h4 translate>Motion block</h4>
+            <h4 *ngIf="perms.isAllowed('change_metadata', motion) || motion.motion_block" translate>Motion block</h4>
             <mat-menu #blockMenu="matMenu">
                 <button mat-menu-item *ngFor="let block of blockObserver.value" (click)="setBlock(block.id)">
                     <mat-icon *ngIf="motion.motion_block_id === block.id">check</mat-icon>
@@ -385,10 +385,10 @@
                 [matMenuTriggerFor]="blockMenu"
                 class="grey"
             >
-                {{ motion.motion_block ? motion.motion_block : '–' }}
+                {{ motion.motion_block || '–' }}
             </mat-basic-chip>
-            <mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion)" class="grey">
-                {{ motion.motion_block ? motion.motion_block : '–' }}
+            <mat-basic-chip *ngIf="!perms.isAllowed('change_metadata', motion) && motion.motion_block" class="grey">
+                {{ motion.motion_block }}
             </mat-basic-chip>
         </div>
 
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss b/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
index cd61dee08..f36434e0e 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
@@ -299,6 +299,11 @@ span {
 
 .mat-chip-list-stacked {
     .mat-chip {
-        margin: 4px 4px 4px 8px;
+        margin: 4px 4px 4px 4px;
     }
 }
+
+.supporters {
+    font-size: 12px;
+    margin-top: 4px;
+}
diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.html b/client/src/app/site/motions/components/motion-list/motion-list.component.html
index 44be33c73..4c975c6af 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html
@@ -58,7 +58,7 @@
             <mat-cell *matCellDef="let motion">
                 <div class="innerTable max-width">
                     <!-- title line -->
-                    <div class="motion-list">
+                    <div class="title-line ellipsis-overflow">
                         <!-- favorite icon -->
                         <span *ngIf="motion.star" class="favorite-star">
                             <mat-icon inline>star</mat-icon>
@@ -73,31 +73,32 @@
                         </span>
                     </div>
                     <!-- submitters line -->
-                    <div class="motion-list">
-                        <span class="motion-list-from ellipsis-overflow" *ngIf="motion.submitters.length">
-                            <span translate>by</span> {{ motion.submitters }}
-                        </span>
+                    <div class="submitters-line ellipsis-overflow" *ngIf="motion.submitters.length">
+                        <span translate>by</span> {{ motion.submitters }}
                     </div>
-                    <!-- state -->
-                    <mat-basic-chip
-                        *ngIf="motion.state"
-                        [ngClass]="{
-                            green: motion.state.css_class === 'success',
-                            red: motion.state.css_class === 'danger',
-                            grey: motion.state.css_class === 'default',
-                            lightblue: motion.state.css_class === 'primary'
-                        }"
-                        [disabled]="true"
+                    <!-- state line-->
+                    <div class="ellipsis-overflow white">
+                        <mat-basic-chip
+                            *ngIf="motion.state"
+                            [ngClass]="{
+                                green: motion.state.css_class === 'success',
+                                red: motion.state.css_class === 'danger',
+                                grey: motion.state.css_class === 'default',
+                                lightblue: motion.state.css_class === 'primary'
+                            }"
+                            [disabled]="true"
+                        >
+                            {{ getStateLabel(motion) }}
+                        </mat-basic-chip>
+                    </div>
+                    <!-- recommendation line -->
+                    <div *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
+                        class="ellipsis-overflow white"
                     >
-                        {{ getStateLabel(motion) }}
-                    </mat-basic-chip>
-
-                    <!-- recommendation -->
-                    <span *ngIf="motion.recommendation && motion.state.next_states_id.length > 0">
                         <mat-basic-chip class="bluegrey" [disabled]="true">
                             {{ getRecommendationLabel(motion) }}
                         </mat-basic-chip>
-                    </span>
+                    </div>
                 </div>
             </mat-cell>
         </ng-container>
@@ -106,12 +107,12 @@
         <ng-container matColumnDef="state">
             <mat-header-cell *matHeaderCellDef mat-sort-header>State</mat-header-cell>
             <mat-cell *matCellDef="let motion">
-                <div class="innerTable">
-                    <div class="small" *ngIf="motion.category">
+                <div class="innerTable state-column">
+                    <div class="small ellipsis-overflow" *ngIf="motion.category">
                         <mat-icon>device_hub</mat-icon>
                         {{ motion.category }}
                     </div>
-                    <div class="small" *ngIf="motion.motion_block">
+                    <div class="small ellipsis-overflow" *ngIf="motion.motion_block">
                         <mat-icon>widgets</mat-icon>
                         {{ motion.motion_block.title }}
                     </div>
diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.scss b/client/src/app/site/motions/components/motion-list/motion-list.component.scss
index f116433ba..a6848d5d9 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.scss
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.scss
@@ -22,47 +22,40 @@
         display: block;
         padding-left: 10px;
 
-        .motion-list {
-            display: flex;
-            padding-right: 20px;
+        .title-line {
+            font-weight: 500;
+            font-size: 16px;
 
-            .motion-list-title,
-            .motion-list-from {
-                flex: 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .motion-list-title {
-                font-weight: 500;
-                font-size: 16px;
+            .attached-files {
+                .mat-icon {
+                    display: inline-flex;
+                    vertical-align: middle;
+                    $icon-size: 16px;
+                    font-size: $icon-size;
+                    height: $icon-size;
+                    width: $icon-size;
+                }
             }
+
             .favorite-star {
                 padding-right: 3px;
             }
         }
 
-        .motion-list-from {
+        .submitters-line {
             color: rgba(0, 0, 0, 0.5);
             font-size: 90%;
         }
-
-        .attached-files {
-            .mat-icon {
-                display: inline-flex;
-                vertical-align: middle;
-                $icon-size: 16px;
-                font-size: $icon-size;
-                height: $icon-size;
-                width: $icon-size;
-            }
-        }
     }
 
     /** State */
     .mat-column-state {
         flex: 0 0 160px;
 
+        .state-column {
+            width: 160px;
+        }
+
         mat-icon {
             font-size: 150%;
         }
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 6e4ea4dff..589465127 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -193,10 +193,11 @@ mat-card {
 
     /** size of the mat row  */
     mat-row {
-        height: 60px;
+        min-height: 60px;
     }
     mat-row.lg {
-        height: 90px;
+        height: 110px;
+        min-height: 90px;
     }
     mat-row:hover {
         cursor: pointer;
@@ -346,6 +347,7 @@ mat-expansion-panel {
     border-radius: 5px !important;
     padding: 4px 8px !important;
     margin: 8px 8px 8px 0;
+    line-height: 2;
 }
 
 .mat-chip-list.user .mat-chip {
@@ -645,4 +647,10 @@ button.mat-menu-item.selected {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding-right: 3px;
+    margin-right: 3px;
+}
+
+.white {
+    color: white;
 }