diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index d5a2195d0b242..e415c9db2ea82 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -2250,6 +2250,42 @@ kbd, height: 16px; } +#ServerAuditDialog #ServerAuditDialog-mainbox label { + display: flex; + align-items: center; + gap: 4px; + color: #000; + border-radius: 30px; + width: fit-content; + height: 16px; + margin-top: 8px; + padding-right: 10px; +} + +#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess { + border: 1px solid #2bc545; + background-color: #a1ddaa; +} + +#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror { + border: 1px solid #d42314; + background-color: #ff9198; +} + +#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess::before { + background: url('images/circle-check.svg') no-repeat center/20px; + content: ''; + width: 16px; + height: 16px; +} + +#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror::before { + background: url('images/icon-set-symbols1-cross.svg') no-repeat center; + content: ''; + width: 16px; + height: 16px; +} + /* text-area overflow on function wizard window */ #FormulaDialog #ed_formula.ui-textarea { diff --git a/browser/images/circle-check.svg b/browser/images/circle-check.svg new file mode 100644 index 0000000000000..c7a64d56e8702 --- /dev/null +++ b/browser/images/circle-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/browser/src/control/Control.ServerAuditDialog.ts b/browser/src/control/Control.ServerAuditDialog.ts index b880bfe2ca24c..13039be6691d0 100644 --- a/browser/src/control/Control.ServerAuditDialog.ts +++ b/browser/src/control/Control.ServerAuditDialog.ts @@ -176,8 +176,18 @@ class ServerAuditDialog { return hasErrors; } + private countErrors(): number { + return ( + (app.serverAudit?.filter((entry: AuditEntry) => entry.status !== 'ok') + .length ?? 0) + + (app.clientAudit?.filter((entry: AuditEntry) => entry.status !== 'ok') + .length ?? 0) + ); + } + private getJSON(entries: Array): JSDialogJSON { const hasErrors = this.hasErrors(); + const countErrors = this.countErrors(); return { id: this.id, @@ -198,13 +208,6 @@ class ServerAuditDialog { type: 'container', vertical: true, children: [ - !hasErrors - ? { - id: 'auditsuccess', - type: 'fixedtext', - text: _('No issues found'), - } - : {}, { id: 'auditlist', type: 'treelistbox', @@ -215,6 +218,19 @@ class ServerAuditDialog { entries: entries, enabled: entries.length > 0, }, + !hasErrors + ? { + id: 'auditsuccess', + type: 'fixedtext', + text: _('No issues found'), + } + : { + id: 'auditerror', + type: 'fixedtext', + text: countErrors === 1 + ? _('1 issue found') + : _('%COUNT% issues found').replaceAll('%COUNT%', countErrors), + }, { id: this.id + '-buttonbox', type: 'buttonbox',