diff --git a/modules/helpdesk/pages/helpdesk/team/index(default).phtml b/modules/helpdesk/pages/helpdesk/team/index(default).phtml index 7a4f2bb..8f96574 100644 --- a/modules/helpdesk/pages/helpdesk/team/index(default).phtml +++ b/modules/helpdesk/pages/helpdesk/team/index(default).phtml @@ -53,9 +53,26 @@ $periodLabels = [ ?>
-
+
-
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css index 456dd9e..6d4b6de 100644 --- a/modules/helpdesk/web/css/helpdesk.css +++ b/modules/helpdesk/web/css/helpdesk.css @@ -126,6 +126,67 @@ } } + /* Team workload — skeleton loading */ + .helpdesk-team-skeleton-card { + border: 1px solid var(--app-muted-border-color); + border-radius: var(--app-radius, 0.375rem); + overflow: hidden; + margin-bottom: calc(var(--app-spacing) * 0.5); + } + + .helpdesk-team-skeleton-header { + display: flex; + align-items: center; + gap: calc(var(--app-spacing) * 0.5); + padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75); + background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent); + border-bottom: 1px solid var(--app-muted-border-color); + } + + .helpdesk-team-skeleton-avatar { + width: 2rem; + height: 2rem; + border-radius: 50%; + flex-shrink: 0; + } + + .helpdesk-team-skeleton-name { + height: 0.85rem; + width: 10rem; + } + + .helpdesk-team-skeleton-badge { + height: 1.1rem; + width: 2rem; + border-radius: 999px; + margin-left: auto; + } + + .helpdesk-team-skeleton-rows { + padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.5); + } + + .helpdesk-team-skeleton-row { + display: flex; + gap: calc(var(--app-spacing) * 0.5); + padding: calc(var(--app-spacing) * 0.3) 0; + } + + .helpdesk-team-skeleton-cell-sm { + height: 0.7rem; + width: 5rem; + } + + .helpdesk-team-skeleton-cell-md { + height: 0.7rem; + width: 10rem; + } + + .helpdesk-team-skeleton-cell-lg { + height: 0.7rem; + flex: 1; + } + /* Team workload — agent widget card */ .helpdesk-team-widget { border: 1px solid var(--app-muted-border-color); diff --git a/modules/helpdesk/web/js/helpdesk-team.js b/modules/helpdesk/web/js/helpdesk-team.js index 6f76654..7a06ac7 100644 --- a/modules/helpdesk/web/js/helpdesk-team.js +++ b/modules/helpdesk/web/js/helpdesk-team.js @@ -29,7 +29,6 @@ if (container) { if (elError) elError.hidden = state !== 'error'; if (elEmpty) elEmpty.hidden = state !== 'empty'; if (elContent) elContent.hidden = state !== 'success'; - if (elLoading) elLoading.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false'); } function h(tag, cls, text) {