From 6286ec4179472114c9d60d371ab6d8eaef0369c1 Mon Sep 17 00:00:00 2001 From: fs Date: Mon, 9 Mar 2026 22:29:45 +0100 Subject: [PATCH] settings ui/ux optimization --- i18n/default_de.json | 37 ++ i18n/default_en.json | 37 ++ pages/admin/settings/index(default).phtml | 637 ++++++++++++-------- web/css/components/app-details-card.css | 20 + web/js/components/app-settings-telemetry.js | 13 +- 5 files changed, 477 insertions(+), 267 deletions(-) diff --git a/i18n/default_de.json b/i18n/default_de.json index 7285aed..a46f2d1 100644 --- a/i18n/default_de.json +++ b/i18n/default_de.json @@ -61,6 +61,43 @@ "Problems logging in": "Probleme beim Login", "We could not continue with these login details": "Mit diesen Login-Daten konnte nicht fortgefahren werden", "Cached": "Cache", + "App identity": "App-Identität", + "Configured": "Konfiguriert", + "Not configured": "Nicht konfiguriert", + "Theme policy": "Theme-Richtlinie", + "Brand color": "Markenfarbe", + "User override enabled": "Benutzer-Override aktiviert", + "User override disabled": "Benutzer-Override deaktiviert", + "Token lifetime policy": "Token-Laufzeit-Richtlinie", + "Token operations": "Token-Aktionen", + "CORS allowlist": "CORS-Allowlist", + "Shared Microsoft credentials": "Geteilte Microsoft-Zugangsdaten", + "Authority endpoint": "Authority-Endpunkt", + "SMTP connection": "SMTP-Verbindung", + "SMTP credentials": "SMTP-Zugangsdaten", + "Sender identity": "Absenderidentität", + "%d defaults configured": "%d Standards konfiguriert", + "%d events enabled": "%d Ereignisse aktiviert", + "%d origins configured": "%d Origins konfiguriert", + "days": "Tage", + "Leave empty to use the runtime default title.": "Leer lassen, um den Laufzeit-Standardtitel zu verwenden.", + "Leave empty to keep the currently stored password.": "Leer lassen, um das aktuell gespeicherte Passwort beizubehalten.", + "Leave empty to keep the currently stored client secret.": "Leer lassen, um das aktuell gespeicherte Client-Secret beizubehalten.", + "This setting controls the application name shown across the UI.": "Diese Einstellung steuert den in der gesamten UI angezeigten Anwendungsnamen.", + "This setting controls the default language for users without a personal preference.": "Diese Einstellung steuert die Standardsprache für Benutzer ohne persönliche Präferenz.", + "These defaults prefill tenant, department and role when new users are created.": "Diese Standards füllen Mandant, Abteilung und Rolle bei neu erstellten Benutzern vor.", + "This setting controls the global default theme and whether users may choose their own theme.": "Diese Einstellung steuert das globale Standard-Theme und ob Benutzer ihr eigenes Theme wählen dürfen.", + "This setting controls the primary UI accent color for the default app theme.": "Diese Einstellung steuert die primäre UI-Akzentfarbe des Standard-App-Themes.", + "Telemetry helps detect recurring UI issues and failed requests in production.": "Telemetry hilft, wiederkehrende UI-Probleme und fehlgeschlagene Requests in Produktion zu erkennen.", + "Limit which event types are collected to match your privacy and operations requirements.": "Begrenze die erfassten Ereignistypen passend zu Datenschutz- und Betriebsanforderungen.", + "These settings define how the application connects to your SMTP server.": "Diese Einstellungen definieren, wie sich die Anwendung mit deinem SMTP-Server verbindet.", + "Provide authentication data used by the SMTP transport.": "Lege die Authentifizierungsdaten für den SMTP-Transport fest.", + "This identity appears in outgoing emails sent by the platform.": "Diese Identität erscheint in ausgehenden E-Mails der Plattform.", + "These limits define default and maximum lifetimes for newly issued API tokens.": "Diese Grenzwerte definieren Standard- und Maximallaufzeit für neu ausgestellte API-Tokens.", + "Define which origins may call your API from browsers. Use one origin per line.": "Definiere, welche Origins deine API aus Browsern aufrufen dürfen. Eine Origin pro Zeile.", + "This action revokes all active API tokens immediately across all users.": "Diese Aktion widerruft sofort alle aktiven API-Tokens über alle Benutzer hinweg.", + "The authority URL defines the Microsoft identity tenant endpoint used for sign-in.": "Die Authority-URL definiert den Microsoft-Identity-Tenant-Endpunkt für die Anmeldung.", + "This will expire all remember-me tokens immediately and force users to sign in again.": "Dadurch werden alle Remember-me-Tokens sofort abgelaufen und Benutzer müssen sich erneut anmelden.", "Global settings are stored in the database. config/settings.php is only a runtime cache for selected app settings.": "Globale Einstellungen werden in der Datenbank gespeichert. config/settings.php ist nur ein Laufzeit-Cache für ausgewählte App-Einstellungen.", "Too many login attempts. Please wait and try again.": "Zu viele Login-Versuche. Bitte warte kurz und versuche es erneut.", "No login method is available for this tenant": "Für diesen Mandanten ist keine Login-Methode verfügbar", diff --git a/i18n/default_en.json b/i18n/default_en.json index 1a0a11c..ec30762 100644 --- a/i18n/default_en.json +++ b/i18n/default_en.json @@ -63,6 +63,43 @@ "Too many login attempts. Please wait and try again.": "Too many login attempts. Please wait and try again.", "No login method is available for this tenant": "No login method is available for this tenant", "Cached": "Cached", + "App identity": "App identity", + "Configured": "Configured", + "Not configured": "Not configured", + "Theme policy": "Theme policy", + "Brand color": "Brand color", + "User override enabled": "User override enabled", + "User override disabled": "User override disabled", + "Token lifetime policy": "Token lifetime policy", + "Token operations": "Token operations", + "CORS allowlist": "CORS allowlist", + "Shared Microsoft credentials": "Shared Microsoft credentials", + "Authority endpoint": "Authority endpoint", + "SMTP connection": "SMTP connection", + "SMTP credentials": "SMTP credentials", + "Sender identity": "Sender identity", + "%d defaults configured": "%d defaults configured", + "%d events enabled": "%d events enabled", + "%d origins configured": "%d origins configured", + "days": "days", + "Leave empty to use the runtime default title.": "Leave empty to use the runtime default title.", + "Leave empty to keep the currently stored password.": "Leave empty to keep the currently stored password.", + "Leave empty to keep the currently stored client secret.": "Leave empty to keep the currently stored client secret.", + "This setting controls the application name shown across the UI.": "This setting controls the application name shown across the UI.", + "This setting controls the default language for users without a personal preference.": "This setting controls the default language for users without a personal preference.", + "These defaults prefill tenant, department and role when new users are created.": "These defaults prefill tenant, department and role when new users are created.", + "This setting controls the global default theme and whether users may choose their own theme.": "This setting controls the global default theme and whether users may choose their own theme.", + "This setting controls the primary UI accent color for the default app theme.": "This setting controls the primary UI accent color for the default app theme.", + "Telemetry helps detect recurring UI issues and failed requests in production.": "Telemetry helps detect recurring UI issues and failed requests in production.", + "Limit which event types are collected to match your privacy and operations requirements.": "Limit which event types are collected to match your privacy and operations requirements.", + "These settings define how the application connects to your SMTP server.": "These settings define how the application connects to your SMTP server.", + "Provide authentication data used by the SMTP transport.": "Provide authentication data used by the SMTP transport.", + "This identity appears in outgoing emails sent by the platform.": "This identity appears in outgoing emails sent by the platform.", + "These limits define default and maximum lifetimes for newly issued API tokens.": "These limits define default and maximum lifetimes for newly issued API tokens.", + "Define which origins may call your API from browsers. Use one origin per line.": "Define which origins may call your API from browsers. Use one origin per line.", + "This action revokes all active API tokens immediately across all users.": "This action revokes all active API tokens immediately across all users.", + "The authority URL defines the Microsoft identity tenant endpoint used for sign-in.": "The authority URL defines the Microsoft identity tenant endpoint used for sign-in.", + "This will expire all remember-me tokens immediately and force users to sign in again.": "This will expire all remember-me tokens immediately and force users to sign in again.", "Global settings are stored in the database. config/settings.php is only a runtime cache for selected app settings.": "Global settings are stored in the database. config/settings.php is only a runtime cache for selected app settings.", "Create your account": "Create your account", "First name": "First name", diff --git a/pages/admin/settings/index(default).phtml b/pages/admin/settings/index(default).phtml index 1adff84..a05bc9d 100644 --- a/pages/admin/settings/index(default).phtml +++ b/pages/admin/settings/index(default).phtml @@ -129,7 +129,6 @@ $disabledAttr = $isReadOnly ? 'disabled' : ''; - @@ -139,153 +138,192 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
- -
-
- -
- -
-
-
- -
-
+
+ + + + + + +
+
+ +
-
- + + + + +
+
+ + 0) + (int) ($defaultDepartmentId > 0) + (int) ($defaultRoleId > 0); ?> +
+ + + + + + +
+
+ +
+
+ + +
+ +
-
- -
-
-
-
- - - -
-
- +
+ + + + + + + +
+
+ +
- -
-
+
+ + +
+ +
+ -
- - - - - - -
+
+ + + + + + +
+
+ +
+
+ + + +
+
+
- : - + + + +
@@ -308,8 +346,11 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
- : - / + + + + +
@@ -340,8 +381,11 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
- : - / + + + + +
@@ -378,8 +422,10 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
- : - + + + +
@@ -404,61 +450,70 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
-
-
-
- -
-
- - - - - - -
-
> - - - - - - -
-
-
- -
-
- - - -
+
+ + + + + + + +
+
+ +
+
+ + +
+
> + + +
+
+
+
+ + + + + + +
+
+ +
+
+ + + +
+
@@ -511,83 +566,149 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
-

