Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #152: Removed tooltip beak

Browse Source 
Merge in RED/ui from RED-765 to master

* commit '9cde2c0c43513522198825b8b899daddfd92fc0d':
  Removed tooltip beak
This commit is contained in:
Adina Teudan 2021-04-13 23:41:50 +02:00
commit 0bb9ae4d0a
24 changed files with 86 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -1,7 +1,7 @@
<section> <section>
<div class="page-header"> <div class="page-header">
<div class="actions flex-1"> <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>
</div> </div>
@ -51,19 +51,12 @@
*ngIf="download.status === 'READY' && !download.inProgress" *ngIf="download.status === 'READY' && !download.inProgress"
(action)="downloadItem(download)" (action)="downloadItem(download)"
tooltip="downloads-list.actions.download" tooltip="downloads-list.actions.download"
tooltipPosition="before"
type="dark-bg" type="dark-bg"
icon="red:download" icon="red:download"
> >
</redaction-circle-button> </redaction-circle-button>
<redaction-circle-button <redaction-circle-button (action)="deleteItem(download)" tooltip="downloads-list.actions.delete" type="dark-bg" icon="red:trash">
(action)="deleteItem(download)"
tooltip="downloads-list.actions.delete"
tooltipPosition="before"
type="dark-bg"
icon="red:trash"
>
</redaction-circle-button> </redaction-circle-button>
<mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner> <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>

2
apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
View File

@ -1,5 +1,5 @@
<div class="collapsed-wrapper"> <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 class="all-caps-label" translate="user-stats.title"></div>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
View File

@ -8,7 +8,7 @@
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/ui/projects/']" [routerLink]="['/ui/projects/']"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
icon="red:close" icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
View File

@ -7,7 +7,7 @@
<div class="flex-1 actions"> <div class="flex-1 actions">
<redaction-rule-set-actions></redaction-rule-set-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>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
View File

@ -7,7 +7,7 @@
<div class="flex-1 actions"> <div class="flex-1 actions">
<redaction-rule-set-actions> </redaction-rule-set-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>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
View File

@ -44,7 +44,7 @@
class="ml-6" class="ml-6"
[routerLink]="['..']" [routerLink]="['..']"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
icon="red:close" icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
View File

@ -9,7 +9,7 @@
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>

4
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
View File

@ -5,7 +5,7 @@
<redaction-tabs [screen]="'file-attributes'"></redaction-tabs> <redaction-tabs [screen]="'file-attributes'"></redaction-tabs>
<div class="actions flex-1"> <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>
</div> </div>
@ -124,7 +124,6 @@
<redaction-circle-button <redaction-circle-button
(action)="openAddEditAttributeDialog($event, attribute)" (action)="openAddEditAttributeDialog($event, attribute)"
tooltip="file-attributes-listing.action.edit" tooltip="file-attributes-listing.action.edit"
tooltipPosition="before"
type="dark-bg" type="dark-bg"
icon="red:edit" icon="red:edit"
> >
@ -132,7 +131,6 @@
<redaction-circle-button <redaction-circle-button
(action)="openConfirmDeleteAttributeDialog($event, attribute)" (action)="openConfirmDeleteAttributeDialog($event, attribute)"
tooltip="file-attributes-listing.action.delete" tooltip="file-attributes-listing.action.delete"
tooltipPosition="before"
type="dark-bg" type="dark-bg"
icon="red:trash" icon="red:trash"
> >

2
apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
View File

@ -10,7 +10,7 @@
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
View File

@ -18,7 +18,7 @@
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/ui/projects/']" [routerLink]="['/ui/projects/']"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
icon="red:close" icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
View File

@ -7,7 +7,7 @@
<div class="flex-1 actions"> <div class="flex-1 actions">
<redaction-rule-set-actions></redaction-rule-set-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>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
View File

@ -9,7 +9,7 @@
class="ml-6" class="ml-6"
icon="red:close" icon="red:close"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -16,7 +16,7 @@
*ngIf="permissionsService.isUser()" *ngIf="permissionsService.isUser()"
[routerLink]="['/ui/projects/']" [routerLink]="['/ui/projects/']"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
icon="red:close" icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>

2
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
View File

@ -5,7 +5,7 @@
<redaction-tabs [screen]="'watermark'"></redaction-tabs> <redaction-tabs [screen]="'watermark'"></redaction-tabs>
<div class="actions flex-1"> <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>
</div> </div>

6
apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.html
View File

