Translation rework: Empty state, icon button

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

@@ -27,7 +27,11 @@
                 <div class="scrollbar-placeholder"></div>
             </div>
 
-            <redaction-empty-state *ngIf="noData" icon="red:download" screen="downloads-list"></redaction-empty-state>
+            <redaction-empty-state
+                *ngIf="noData"
+                [text]="'downloads-list.no-data.title' | translate"
+                icon="red:download"
+            ></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <!--      Table lines -->

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -37,30 +37,18 @@
     </div>
 
     <div class="dialog-actions">
-        <button
+        <button [disabled]="userForm.invalid || !changed" color="primary" mat-flat-button type="submit">
-            [disabled]="userForm.invalid || !changed"
+            {{ (user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate }}
-            color="primary"
-            mat-flat-button
-            type="submit"
-        >
-            {{
-                (user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save')
-                    | translate
-            }}
         </button>
 
         <redaction-icon-button
             (action)="delete()"
             *ngIf="user"
+            [label]="'add-edit-user.actions.delete' | translate"
             icon="red:trash"
-            text="add-edit-user.actions.delete"
             type="show-bg"
         ></redaction-icon-button>
 
-        <div
+        <div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
-            class="all-caps-label cancel"
-            mat-dialog-close
-            translate="add-edit-user.actions.cancel"
-        ></div>
     </div>
 </form>

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html

@@ -80,7 +80,11 @@
     <div class="scrollbar-placeholder"></div>
 </div>
 
-<redaction-empty-state *ngIf="noData" icon="red:attribute" screen="file-attributes-csv-import"></redaction-empty-state>
+<redaction-empty-state
+    *ngIf="noData"
+    [text]="'file-attributes-csv-import.no-data.title' | translate"
+    icon="red:attribute"
+></redaction-empty-state>
 
 <cdk-virtual-scroll-viewport [itemSize]="50" redactionHasScrollbar>
     <!--      Table lines -->

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -107,7 +107,11 @@
                     <div class="scrollbar-placeholder"></div>
                 </div>
 
-                <redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state>
+                <redaction-empty-state
+                    *ngIf="!logs?.totalHits"
+                    [text]="'audit-screen.no-data.title' | translate"
+                    icon="red:document"
+                ></redaction-empty-state>
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                     <div *cdkVirtualFor="let log of logs?.data" class="table-item">

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -51,8 +51,8 @@
                         <redaction-icon-button
                             (action)="openAddEditDictionaryDialog()"
                             *ngIf="permissionsService.isAdmin()"
+                            [label]="'dictionary-listing.add-new' | translate"
                             icon="red:plus"
-                            text="dictionary-listing.add-new"
                             type="primary"
                         ></redaction-icon-button>
                     </div>
@@ -90,15 +90,15 @@
             <redaction-empty-state
                 (action)="openAddEditDictionaryDialog()"
                 *ngIf="!allEntities.length"
+                [buttonLabel]="'dictionary-listing.no-data.action' | translate"
                 [showButton]="permissionsService.isAdmin()"
+                [text]="'dictionary-listing.no-data.title' | translate"
                 icon="red:dictionary"
-                screen="dictionary-listing"
             ></redaction-empty-state>
 
             <redaction-empty-state
                 *ngIf="allEntities.length && (displayedEntities$ | async)?.length === 0"
-                screen="dictionary-listing"
+                [text]="'dictionary-listing.no-match.title' | translate"
-                type="no-match"
             ></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html

@@ -22,39 +22,21 @@
         <div class="red-content-inner">
             <div class="content-container">
                 <div class="content-container-content">
-                    <form
+                    <form (keyup)="formChanged()" *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
-                        (keyup)="formChanged()"
+                        <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />
-                        *ngIf="digitalSignatureForm"
-                        [formGroup]="digitalSignatureForm"
-                        autocomplete="off"
-                    >
-                        <input
-                            #fileInput
-                            (change)="fileChanged($event, fileInput)"
-                            class="file-upload-input"
-                            hidden
-                            type="file"
-                        />
 
                         <redaction-empty-state
                             (action)="fileInput.click()"
                             *ngIf="!hasDigitalSignatureSet"
+                            [buttonLabel]="'digital-signature-screen.no-data.action' | translate"
+                            [text]="'digital-signature-screen.no-data.title' | translate"
                             buttonIcon="red:upload"
-                            screen="digital-signature-screen"
                         ></redaction-empty-state>
 
-                        <div
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
-                            [class.hidden]="!hasDigitalSignatureSet"
+                            <label translate="digital-signature-screen.certificate-name.label"></label>
-                            class="red-input-group required w-300"
-                        >
-                            <label
-                                translate="digital-signature-screen.certificate-name.label"
-                            ></label>
                             <input
-                                [placeholder]="
+                                [placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
-                                    'digital-signature-screen.certificate-name.placeholder'
-                                        | translate
-                                "
                                 formControlName="certificateName"
                                 name="certificateName"
                             />
@@ -67,9 +49,7 @@
                         >
                             <label translate="digital-signature-screen.password.label"></label>
                             <input
-                                [placeholder]="
+                                [placeholder]="'digital-signature-screen.password.placeholder' | translate"
-                                    'digital-signature-screen.password.placeholder' | translate
-                                "
                                 formControlName="keySecret"
                                 name="keySecret"
                             />
@@ -78,9 +58,7 @@
                         <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.reason.label"></label>
                             <input
-                                [placeholder]="
+                                [placeholder]="'digital-signature-screen.reason.placeholder' | translate"
-                                    'digital-signature-screen.reason.placeholder' | translate
-                                "
                                 formControlName="reason"
                                 name="reason"
                             />
@@ -89,9 +67,7 @@
                         <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.location.label"></label>
                             <input
-                                [placeholder]="
+                                [placeholder]="'digital-signature-screen.location.placeholder' | translate"
-                                    'digital-signature-screen.location.placeholder' | translate
-                                "
                                 formControlName="location"
                                 name="location"
                             />
@@ -100,9 +76,7 @@
                         <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.contact-info.label"></label>
                             <input
-                                [placeholder]="
+                                [placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
-                                    'digital-signature-screen.contact-info.placeholder' | translate
-                                "
                                 formControlName="contactInfo"
                                 name="contactInfo"
                             />
@@ -112,16 +86,16 @@
                             <redaction-icon-button
                                 (action)="saveDigitalSignature()"
                                 [disabled]="digitalSignatureForm.invalid"
+                                [label]="'digital-signature-screen.action.save' | translate"
                                 icon="red:check"
-                                text="digital-signature-screen.action.save"
                                 type="primary"
                             ></redaction-icon-button>
 
                             <redaction-icon-button
                                 (action)="removeDigitalSignature()"
                                 *ngIf="digitalSignatureExists"
+                                [label]="'digital-signature-screen.action.delete' | translate"
                                 icon="red:trash"
-                                text="digital-signature-screen.action.delete"
                                 type="primary"
                             ></redaction-icon-button>
 
@@ -139,6 +113,4 @@
     </div>
 </section>
 
-<redaction-full-page-loading-indicator
+<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>
-    [displayed]="!viewReady"
-></redaction-full-page-loading-indicator>

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -51,8 +51,8 @@
                     <redaction-icon-button
                         (action)="openAddEditAttributeDialog($event)"
                         *ngIf="permissionsService.isAdmin()"
+                        [label]="'dossier-attributes-listing.add-new' | translate"
                         icon="red:plus"
-                        text="dossier-attributes-listing.add-new"
                         type="primary"
                     ></redaction-icon-button>
                 </div>
@@ -83,12 +83,13 @@
             <redaction-empty-state
                 (action)="openAddEditAttributeDialog($event)"
                 *ngIf="noData"
+                [buttonLabel]="'dossier-attributes-listing.no-data.action' | translate"
                 [showButton]="permissionsService.isAdmin()"
+                [text]="'dossier-attributes-listing.no-data.title' | translate"
                 icon="red:attribute"
-                screen="dossier-attributes-listing"
             ></redaction-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch" screen="dossier-attributes-listing" type="no-match"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noMatch" [text]="'dossier-attributes-listing.no-match.title' | translate"></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="50" redactionHasScrollbar>
                 <div

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html

@@ -51,8 +51,8 @@
                         <redaction-icon-button
                             (action)="openAddDossierTemplateDialog()"
                             *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
+                            [label]="'dossier-templates-listing.add-new' | translate"
                             icon="red:plus"
-                            text="dossier-templates-listing.add-new"
                             type="primary"
                         ></redaction-icon-button>
                     </div>
@@ -89,9 +89,16 @@
                     <div class="scrollbar-placeholder"></div>
                 </div>
 
-                <redaction-empty-state *ngIf="noData" icon="red:template" screen="dossier-templates-listing"></redaction-empty-state>
+                <redaction-empty-state
+                    *ngIf="noData"
+                    [text]="'dossier-templates-listing.no-data.title' | translate"
+                    icon="red:template"
+                ></redaction-empty-state>
 
-                <redaction-empty-state *ngIf="noMatch" screen="dossier-templates-listing" type="no-match"></redaction-empty-state>
+                <redaction-empty-state
+                    *ngIf="noMatch"
+                    [text]="'dossier-templates-listing.no-match.title' | translate"
+                ></redaction-empty-state>
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                     <div

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -62,8 +62,8 @@
                     <redaction-icon-button
                         (action)="openAddEditAttributeDialog($event)"
                         *ngIf="permissionsService.isAdmin()"
+                        [label]="'file-attributes-listing.add-new' | translate"
                         icon="red:plus"
-                        text="file-attributes-listing.add-new"
                         type="primary"
                     ></redaction-icon-button>
                 </div>
@@ -113,9 +113,13 @@
                 <div class="scrollbar-placeholder"></div>
             </div>
 
-            <redaction-empty-state *ngIf="noData" icon="red:attribute" screen="file-attributes-listing"></redaction-empty-state>
+            <redaction-empty-state
+                *ngIf="noData"
+                [text]="'file-attributes-listing.no-data.title' | translate"
+                icon="red:attribute"
+            ></redaction-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch" screen="file-attributes-listing" type="no-match"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noMatch" [text]="'file-attributes-listing.no-match.title' | translate"></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                 <!--      Table lines -->

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html

@@ -20,28 +20,18 @@
         <redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
 
         <div class="editor-container">
-            <ngx-monaco-editor
+            <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-                (init)="onCodeEditorInit($event)"
-                [(ngModel)]="codeEditorText"
-                [options]="editorOptions"
-            ></ngx-monaco-editor>
         </div>
         <div *ngIf="hasChanges && permissionsService.isAdmin()" class="changes-box">
             <redaction-icon-button
                 (action)="save()"
+                [label]="'rules-screen.save-changes' | translate"
                 icon="red:check"
-                text="rules-screen.save-changes"
                 type="primary"
             ></redaction-icon-button>
-            <div
+            <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
-                (click)="revert()"
-                class="all-caps-label cancel"
-                translate="rules-screen.revert-changes"
-            ></div>
         </div>
     </div>
 </section>
 
-<redaction-full-page-loading-indicator
+<redaction-full-page-loading-indicator [displayed]="processing"></redaction-full-page-loading-indicator>
-    [displayed]="processing"
-></redaction-full-page-loading-indicator>

apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html

@@ -32,10 +32,7 @@
                                 [(ngModel)]="generalSettings.forgotPasswordFunctionEnabled"
                                 color="primary"
                             ></mat-slide-toggle>
-                            <span
+                            <span class="ml-8" translate="smtp-config-screen.general.form.forgot-password"></span>
-                                class="ml-8"
-                                translate="smtp-config-screen.general.form.forgot-password"
-                            ></span>
                         </div>
                     </div>
                     <div class="dialog-actions">
@@ -64,9 +61,7 @@
                                     <input
                                         formControlName="host"
                                         name="host"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
-                                            'smtp-config-screen.form.host-placeholder' | translate
-                                        }}"
                                         type="text"
                                     />
                                 </div>
@@ -81,30 +76,20 @@
                                     <input
                                         formControlName="from"
                                         name="from"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
-                                            'smtp-config-screen.form.from-placeholder' | translate
-                                        }}"
                                         type="email"
                                     />
                                 </div>
 
                                 <div class="red-input-group">
