From bc540180dd88a1eb1a9e09c53be43d60e392f35a Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Fri, 18 Sep 2020 16:29:13 +0200
Subject: [PATCH] fix white change-recommendation-overview

Fixes a bug where a white or blank change-recommendation-overview appeared
---
 .../motion-detail-diff.component.html         | 428 +++++++++---------
 ...tion-detail-diff.component.scss-theme.scss |   2 +-
 2 files changed, 216 insertions(+), 214 deletions(-)

diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
index a6f4afa66..0090f247d 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
@@ -1,79 +1,155 @@
 <!-- A summary of all changes -->
-<section class="change-recommendation-overview" *ngIf="changes.length > 0">
-    <strong> {{ 'Summary of changes' | translate }}: </strong>
+<div class="motion-detail-diff">
+    <section class="change-recommendation-overview" *ngIf="changes.length > 0">
+        <strong> {{ 'Summary of changes' | translate }}: </strong>
 
-    <ul>
-        <li *ngFor="let change of changes">
-            <a
-                href=""
-                (click)="scrollToChangeClicked(change, $event)"
-                [class.amendment]="isAmendment(change)"
-                [class.recommendation]="isChangeRecommendation(change)"
-            >
-                <span *ngIf="!change.isTitleChange()" class="line-number">
-                    {{ 'Line' | translate }} {{ formatLineRange(change) }}
-                </span>
-                <span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
-                <span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span>
-                <span *ngIf="isAmendment(change)"> ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span>
-                <span class="operation" *ngIf="isChangeRecommendation(change)">
-                    – {{ getRecommendationTypeName(change) | translate }}
-                    <!--
+        <ul>
+            <li *ngFor="let change of changes">
+                <a
+                    href=""
+                    (click)="scrollToChangeClicked(change, $event)"
+                    [class.amendment]="isAmendment(change)"
+                    [class.recommendation]="isChangeRecommendation(change)"
+                >
+                    <span *ngIf="!change.isTitleChange()" class="line-number">
+                        {{ 'Line' | translate }} {{ formatLineRange(change) }}
+                    </span>
+                    <span *ngIf="change.isTitleChange()">{{ 'Title' | translate }}</span>
+                    <span *ngIf="isChangeRecommendation(change)"> ({{ 'Change recommendation' | translate }})</span>
+                    <span *ngIf="isAmendment(change)">
+                        ({{ 'Amendment' | translate }} {{ change.getIdentifier() }})</span
+                    >
+                    <span class="operation" *ngIf="isChangeRecommendation(change)">
+                        – {{ getRecommendationTypeName(change) | translate }}
+                        <!--
                         @TODO
                         <span ng-if="change.original.getType(motion.getVersion(version).text) == 3">
                           { change.other_description }
                         </span>
                     -->
-                </span>
-                <span class="status">
-                    <ng-container *ngIf="change.isRejected() && !isAmendment(change)">
-                        – <span>{{ 'Rejected' | translate }}</span></ng-container
+                    </span>
+                    <span class="status">
+                        <ng-container *ngIf="change.isRejected() && !isAmendment(change)">
+                            – <span>{{ 'Rejected' | translate }}</span></ng-container
+                        >
+                        <ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
+                            – {{ change.stateName | translate }}</ng-container
+                        >
+                    </span>
+                </a>
+            </li>
+        </ul>
+
+        <div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
+    </section>
+
+    <span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
+
+    <!-- The actual diff view -->
+    <div class="motion-text-with-diffs">
+        <div *ngIf="getTitleChangingObject() as changedTitle">
+            <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
+                <div class="action-row" *osPerms="'motions.can_manage'">
+                    <button
+                        mat-icon-button
+                        *ngIf="isRecommendation(changedTitle)"
+                        type="button"
+                        [matMenuTriggerFor]="changeRecommendationMenu"
+                        [matMenuTriggerData]="{ change: changedTitle }"
                     >
-                    <ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
-                        – {{ change.stateName | translate }}</ng-container
-                    >
-                </span>
-            </a>
-        </li>
-    </ul>
+                        <mat-icon>more_horiz</mat-icon>
+                    </button>
+                </div>
+                <div class="status-row" *ngIf="changedTitle.isRejected()">
+                    <i class="grey">{{ 'Rejected' | translate }}</i>
+                </div>
 
