RED-776: No annotations on this page, jump to previous/next buttons

2021-04-28 21:42:26 +03:00 · 2021-04-28 21:42:26 +03:00 · c0959a8644
commit c0959a8644
parent 27750b1721
14 changed files with 126 additions and 35 deletions
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@ -46,6 +46,8 @@ export class IconsModule {
            'menu',
            'nav-first',
            'nav-last',
+            'nav-next',
+            'nav-prev',
            'needs-work',
            'new-tab',
            'notification',
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
@ -1,16 +1,16 @@
 <div class="right-title heading" translate="file-preview.tabs.annotations.label">
    <div>
        <div
+            (click)="multiSelectActive = true"
            *ngIf="!multiSelectActive"
            class="all-caps-label primary pointer"
-            (click)="multiSelectActive = true"
            translate="file-preview.tabs.annotations.select"
        ></div>
        <redaction-filter
            (filtersChanged)="filtersChanged($event)"
+            [actionsTemplate]="annotationFilterActionTemplate"
            [chevron]="true"
            [filterTemplate]="annotationFilterTemplate"
-            [actionsTemplate]="annotationFilterActionTemplate"
            [primaryFilters]="primaryFilters"
            [secondaryFilters]="secondaryFilters"
        ></redaction-filter>
@ -20,22 +20,22 @@
    <div *ngIf="multiSelectActive" class="multi-select">
        <div class="selected-wrapper">
            <redaction-round-checkbox
-                type="red-bg"
-                [indeterminate]="!!selectedAnnotations?.length"
                (click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
+                [indeterminate]="!!selectedAnnotations?.length"
+                type="red-bg"
            ></redaction-round-checkbox>
            <span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
            <redaction-annotation-remove-actions
                *ngIf="selectedAnnotations?.length > 0"
-                [annotations]="selectedAnnotations"
                [annotationsChanged]="annotationsChanged"
+                [annotations]="selectedAnnotations"
                btnType="primary"
                tooltipPosition="above"
            ></redaction-annotation-remove-actions>
        </div>
        <redaction-circle-button (action)="multiSelectActive = false" icon="red:close" type="primary"></redaction-circle-button>
    </div>
-    <div class="annotations-wrapper" [class.multi-select-active]="multiSelectActive">
+    <div [class.multi-select-active]="multiSelectActive" class="annotations-wrapper">
        <div
            #quickNavigation
            (keydown)="preventKeyDefault($event)"
@ -45,31 +45,31 @@
            tabindex="0"
        >
            <div
-                class="jump"
+                (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
                [class.disabled]="!quickScrollFirstEnabled"
                [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
+                class="jump"
                matTooltipPosition="above"
-                (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
            >
                <mat-icon svgIcon="red:nav-first"></mat-icon>
            </div>
-            <div class="pages" (scroll)="computeQuickNavButtonsState()" id="pages">
+            <div (scroll)="computeQuickNavButtonsState()" class="pages" id="pages">
                <redaction-page-indicator
                    (pageSelected)="pageSelectedByClick($event)"
                    *ngFor="let pageNumber of displayedPages"
+                    [activeSelection]="pageHasSelection(pageNumber)"
                    [active]="pageNumber === activeViewerPage"
                    [number]="pageNumber"
                    [viewedPages]="fileData.viewedPages"
-                    [activeSelection]="pageHasSelection(pageNumber)"
                >
                </redaction-page-indicator>
            </div>
            <div
-                class="jump"
+                (click)="scrollQuickNavLast()"
                [class.disabled]="!quickScrollLastEnabled"
                [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
+                class="jump"
                matTooltipPosition="above"
-                (click)="scrollQuickNavLast()"
            >
                <mat-icon svgIcon="red:nav-last"></mat-icon>
            </div>
@ -83,8 +83,8 @@
                ></span>

                <div *ngIf="multiSelectActive">
-                    <div class="all-caps-label primary pointer" (click)="selectAllOnActivePage()">All</div>
-                    <div class="all-caps-label primary pointer" (click)="deselectAllOnActivePage()">None</div>
+                    <div (click)="selectAllOnActivePage()" class="all-caps-label primary pointer">All</div>
+                    <div (click)="deselectAllOnActivePage()" class="all-caps-label primary pointer">None</div>
                </div>
            </div>

@ -93,25 +93,42 @@
                (keydown)="preventKeyDefault($event)"
                (keyup)="preventKeyDefault($event)"
                [class.active-panel]="!pagesPanelActive"
-                redactionHasScrollbar
                class="annotations"
+                redactionHasScrollbar
                tabindex="1"
            >
-                <div *ngIf="!displayedAnnotations[activeViewerPage]" class="heading-l no-annotations">
-                    {{ 'file-preview.no-annotations-for-page' | translate }}
-                </div>
+                <ng-container *ngIf="!displayedAnnotations[activeViewerPage]">
+                    <redaction-empty-state [horizontalPadding]="24" [verticalPadding]="40" icon="red:document" screen="file-preview"></redaction-empty-state>
+                    <div class="no-annotations-buttons-container mt-32">
+                        <redaction-icon-button
+                            (action)="jumpToPreviousWithAnnotations()"
+                            [disabled]="activeViewerPage <= displayedPages[0]"
+                            icon="red:nav-prev"
+                            text="file-preview.tabs.annotations.jump-to-previous"
+                            type="show-bg"
+                        ></redaction-icon-button>
+                        <redaction-icon-button
+                            (action)="jumpToNextWithAnnotations()"
+                            [disabled]="activeViewerPage >= displayedPages[displayedPages.length - 1]"
+                            class="mt-8"
+                            icon="red:nav-next"
+                            text="file-preview.tabs.annotations.jump-to-next"
+                            type="show-bg"
+                        ></redaction-icon-button>
+                    </div>
+                </ng-container>

                <div
                    (click)="annotationClicked(annotation, $event)"
-                    class="annotation-wrapper"
                    *ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
-                    attr.annotation-id="{{ annotation.id }}"
-                    attr.annotation-page="{{ activeViewerPage }}"
                    [class.active]="annotationIsSelected(annotation)"
                    [class.multi-select-active]="multiSelectActive"
+                    attr.annotation-id="{{ annotation.id }}"
+                    attr.annotation-page="{{ activeViewerPage }}"
+                    class="annotation-wrapper"
                >
                    <div class="active-bar-marker"></div>
-                    <div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
+                    <div [class.removed]="annotation.isChangeLogRemoved" class="annotation">
                        <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
                            <div class="details">
                                <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
@ -132,8 +149,8 @@
                                </div>
                                <ng-container
                                    *ngIf="!multiSelectActive"
-                                    [ngTemplateOutlet]="annotationActionsTemplate"
                                    [ngTemplateOutletContext]="{ annotation: annotation }"
+                                    [ngTemplateOutlet]="annotationActionsTemplate"
                                >
                                </ng-container>
                                <div class="active-icon-marker-container">
@ -162,7 +179,7 @@

 <ng-template #annotationFilterActionTemplate let-filter="filter">
    <ng-container *ngIf="filter.key === 'skipped'">
-        <redaction-circle-button [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" (action)="toggleSkipped.emit($event)" type="dark-bg">
+        <redaction-circle-button (action)="toggleSkipped.emit($event)" [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" type="dark-bg">
        </redaction-circle-button>
    </ng-container>
 </ng-template>
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss
@ -4,9 +4,14 @@
 .right-content {
    flex-direction: column;

-    .no-annotations {
-        padding: 24px;
-        text-align: center;
+    .no-annotations-buttons-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        redaction-icon-button {
+            width: 100%;
+        }
    }

    .multi-select {
@ -115,6 +120,9 @@
        overflow: hidden;
        width: 100%;
        height: calc(100% - 32px);
+        display: flex;
+        align-items: center;
+        flex-direction: column;

        .annotation-wrapper {
            display: flex;
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
@ -227,6 +227,14 @@ export class FileWorkloadComponent {
        }
    }

+    public jumpToPreviousWithAnnotations() {
+        this.selectPage.emit(this._prevPageWithAnnotations());
+    }
+
+    public jumpToNextWithAnnotations() {
+        this.selectPage.emit(this._nextPageWithAnnotations());
+    }
+
    private _navigateAnnotations($event: KeyboardEvent) {
        if (!this.firstSelectedAnnotation || this.activeViewerPage !== this.firstSelectedAnnotation.pageNumber) {
            const pageIdx = this.displayedPages.indexOf(this.activeViewerPage);
@ -325,10 +333,9 @@ export class FileWorkloadComponent {

    private _prevPageWithAnnotations() {
        let idx = this.displayedPages.length - 1;
-        for (const page of this.displayedPages.reverse()) {
+        const reverseDisplayedPages = [...this.displayedPages].reverse();
+        for (const page of reverseDisplayedPages) {
            if (page < this.activeViewerPage) {
-                this.selectPage.emit(this.displayedPages[idx]);
-                this.scrollAnnotations();
                break;
            }
            --idx;
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
@ -2,6 +2,7 @@

 button {
    padding: 0 14px;
+    width: 100%;

    &.has-icon {
        padding: 0 14px 0 10px;
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
@ -1,4 +1,7 @@
-<div class="empty-state" [ngStyle]="{ 'padding-left': horizontalPadding + 'px', 'padding-right': horizontalPadding + 'px' }">
+<div
+    class="empty-state"
+    [ngStyle]="{ 'padding-top': verticalPadding + 'px', 'padding-left': horizontalPadding + 'px', 'padding-right': horizontalPadding + 'px' }"
+>
    <mat-icon [svgIcon]="icon"></mat-icon>
    <div class="heading-l" [translate]="text || screen + '.' + type + '.title'"></div>
    <redaction-icon-button *ngIf="showButton" (action)="action.emit()" [icon]="buttonIcon" [text]="screen + '.no-data.action'" type="primary">
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
@ -4,7 +4,6 @@
    display: flex;
    flex-direction: column;
    align-items: center;
-    padding-top: 120px;
    text-align: center;

    > mat-icon {
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
@ -12,6 +12,7 @@ export class EmptyStateComponent implements OnInit {
    @Input() showButton = true;
    @Input() buttonIcon = 'red:plus';
    @Input() horizontalPadding = 100;
+    @Input() verticalPadding = 120;
    @Input() type: 'no-data' | 'no-match' = 'no-data';
    @Output() action = new EventEmitter();

--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@ -276,7 +276,9 @@
        }
    },
    "file-preview": {
-        "no-annotations-for-page": "Auf dieser Seite gibt es keine Redaktionen, Hinweise oder Anfragen.",
+        "no-data": {
+            "title": "Auf dieser Seite gibt es keine Redaktionen, Hinweise oder Anfragen."
+        },
        "show-redacted-view": "Redigierte Vorschau anzeigen",
        "cannot-show-redacted-view": "Redaktionen nicht synchron. Die redigierte Vorschau ist nur nach einer erneuten Analyse verfügbar",
        "reanalyse-notification": "Dieses Dokument wurde nicht mit dem neuesten Regel- / Wörterbuchsatz verarbeitet. Analysieren Sie jetzt, um aktualisierte Anmerkungen zu erhalten.",
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@ -300,7 +300,9 @@
        "standard-tooltip": "Standard Workload view shows all hints, redactions, recommendations & suggestions. This view allows editing.",
        "redacted-tooltip": "Redaction preview shows only redactions. Consider this a preview for the final redacted version. This view is only available if the file has no pending changes & doesn't require a reanalysis",
        "delta-tooltip": "Delta View shows only the changes since last re-analysis. This view is only available if there is at least 1 change",
-        "no-annotations-for-page": "There are no redactions, hints or requests on this page.",
+        "no-data": {
+            "title": "There are no annotations on this page."
+        },
        "show-redacted-view": "Show Redacted Preview",
        "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",
        "reanalyse-notification": "This document was not processed with the latest rule/dictionary set. Analyze now to get updated annotations.",
@ -322,7 +324,9 @@
            },
            "annotations": {
                "label": "Workload",
-                "select": "Select"
+                "select": "Select",
+                "jump-to-previous": "Jump to Previous",
+                "jump-to-next": "Jump to Next"
            },
            "is-excluded": "Redaction is disabled for this document."
        },
--- a/apps/red-ui/src/assets/icons/general/nav-next.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-next.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -486.000000)">
+            <rect x="0" y="0" width="1440" height="750"></rect>
+            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
+            <g id="Group" transform="translate(1212.000000, 476.000000)">
+                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
+                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                    <g id="Group" transform="translate(1.400000, 3.360000)">
+                        <polygon id="Path" points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
+                        <polygon id="Path" transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) " points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/nav-prev.svg
+++ b/apps/red-ui/src/assets/icons/general/nav-prev.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -444.000000)">
+            <rect x="0" y="0" width="1440" height="750"></rect>
+            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
+            <g id="Group" transform="translate(1212.000000, 434.000000)">
+                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
+                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                    <g id="Group" transform="translate(1.400000, 3.360000)">
+                        <polygon id="Path" transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) " points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"></polygon>
+                        <polygon id="Path" transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) " points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@ -13,10 +13,15 @@
        align-items: center;
        line-height: 34px;
        transition: opacity 0.2s;
+        width: 100%;

        > *:not(:last-child) {
            margin-right: 6px;
        }
+
+        > span {
+            margin: auto;
+        }
    }

    &.mat-button-disabled {
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@ -232,6 +232,10 @@ section.settings {
    margin-top: 20px;
 }

+.mt-32 {
+    margin-top: 32px;
+}
+
 .pb-24 {
    padding-bottom: 24px;
 }