-                                    <label
+                                    <label translate="smtp-config-screen.form.from-display-name"></label>
-                                        translate="smtp-config-screen.form.from-display-name"
-                                    ></label>
                                     <input
                                         formControlName="fromDisplayName"
                                         name="fromDisplayName"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
-                                            'smtp-config-screen.form.from-display-name-placeholder'
-                                                | translate
-                                        }}"
                                         type="text"
                                     />
-                                    <span
+                                    <span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span>
-                                        class="hint"
-                                        translate="smtp-config-screen.form.from-display-name-hint"
-                                    ></span>
                                 </div>
 
                                 <div class="red-input-group">
@@ -112,69 +97,44 @@
                                     <input
                                         formControlName="replyTo"
                                         name="replyTo"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
-                                            'smtp-config-screen.form.reply-to-placeholder'
-                                                | translate
-                                        }}"
                                         type="text"
                                     />
                                 </div>
 
                                 <div class="red-input-group">
-                                    <label
+                                    <label translate="smtp-config-screen.form.reply-to-display-name"></label>
-                                        translate="smtp-config-screen.form.reply-to-display-name"
-                                    ></label>
                                     <input
                                         formControlName="replyToDisplayName"
                                         name="replyToDisplayName"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
-                                            'smtp-config-screen.form.reply-to-display-name-placeholder'
-                                                | translate
-                                        }}"
                                         type="text"
                                     />
                                 </div>
 
                                 <div class="red-input-group">