-    <div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
-</section>
-
-<span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
-
-<!-- The actual diff view -->
-<div class="motion-text-with-diffs">
-    <div *ngIf="getTitleChangingObject() as changedTitle">
-        <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
-            <div class="action-row" *osPerms="'motions.can_manage'">
-                <button
-                    mat-icon-button
-                    *ngIf="isRecommendation(changedTitle)"
-                    type="button"
-                    [matMenuTriggerFor]="changeRecommendationMenu"
-                    [matMenuTriggerData]="{ change: changedTitle }"
+                <div
+                    class="motion-text motion-text-diff"
+                    [class.line-numbers-none]="isLineNumberingNone()"
+                    [class.line-numbers-inline]="isLineNumberingInline()"
+                    [class.line-numbers-outside]="isLineNumberingOutside()"
+                    [attr.data-change-id]="changedTitle.getChangeId()"
                 >
-                    <mat-icon>more_horiz</mat-icon>
-                </button>
+                    <div class="bold">{{ 'Changed title' | translate }}:</div>
+                    <div [innerHTML]="getFormattedTitleDiff() | trust: 'html'"></div>
+                </div>
             </div>
-            <div class="status-row" *ngIf="changedTitle.isRejected()">
-                <i class="grey">{{ 'Rejected' | translate }}</i>
-            </div>
-
+        </div>
+        <div *ngFor="let change of getAllTextChangingObjects(); let i = index">
             <div
-                class="motion-text motion-text-diff"
+                class="motion-text"
                 [class.line-numbers-none]="isLineNumberingNone()"
                 [class.line-numbers-inline]="isLineNumberingInline()"
                 [class.line-numbers-outside]="isLineNumberingOutside()"
-                [attr.data-change-id]="changedTitle.getChangeId()"
             >
-                <div class="bold">{{ 'Changed title' | translate }}:</div>
-                <div [innerHTML]="getFormattedTitleDiff() | trust: 'html'"></div>
+                <os-motion-detail-original-change-recommendations
+                    [html]="getTextBetweenChanges(getAllTextChangingObjects()[i - 1], change)"
+                    [changeRecommendations]="[]"
+                    (createChangeRecommendation)="onCreateChangeRecommendation($event)"
+                ></os-motion-detail-original-change-recommendations>
+            </div>
+
+            <div
+                class="diff-box diff-box-{{ change.getChangeId() }} clearfix"
+                [class.collides]="hasCollissions(change, getAllTextChangingObjects())"
+            >
+                <div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())">
+                    <mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
+                </div>
+                <div class="action-row" *osPerms="'motions.can_manage'">
+                    <button
+                        mat-icon-button
+                        *ngIf="isRecommendation(change)"
+                        type="button"
+                        [matMenuTriggerFor]="changeRecommendationMenu"
+                        [matMenuTriggerData]="{ change: change }"
+                    >
+                        <mat-icon>more_horiz</mat-icon>
+                    </button>
+                    <button
+                        mat-icon-button
+                        *ngIf="isAmendment(change)"
+                        type="button"
+                        [matMenuTriggerFor]="amendmentMenu"
+                        [matMenuTriggerData]="{ change: change }"
+                    >
+                        <mat-icon>more_horiz</mat-icon>
+                    </button>
+
+                    <!--
+                    <a ng-if="change.type == 'amendment'" ui-sref="motions.motion.detail({id: change.original.id})"
+                       uib-tooltip="Open amendment"
+                       class="btn btn-default btn-sm pull-right btn-amend-info">
+                        <i class="fa fa-info"></i>
+                        {{ change.original.identifier }}
+                    </a>
+                --></div>
+                <div class="status-row" *ngIf="isChangeRecommendation(change) && change.isRejected()">
+                    <i class="grey">{{ 'Rejected' | translate }}</i>
+                </div>
+
+                <!-- If it's an amendment, only accepted ones will be passed to this component
+                 by default (== !showAllAmendments). In this case, don't show the prefix.
+                 However, if showAllAmendments === true, the prefix should be shown alwayes,
+                 even if it's accepted -->
+                <div class="status-row" *ngIf="isAmendment(change) && showAllAmendments">
+                    <i class="grey"
+                        >{{ change.amendment.identifier }} - {{ change.amendment.state.name | translate }}</i
+                    >
+                </div>
+
+                <div
+                    class="motion-text motion-text-diff"
+                    [class.line-numbers-none]="isLineNumberingNone()"
+                    [class.line-numbers-inline]="isLineNumberingInline()"
+                    [class.line-numbers-outside]="isLineNumberingOutside()"
+                    [attr.data-change-id]="change.getChangeId()"
+                    [innerHTML]="getDiff(change) | trust: 'html'"
+                ></div>
             </div>
         </div>
-    </div>
-    <div *ngFor="let change of getAllTextChangingObjects(); let i = index">
+
         <div
             class="motion-text"
             [class.line-numbers-none]="isLineNumberingNone()"
@@ -81,165 +157,91 @@
             [class.line-numbers-outside]="isLineNumberingOutside()"
         >
             <os-motion-detail-original-change-recommendations
