RED-3721: Radio buttons with details

apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.html

@@ -17,13 +17,7 @@
                     ></div>
                 </div>
 
-                <div class="iqser-input-group">
-                    <mat-radio-group formControlName="option">
-                        <mat-radio-button *ngFor="let option of options" [value]="option" color="primary">
-                            {{ translations[option] | translate }}
-                        </mat-radio-button>
-                    </mat-radio-group>
-                </div>
+                <iqser-details-radio [options]="options" [displayInRow]="true" formControlName="option" class="mt-25"></iqser-details-radio>
             </ng-container>
 
             <ng-container *ngIf="!data.color">

apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts

@@ -2,11 +2,12 @@ import { Component, Inject, Injector } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TextHighlightOperation, TextHighlightOperationPages } from '@red/domain';
-import { BaseDialogComponent, LoadingService } from '@iqser/common-ui';
+import { BaseDialogComponent, DetailsRadioOption, LoadingService } from '@iqser/common-ui';
 import { TextHighlightService } from '@services/files/text-highlight.service';
 import { firstValueFrom } from 'rxjs';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { highlightsTranslations } from '@translations/highlights-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export interface HighlightActionData {
     readonly operation: TextHighlightOperation;
@@ -23,7 +24,19 @@ export interface HighlightActionData {
 })
 export class HighlightActionDialogComponent extends BaseDialogComponent {
     readonly translations = highlightsTranslations;
-    options = [TextHighlightOperationPages.THIS_PAGE, TextHighlightOperationPages.ALL_PAGES];
+
+    readonly options: DetailsRadioOption<TextHighlightOperationPages>[] = [
+        {
+            label: _('highlight-action-dialog.form.options.this-page.label'),
+            value: TextHighlightOperationPages.THIS_PAGE,
+            description: _('highlight-action-dialog.form.options.this-page.description'),
+        },
+        {
+            label: _('highlight-action-dialog.form.options.all-pages.label'),
+            value: TextHighlightOperationPages.ALL_PAGES,
+            description: _('highlight-action-dialog.form.options.all-pages.description'),
+        },
+    ];
 
     constructor(
         private readonly _formBuilder: UntypedFormBuilder,
@@ -44,7 +57,7 @@ export class HighlightActionDialogComponent extends BaseDialogComponent {
 
         // !color means we are in bulk select mode, so we don't need to apply additional page filters
         const filteredHighlights =
-            !color || this.form.get('option').value === TextHighlightOperationPages.ALL_PAGES
+            !color || this.form.get('option').value.value === TextHighlightOperationPages.ALL_PAGES
                 ? highlights
                 : highlights.filter(h => h.pageNumber === pageNumber);
 
@@ -61,7 +74,7 @@ export class HighlightActionDialogComponent extends BaseDialogComponent {
         if (this.data.color) {
             return this._formBuilder.group({
                 color: [{ value: this.data.color, disabled: true }, Validators.required],
-                option: [null, Validators.required],
+                option: [this.options[0], Validators.required],
             });
         } else {
             return this._formBuilder.group({

apps/red-ui/src/assets/i18n/de.json

@@ -1496,6 +1496,16 @@
     "form": {
       "color": {
         "label": ""
+      },
+      "options": {
+        "all-pages": {
+          "description": "",
+          "label": ""
+        },
+        "this-page": {
+          "description": "",
+          "label": ""
+        }
       }
     },
     "remove": {
@@ -1524,7 +1534,6 @@
       "error": "",
       "success": ""
     },
-    "only-for-specific-pages": "",
     "title": "",
     "upload-area-text": ""
   },

apps/red-ui/src/assets/i18n/en.json

@@ -1496,6 +1496,16 @@
     "form": {
       "color": {
         "label": "Highlight HEX Color"
+      },
+      "options": {
+        "all-pages": {
+          "description": "The highlights in the selected HEX color will be removed on all pages of the document.",
+          "label": "Remove on all pages"
+        },
+        "this-page": {
+          "description": "The highlights in the selected HEX color will be removed only on the current page in view.",
+          "label": "Remove only on this page"
+        }
       }
     },
     "remove": {
@@ -1524,7 +1534,6 @@
       "error": "Failed to import redactions! {error}",
       "success": "Redactions has been imported!"
     },
-    "only-for-specific-pages": "Import only for page(s)",
     "title": "Import document with redactions",
     "upload-area-text": "Click or drag & drop anywhere on this area..."
   },

libs/common-ui

@@ -1 +1 @@
-Subproject commit 47e1cac50a7c002c1045962cc71771b755ab4baf
+Subproject commit f1934abc2b259a6e89303e95fe70a54471d2401d