-                                    <label
+                                    <label translate="smtp-config-screen.form.envelope-from"></label>
-                                        translate="smtp-config-screen.form.envelope-from"
-                                    ></label>
                                     <input
                                         formControlName="envelopeFrom"
                                         name="envelopeFrom"
-                                        placeholder="{{
+                                        placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
-                                            'smtp-config-screen.form.envelope-from-placeholder'
-                                                | translate
-                                        }}"
                                         type="text"
                                     />
-                                    <span
+                                    <span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span>
-                                        class="hint"
-                                        translate="smtp-config-screen.form.envelope-from-hint"
-                                    ></span>
                                 </div>
                             </div>
                             <div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.ssl"></label>
-                                    <mat-slide-toggle
+                                    <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
-                                        color="primary"
-                                        formControlName="ssl"
-                                    ></mat-slide-toggle>
                                 </div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.starttls"></label>
-                                    <mat-slide-toggle
+                                    <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
-                                        color="primary"
-                                        formControlName="starttls"
-                                    ></mat-slide-toggle>
                                 </div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.auth"></label>
-                                    <mat-slide-toggle
+                                    <mat-slide-toggle color="primary" formControlName="auth"></mat-slide-toggle>
-                                        color="primary"
-                                        formControlName="auth"
-                                    ></mat-slide-toggle>
                                 </div>
                                 <div
                                     (click)="openAuthConfigDialog(true)"
