From 668dff462028396f5f63fa048b8fbfaa5783200b Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Thu, 30 May 2024 17:14:47 +0300 Subject: [PATCH] RED-9191: toggle icons design fine-tuning. --- .../pdf-viewer/services/tooltips.service.ts | 27 ++++++------ .../services/viewer-header.service.ts | 43 +++++++++++-------- .../general/pdftron-action-close-compare.svg | 18 -------- .../icons/general/pdftron-action-compare.svg | 2 +- .../general/pdftron-action-disable-layers.svg | 27 +++++++----- .../pdftron-action-disable-tooltips.svg | 10 ----- .../general/pdftron-action-enable-layers.svg | 38 +++++++++------- .../pdftron-action-enable-tooltips.svg | 2 +- .../assets/icons/general/pdftron-cursor.svg | 2 +- .../icons/general/pdftron-rectangle.svg | 2 +- apps/red-ui/src/assets/pdftron/stylesheet.css | 8 ++++ 11 files changed, 89 insertions(+), 90 deletions(-) delete mode 100644 apps/red-ui/src/assets/icons/general/pdftron-action-close-compare.svg delete mode 100644 apps/red-ui/src/assets/icons/general/pdftron-action-disable-tooltips.svg diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts index e29c09630..0282bbf72 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts @@ -1,18 +1,13 @@ -import { inject, Injectable } from '@angular/core'; +import { Injectable } from '@angular/core'; import { UserPreferenceService } from '@users/user-preference.service'; -import { HeaderElements } from '../../file-preview/utils/constants'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { TranslateService } from '@ngx-translate/core'; import { PdfViewer } from './pdf-viewer.service'; import { REDDocumentViewer } from './document-viewer.service'; -import { UI_ROOT_PATH_FN } from '@common-ui/utils'; +import { HeaderElements } from '../../file-preview/utils/constants'; @Injectable() export class TooltipsService { - readonly #convertPath = inject(UI_ROOT_PATH_FN); - readonly #enableIcon = this.#convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'); - readonly #disableIcon = this.#convertPath('/assets/icons/general/pdftron-action-disable-tooltips.svg'); - constructor( private readonly _pdf: PdfViewer, private readonly _documentViewer: REDDocumentViewer, @@ -26,17 +21,23 @@ export class TooltipsService { }); } - get toggleTooltipsBtnIcon(): string { - const tooltipsDisabled = this._userPreferenceService.getFilePreviewTooltipsPreference(); - return tooltipsDisabled ? this.#enableIcon : this.#disableIcon; - } - async toggleTooltips(): Promise { await this._userPreferenceService.toggleFilePreviewTooltipsPreference(); this._documentViewer.updateTooltipsVisibility(); + + this.updateIconState(); + this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, { title: this.toggleTooltipsBtnTitle, - img: this.toggleTooltipsBtnIcon, }); } + + updateIconState() { + const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_TOOLTIPS}]`); + if (this._userPreferenceService.getFilePreviewTooltipsPreference()) { + element.classList.add('active'); + } else { + element.classList.remove('active'); + } + } } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts index 78b7dee74..1a97af173 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts @@ -100,7 +100,7 @@ export class ViewerHeaderService { element: HeaderElements.TOGGLE_TOOLTIPS, dataElement: HeaderElements.TOGGLE_TOOLTIPS, title: this._tooltipsService.toggleTooltipsBtnTitle, - img: this._tooltipsService.toggleTooltipsBtnIcon, + img: this.#convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'), onClick: () => this._ngZone.run(() => this._tooltipsService.toggleTooltips()), }; } @@ -137,17 +137,6 @@ export class ViewerHeaderService { }; } - get #closeCompare(): IHeaderElement { - return { - type: 'actionButton', - element: HeaderElements.CLOSE_COMPARE_BUTTON, - dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, - img: this.#convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), - title: 'Leave Compare Mode', - onClick: () => this._ngZone.run(() => this.#closeCompareMode()), - }; - } - get #rotateLeft(): IHeaderElement { return { type: 'actionButton', @@ -238,6 +227,17 @@ export class ViewerHeaderService { }; } + get #closeCompare(): IHeaderElement { + return { + type: 'actionButton', + element: HeaderElements.CLOSE_COMPARE_BUTTON, + dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, + img: this.#convertPath('/assets/icons/general/pdftron-action-compare.svg'), + title: 'Leave Compare Mode', + onClick: () => this._ngZone.run(() => this.#closeCompareMode()), + }; + } + get #toggleLoadAnnotations$() { return merge(this.expandedPanelEvent$, this._helpModeService.isHelpModeActive$).pipe( tap(enable => @@ -281,7 +281,6 @@ export class ViewerHeaderService { [HeaderElements.TOGGLE_TOOLTIPS], [HeaderElements.TOGGLE_LAYERS], [HeaderElements.TOGGLE_READABLE_REDACTIONS], - [HeaderElements.SHAPE_TOOL_GROUP_BUTTON], [ HeaderElements.ROTATE_LEFT_BUTTON, HeaderElements.ROTATE_RIGHT_BUTTON, @@ -290,18 +289,19 @@ export class ViewerHeaderService { ], ]; - const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS); - let startButtons = 10; - let deleteCount = 14; - + header.get('selectToolButton').insertAfter(this.#buttons.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON)); groups.forEach(group => this.#pushGroup(enabledItems, group)); + const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS); + let startButtons = 11; + let deleteCount = 15; + if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) { if (!header.getItems().includes(loadAllAnnotationsButton)) { header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton); } - startButtons = 11; - deleteCount = 15; + startButtons = 12; + deleteCount = 16; } else { header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS); } @@ -311,6 +311,11 @@ export class ViewerHeaderService { this._pdf.instance?.UI.updateElement('selectToolButton', { img: this.#convertPath('/assets/icons/general/pdftron-cursor.svg'), }); + this._tooltipsService.updateIconState(); + const closeCompareButton = this._pdf.instance.UI.iframeWindow.document.querySelector( + `[data-element=${HeaderElements.CLOSE_COMPARE_BUTTON}]`, + ); + closeCompareButton?.classList.add('active'); } disableLoadAllAnnotations(): void { diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-close-compare.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-close-compare.svg deleted file mode 100644 index 82ddb11d8..000000000 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-close-compare.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-compare.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-compare.svg index 6765155b5..eebcf0634 100644 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-compare.svg +++ b/apps/red-ui/src/assets/icons/general/pdftron-action-compare.svg @@ -2,7 +2,7 @@ - + - - - - + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-disable-tooltips.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-disable-tooltips.svg deleted file mode 100644 index 2bd50bda8..000000000 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-disable-tooltips.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - disable-tooltip - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-enable-layers.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-enable-layers.svg index 779e9a93d..7e67cf9f7 100644 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-enable-layers.svg +++ b/apps/red-ui/src/assets/icons/general/pdftron-action-enable-layers.svg @@ -1,15 +1,23 @@ - - - - - - - + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-enable-tooltips.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-enable-tooltips.svg index 468a0936e..b2db10b9c 100644 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-enable-tooltips.svg +++ b/apps/red-ui/src/assets/icons/general/pdftron-action-enable-tooltips.svg @@ -4,7 +4,7 @@ - + diff --git a/apps/red-ui/src/assets/icons/general/pdftron-cursor.svg b/apps/red-ui/src/assets/icons/general/pdftron-cursor.svg index 1d74faca4..8f0b33281 100644 --- a/apps/red-ui/src/assets/icons/general/pdftron-cursor.svg +++ b/apps/red-ui/src/assets/icons/general/pdftron-cursor.svg @@ -5,7 +5,7 @@ - + diff --git a/apps/red-ui/src/assets/icons/general/pdftron-rectangle.svg b/apps/red-ui/src/assets/icons/general/pdftron-rectangle.svg index 274fec468..e93409203 100644 --- a/apps/red-ui/src/assets/icons/general/pdftron-rectangle.svg +++ b/apps/red-ui/src/assets/icons/general/pdftron-rectangle.svg @@ -1,6 +1,6 @@ - + diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css index f441d75fc..e62137e5a 100644 --- a/apps/red-ui/src/assets/pdftron/stylesheet.css +++ b/apps/red-ui/src/assets/pdftron/stylesheet.css @@ -47,3 +47,11 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g opacity: 0.5; cursor: default; } + +.HeaderItems .Button:not(.active):not([data-element='TOGGLE_LAYERS']) > img { + filter: brightness(0) saturate(100%) invert(60%) sepia(11%) saturate(294%) hue-rotate(169deg) brightness(91%) contrast(85%); +} + +.HeaderItems .Button.active > img { + filter: invert(19%) sepia(100%) saturate(791%) hue-rotate(175deg) brightness(89%) contrast(85%); +}