UX iprovements on server audit dialog

-Added new stylings to the indicator to make it more distinct -Added both cases for no issues and errors plus count of issues -Added new check-mark icon for audit success Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I1676927ae3997547195f0dd01364955b8b5638f9
CollaboraOnline · Jan 28, 2025 · 697a214 · 697a214
1 parent 667bdb4
commit 697a214
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git 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
diff --git 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<any>): 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',