@@ -185,19 +145,14 @@
                             </div>
                         </div>
                         <div class="dialog-actions">
-                            <button
+                            <button [disabled]="configForm.invalid || !changed" color="primary" mat-flat-button type="submit">
-                                [disabled]="configForm.invalid || !changed"
-                                color="primary"
-                                mat-flat-button
-                                type="submit"
-                            >
                                 {{ 'smtp-config-screen.actions.save' | translate }}
                             </button>
 
                             <redaction-icon-button
                                 (action)="testConnection()"
                                 [disabled]="configForm.invalid"
-                                text="smtp-config-screen.actions.test-connection"
+                                [label]="'smtp-config-screen.actions.test-connection' | translate"
                                 type="show-bg"
                             ></redaction-icon-button>
                         </div>
@@ -208,6 +163,4 @@
     </div>
 </section>
 
-<redaction-full-page-loading-indicator
+<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>
-    [displayed]="!viewReady"
-></redaction-full-page-loading-indicator>

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html

@@ -66,9 +66,9 @@
                 <div class="scrollbar-placeholder"></div>
             </div>
 
-            <redaction-empty-state *ngIf="noData" icon="red:template" screen="trash"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noData" [text]="'trash.no-data.title' | translate" icon="red:template"></redaction-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch" screen="trash" type="no-match"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noMatch" [text]="'trash.no-match.title' | translate"></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <div

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -16,8 +16,8 @@
                 <redaction-icon-button
                     (action)="openAddEditUserDialog($event)"
                     *ngIf="permissionsService.isUserAdmin()"
+                    [label]="'user-listing.add-new' | translate"
                     icon="red:plus"
-                    text="user-listing.add-new"
                     type="primary"
                 ></redaction-icon-button>
                 <redaction-circle-button
@@ -77,8 +77,7 @@
 
                 <redaction-empty-state
                     *ngIf="(displayedEntities$ | async)?.length === 0"
-                    screen="user-listing"
+                    [text]="'user-listing.no-match.title' | translate"
-                    type="no-match"
                 ></redaction-empty-state>
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html

@@ -25,8 +25,8 @@
                 <redaction-icon-button
                     (action)="save()"
                     [disabled]="configForm.invalid"
+                    [label]="'watermark-screen.action.save' | translate"
                     icon="red:check"
-                    text="watermark-screen.action.save"
                     type="primary"
                 ></redaction-icon-button>
                 <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html

@@ -46,12 +46,12 @@
             ></redaction-round-checkbox>
             <span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
             <redaction-annotation-actions
-                *ngIf="selectedAnnotations?.length > 0"
                 (annotationsChanged)="annotationsChanged.emit($event)"
-                [canPerformAnnotationActions]="!isReadOnly"
+                *ngIf="selectedAnnotations?.length > 0"
-                [annotations]="selectedAnnotations"
-                [viewer]="viewer"
                 [alwaysVisible]="true"
+                [annotations]="selectedAnnotations"
+                [canPerformAnnotationActions]="!isReadOnly"
+                [viewer]="viewer"
                 btnType="primary"
                 tooltipPosition="above"
             ></redaction-annotation-actions>
@@ -130,7 +130,12 @@
                     tabindex="1"
                 >
                     <ng-container *ngIf="activeViewerPage && !displayedAnnotations[activeViewerPage]">