@ -53,7 +53,7 @@
*ngIf="screen === 'file-preview'" *ngIf="screen === 'file-preview'"
(action)="toggleViewDocumentInfo()" (action)="toggleViewDocumentInfo()"
tooltip="file-preview.document-info" tooltip="file-preview.document-info"
tooltipPosition="before" tooltipPosition="below"
icon="red:status-info" icon="red:status-info"
[attr.aria-expanded]="activeDocumentInfo" [attr.aria-expanded]="activeDocumentInfo"
></redaction-circle-button> ></redaction-circle-button>
@ -117,7 +117,7 @@
<redaction-circle-button <redaction-circle-button
(action)="reanalyseFile($event, fileStatus, 100)" (action)="reanalyseFile($event, fileStatus, 100)"
*ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'" *ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
[tooltipPosition]="'before'" tooltipPosition="below"
icon="red:refresh" icon="red:refresh"
tooltip="file-preview.reanalyse-notification" tooltip="file-preview.reanalyse-notification"
tooltipClass="warn small" tooltipClass="warn small"
@ -143,7 +143,7 @@
[disabled]="!permissionsService.isManager()" [disabled]="!permissionsService.isManager()"
[checked]="!fileStatus.isExcluded" [checked]="!fileStatus.isExcluded"
[matTooltip]="toggleTooltip | translate" [matTooltip]="toggleTooltip | translate"
[matTooltipPosition]="toggleTooltipPosition" [matTooltipPosition]="tooltipPosition"
[class.mr-24]="screen === 'project-overview'" [class.mr-24]="screen === 'project-overview'"
color="primary" color="primary"
> >

8
apps/red-ui/src/app/modules/projects/components/file-actions/file-actions.component.ts
View File

@ -119,12 +119,4 @@ export class FileActionsComponent implements OnInit {
return this.fileStatus.isExcluded ? 'file-preview.toggle-analysis.enable' : 'file-preview.toggle-analysis.disable'; 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';
}
} }

11
apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
View File

