Merge branch 'RED-10397' into 'master'

RED-10397: changed the active state for redacted btn; hid rectangle btn.

See merge request redactmanager/red-ui!697

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]);
             }
         });

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<boolean>;
     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<boolean>(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');
+        }
+    }
 }

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 {

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);
             }
 

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;
     }
 </style>