Pull request #152: Removed tooltip beak

Merge in RED/ui from RED-765 to master * commit '9cde2c0c43513522198825b8b899daddfd92fc0d': Removed tooltip beak
2021-04-13 23:41:50 +02:00 · 2021-04-13 23:41:50 +02:00 · 0bb9ae4d0a
commit 0bb9ae4d0a
parent 87668c020f 9cde2c0c43
24 changed files with 86 additions and 104 deletions
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@ -1,7 +1,7 @@
 <section>
    <div class="page-header">
        <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

@ -51,19 +51,12 @@
                                *ngIf="download.status === 'READY' && !download.inProgress"
                                (action)="downloadItem(download)"
                                tooltip="downloads-list.actions.download"
-                                tooltipPosition="before"
                                type="dark-bg"
                                icon="red:download"
                            >
                            </redaction-circle-button>

-                            <redaction-circle-button
-                                (action)="deleteItem(download)"
-                                tooltip="downloads-list.actions.delete"
-                                tooltipPosition="before"
-                                type="dark-bg"
-                                icon="red:trash"
-                            >
+                            <redaction-circle-button (action)="deleteItem(download)" tooltip="downloads-list.actions.delete" type="dark-bg" icon="red:trash">
                            </redaction-circle-button>

                            <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
@ -1,5 +1,5 @@
 <div class="collapsed-wrapper">
-    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltip="user-stats.expand" tooltipPosition="before"></redaction-circle-button>
+    <redaction-circle-button (action)="toggleCollapse.emit()" icon="red:expand" tooltipPosition="before" tooltip="user-stats.expand"></redaction-circle-button>
    <div class="all-caps-label" translate="user-stats.title"></div>
 </div>

--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@ -8,7 +8,7 @@
                *ngIf="permissionsService.isUser()"
                [routerLink]="['/ui/projects/']"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                icon="red:close"
            ></redaction-circle-button>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@ -7,7 +7,7 @@
        <div class="flex-1 actions">
            <redaction-rule-set-actions></redaction-rule-set-actions>

-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@ -7,7 +7,7 @@
        <div class="flex-1 actions">
            <redaction-rule-set-actions> </redaction-rule-set-actions>

-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@ -44,7 +44,7 @@
                class="ml-6"
                [routerLink]="['..']"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                icon="red:close"
            ></redaction-circle-button>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@ -9,7 +9,7 @@
                class="ml-6"
                icon="red:close"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
        </div>
    </div>
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@ -5,7 +5,7 @@
        <redaction-tabs [screen]="'file-attributes'"></redaction-tabs>

        <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

@ -124,7 +124,6 @@
                            <redaction-circle-button
                                (action)="openAddEditAttributeDialog($event, attribute)"
                                tooltip="file-attributes-listing.action.edit"
-                                tooltipPosition="before"
                                type="dark-bg"
                                icon="red:edit"
                            >
@ -132,7 +131,6 @@
                            <redaction-circle-button
                                (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                tooltip="file-attributes-listing.action.delete"
-                                tooltipPosition="before"
                                type="dark-bg"
                                icon="red:trash"
                            >
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@ -10,7 +10,7 @@
                class="ml-6"
                icon="red:close"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
        </div>
    </div>
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@ -18,7 +18,7 @@
                *ngIf="permissionsService.isUser()"
                [routerLink]="['/ui/projects/']"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                icon="red:close"
            ></redaction-circle-button>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
@ -7,7 +7,7 @@
        <div class="flex-1 actions">
            <redaction-rule-set-actions></redaction-rule-set-actions>

-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

--- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
@ -9,7 +9,7 @@
                class="ml-6"
                icon="red:close"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
        </div>
    </div>
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@ -16,7 +16,7 @@
                *ngIf="permissionsService.isUser()"
                [routerLink]="['/ui/projects/']"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                icon="red:close"
            ></redaction-circle-button>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@ -5,7 +5,7 @@
        <redaction-tabs [screen]="'watermark'"></redaction-tabs>

        <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="before" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
        </div>
    </div>

--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
@ -53,7 +53,7 @@
            *ngIf="screen === 'file-preview'"
            (action)="toggleViewDocumentInfo()"
            tooltip="file-preview.document-info"
-            tooltipPosition="before"
+            tooltipPosition="below"
            icon="red:status-info"
            [attr.aria-expanded]="activeDocumentInfo"
        ></redaction-circle-button>
@ -117,7 +117,7 @@
        <redaction-circle-button
            (action)="reanalyseFile($event, fileStatus, 100)"
            *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
-            [tooltipPosition]="'before'"
+            tooltipPosition="below"
            icon="red:refresh"
            tooltip="file-preview.reanalyse-notification"
            tooltipClass="warn small"
@ -143,7 +143,7 @@
                [disabled]="!permissionsService.isManager()"
                [checked]="!fileStatus.isExcluded"
                [matTooltip]="toggleTooltip | translate"
-                [matTooltipPosition]="toggleTooltipPosition"
+                [matTooltipPosition]="tooltipPosition"
                [class.mr-24]="screen === 'project-overview'"
                color="primary"
            >
--- a/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
@ -119,12 +119,4 @@ export class FileActionsComponent implements OnInit {

        return this.fileStatus.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable';
    }
-
-    get toggleTooltipPosition(): TooltipPosition {
-        if (!this.permissionsService.isManager() && this.screen === 'file-preview') {
-            return 'left';
-        }
-
-        return 'above';
-    }
 }
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
@ -57,6 +57,7 @@
                        *ngIf="!editingReviewer"
                        [userId]="appStateService.activeFile.currentReviewer"
                        [withName]="!!appStateService.activeFile.currentReviewer"