-
- - -
- - +
+ + + + + / + + + +
+
+ +
+
+ + +
+
+
+ + +
+ + + + + + +
+
+ +
+ + +
+
+ -
- -

-

- -
+
+ + + + + + +
+
+ +
+ +
+
-
- -
- - - +
+ + + + + + +
+
+ +
+ + +
+
+ +
+ + + + + + +
+
+ +
+ +
+
-
- -

- -

-

- -

-
- - -
-
+
+ diff --git a/web/css/components/app-details-card.css b/web/css/components/app-details-card.css index 46b8cc2..75c7b5f 100644 --- a/web/css/components/app-details-card.css +++ b/web/css/components/app-details-card.css @@ -15,12 +15,32 @@ line-height: 1.25; text-transform: none; background: var(--app-card-sectioning-background-color); + display: flex; + align-items: center; + gap: calc(var(--app-spacing) * 0.5); } details.app-details-card > summary::after { margin-inline-start: calc(var(--app-spacing) * 0.5); } + details.app-details-card > summary .app-details-card-summary-title { + min-width: 0; + overflow-wrap: anywhere; + } + + details.app-details-card > summary .app-details-card-summary-meta { + margin-inline-start: auto; + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: calc(var(--app-spacing) * 0.35); + } + + details.app-details-card > summary .app-details-card-summary-meta .badge { + white-space: nowrap; + } + details.app-details-card[open] > summary { margin-bottom: var(--app-spacing); border-bottom: 1px solid diff --git a/web/js/components/app-settings-telemetry.js b/web/js/components/app-settings-telemetry.js index 839a389..1bc1ba5 100644 --- a/web/js/components/app-settings-telemetry.js +++ b/web/js/components/app-settings-telemetry.js @@ -1,13 +1,8 @@ const initTelemetrySettings = () => { - const panel = document.querySelector('[data-tab-panel="telemetry"]'); - if (!panel) { - return; - } - - const toggle = panel.querySelector('[data-telemetry-enabled-toggle]'); - const samplingFieldset = panel.querySelector('[data-telemetry-sampling-fieldset]'); - const samplingRow = panel.querySelector('[data-telemetry-sampling-row]'); - const samplingSelect = panel.querySelector('[data-telemetry-sampling-select]'); + const toggle = document.querySelector('[data-telemetry-enabled-toggle]'); + const samplingFieldset = document.querySelector('[data-telemetry-sampling-fieldset]'); + const samplingRow = document.querySelector('[data-telemetry-sampling-row]'); + const samplingSelect = document.querySelector('[data-telemetry-sampling-select]'); if (!toggle || !samplingFieldset) { return;