-                [html]="getTextBetweenChanges(getAllTextChangingObjects()[i - 1], change)"
+                [html]="getTextRemainderAfterLastChange()"
                 [changeRecommendations]="[]"
                 (createChangeRecommendation)="onCreateChangeRecommendation($event)"
             ></os-motion-detail-original-change-recommendations>
         </div>
-
-        <div
-            class="diff-box diff-box-{{ change.getChangeId() }} clearfix"
-            [class.collides]="hasCollissions(change, getAllTextChangingObjects())"
-        >
-            <div class="collission-hint" *ngIf="hasCollissions(change, getAllTextChangingObjects())">
-                <mat-icon matTooltip="{{ 'This change collides with another one.' | translate }}">warning</mat-icon>
-            </div>
-            <div class="action-row" *osPerms="'motions.can_manage'">
-                <button
-                    mat-icon-button
-                    *ngIf="isRecommendation(change)"
-                    type="button"
-                    [matMenuTriggerFor]="changeRecommendationMenu"
-                    [matMenuTriggerData]="{ change: change }"
-                >
-                    <mat-icon>more_horiz</mat-icon>
-                </button>
-                <button
-                    mat-icon-button
-                    *ngIf="isAmendment(change)"
-                    type="button"
-                    [matMenuTriggerFor]="amendmentMenu"
-                    [matMenuTriggerData]="{ change: change }"
-                >
-                    <mat-icon>more_horiz</mat-icon>
-                </button>
-
-                <!--
-                    <a ng-if="change.type == 'amendment'" ui-sref="motions.motion.detail({id: change.original.id})"
-                       uib-tooltip="Open amendment"
-                       class="btn btn-default btn-sm pull-right btn-amend-info">
-                        <i class="fa fa-info"></i>
-                        {{ change.original.identifier }}
-                    </a>
-                -->
-            </div>
-            <div class="status-row" *ngIf="isChangeRecommendation(change) && change.isRejected()">
-                <i class="grey">{{ 'Rejected' | translate }}</i>
-            </div>
-
-            <!-- If it's an amendment, only accepted ones will be passed to this component
-                 by default (== !showAllAmendments). In this case, don't show the prefix.
-                 However, if showAllAmendments === true, the prefix should be shown alwayes,
-                 even if it's accepted -->
-            <div class="status-row" *ngIf="isAmendment(change) && showAllAmendments">
-                <i class="grey">{{ change.amendment.identifier }} - {{ change.amendment.state.name | translate }}</i>
-            </div>
-
-            <div
-                class="motion-text motion-text-diff"
-                [class.line-numbers-none]="isLineNumberingNone()"
-                [class.line-numbers-inline]="isLineNumberingInline()"
-                [class.line-numbers-outside]="isLineNumberingOutside()"
-                [attr.data-change-id]="change.getChangeId()"
-                [innerHTML]="getDiff(change) | trust: 'html'"
-            ></div>
-        </div>
     </div>
 