+                        tooltipPosition="below"
                    ></redaction-initials-avatar>
                    <div
                        (click)="editingReviewer = true"
@ -143,7 +144,7 @@
                (action)="toggleFullScreen()"
                [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                tooltip="file-preview.fullscreen"
-                tooltipPosition="before"
+                tooltipPosition="below"
                class="ml-2"
            ></redaction-circle-button>

@ -155,7 +156,7 @@
                type="primary"
                class="ml-8"
                tooltip="file-preview.download-original-file"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
            <redaction-circle-button
                *ngIf="userPreferenceService.areDevFeaturesEnabled"
@ -164,7 +165,7 @@
                type="primary"
                class="ml-8"
                tooltip="file-preview.new-tab-ssr"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
            <redaction-circle-button
                *ngIf="userPreferenceService.areDevFeaturesEnabled"
@ -173,7 +174,7 @@
                type="primary"
                class="ml-8"
                tooltip="file-preview.html-debug"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
            <!-- End Dev Mode Features-->

@ -184,7 +185,7 @@
                class="ml-8"
                icon="red:close"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
            ></redaction-circle-button>
        </div>
    </div>
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
@ -1,5 +1,5 @@
-<section>
-    <div *ngIf="appStateService.activeProject" class="page-header">
+<section *ngIf="!!appStateService.activeProject">
+    <div class="page-header">
        <div class="filters">
            <div translate="filters.filter-by"></div>
            <redaction-filter
@ -53,7 +53,8 @@
                icon="red:assign"
            ></redaction-circle-button>

-            <redaction-file-download-btn [project]="appStateService.activeProject" [file]="appStateService.activeProject.files"> </redaction-file-download-btn>
+            <redaction-file-download-btn [project]="appStateService.activeProject" tooltipPosition="below" [file]="appStateService.activeProject.files">
+            </redaction-file-download-btn>

            <redaction-circle-button
                *ngIf="permissionsService.displayReanalyseBtn()"
@ -76,7 +77,7 @@
                class="ml-6"
                [routerLink]="['/ui/projects/']"
                tooltip="common.close"
-                tooltipPosition="before"
+                tooltipPosition="below"
                icon="red:close"
            ></redaction-circle-button>
        </div>
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
@ -1,7 +1,7 @@
 <div class="wrapper">
    <div
        [className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')"
-        [matTooltipPosition]="'above'"
+        [matTooltipPosition]="tooltipPosition"
        [matTooltip]="displayName || ('initials-avatar.unassigned' | translate)"
    >
        {{ initials }}
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
@ -16,6 +16,7 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
    @Input() public withName = false;
    @Input() public showYou = false;
    @Input() public alwaysShowName = false;
+    @Input() public tooltipPosition: 'below' | 'above' = 'above';

    public displayName: string;

--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@ -3,9 +3,8 @@
        <div class="title flex-1">
            {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
        </div>
-        <mat-icon *ngIf="!collapsed" class="collapse-icon" svgIcon="red:status-collapse"></mat-icon>
-        <mat-icon *ngIf="collapsed" class="collapse-icon" svgIcon="red:status-expand"></mat-icon>
-        <mat-icon (click)="closeDialog()" svgIcon="red:close"></mat-icon>
+        <redaction-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></redaction-circle-button>
+        <redaction-circle-button icon="red:close" (action)="closeDialog()"></redaction-circle-button>
    </div>
    <div [hidden]="collapsed" class="upload-download-list">
        <div *ngFor="let projectId of uploadService.activeProjectKeys">
@ -30,28 +29,26 @@
                    </div>
                </div>

-                <div class="upload-download-progress" *ngIf="!model.error" mat-line>
+                <div class="upload-download-progress" *ngIf="!model.error">
                    <mat-progress-bar [value]="model.progress" color="primary" mode="determinate" [class.green]="model.completed"></mat-progress-bar>
                </div>

                <div class="actions" [class.error]="model.error" *ngIf="model.error || !model.completed">
-                    <div
-                        (click)="uploadItem(model)"
+                    <redaction-circle-button
                        *ngIf="model.error && !model.sizeError"
-                        [matTooltip]="'upload-status.dialog.actions.re-upload' | translate"
-                        class="pointer"
-                        matTooltipPosition="before"
-                    >
-                        <mat-icon svgIcon="red:refresh"></mat-icon>
-                    </div>
-                    <div
-                        (click)="cancelItem(model)"
-                        [matTooltip]="'upload-status.dialog.actions.cancel' | translate"
-                        class="pointer"
-                        matTooltipPosition="before"
-                    >
-                        <mat-icon svgIcon="red:close"></mat-icon>
-                    </div>
+                        icon="red:refresh"
+                        tooltip="upload-status.dialog.actions.re-upload"
+                        (action)="uploadItem(model)"
+                        type="dark-bg"
+                        tooltipPosition="before"
+                    ></redaction-circle-button>
+                    <redaction-circle-button
+                        icon="red:close"
+                        tooltip="upload-status.dialog.actions.cancel"
+                        (action)="cancelItem(model)"
+                        type="dark-bg"
+                        tooltipPosition="before"
+                    ></redaction-circle-button>
                </div>
            </div>
        </div>
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@ -106,6 +106,7 @@
                top: 0;
                right: 0;
                height: 100%;
+                padding-right: 10px;

                &.error {
                    display: flex;
@ -115,11 +116,6 @@
                    background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%);
                    padding-left: 60px;
                }
-
-                mat-icon {
-                    height: 13px;
-                    margin-right: 20px;
-                }
            }

            &:not(.error):hover {
--- a/apps/red-ui/src/assets/pdftron/stylesheet.css
+++ b/apps/red-ui/src/assets/pdftron/stylesheet.css
@ -29,3 +29,7 @@
 .TextPopup button[data-element='copyTextButton'] > div {
    color: #283241;
 }
+
+.Popup .Button img {
+    width: 18px;
+}
--- a/apps/red-ui/src/assets/styles/red-tooltips.scss
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@ -12,18 +12,18 @@
    overflow: visible !important;
    text-align: center;

-    &:after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        margin-left: -5px;
-        width: 0;
-        height: 0;
-        z-index: 3000;
-        border-left: solid 5px transparent;
-        border-right: solid 5px transparent;
-        border-top: solid 6px $accent;
-    }
+    //&:after {
+    //    content: '';
+    //    position: absolute;
+    //    left: 50%;
+    //    margin-left: -5px;
+    //    width: 0;
+    //    height: 0;
+    //    z-index: 3000;
+    //    border-left: solid 5px transparent;
+    //    border-right: solid 5px transparent;
+    //    border-top: solid 6px $accent;
+    //}

    &.small {
        max-width: 160px;
@ -31,7 +31,6 @@

    &.warn {
        background-color: $yellow-2;
-        text-align: initial;
        color: $accent;

        &:after {
@ -39,24 +38,24 @@
        }
    }
 }
-
-.mat-tooltip[style*='transform-origin: center top']:after {
-    top: -6px;
-    transform: rotate(180deg);
-}
-
-.mat-tooltip[style*='transform-origin: center bottom']:after {
-    top: 100%;
-}
-
-.mat-tooltip[style*='transform-origin: right center']:after {
-    top: 50%;
-    left: 100%;
-    transform: rotate(-90deg) translateY(3px) translateX(3px);
-}
-
-.mat-tooltip[style*='transform-origin: left center']:after {
-    top: 50%;
-    left: 0;
-    transform: rotate(90deg) translateY(3px) translateX(-3px);
-}
+//
+//.mat-tooltip[style*='transform-origin: center top']:after {
+//    top: -6px;
+//    transform: rotate(180deg);
+//}
+//
+//.mat-tooltip[style*='transform-origin: center bottom']:after {
+//    top: 100%;
+//}
+//
+//.mat-tooltip[style*='transform-origin: right center']:after {
+//    top: 50%;
+//    left: 100%;
+//    transform: rotate(-90deg) translateY(3px) translateX(3px);
+//}
+//
+//.mat-tooltip[style*='transform-origin: left center']:after {
+//    top: 50%;
+//    left: 0;
+//    transform: rotate(90deg) translateY(3px) translateX(-3px);
+//}