helpmode update for breadcrumbs and filter for status

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -4,7 +4,7 @@
     <div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
 
     <div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
-        <redaction-breadcrumbs iqserHelpMode="navigate-in-breadcrumbs"></redaction-breadcrumbs>
+        <redaction-breadcrumbs></redaction-breadcrumbs>
     </div>
 
     <div class="logo">

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="breadcrumbsService.breadcrumbs$ | async as breadcrumbs">
+<div *ngIf="breadcrumbsService.breadcrumbs$ | async as breadcrumbs" class="breadcrumbs" iqserHelpMode="navigate-in-breadcrumbs">
     <a *ngIf="breadcrumbs.length === 0; else items" class="breadcrumb back" redactionNavigateLastDossiersScreen>
         <mat-icon svgIcon="iqser:expand"></mat-icon>
         {{ 'top-bar.navigation-items.back' | translate }}
@@ -18,4 +18,4 @@
             </a>
         </ng-container>
     </ng-template>
-</ng-container>
+</div>

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html

@@ -43,6 +43,7 @@
                 [strokeWidth]="15"
                 [subtitle]="'dossier-overview.dossier-details.charts.documents-in-dossier' | translate"
                 direction="row"
+                helpModeKey="filter-for-status"
             ></redaction-simple-doughnut-chart>
         </div>
 

apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html

@@ -22,27 +22,25 @@
         <div class="mt-5">{{ subtitle }}</div>
     </div>
 
-    <div class="breakdown-container">
-        <div iqserHelpMode="filter-for-status">
-            <div
-                (click)="val.key && selectValue(val.key)"
-                *ngFor="let val of config"
-                [class.active]="filterChecked$(val.key) | async"
-                [class.filter-disabled]="!val.key || !filtersEnabled"
+    <div class="breakdown-container" [iqserHelpMode]="helpModeKey">
+        <div
+            (click)="val.key && selectValue(val.key)"
+            *ngFor="let val of config"
+            [class.active]="filterChecked$(val.key) | async"
+            [class.filter-disabled]="!val.key || !filtersEnabled"
+        >
+            <iqser-status-bar
+                [configs]="[
+                    {
+                        length: val.value,
+                        color: val.color,
+                        label: getLabel(val),
+                        cssClass: val.color === 'PROCESSING' || val.color === 'OCR_PROCESSING' ? 'loading' : ''
+                    }
+                ]"
+                [small]="true"
             >
-                <iqser-status-bar
-                    [configs]="[
-                        {
-                            length: val.value,
-                            color: val.color,
-                            label: getLabel(val),
-                            cssClass: val.color === 'PROCESSING' || val.color === 'OCR_PROCESSING' ? 'loading' : ''
-                        }
-                    ]"
-                    [small]="true"
-                >
-                </iqser-status-bar>
-            </div>
+            </iqser-status-bar>
         </div>
     </div>
 </div>

apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss

@@ -41,31 +41,27 @@
 .breakdown-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     margin-left: -8px;
 
     > div {
-        width: fit-content;
+        border-radius: 4px;
+        padding: 3px 8px;
 
-        > div {
-            border-radius: 4px;
-            padding: 3px 8px;
+        &:not(:last-child) {
+            margin-bottom: 8px;
+        }
 
-            &:not(:last-child) {
-                margin-bottom: 8px;
-            }
+        &:not(.filter-disabled) {
+            cursor: pointer;
+        }
 
-            &:not(.filter-disabled) {
-                cursor: pointer;
-            }
+        &:hover:not(.active):not(.filter-disabled) {
+            background-color: variables.$grey-6;
+        }
 
-            &:hover:not(.active):not(.filter-disabled) {
-                background-color: variables.$grey-6;
-            }
-
-            &.active {
-                background-color: rgba(variables.$primary, 0.1);
-            }
+        &.active {
+            background-color: rgba(variables.$primary, 0.1);
         }
     }
 }

apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts

@@ -26,6 +26,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
     @Input() totalType: 'sum' | 'count' = 'sum';
     @Input() counterText: string;
     @Input() filterKey = 'statusFilters';
+    @Input() helpModeKey: 'filter-for-status';
     filtersEnabled: boolean;
 
     chartData: any[] = [];

libs/common-ui

@@ -1 +1 @@
-Subproject commit 333bd099140f20deab75278bd02d20d3fdddae88
+Subproject commit 53c3a6b30494f063ca323cb21ffff072c3204db2