-                        <redaction-empty-state [horizontalPadding]="24" [verticalPadding]="40" icon="red:document" screen="file-preview">
+                        <redaction-empty-state
+                            [horizontalPadding]="24"
+                            [text]="'file-preview.no-data.title' | translate"
+                            [verticalPadding]="40"
+                            icon="red:document"
+                        >
                             <ng-container *ngIf="fileData?.fileStatus?.excludedPages?.includes(activeViewerPage)">
                                 {{ 'file-preview.tabs.annotations.page-is' | translate }}
                                 <a (click)="actionPerformed.emit('view-exclude-pages')" translate="file-preview.excluded-from-redaction">
@@ -142,16 +147,16 @@
                             <redaction-icon-button
                                 (action)="jumpToPreviousWithAnnotations()"
                                 [disabled]="activeViewerPage <= displayedPages[0]"
+                                [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
                                 icon="red:nav-prev"
-                                text="file-preview.tabs.annotations.jump-to-previous"
                                 type="show-bg"
                             ></redaction-icon-button>
                             <redaction-icon-button
                                 (action)="jumpToNextWithAnnotations()"
                                 [disabled]="activeViewerPage >= displayedPages[displayedPages.length - 1]"
+                                [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
                                 class="mt-8"
                                 icon="red:nav-next"
-                                text="file-preview.tabs.annotations.jump-to-next"
                                 type="show-bg"
                             ></redaction-icon-button>
                         </div>

apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -16,18 +16,10 @@
             <div class="red-input-group required w-400">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'add-dossier-dialog.form.template' | translate }}</mat-label>
-                    <mat-select
+                    <mat-select (valueChange)="dossierTemplateChanged($event)" formControlName="dossierTemplateId" style="width: 100%">
-                        (valueChange)="dossierTemplateChanged($event)"
-                        formControlName="dossierTemplateId"
-                        style="width: 100%"
-                    >
                         <mat-option
                             *ngFor="let dossierTemplate of dossierTemplates"
