From 7e764cdf62148082ab3aefed179de10b1c882f83 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Wed, 13 Nov 2024 13:35:33 +0200 Subject: [PATCH] RED-10397: changed the active state for redacted btn; hid rectangle btn. --- .../services/pdf-proxy.service.ts | 2 ++ .../services/readable-redactions.service.ts | 21 ++++++++++++++----- .../pdf-viewer/services/tooltips.service.ts | 1 + .../services/viewer-header.service.ts | 20 +++++++++++------- .../icons/general/redaction-preview.svg | 2 +- 5 files changed, 33 insertions(+), 13 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts index c0804337c..5bad3d053 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts @@ -117,8 +117,10 @@ export class PdfProxyService { effect(() => { if (this._viewModeService.isRedacted()) { + this._viewerHeaderService.disable([HeaderElements.SHAPE_TOOL_GROUP_BUTTON]); this._viewerHeaderService.enable([HeaderElements.TOGGLE_READABLE_REDACTIONS]); } else { + this._viewerHeaderService.enable([HeaderElements.SHAPE_TOOL_GROUP_BUTTON]); this._viewerHeaderService.disable([HeaderElements.TOGGLE_READABLE_REDACTIONS]); } }); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts index 5fa0bcd4f..515c4bf26 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts @@ -13,8 +13,7 @@ import Annotation = Core.Annotations.Annotation; export class ReadableRedactionsService { readonly active$: Observable; readonly #convertPath = inject(UI_ROOT_PATH_FN); - readonly #enableIcon = this.#convertPath('/assets/icons/general/redaction-preview.svg'); - readonly #disableIcon = this.#convertPath('/assets/icons/general/redaction-final.svg'); + readonly #icon = this.#convertPath('/assets/icons/general/redaction-preview.svg'); readonly #active$ = new BehaviorSubject(true); constructor( @@ -29,8 +28,8 @@ export class ReadableRedactionsService { return this.#active$.getValue(); } - get toggleReadableRedactionsBtnIcon(): string { - return this.active ? this.#enableIcon : this.#disableIcon; + get icon() { + return this.#icon; } toggleReadableRedactions(): void { @@ -79,11 +78,23 @@ export class ReadableRedactionsService { } updateState() { + this.#updateIconState(); this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_READABLE_REDACTIONS, { title: this._translateService.instant(_('pdf-viewer.header.toggle-readable-redactions'), { active: this.active, }), - img: this.toggleReadableRedactionsBtnIcon, }); } + + #updateIconState() { + const element = this._pdf.instance.UI.iframeWindow.document.querySelector( + `[data-element=${HeaderElements.TOGGLE_READABLE_REDACTIONS}]`, + ); + if (!element) return; + if (!this.active) { + element.classList.add('active'); + } else { + element.classList.remove('active'); + } + } } 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 e3a17eeb9..d7a3e00bc 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 @@ -24,6 +24,7 @@ export class TooltipsService { updateIconState() { const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_TOOLTIPS}]`); + if (!element) return; if (this._userPreferenceService.getFilePreviewTooltipsPreference()) { element.classList.add('active'); } else { 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 7c7a57eb9..41694ec6f 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 @@ -121,7 +121,7 @@ export class ViewerHeaderService { type: 'actionButton', element: HeaderElements.TOGGLE_READABLE_REDACTIONS, dataElement: HeaderElements.TOGGLE_READABLE_REDACTIONS, - img: this._readableRedactionsService.toggleReadableRedactionsBtnIcon, + img: this._readableRedactionsService.icon, onClick: () => this._ngZone.run(() => this._readableRedactionsService.toggleReadableRedactions()), }; } @@ -289,20 +289,26 @@ export class ViewerHeaderService { ], ]; - header.get('selectToolButton').insertAfter(this.#buttons.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON)); + const shouldHideRectangleButton = this.#isEnabled(HeaderElements.SHAPE_TOOL_GROUP_BUTTON) ? 0 : 1; + if (!shouldHideRectangleButton) { + header.get('selectToolButton').insertAfter(this.#buttons.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON)); + } else if (header.getItems().includes(this.#buttons.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON))) { + header.get(HeaderElements.SHAPE_TOOL_GROUP_BUTTON).delete(); + } + groups.forEach(group => this.#pushGroup(enabledItems, group)); const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS); - let startButtons = 11 - documineButtons; - let deleteCount = 15 - documineButtons; + let startButtons = 11 - documineButtons - shouldHideRectangleButton; + let deleteCount = 15 - documineButtons - shouldHideRectangleButton; if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) { if (!header.getItems().includes(loadAllAnnotationsButton)) { header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton); } - startButtons = 12 - documineButtons; - deleteCount = 16 - documineButtons; - } else { + startButtons = 12 - documineButtons - shouldHideRectangleButton; + deleteCount = 16 - documineButtons - shouldHideRectangleButton; + } else if (header.getItems().includes(loadAllAnnotationsButton)) { header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS); } diff --git a/apps/red-ui/src/assets/icons/general/redaction-preview.svg b/apps/red-ui/src/assets/icons/general/redaction-preview.svg index e84ae4550..f5afa6030 100644 --- a/apps/red-ui/src/assets/icons/general/redaction-preview.svg +++ b/apps/red-ui/src/assets/icons/general/redaction-preview.svg @@ -6,7 +6,7 @@ #redaction-preview-svg.st0 { fill-rule: evenodd; clip-rule: evenodd; - fill: #868E96; + fill: #000; }