@ -57,6 +57,7 @@
*ngIf="!editingReviewer" *ngIf="!editingReviewer"
[userId]="appStateService.activeFile.currentReviewer" [userId]="appStateService.activeFile.currentReviewer"
[withName]="!!appStateService.activeFile.currentReviewer" [withName]="!!appStateService.activeFile.currentReviewer"
tooltipPosition="below"
></redaction-initials-avatar> ></redaction-initials-avatar>
<div <div
(click)="editingReviewer = true" (click)="editingReviewer = true"
@ -143,7 +144,7 @@
(action)="toggleFullScreen()" (action)="toggleFullScreen()"
[icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'" [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
tooltip="file-preview.fullscreen" tooltip="file-preview.fullscreen"
tooltipPosition="before" tooltipPosition="below"
class="ml-2" class="ml-2"
></redaction-circle-button> ></redaction-circle-button>
@ -155,7 +156,7 @@
type="primary" type="primary"
class="ml-8" class="ml-8"
tooltip="file-preview.download-original-file" tooltip="file-preview.download-original-file"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
<redaction-circle-button <redaction-circle-button
*ngIf="userPreferenceService.areDevFeaturesEnabled" *ngIf="userPreferenceService.areDevFeaturesEnabled"
@ -164,7 +165,7 @@
type="primary" type="primary"
class="ml-8" class="ml-8"
tooltip="file-preview.new-tab-ssr" tooltip="file-preview.new-tab-ssr"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
<redaction-circle-button <redaction-circle-button
*ngIf="userPreferenceService.areDevFeaturesEnabled" *ngIf="userPreferenceService.areDevFeaturesEnabled"
@ -173,7 +174,7 @@
type="primary" type="primary"
class="ml-8" class="ml-8"
tooltip="file-preview.html-debug" tooltip="file-preview.html-debug"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
<!-- End Dev Mode Features--> <!-- End Dev Mode Features-->
@ -184,7 +185,7 @@
class="ml-8" class="ml-8"
icon="red:close" icon="red:close"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>
</div> </div>

9
apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -1,5 +1,5 @@
<section> <section *ngIf="!!appStateService.activeProject">
<div *ngIf="appStateService.activeProject" class="page-header"> <div class="page-header">
<div class="filters"> <div class="filters">
<div translate="filters.filter-by"></div> <div translate="filters.filter-by"></div>
<redaction-filter <redaction-filter
@ -53,7 +53,8 @@
icon="red:assign" icon="red:assign"
></redaction-circle-button> ></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 <redaction-circle-button
*ngIf="permissionsService.displayReanalyseBtn()" *ngIf="permissionsService.displayReanalyseBtn()"
@ -76,7 +77,7 @@
class="ml-6" class="ml-6"
[routerLink]="['/ui/projects/']" [routerLink]="['/ui/projects/']"
tooltip="common.close" tooltip="common.close"
tooltipPosition="before" tooltipPosition="below"
icon="red:close" icon="red:close"
></redaction-circle-button> ></redaction-circle-button>
</div> </div>

2
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
View File

@ -1,7 +1,7 @@
<div class="wrapper"> <div class="wrapper">
<div <div
[className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')" [className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')"
[matTooltipPosition]="'above'" [matTooltipPosition]="tooltipPosition"
[matTooltip]="displayName || ('initials-avatar.unassigned' | translate)" [matTooltip]="displayName || ('initials-avatar.unassigned' | translate)"
> >
{{ initials }} {{ initials }}

1
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
View File

@ -16,6 +16,7 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
@Input() public withName = false; @Input() public withName = false;
@Input() public showYou = false; @Input() public showYou = false;
@Input() public alwaysShowName = false; @Input() public alwaysShowName = false;
@Input() public tooltipPosition: 'below' | 'above' = 'above';
public displayName: string; public displayName: string;

37
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
View File

@ -3,9 +3,8 @@
<div class="title flex-1"> <div class="title flex-1">
{{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }} {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
</div> </div>
<mat-icon *ngIf="!collapsed" class="collapse-icon" svgIcon="red:status-collapse"></mat-icon> <redaction-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></redaction-circle-button>
<mat-icon *ngIf="collapsed" class="collapse-icon" svgIcon="red:status-expand"></mat-icon> <redaction-circle-button icon="red:close" (action)="closeDialog()"></redaction-circle-button>
<mat-icon (click)="closeDialog()" svgIcon="red:close"></mat-icon>
</div> </div>
<div [hidden]="collapsed" class="upload-download-list"> <div [hidden]="collapsed" class="upload-download-list">
<div *ngFor="let projectId of uploadService.activeProjectKeys"> <div *ngFor="let projectId of uploadService.activeProjectKeys">
@ -30,28 +29,26 @@
</div> </div>
</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> <mat-progress-bar [value]="model.progress" color="primary" mode="determinate" [class.green]="model.completed"></mat-progress-bar>
</div> </div>
<div class="actions" [class.error]="model.error" *ngIf="model.error || !model.completed"> <div class="actions" [class.error]="model.error" *ngIf="model.error || !model.completed">
<div <redaction-circle-button
(click)="uploadItem(model)"
*ngIf="model.error && !model.sizeError" *ngIf="model.error && !model.sizeError"
[matTooltip]="'upload-status.dialog.actions.re-upload' | translate" icon="red:refresh"
class="pointer" tooltip="upload-status.dialog.actions.re-upload"
matTooltipPosition="before" (action)="uploadItem(model)"
> type="dark-bg"
<mat-icon svgIcon="red:refresh"></mat-icon> tooltipPosition="before"
</div> ></redaction-circle-button>
<div <redaction-circle-button
(click)="cancelItem(model)" icon="red:close"
[matTooltip]="'upload-status.dialog.actions.cancel' | translate" tooltip="upload-status.dialog.actions.cancel"
class="pointer" (action)="cancelItem(model)"
matTooltipPosition="before" type="dark-bg"
> tooltipPosition="before"
<mat-icon svgIcon="red:close"></mat-icon> ></redaction-circle-button>
</div>
</div> </div>
</div> </div>
</div> </div>

6
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
View File

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

4
apps/red-ui/src/assets/pdftron/stylesheet.css
View File

@ -29,3 +29,7 @@
.TextPopup button[data-element='copyTextButton'] > div { .TextPopup button[data-element='copyTextButton'] > div {
color: #283241; color: #283241;
} }
.Popup .Button img {
width: 18px;
}

67
apps/red-ui/src/assets/styles/red-tooltips.scss
View File

@ -12,18 +12,18 @@
overflow: visible !important; overflow: visible !important;
text-align: center; text-align: center;
&:after { //&:after {
content: ''; // content: '';
position: absolute; // position: absolute;
left: 50%; // left: 50%;
margin-left: -5px; // margin-left: -5px;
width: 0; // width: 0;
height: 0; // height: 0;
z-index: 3000; // z-index: 3000;
border-left: solid 5px transparent; // border-left: solid 5px transparent;
border-right: solid 5px transparent; // border-right: solid 5px transparent;
border-top: solid 6px $accent; // border-top: solid 6px $accent;
} //}
&.small { &.small {
max-width: 160px; max-width: 160px;
@ -31,7 +31,6 @@
&.warn { &.warn {
background-color: $yellow-2; background-color: $yellow-2;
text-align: initial;
color: $accent; color: $accent;
&:after { &:after {
@ -39,24 +38,24 @@
} }
} }
} }
//
.mat-tooltip[style*='transform-origin: center top']:after { //.mat-tooltip[style*='transform-origin: center top']:after {
top: -6px; // top: -6px;
transform: rotate(180deg); // transform: rotate(180deg);
} //}
//
.mat-tooltip[style*='transform-origin: center bottom']:after { //.mat-tooltip[style*='transform-origin: center bottom']:after {
top: 100%; // top: 100%;
} //}
//
.mat-tooltip[style*='transform-origin: right center']:after { //.mat-tooltip[style*='transform-origin: right center']:after {
top: 50%; // top: 50%;
left: 100%; // left: 100%;
transform: rotate(-90deg) translateY(3px) translateX(3px); // transform: rotate(-90deg) translateY(3px) translateX(3px);
} //}
//
.mat-tooltip[style*='transform-origin: left center']:after { //.mat-tooltip[style*='transform-origin: left center']:after {
top: 50%; // top: 50%;
left: 0; // left: 0;
transform: rotate(90deg) translateY(3px) translateX(-3px); // transform: rotate(90deg) translateY(3px) translateX(-3px);
} //}