From 9f399c3f0de900c16b9564449cb16f41febee4c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 10 Dec 2021 16:21:28 +0200 Subject: [PATCH] RED-2658: toggle annotation tooltips --- .../pdf-viewer/pdf-viewer.component.ts | 38 +++++++++++++++++-- .../app/services/user-preference.service.ts | 25 ++++++++++-- apps/red-ui/src/assets/i18n/en.json | 3 +- .../pdftron-action-toggle-tooltips.svg | 9 +++++ 4 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/pdftron-action-toggle-tooltips.svg diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index 82fd4c695..b25e6535a 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -48,6 +48,8 @@ const dataElements = { ADD_FALSE_POSITIVE: 'add-false-positive', SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton', RECTANGLE_TOOL_DIVIDER: 'rectangleToolDivider', + TOGGLE_TOOLTIPS: 'toggle-tooltips', + TOGGLE_TOOLTIPS_DIVIDER: 'toggleTooltipsDivider', ANNOTATION_POPUP: 'annotationPopup', COMPARE_BUTTON: 'compareButton', CLOSE_COMPARE_BUTTON: 'closeCompareButton', @@ -98,6 +100,12 @@ export class PdfViewerComponent implements OnInit, OnChanges { readonly multiSelectService: MultiSelectService, ) {} + private get _toggleTooltipsBtnTitle(): string { + return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), { + active: this._userPreferenceService.getFilePreviewTooltipsPreference(), + }); + } + async ngOnInit() { this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); await this.loadViewer(); @@ -212,7 +220,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.utils = new PdfViewerUtils(this.instance, this.viewModeService); this._setSelectionMode(); - this._disableElements(); + this._configureElements(); this.utils.disableHotkeys(); this._configureTextPopup(); @@ -322,7 +330,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { } } - private _disableElements() { + private _configureElements() { this.instance.UI.disableElements([ 'pageNavOverlay', 'menuButton', @@ -347,6 +355,24 @@ export class PdfViewerComponent implements OnInit, OnChanges { ]); const headerItems = [ + { + type: 'divider', + dataElement: dataElements.TOGGLE_TOOLTIPS_DIVIDER, + }, + { + type: 'actionButton', + element: 'tooltips', + dataElement: dataElements.TOGGLE_TOOLTIPS, + img: this._convertPath('/assets/icons/general/pdftron-action-toggle-tooltips.svg'), + title: this._toggleTooltipsBtnTitle, + onClick: async () => { + await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); + this._updateTooltipsVisibility(); + this.instance.UI.updateElement(dataElements.TOGGLE_TOOLTIPS, { + title: this._toggleTooltipsBtnTitle, + }); + }, + }, { type: 'divider', dataElement: dataElements.RECTANGLE_TOOL_DIVIDER, @@ -392,7 +418,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { }, ]; - originalHeaderItems.splice(11, 0, ...devHeaderItems); + originalHeaderItems.splice(9, 0, ...devHeaderItems); } }); @@ -626,6 +652,12 @@ export class PdfViewerComponent implements OnInit, OnChanges { this._firstPageChange = true; this.viewerReady.emit(this.instance); this._setInitialDisplayMode(); + this._updateTooltipsVisibility(); }); } + + private _updateTooltipsVisibility(): void { + const current = this._userPreferenceService.getFilePreviewTooltipsPreference(); + this.instance.UI.setAnnotationContentOverlayHandler(() => (current ? undefined : false)); + } } diff --git a/apps/red-ui/src/app/services/user-preference.service.ts b/apps/red-ui/src/app/services/user-preference.service.ts index 9f279aaf4..9ce0e6dc5 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -25,10 +25,7 @@ export class UserPreferenceService extends GenericService { getLastOpenedFileForDossier(dossierId: string): string { const key = `Dossier-Recent-${dossierId}`; - if (this.userAttributes[key]?.length > 0) { - return this.userAttributes[key][0]; - } - return ''; + return this._getAttribute(key); } async saveLastOpenedFileForDossier(dossierId: string, fileId: string): Promise { @@ -37,6 +34,19 @@ export class UserPreferenceService extends GenericService { await this.savePreferences([fileId], key).toPromise(); } + getFilePreviewTooltipsPreference(): boolean { + const key = 'File-Preview-Tooltips'; + return this._getAttribute(key, 'false') === 'true'; + } + + async toggleFilePreviewTooltipsPreference(): Promise { + const key = 'File-Preview-Tooltips'; + const currentValue = this.getFilePreviewTooltipsPreference(); + const nextValue = [(!currentValue).toString()]; + this.userAttributes[key] = nextValue; + await this.savePreferences(nextValue, key).toPromise(); + } + toggleDevFeatures(): void { sessionStorage.setItem('redaction.enable-dev-features', `${!this.areDevFeaturesEnabled}`); window.location.reload(); @@ -54,4 +64,11 @@ export class UserPreferenceService extends GenericService { savePreferences(@RequiredParam() body: List, @RequiredParam() key: string) { return this._put(body, `${this._defaultModelPath}/${key}`); } + + private _getAttribute(key: string, defaultValue = ''): string { + if (this.userAttributes[key]?.length > 0) { + return this.userAttributes[key][0]; + } + return defaultValue; + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 3e4cc126b..ce5e8969d 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1360,7 +1360,8 @@ "actions": { "search": "Search for selection" } - } + }, + "toggle-tooltips": "{active, select, true{Disable} false{Enable} other{}} annotation tooltips" }, "pending-changes-guard": "WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.", "readonly": "Read only", diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-toggle-tooltips.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-toggle-tooltips.svg new file mode 100644 index 000000000..b565f53ba --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/pdftron-action-toggle-tooltips.svg @@ -0,0 +1,9 @@ + + + + + +