-                            [matTooltip]="
+                            [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
-                                dossierTemplate.description
-                                    ? dossierTemplate.description
-                                    : dossierTemplate.name
-                            "
                             [value]="dossierTemplate.dossierTemplateId"
                             matTooltipPosition="after"
                         >
@@ -54,21 +46,12 @@
             </mat-checkbox>
 
             <div class="due-date">
-                <mat-checkbox
+                <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">
-                    (change)="hasDueDate = !hasDueDate"
-                    [checked]="hasDueDate"
-                    class="filter-menu-checkbox"
-                    color="primary"
-                >
                     {{ 'add-dossier-dialog.form.due-date' | translate }}
                 </mat-checkbox>
 
                 <div *ngIf="hasDueDate" class="red-input-group datepicker-wrapper">
-                    <input
+                    <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
-                        [matDatepicker]="picker"
-                        formControlName="dueDate"
-                        placeholder="dd/mm/yy"
-                    />
                     <mat-datepicker-toggle [for]="picker" matSuffix>
                         <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                     </mat-datepicker-toggle>
@@ -102,16 +85,12 @@
             <redaction-icon-button
                 (action)="saveDossierAndAddMembers()"
                 [disabled]="disabled"
+                [label]="'add-dossier-dialog.actions.save-and-add-members' | translate"
                 icon="red:assign"
-                text="add-dossier-dialog.actions.save-and-add-members"
                 type="show-bg"
             ></redaction-icon-button>
         </div>
     </form>
 
-    <redaction-circle-button
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
-        class="dialog-close"
-        icon="red:close"
-        mat-dialog-close
-    ></redaction-circle-button>
 </section>

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html

@@ -54,9 +54,9 @@
                     (action)="fileInputClick(attr)"
                     *ngIf="!currentAttrValue(attr)"
                     [disabled]="!canEdit"
+                    [label]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     class="upload-button"
                     icon="red:upload"
-                    text="edit-dossier-dialog.attributes.upload-image"
                     type="show-bg"
                 ></redaction-icon-button>
 

apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html

@@ -11,17 +11,11 @@
 
     <div class="red-input-group required w-400">
         <mat-form-field floatLabel="always">
-            <mat-label>{{
+            <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
-                'edit-dossier-dialog.general-info.form.template' | translate
-            }}</mat-label>
             <mat-select formControlName="dossierTemplateId" style="width: 100%">
                 <mat-option
                     *ngFor="let dossierTemplate of dossierTemplates"
-                    [matTooltip]="
+                    [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
-                        dossierTemplate.description
-                            ? dossierTemplate.description
-                            : dossierTemplate.name
-                    "
                     [value]="dossierTemplate.dossierTemplateId"
                     matTooltipPosition="after"
                 >
@@ -34,9 +28,7 @@
     <div class="red-input-group w-400">
         <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
         <textarea
-            [placeholder]="
+            [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
-                'edit-dossier-dialog.general-info.form.description.placeholder' | translate
-            "
             formControlName="description"
             name="description"
             redactionHasScrollbar
@@ -50,12 +42,7 @@
     </mat-checkbox>
 
     <div class="due-date">
-        <mat-checkbox
+        <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" class="filter-menu-checkbox" color="primary">
-            (change)="hasDueDate = !hasDueDate"
-            [checked]="hasDueDate"
-            class="filter-menu-checkbox"
-            color="primary"
-        >
             {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
         </mat-checkbox>
 
@@ -72,8 +59,8 @@
         <redaction-icon-button
             (action)="openDeleteDossierDialog($event)"
             *ngIf="permissionsService.canDeleteDossier(dossierWrapper)"
+            [label]="'dossier-listing.delete.action' | translate"
             icon="red:trash"
-            text="dossier-listing.delete.action"
             type="show-bg"
         ></redaction-icon-button>
     </div>

apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html

@@ -43,12 +43,13 @@
             <redaction-empty-state
                 (action)="openAddDossierDialog()"
                 *ngIf="noData"
+                [buttonLabel]="'dossier-listing.no-data.action' | translate"
                 [showButton]="permissionsService.isManager()"
+                [text]="'dossier-listing.no-data.title' | translate"
                 icon="red:folder"
-                screen="dossier-listing"
             ></redaction-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch" screen="dossier-listing" type="no-match"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noMatch" [text]="'dossier-listing.no-match.title' | translate"></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <div

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

@@ -110,12 +110,13 @@
             <redaction-empty-state
                 (action)="fileInput.click()"
                 *ngIf="noData"
+                [buttonLabel]="'dossier-overview.no-data.action' | translate"
+                [text]="'dossier-overview.no-data.title' | translate"
                 buttonIcon="red:upload"
                 icon="red:document"
-                screen="dossier-overview"
             ></redaction-empty-state>
 
-            <redaction-empty-state *ngIf="noMatch" screen="dossier-overview" type="no-match"></redaction-empty-state>
+            <redaction-empty-state *ngIf="noMatch" [text]="'dossier-overview.no-match.title' | translate"></redaction-empty-state>
 
             <cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
                 <div

apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.html

@@ -9,6 +9,6 @@
     type="button"
 >
     <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
-    <span [translate]="text"></span>
+    <span>{{ label }}</span>
 </button>
 <div *ngIf="showDot" class="dot"></div>

apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
 export type IconButtonType = 'default' | 'show-bg' | 'primary';
+
 export enum IconButtonTypes {
     DEFAULT = 'default',
     SHOW_BG = 'show-bg',
@@ -15,7 +16,7 @@ export enum IconButtonTypes {
 })
 export class IconButtonComponent {
     @Input() icon: string;
-    @Input() text: string;
+    @Input() label: string;
     @Input() showDot = false;
     @Input() disabled = false;
     @Input() type: IconButtonType = IconButtonTypes.DEFAULT;

apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html

@@ -18,21 +18,9 @@
                     <div class="search-match-text">
                         {{ currentMatch + '/' + findMatches.length }}
                     </div>
-                    <mat-icon
+                    <mat-icon (click)="previousSearchMatch()" class="pointer" svgIcon="red:arrow-up"></mat-icon>
-                        (click)="previousSearchMatch()"
+                    <mat-icon (click)="nextSearchMatch()" class="pointer" svgIcon="red:arrow-down"></mat-icon>
-                        class="pointer"
+                    <mat-icon (click)="searchChanged(''); inputElement.focus()" class="pointer" svgIcon="red:close"></mat-icon>
-                        svgIcon="red:arrow-up"
-                    ></mat-icon>
-                    <mat-icon
-                        (click)="nextSearchMatch()"
-                        class="pointer"
-                        svgIcon="red:arrow-down"
-                    ></mat-icon>
-                    <mat-icon
-                        (click)="searchChanged(''); inputElement.focus()"
-                        class="pointer"
-                        svgIcon="red:close"
-                    ></mat-icon>
                 </div>
             </div>
         </div>
@@ -43,9 +31,7 @@
         </div>
         <div class="red-input-group w-200 mr-8">
             <mat-select [(ngModel)]="dossier" [disabled]="!compare">
-                <mat-option [value]="selectDossier">{{
+                <mat-option [value]="selectDossier">{{ selectDossier.name | translate }}</mat-option>
-                    selectDossier.name | translate
-                }}</mat-option>
                 <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
                     {{ dossier.name }}
                 </mat-option>
@@ -75,21 +61,13 @@
         </div>
     </div>
 
-    <div
+    <div *ngIf="withFloatingActions && hasChanges && canEdit" [class.offset]="compare" class="changes-box">
-        *ngIf="withFloatingActions && hasChanges && canEdit"
-        [class.offset]="compare"
-        class="changes-box"
-    >
         <redaction-icon-button
             (action)="saveDictionary.emit(currentEntries)"
+            [label]="'dictionary-overview.save-changes' | translate"
             icon="red:check"
-            text="dictionary-overview.save-changes"
             type="primary"
         ></redaction-icon-button>
-        <div
+        <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
-            (click)="revert()"
-            class="all-caps-label cancel"
-            translate="dictionary-overview.revert-changes"
-        ></div>
     </div>
 </div>

apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html

@@ -10,13 +10,7 @@
     <div class="ng-content-wrapper heading-l">
         <ng-content></ng-content>
     </div>
-    <div [translate]="text || screen + '.' + type + '.title'" class="heading-l"></div>
+    <div class="heading-l">{{ text }}</div>
-    <redaction-icon-button
+    <redaction-icon-button (action)="action.emit()" *ngIf="showButton" [icon]="buttonIcon" [label]="buttonLabel" type="primary">
-        (action)="action.emit()"
-        *ngIf="showButton"
-        [icon]="buttonIcon"
-        [text]="screen + '.no-data.action'"
-        type="primary"
-    >
     </redaction-icon-button>
 </div>

apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts

@@ -6,14 +6,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
     styleUrls: ['./empty-state.component.scss']
 })
 export class EmptyStateComponent implements OnInit {
-    @Input() screen: string;
     @Input() text: string;
     @Input() icon: string;
     @Input() showButton = true;
     @Input() buttonIcon = 'red:plus';
+    @Input() buttonLabel: string;
     @Input() horizontalPadding = 100;
     @Input() verticalPadding = 120;
-    @Input() type: 'no-data' | 'no-match' = 'no-data';
     @Output() action = new EventEmitter();
 
     constructor() {}

apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html

@@ -1,9 +1,9 @@
 <redaction-icon-button
     *ngIf="!chevron"
     [icon]="icon"
+    [label]="filterLabel"
     [matMenuTriggerFor]="filterMenu"
     [showDot]="hasActiveFilters"
-    [text]="filterLabel"
 ></redaction-icon-button>
 
 <redaction-chevron-button
@@ -13,12 +13,7 @@
     [text]="filterLabel"
 ></redaction-chevron-button>
 
-<mat-menu
+<mat-menu #filterMenu="matMenu" (closed)="applyFilters()" [class.padding-bottom-0]="secondaryFilters?.length > 0" xPosition="before">
-    #filterMenu="matMenu"
-    (closed)="applyFilters()"
-    [class.padding-bottom-0]="secondaryFilters?.length > 0"
-    xPosition="before"
->
     <ng-template matMenuContent>
         <div class="filter-menu-header">
             <div class="all-caps-label" translate="filter-menu.filter-types"></div>
@@ -38,11 +33,11 @@
 
         <div *ngFor="let filter of primaryFilters">
             <ng-container
-                [ngTemplateOutlet]="defaultFilterTemplate"
                 [ngTemplateOutletContext]="{
                     filter: filter,
                     atLeastOneIsExpandable: atLeastOneFilterIsExpandable
                 }"
+                [ngTemplateOutlet]="defaultFilterTemplate"
             ></ng-container>
         </div>
 
@@ -53,11 +48,11 @@
 
             <div *ngFor="let filter of secondaryFilters">
                 <ng-container
-                    [ngTemplateOutlet]="defaultFilterTemplate"
                     [ngTemplateOutletContext]="{
                         filter: filter,
                         atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable
                     }"
+                    [ngTemplateOutlet]="defaultFilterTemplate"
                 ></ng-container>
             </div>
         </div>
@@ -68,23 +63,13 @@
     {{ _(filter)?.label }}
 </ng-template>
 
-<ng-template
+<ng-template #defaultFilterTemplate let-atLeastOneIsExpandable="atLeastOneIsExpandable" let-filter="filter">
-    #defaultFilterTemplate
-    let-atLeastOneIsExpandable="atLeastOneIsExpandable"
-    let-filter="filter"
->
     <div (click)="toggleFilterExpanded($event, filter)" class="mat-menu-item flex">
         <div *ngIf="isExpandable(filter)" class="arrow-wrapper">
             <mat-icon *ngIf="_(filter).expanded" color="accent" svgIcon="red:arrow-down"></mat-icon>
-            <mat-icon
+            <mat-icon *ngIf="!_(filter).expanded" color="accent" svgIcon="red:arrow-right"></mat-icon>
-                *ngIf="!_(filter).expanded"
-                color="accent"
-                svgIcon="red:arrow-right"
-            ></mat-icon>
-        </div>
-        <div *ngIf="atLeastOneIsExpandable && !isExpandable(filter)" class="arrow-wrapper spacer">
-            &nbsp;
         </div>
+        <div *ngIf="atLeastOneIsExpandable && !isExpandable(filter)" class="arrow-wrapper spacer">&nbsp;</div>
         <mat-checkbox
             (click)="filterCheckboxClicked($event, filter)"
             [checked]="_(filter).checked"
@@ -92,36 +77,23 @@
             class="filter-menu-checkbox"
         >
             <ng-container
-                [ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
                 [ngTemplateOutletContext]="{ filter: filter }"
+                [ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
             ></ng-container>
         </mat-checkbox>
-        <ng-container
+        <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate ?? null"></ng-container>
-            [ngTemplateOutlet]="actionsTemplate ?? null"
-            [ngTemplateOutletContext]="{ filter: filter }"
-        ></ng-container>
     </div>
 
     <div *ngIf="_(filter).filters?.length && _(filter).expanded">
-        <div
+        <div (click)="$event.stopPropagation()" *ngFor="let subFilter of _(filter).filters" class="padding-left mat-menu-item">
-            (click)="$event.stopPropagation()"
+            <mat-checkbox (click)="filterCheckboxClicked($event, subFilter, filter)" [checked]="subFilter.checked">
-            *ngFor="let subFilter of _(filter).filters"
-            class="padding-left mat-menu-item"
-        >
-            <mat-checkbox
-                (click)="filterCheckboxClicked($event, subFilter, filter)"
-                [checked]="subFilter.checked"
-            >
                 <ng-container
-                    [ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
                     [ngTemplateOutletContext]="{ filter: subFilter }"
+                    [ngTemplateOutlet]="filterTemplate ?? defaultFilterLabelTemplate"
                 ></ng-container>
             </mat-checkbox>
 
-            <ng-container
+            <ng-container [ngTemplateOutletContext]="{ filter: subFilter }" [ngTemplateOutlet]="actionsTemplate ?? null"></ng-container>
-                [ngTemplateOutlet]="actionsTemplate ?? null"
-                [ngTemplateOutletContext]="{ filter: subFilter }"
-            ></ng-container>
         </div>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html

@@ -1,17 +1,17 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div class="filters" *ngIf="filters$ | async as filters">
+    <div *ngIf="filters$ | async as filters" class="filters">
-        <div translate="filters.filter-by" *ngIf="filters.length"></div>
+        <div *ngIf="filters.length" translate="filters.filter-by"></div>
 
         <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
             <redaction-popup-filter
                 (filtersChanged)="filterService.filterEntities()"
                 *ngIf="!config.hide"
                 [filterLabel]="config.label"
+                [filterTemplate]="config.filterTemplate"
                 [icon]="config.icon"
                 [primaryFilters]="config.values"
-                [filterTemplate]="config.filterTemplate"
             ></redaction-popup-filter>
         </ng-container>
 
@@ -35,12 +35,12 @@
             (action)="config.action($event)"
             *ngIf="!config.hide"
             [icon]="config.icon"
-            [text]="config.label"
+            [label]="config.label"
             [type]="config.type"
         ></redaction-icon-button>
     </ng-container>
 
-    <div class="actions" *ngIf="showCloseButton || actionConfigs">
+    <div *ngIf="showCloseButton || actionConfigs" class="actions">
         <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
             <redaction-circle-button
                 (action)="config.action($event)"
@@ -55,8 +55,8 @@
         <ng-content></ng-content>
 
         <redaction-circle-button
-            [class.ml-6]="actionConfigs"
             *ngIf="showCloseButton && permissionsService.isUser()"
+            [class.ml-6]="actionConfigs"
             icon="red:close"
             redactionNavigateLastDossiersScreen
             tooltip="common.close"

apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html

@@ -4,12 +4,7 @@
     <div class="dialog-content">
         <p [innerHTML]="'overwrite-files-dialog.question' | translate: { filename: filename }"></p>
 
-        <mat-checkbox
+        <mat-checkbox (change)="remember = !remember" [checked]="remember" class="flex-1" color="primary">
-            (change)="remember = !remember"
-            [checked]="remember"
-            class="flex-1"
-            color="primary"
-        >
             {{ 'overwrite-files-dialog.options.remember' | translate }}
         </mat-checkbox>
     </div>
@@ -23,13 +18,9 @@
         ></button>
         <redaction-icon-button
             (action)="selectOption('skip')"
-            text="overwrite-files-dialog.options.skip"
+            [label]="'overwrite-files-dialog.options.skip' | translate"
             type="show-bg"
         ></redaction-icon-button>
-        <div
+        <div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
-            (click)="cancel()"
-            class="all-caps-label cancel"
-            translate="overwrite-files-dialog.options.cancel"
-        ></div>
     </div>
 </section>