Some enhancements for motion detail

Vscroll for the list of changes
List of changes can collapse
direct link to an amendment over the list of changes
Vscroll for the amendment create wizzard
Line numbers in the amendment create wizzard
Some css cleanup

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html

@@ -35,27 +35,39 @@
         <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
             <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
             <div class="amendment-create-wizard-wrapper">
-                <section
-                    *ngFor="let paragraph of paragraphs; let i = index"
-                    class="paragraph-row"
-                    [class.active]="isParagraphSelected(paragraph)"
-                    (click)="onParagraphClicked(paragraph)"
-                >
-                    <mat-checkbox
-                        *ngIf="multipleParagraphsAllowed"
-                        class="paragraph-select"
-                        [checked]="isParagraphSelected(paragraph)"
-                        (click)="checkboxClicked($event)"
+                <cdk-virtual-scroll-viewport itemSize="90" minBufferPx="400" maxBufferPx="600" class="paragraph-scroll">
+                    <section
+                        *ngFor="let paragraph of paragraphs; let i = index"
+                        class="paragraph-row"
+                        [class.active]="isParagraphSelected(paragraph)"
+                        (click)="onParagraphClicked(paragraph)"
                     >
-                    </mat-checkbox>
-                    <mat-radio-button
-                        *ngIf="!multipleParagraphsAllowed"
-                        class="paragraph-select"
-                        [checked]="isParagraphSelected(paragraph)"
-                    >
-                    </mat-radio-button>
-                    <div class="paragraph-text motion-text" [innerHTML]="getParagraphPreview(i) | trust: 'html'"></div>
-                </section>
+                        <mat-checkbox
+                            *ngIf="multipleParagraphsAllowed"
+                            class="paragraph-select"
+                            [checked]="isParagraphSelected(paragraph)"
+                            (click)="checkboxClicked($event)"
+                        >
+                        </mat-checkbox>
+                        <mat-radio-button
+                            *ngIf="!multipleParagraphsAllowed"
+                            class="paragraph-select"
+                            [checked]="isParagraphSelected(paragraph)"
+                        >
+                        </mat-radio-button>
+                        <div class="paragraph-text motion-text">
+                            <div>
+                                <i *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number">
+                                    {{ 'Line' | translate }} {{ paragraph.lineFrom }}:</i
+                                >
+                                <i *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number">
+                                    {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}:</i
+                                >
+                            </div>
+                            <div [innerHTML]="getParagraphPreview(i) | trust: 'html'"></div>
+                        </div>
+                    </section>
+                </cdk-virtual-scroll-viewport>
             </div>
         </mat-step>
         <mat-step>

client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss

