From d74c240caefbb5500c091e73ce891dab94dace0f Mon Sep 17 00:00:00 2001 From: Abhinav Raut Date: Mon, 10 Feb 2025 02:42:02 +0530 Subject: [PATCH] feat: loader skeletons for conversation sidebar fix: flickering when conversation is loading. fix: load conversation and messages using promise.all feat: enforce fixed desktop layout with 1024px viewport - minor fixes and refactors --- frontend/index.html | 2 +- frontend/package.json | 2 +- frontend/pnpm-lock.yaml | 2 +- frontend/src/Root.vue | 2 +- frontend/src/assets/styles/main.scss | 20 +++---- frontend/src/components/sidebar/Sidebar.vue | 3 +- .../src/components/ui/loader/DotLoader.vue | 2 +- .../src/components/ui/sidebar/Sidebar.vue | 10 ++-- .../ui/sidebar/SidebarMenuAction.vue | 1 - .../components/ui/sidebar/SidebarProvider.vue | 2 +- .../features/admin/automation/ActionBox.vue | 2 +- .../src/features/admin/automation/RuleBox.vue | 2 +- .../features/admin/automation/RuleList.vue | 2 +- .../src/features/admin/roles/RoleForm.vue | 2 +- .../features/conversation/Conversation.vue | 5 +- .../conversation/ConversationPlaceholder.vue | 2 +- .../conversation/ConversationTextEditor.vue | 2 +- .../src/features/conversation/ReplyBox.vue | 6 +- .../conversation/message/MessageList.vue | 4 +- .../conversation/message/MessagesSkeleton.vue | 22 +++++--- .../conversation/sidebar/ConversationInfo.vue | 56 ++++++++++++------- .../sidebar/ConversationSideBar.vue | 9 ++- .../sidebar/ConversationSideBarContact.vue | 30 +++++++--- .../sidebar/ConversationSideBarWrapper.vue | 28 ++++------ .../src/features/reports/DashboardCard.vue | 2 +- frontend/src/features/view/ViewForm.vue | 4 +- frontend/src/layouts/inbox/InboxLayout.vue | 24 ++++---- frontend/src/stores/conversation.js | 46 +++++++-------- frontend/src/stores/user.js | 5 +- .../conversation/ConversationDetailView.vue | 12 ++-- frontend/src/views/inbox/InboxView.vue | 2 +- frontend/tailwind.config.js | 6 ++ 32 files changed, 178 insertions(+), 141 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 038b5f39..3c1437c8 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + - +
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss index fcc6ad1c..83074b04 100644 --- a/frontend/src/assets/styles/main.scss +++ b/frontend/src/assets/styles/main.scss @@ -7,24 +7,23 @@ } .page-content { - height: 100%; + min-height: 100%; overflow-y: scroll; padding-bottom: 100px; background-color: #fff; } @layer base { - html { + html, + body { font-family: 'Plus Jakarta Sans', sans-serif; + min-height: 100%; + overflow: hidden; + margin: 0; } } -body { - overflow: hidden; -} - // Theme. - @layer base { :root { --background: 0 0% 100%; @@ -156,6 +155,7 @@ body { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); table { width: 100% !important; + table-layout: fixed !important; } } @@ -168,7 +168,7 @@ body { } .box { - @apply border shadow; + @apply border shadow rounded-lg; } .dashboard-card { @@ -187,7 +187,7 @@ body { ::-webkit-scrollbar-thumb { background-color: #888; - border-radius: 10px; + border-radius: 3px; border: 2px solid transparent; background-clip: content-box; } @@ -198,7 +198,7 @@ body { ::-webkit-scrollbar-track { background: #f0f0f0; - border-radius: 10px; + border-radius: 3px; } // End Scrollbar diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue index 34b41a50..c6a5517c 100644 --- a/frontend/src/components/sidebar/Sidebar.vue +++ b/frontend/src/components/sidebar/Sidebar.vue @@ -265,11 +265,12 @@ const sidebarOpen = useStorage('sidebarOpen', true) v-on:update:open="sidebarOpen = $event" > + - + diff --git a/frontend/src/components/ui/loader/DotLoader.vue b/frontend/src/components/ui/loader/DotLoader.vue index 28a800d2..c6df617d 100644 --- a/frontend/src/components/ui/loader/DotLoader.vue +++ b/frontend/src/components/ui/loader/DotLoader.vue @@ -1,6 +1,6 @@