diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts index 0d6b53cd1..74df931e8 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts @@ -9,8 +9,7 @@ import { UI_ROOT_PATH_FN } from '@common-ui/utils'; @Injectable() export class LayersService { readonly #convertPath = inject(UI_ROOT_PATH_FN); - readonly #enableIcon = this.#convertPath('/assets/icons/general/pdftron-action-disable-layers.svg'); - readonly #disableIcon = this.#convertPath('/assets/icons/general/pdftron-action-enable-layers.svg'); + readonly #icon = this.#convertPath('/assets/icons/general/pdftron-action-layers.svg'); readonly active = signal(false); constructor( @@ -31,8 +30,7 @@ export class LayersService { } get toggleLayersBtnIcon(): string { - const tooltipsDisabled = this.active(); - return tooltipsDisabled ? this.#enableIcon : this.#disableIcon; + return this.#icon; } resetLayers() { @@ -47,14 +45,25 @@ export class LayersService { } }); + this.updateIconState(); + this._documentViewer.document.setLayersArray(layers); this._documentViewer.refreshAndUpdateView(); } + updateIconState() { + const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_LAYERS}]`); + if (!element) return; + if (this.active()) { + element.classList.add('active'); + } else { + element.classList.remove('active'); + } + } + #updateButton() { this._pdf.instance?.UI.updateElement(HeaderElements.TOGGLE_LAYERS, { title: this.toggleLayersBtnTitle, - img: this.toggleLayersBtnIcon, }); } } 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 5c35cc60c..1c6ebb8e2 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 @@ -322,6 +322,7 @@ export class ViewerHeaderService { img: this.#convertPath('/assets/icons/general/pdftron-cursor.svg'), }); this._tooltipsService.updateIconState(); + this._layersService.updateIconState(); const closeCompareButton = this._pdf.instance.UI.iframeWindow.document.querySelector( `[data-element=${HeaderElements.CLOSE_COMPARE_BUTTON}]`, ); @@ -331,6 +332,7 @@ export class ViewerHeaderService { disableLoadAllAnnotations(): void { this._pdf.instance.UI.updateElement(HeaderElements.LOAD_ALL_ANNOTATIONS, { img: this.#convertPath('/assets/icons/general/pdftron-action-load-all-annotations-disabled.svg'), + title: this._translateService.instant('viewer-header.all-annotations-loaded'), onClick: undefined, }); } diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index cff65457c..e72e15ab4 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -2488,6 +2488,7 @@ "workflow": "Arbeitsablauf" }, "viewer-header": { + "all-annotations-loaded": "", "load-all-annotations": "Alle Annotationen laden" }, "watermark-screen": { diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index f2fd58933..3fead56ea 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -2488,6 +2488,7 @@ "workflow": "Workflow" }, "viewer-header": { + "all-annotations-loaded": "All annotations loaded", "load-all-annotations": "Load all annotations" }, "watermark-screen": { diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index c4f8c2178..6cfcc95fe 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -2488,6 +2488,7 @@ "workflow": "Arbeitsablauf" }, "viewer-header": { + "all-annotations-loaded": "", "load-all-annotations": "Load all annotations" }, "watermark-screen": { diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index c4b77855c..975c81d0b 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -2488,6 +2488,7 @@ "workflow": "Workflow" }, "viewer-header": { + "all-annotations-loaded": "All annotations loaded", "load-all-annotations": "Load all annotations" }, "watermark-screen": { diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-disable-layers.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-disable-layers.svg deleted file mode 100644 index 131a98afd..000000000 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-disable-layers.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - 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 deleted file mode 100644 index 7e67cf9f7..000000000 --- a/apps/red-ui/src/assets/icons/general/pdftron-action-enable-layers.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/pdftron-action-layers.svg b/apps/red-ui/src/assets/icons/general/pdftron-action-layers.svg new file mode 100644 index 000000000..5e77e3e6c --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/pdftron-action-layers.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css index a6df83f25..63d1e73a7 100644 --- a/apps/red-ui/src/assets/pdftron/stylesheet.css +++ b/apps/red-ui/src/assets/pdftron/stylesheet.css @@ -48,7 +48,7 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g cursor: default; } -.HeaderItems .Button:not(.active):not([data-element='TOGGLE_LAYERS']) > img { +.HeaderItems .Button:not(.active) > img { filter: brightness(0) saturate(100%) invert(60%) sepia(11%) saturate(294%) hue-rotate(169deg) brightness(91%) contrast(85%); }