@@ -1,4 +1,8 @@
 .amendment-create-wizard-wrapper {
+    .paragraph-scroll {
+        height: calc(100vh - 160px);
+    }
+
     .paragraph-row {
         display: flex;
         flex-direction: row;

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html

@@ -1,47 +1,52 @@
 <!-- A summary of all changes -->
 <div class="motion-detail-diff">
-    <section class="change-recommendation-overview" *ngIf="changes.length > 0">
-        <strong> {{ 'Summary of changes' | translate }}: </strong>
+    <div class="change-recommendation-summary" *ngIf="changes?.length">
+        <strong [matBadge]="changes.length" matBadgeOverlap="false">{{ 'Summary of changes' | translate }}&nbsp;</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 }}
-                        <!--
-                        @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
-                        >
-                        <ng-container *ngIf="(change.isAccepted() || isAmendment(change)) && change.stateName">
-                            – {{ change.stateName | translate }}</ng-container
+        <cdk-virtual-scroll-viewport
+            itemSize="22"
+            minBufferPx="100"
+            maxBufferPx="300"
+            class="summary-of-changes-scroll"
+        >
+            <ul>
+                <li *cdkVirtualFor="let change of changes; let index = index">
+                    <span class="one-line">
+                        <a href="" (click)="scrollToChangeClicked(change, $event)" *ngIf="!change.isTitleChange()">
+                            <span> {{ '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>
+                        </a>
+                        <i class="user-subtitle" *ngIf="isChangeRecommendation(change)">
+                            – {{ getRecommendationTypeName(change) | translate }}
+                        </i>
+                        <i class="user-subtitle">
+                            <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
+                            >
+                        </i>
+                        <a
+                            mat-icon-button
+                            [routerLink]="change.amendment.getDetailStateURL()"
+                            [state]="{ back: 'true' }"
+                            class="smaller-icon-button amendment-link"
+                            *ngIf="isAmendment(change)"
                         >
+                            <mat-icon>arrow_forward</mat-icon>
+                        </a>
                     </span>
-                </a>
-            </li>
-        </ul>
-
-        <div *ngIf="changes.length === 0" class="no-changes">{{ 'No change recommendations yet' | translate }}</div>
-    </section>
+                </li>
+            </ul>
+        </cdk-virtual-scroll-viewport>
+    </div>
 
     <span class="text-prefix-label" *ngIf="showPreamble">{{ preamble | translate }}</span>
 
@@ -97,10 +102,10 @@
                 <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'">
+                <div class="action-row">
                     <button
                         mat-icon-button
-                        *ngIf="isRecommendation(change)"
+                        *osPerms="'motions.can_manage'; and: isRecommendation(change)"
                         type="button"
                         [matMenuTriggerFor]="changeRecommendationMenu"
                         [matMenuTriggerData]="{ change: change }"
@@ -166,41 +171,48 @@
 
     <mat-menu #amendmentMenu="matMenu">
         <ng-template matMenuContent let-change="change">
-            <button
+            <a
                 type="button"
                 mat-menu-item
                 [routerLink]="change.amendment.getDetailStateURL()"
                 [state]="{ back: 'true' }"
             >
                 <mat-icon>visibility_on</mat-icon>
-                <span>{{ 'Show amendment' | translate }}</span>
-            </button>
+                <ng-container *ngIf="!change?.amendment?.identifier">
+                    <span>{{ 'Show amendment' | translate }}</span>
+                </ng-container>
 
-            <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
+                <ng-container *ngIf="change?.amendment?.identifier">
+                    <span>{{ change.amendment.identifier }}</span>
+                </ng-container>
+            </a>
 
-            <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) (which does not exist)-->
+            <ng-container *osPerms="'motions.can_manage'">
+                <mat-divider *ngIf="change.amendment.state.next_states.length > 0"></mat-divider>
 
-            <!-- perms.isAllowed('change_state', motion) -->
+                <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>
+            </ng-container>
         </ng-template>
     </mat-menu>
 

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss

@@ -1,4 +1,3 @@
-/* Diffbox */
 .diff-box {
     position: relative;
     border-radius: 3px;
@@ -44,48 +43,37 @@
     }
 }
 
-.change-recommendation-overview {
+.change-recommendation-summary {
     border-radius: 3px;
-    margin-bottom: 15px;
-    padding: 5px 10px;
+    padding: 0.5em 0 0 0.5em;
+    margin-bottom: 1em;
 
-    a,
-    a:link,
-    a:active {
-        text-decoration: none;
+    .summary-of-changes-scroll {
+        padding-top: 4px;
+        height: 100px;
     }
 
-    h3 {
-        margin-top: 10px;
+    .amendment-link {
+        margin-left: 0.3em;
     }
 
     ul {
+        padding: 0 0 0 32px;
         list-style: none;
         display: table;
+        margin-right: 1em;
     }
 
     li {
         display: table-row;
-        cursor: pointer;
-
-        &:hover {
-            text-decoration: underline;
-        }
 
         & > * {
             display: table-cell;
             padding: 1px;
         }
     }
-
-    .status {
-        color: gray;
-        font-style: italic;
-    }
-
-    .no-changes {
-        font-style: italic;
-        color: grey;
+    .mat-badge-content {
+        top: -8px !important;
     }
 }
 

client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss

@@ -4,7 +4,7 @@
     $background: map-get($theme, background);
 
     .motion-detail-diff {
-        .change-recommendation-overview,
+        .change-recommendation-summary,
         .diff-box {
             background-color: mat-color($background, background);
             border: 1px solid mat-color($background, selected-button);

client/src/styles.scss

@@ -727,6 +727,17 @@ button.mat-menu-item.selected {
     }
 }
 
+.smaller-icon-button {
+    height: 24px !important;
+    width: 24px !important;
+    line-height: 24px !important;
+
+    .mat-button-wrapper {
+        vertical-align: top;
+        line-height: initial;
+    }
+}
+
 /**
  * Fix to enable multi line mat hints. See:
  * https://github.com/angular/components/issues/5227