-    <div
-        class="motion-text"
-        [class.line-numbers-none]="isLineNumberingNone()"
-        [class.line-numbers-inline]="isLineNumberingInline()"
-        [class.line-numbers-outside]="isLineNumberingOutside()"
-    >
-        <os-motion-detail-original-change-recommendations
-            [html]="getTextRemainderAfterLastChange()"
-            [changeRecommendations]="[]"
-            (createChangeRecommendation)="onCreateChangeRecommendation($event)"
-        ></os-motion-detail-original-change-recommendations>
-    </div>
+    <mat-menu #amendmentMenu="matMenu">
+        <ng-template matMenuContent let-change="change">
+            <button
+                type="button"
+                mat-menu-item
+                [routerLink]="change.amendment.getDetailStateURL()"
+                [state]="{ back: 'true' }"
+            >
+                <mat-icon>visibility_on</mat-icon>
+                <span>{{ 'Show amendment' | translate }}</span>
+            </button>
+
+            <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
+
+            <button
+                *ngFor="let state of change.amendment.state.next_states"
+                mat-menu-item
+                (click)="setAmendmentState(change, state.id)"
+            >
+                {{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
+            </button>
+            <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
+            <button
+                *ngFor="let state of change.amendment.state.previous_states"
+                mat-menu-item
+                (click)="setAmendmentState(change, state.id)"
+            >
+                <mat-icon>arrow_back</mat-icon>
+                {{ state.name | translate }}
+                <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
+            </button>
+            <button mat-menu-item (click)="setAmendmentState(change, null)">
+                <mat-icon>replay</mat-icon>
+                {{ 'Reset state' | translate }}
+            </button>
+
+            <!-- perms.isAllowed('change_state', motion) -->
+        </ng-template>
+    </mat-menu>
+
+    <mat-menu #changeRecommendationMenu="matMenu">
+        <ng-template matMenuContent let-change="change">
+            <button type="button" mat-menu-item (click)="setAcceptanceValue(change, 'accepted')">
+                <mat-icon>thumb_up</mat-icon>
+                <span>{{ 'Accept' | translate }}</span>
+                <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
+            </button>
+            <button type="button" mat-menu-item (click)="setAcceptanceValue(change, 'rejected')">
+                <mat-icon>thumb_down</mat-icon>
+                <span>{{ 'Reject' | translate }}</span>
+                <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
+            </button>
+            <button type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
+                <mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
+                <span>{{ 'Public' | translate }}</span>
+            </button>
+            <button type="button" mat-menu-item (click)="deleteChangeRecommendation(change, $event)">
+                <mat-icon>delete</mat-icon>
+                <span>{{ 'Delete' | translate }}</span>
+            </button>
+            <button
+                type="button"
+                mat-menu-item
+                (click)="editChangeRecommendation(change, $event)"
+                *ngIf="!change.isTitleChange()"
+            >
+                <mat-icon>edit</mat-icon>
+                <span>{{ 'Edit' | translate }}</span>
+            </button>
+            <button
+                type="button"
+                mat-menu-item
+                (click)="editTitleChangeRecommendation(change, $event)"
+                *ngIf="change.isTitleChange()"
+            >
+                <mat-icon>edit</mat-icon>
+                <span>{{ 'Edit' | translate }}</span>
+            </button>
+        </ng-template>
+    </mat-menu>
 </div>
-
-<mat-menu #amendmentMenu="matMenu">
-    <ng-template matMenuContent let-change="change">
-        <button
-            type="button"
-            mat-menu-item
-            [routerLink]="change.amendment.getDetailStateURL()" [state]="{ back: 'true' }"
-        >
-            <mat-icon>visibility_on</mat-icon>
-            <span>{{ 'Show amendment' | translate }}</span>
-        </button>
-
-        <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
-
-        <button *ngFor="let state of change.amendment.state.next_states" mat-menu-item (click)="setAmendmentState(change, state.id)">
-            {{ state.name | translate }} <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
-        </button>
-        <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
-        <button
-            *ngFor="let state of change.amendment.state.previous_states"
-            mat-menu-item
-            (click)="setAmendmentState(change, state.id)"
-        >
-            <mat-icon>arrow_back</mat-icon>
-            {{ state.name | translate }}
-            <span *ngIf="state.show_state_extension_field">&nbsp;...</span>
-        </button>
-        <button mat-menu-item (click)="setAmendmentState(change, null)">
-            <mat-icon>replay</mat-icon>
-            {{ 'Reset state' | translate }}
-        </button>
-
-        <!-- perms.isAllowed('change_state', motion) -->
-    </ng-template>
-</mat-menu>
-
-<mat-menu #changeRecommendationMenu="matMenu">
-    <ng-template matMenuContent let-change="change">
-        <button
-            type="button"
-            mat-menu-item
-            (click)="setAcceptanceValue(change, 'accepted')"
-        >
-            <mat-icon>thumb_up</mat-icon>
-            <span>{{ 'Accept' | translate }}</span>
-            <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
-        </button>
-        <button
-            type="button"
-            mat-menu-item
-            (click)="setAcceptanceValue(change, 'rejected')"
-        >
-            <mat-icon>thumb_down</mat-icon>
-            <span>{{ 'Reject' | translate }}</span>
-            <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
-        </button>
-        <button type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
-            <mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
-            <span>{{ 'Public' | translate }}</span>
-        </button>
-        <button type="button" mat-menu-item (click)="deleteChangeRecommendation(change, $event)">
-            <mat-icon>delete</mat-icon>
-            <span>{{ 'Delete' | translate }}</span>
-        </button>
-        <button
-            type="button"
-            mat-menu-item
-            (click)="editChangeRecommendation(change, $event)"
-            *ngIf="!change.isTitleChange()"
-        >
-            <mat-icon>edit</mat-icon>
-            <span>{{ 'Edit' | translate }}</span>
-        </button>
-        <button
-            type="button"
-            mat-menu-item
-            (click)="editTitleChangeRecommendation(change, $event)"
-            *ngIf="change.isTitleChange()"
-        >
-            <mat-icon>edit</mat-icon>
-            <span>{{ 'Edit' | translate }}</span>
-        </button>
-    </ng-template>
-</mat-menu>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss
index 9ce9a2ab8..ce56453a7 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss
@@ -3,7 +3,7 @@
 @mixin os-motion-detail-diff-style($theme) {
     $background: map-get($theme, background);
 
-    .motion-text-with-diffs {
+    .motion-detail-diff {
         .change-recommendation-overview,
         .diff-box {
             background-color: mat-color($background, background);