Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Translation rework: Empty state, icon button

Browse Source
This commit is contained in:
Adina Țeudan 2021-07-19 16:23:41 +03:00
parent 1f50eafee2
commit 3d9eebb604
28 changed files with 150 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 -->

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

@ -37,30 +37,18 @@
</div>
<div class="dialog-actions">
<button
[disabled]="userForm.invalid || !changed"
color="primary"
mat-flat-button
type="submit"
>
{{
(user ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save')
| translate
}}
<button [disabled]="userForm.invalid || !changed" 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
class="all-caps-label cancel"
mat-dialog-close
translate="add-edit-user.actions.cancel"
></div>
<div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
</div>
</form>

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

@ -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 -->

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

@ -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">

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

@ -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"
type="no-match"
[text]="'dictionary-listing.no-match.title' | translate"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>

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

@ -22,39 +22,21 @@
<div class="red-content-inner">
<div class="content-container">
<div class="content-container-content">
<form
(keyup)="formChanged()"
*ngIf="digitalSignatureForm"
[formGroup]="digitalSignatureForm"
autocomplete="off"
>
<input
#fileInput
(change)="fileChanged($event, fileInput)"
class="file-upload-input"
hidden
type="file"
/>
<form (keyup)="formChanged()" *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
[class.hidden]="!hasDigitalSignatureSet"
class="red-input-group required w-300"
>
<label
translate="digital-signature-screen.certificate-name.label"
></label>
<div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
<label translate="digital-signature-screen.certificate-name.label"></label>
<input
[placeholder]="
'digital-signature-screen.certificate-name.placeholder'
| translate
"
[placeholder]="'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]="
'digital-signature-screen.password.placeholder' | translate
"
[placeholder]="'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]="
'digital-signature-screen.reason.placeholder' | translate
"
[placeholder]="'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]="
'digital-signature-screen.location.placeholder' | translate
"
[placeholder]="'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]="
'digital-signature-screen.contact-info.placeholder' | translate
"
[placeholder]="'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
[displayed]="!viewReady"
></redaction-full-page-loading-indicator>
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

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

@ -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

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

@ -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

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

@ -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 -->

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

@ -20,28 +20,18 @@
<redaction-admin-side-nav type="dossier-templates"></redaction-admin-side-nav>
<div class="editor-container">
<ngx-monaco-editor
(init)="onCodeEditorInit($event)"
[(ngModel)]="codeEditorText"
[options]="editorOptions"
></ngx-monaco-editor>
<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
(click)="revert()"
class="all-caps-label cancel"
translate="rules-screen.revert-changes"
></div>
<div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
</div>
</div>
</section>
<redaction-full-page-loading-indicator
[displayed]="processing"
></redaction-full-page-loading-indicator>
<redaction-full-page-loading-indicator [displayed]="processing"></redaction-full-page-loading-indicator>

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

@ -32,10 +32,7 @@
[(ngModel)]="generalSettings.forgotPasswordFunctionEnabled"
color="primary"
></mat-slide-toggle>
<span
class="ml-8"
translate="smtp-config-screen.general.form.forgot-password"
></span>
<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="{{
'smtp-config-screen.form.host-placeholder' | translate
}}"
placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
type="text"
/>
</div>
@ -81,30 +76,20 @@
<input
formControlName="from"
name="from"
placeholder="{{
'smtp-config-screen.form.from-placeholder' | translate
}}"
placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
type="email"
/>
</div>
<div class="red-input-group">
<label
translate="smtp-config-screen.form.from-display-name"
></label>
<label translate="smtp-config-screen.form.from-display-name"></label>
<input
formControlName="fromDisplayName"
name="fromDisplayName"
placeholder="{{
'smtp-config-screen.form.from-display-name-placeholder'
| translate
}}"
placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
type="text"
/>
<span
class="hint"
translate="smtp-config-screen.form.from-display-name-hint"
></span>
<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="{{
'smtp-config-screen.form.reply-to-placeholder'
| translate
}}"
placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
type="text"
/>
</div>
<div class="red-input-group">
<label
translate="smtp-config-screen.form.reply-to-display-name"
></label>
<label translate="smtp-config-screen.form.reply-to-display-name"></label>
<input
formControlName="replyToDisplayName"
name="replyToDisplayName"
placeholder="{{
'smtp-config-screen.form.reply-to-display-name-placeholder'
| translate
}}"
placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
type="text"
/>
</div>
<div class="red-input-group">
<label
translate="smtp-config-screen.form.envelope-from"
></label>
<label translate="smtp-config-screen.form.envelope-from"></label>
<input
formControlName="envelopeFrom"
name="envelopeFrom"
placeholder="{{
'smtp-config-screen.form.envelope-from-placeholder'
| translate
}}"
placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
type="text"
/>
<span
class="hint"
translate="smtp-config-screen.form.envelope-from-hint"
></span>
<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
color="primary"
formControlName="ssl"
></mat-slide-toggle>
<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
color="primary"
formControlName="starttls"
></mat-slide-toggle>
<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
color="primary"
formControlName="auth"
></mat-slide-toggle>
<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
[disabled]="configForm.invalid || !changed"
color="primary"
mat-flat-button
type="submit"
>
<button [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
[displayed]="!viewReady"
></redaction-full-page-loading-indicator>
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

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

@ -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

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

@ -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"
type="no-match"
[text]="'user-listing.no-match.title' | translate"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>

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

@ -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>

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

@ -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"
[annotations]="selectedAnnotations"
[viewer]="viewer"
*ngIf="selectedAnnotations?.length > 0"
[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>

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

@ -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
(valueChange)="dossierTemplateChanged($event)"
formControlName="dossierTemplateId"
style="width: 100%"
>
<mat-select (valueChange)="dossierTemplateChanged($event)" formControlName="dossierTemplateId" style="width: 100%">
<mat-option
*ngFor="let dossierTemplate of dossierTemplates"
[matTooltip]="
dossierTemplate.description
? dossierTemplate.description
: dossierTemplate.name
"
[matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
[value]="dossierTemplate.dossierTemplateId"
matTooltipPosition="after"
>
@ -54,21 +46,12 @@
</mat-checkbox>
<div class="due-date">
<mat-checkbox
(change)="hasDueDate = !hasDueDate"
[checked]="hasDueDate"
class="filter-menu-checkbox"
color="primary"
>
<mat-checkbox (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
[matDatepicker]="picker"
formControlName="dueDate"
placeholder="dd/mm/yy"
/>
<input [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
class="dialog-close"
icon="red:close"
mat-dialog-close
></redaction-circle-button>
<redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
</section>

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

@ -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>

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

@ -11,17 +11,11 @@
<div class="red-input-group required w-400">
<mat-form-field floatLabel="always">
<mat-label>{{
'edit-dossier-dialog.general-info.form.template' | translate
}}</mat-label>
<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]="
dossierTemplate.description
? dossierTemplate.description
: dossierTemplate.name
"
[matTooltip]="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]="
'edit-dossier-dialog.general-info.form.description.placeholder' | translate
"
[placeholder]="'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
(change)="hasDueDate = !hasDueDate"
[checked]="hasDueDate"
class="filter-menu-checkbox"
color="primary"
>
<mat-checkbox (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>

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

@ -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

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

@ -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

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

@ -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>

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

@ -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;

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

@ -18,21 +18,9 @@
<div class="search-match-text">
{{ currentMatch + '/' + findMatches.length }}
</div>
<mat-icon
(click)="previousSearchMatch()"
class="pointer"
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>
<mat-icon (click)="previousSearchMatch()" class="pointer" 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">{{
selectDossier.name | translate
}}</mat-option>
<mat-option [value]="selectDossier">{{ 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
*ngIf="withFloatingActions && hasChanges && canEdit"
[class.offset]="compare"
class="changes-box"
>
<div *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
(click)="revert()"
class="all-caps-label cancel"
translate="dictionary-overview.revert-changes"
></div>
<div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
</div>
</div>

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

@ -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>
<redaction-icon-button
(action)="action.emit()"
*ngIf="showButton"
[icon]="buttonIcon"
[text]="screen + '.no-data.action'"
type="primary"
>
<div class="heading-l">{{ text }}</div>
<redaction-icon-button (action)="action.emit()" *ngIf="showButton" [icon]="buttonIcon" [label]="buttonLabel" type="primary">
</redaction-icon-button>
</div>

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

@ -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() {}

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

@ -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
#filterMenu="matMenu"
(closed)="applyFilters()"
[class.padding-bottom-0]="secondaryFilters?.length > 0"
xPosition="before"
>
<mat-menu #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
#defaultFilterTemplate
let-atLeastOneIsExpandable="atLeastOneIsExpandable"
let-filter="filter"
>
<ng-template #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
*ngIf="!_(filter).expanded"
color="accent"
svgIcon="red:arrow-right"
></mat-icon>
</div>
<div *ngIf="atLeastOneIsExpandable && !isExpandable(filter)" class="arrow-wrapper spacer">
&nbsp;
<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>
<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
[ngTemplateOutlet]="actionsTemplate ?? null"
[ngTemplateOutletContext]="{ filter: filter }"
></ng-container>
<ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate ?? null"></ng-container>
</div>
<div *ngIf="_(filter).filters?.length && _(filter).expanded">
<div
(click)="$event.stopPropagation()"
*ngFor="let subFilter of _(filter).filters"
class="padding-left mat-menu-item"
>
<mat-checkbox
(click)="filterCheckboxClicked($event, subFilter, filter)"
[checked]="subFilter.checked"
>
<div (click)="$event.stopPropagation()" *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
[ngTemplateOutlet]="actionsTemplate ?? null"
[ngTemplateOutletContext]="{ filter: subFilter }"
></ng-container>
<ng-container [ngTemplateOutletContext]="{ filter: subFilter }" [ngTemplateOutlet]="actionsTemplate ?? null"></ng-container>
</div>
</div>
</ng-template>

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

@ -1,17 +1,17 @@
<div class="page-header">
<div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
<div class="filters" *ngIf="filters$ | async as filters">
<div translate="filters.filter-by" *ngIf="filters.length"></div>
<div *ngIf="filters$ | async as filters" class="filters">
<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"

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

@ -4,12 +4,7 @@
<div class="dialog-content">
<p [innerHTML]="'overwrite-files-dialog.question' | translate: { filename: filename }"></p>
<mat-checkbox
(change)="remember = !remember"
[checked]="remember"
class="flex-1"
color="primary"
>
<mat-checkbox (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
(click)="cancel()"
class="all-caps-label cancel"
translate="overwrite-files-dialog.options.cancel"
></div>
<div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
</div>
</section>