gsadmin/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2026-10-26 06:19:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #730 from abhinavxd/fix/release-ui-spacing

Browse Source 
fix login layout and agent control spacing
This commit is contained in:
Abhinav Raut
2026-10-22 00:45:26 +05:30
committed by GitHub
parent fe64652a38 f7d8ed5b24
commit 2dc96fca34
7 changed files with 25 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/main/src/components/combobox/SelectCombobox.vue
+10 -8
View File
@@ -17,7 +17,7 @@
<template #item="{ item }">
<div class="flex items-center gap-2">
<!--USER -->
<div v-if="type === 'user'" class="relative">
<div v-if="type === 'user'" class="relative flex shrink-0">
<Avatar class="w-7 h-7">
<AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
<AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
@@ -26,7 +26,7 @@
v-if="item.availability_status"
:status="item.availability_status"
size="sm"
class="absolute -bottom-[3px] -right-[3px]"
class="absolute bottom-0 right-0"
/>
</div>
@@ -45,7 +45,7 @@
<div class="flex items-center gap-2 min-w-0">
<div v-if="selected" class="flex items-center gap-2 min-w-0">
<!--USER -->
<div v-if="type === 'user'" class="relative shrink-0">
<div v-if="type === 'user'" class="relative flex shrink-0">
<Avatar class="w-7 h-7">
<AvatarImage :src="selected.avatar_url || ''" :alt="selected.label.slice(0, 2)" />
<AvatarFallback>{{ selected.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
@@ -54,17 +54,19 @@
v-if="selected.availability_status"
:status="selected.availability_status"
size="sm"
class="absolute -bottom-[3px] -right-[3px]"
class="absolute bottom-0 right-0"
/>
</div>
<!-- Others -->
<PriorityMarker v-else-if="type === 'priority'" :priority="selected.label" :tooltip="false" />
<PriorityMarker
v-else-if="type === 'priority'"
:priority="selected.label"
:tooltip="false"
/>
<span v-else-if="selected.emoji" class="shrink-0">{{ selected.emoji }}</span>
<span class="truncate">{{ selected.label }}</span>
<span
v-if="isCurrentUser(selected)"
class="text-muted-foreground text-xs shrink-0"
<span v-if="isCurrentUser(selected)" class="text-muted-foreground text-xs shrink-0"
>({{ t('globals.terms.you') }})</span
>
</div>
frontend/apps/main/src/components/sidebar/SidebarNavUser.vue
+3 -7
View File
@@ -1,11 +1,8 @@
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="default"
class="p-0 !overflow-visible"
>
<div class="relative">
<SidebarMenuButton size="default" class="p-0">
<div class="relative flex shrink-0">
<Avatar class="h-8 w-8">
<AvatarImage :src="userStore.avatar" alt="U" />
<AvatarFallback>
@@ -15,7 +12,7 @@
<StatusDot
:status="userStore.user.availability_status"
size="sm"
class="absolute -bottom-[3px] -right-[3px]"
class="absolute bottom-0 right-0"
/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
@@ -107,7 +104,6 @@
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>
<script setup>
frontend/apps/main/src/features/conversation/EmailConversationForm.vue
+1 -1
View File
@@ -191,7 +191,7 @@
</FormItem>
</FormField>
<div :class="[ROW_CLASS, 'grid grid-cols-1 sm:grid-cols-2 sm:gap-4']">
<div :class="[ROW_CLASS, 'grid grid-cols-1 gap-y-1 py-1 sm:grid-cols-2 sm:gap-4']">
<FormField v-slot="{ componentField }" name="team_id">
<FormItem class="flex items-center gap-2 min-w-0 space-y-0">
<FormLabel :class="ROW_LABEL_CLASS">{{ $t('globals.terms.team', 1) }}</FormLabel>
frontend/apps/main/src/features/conversation/WhatsAppConversationForm.vue
+1 -1
View File
@@ -110,7 +110,7 @@
/>
</div>
<div :class="[ROW_CLASS, 'grid grid-cols-1 sm:grid-cols-2 sm:gap-4']">
<div :class="[ROW_CLASS, 'grid grid-cols-1 gap-y-1 py-1 sm:grid-cols-2 sm:gap-4']">
<div class="flex items-center gap-2 min-w-0">
<span :class="ROW_LABEL_CLASS">{{ $t('globals.terms.team', 1) }}</span>
<SelectTeamCombobox
frontend/apps/main/src/features/conversation/composerRowClasses.js
+1 -1
View File
@@ -3,7 +3,7 @@ export const ROW_LABEL_CLASS = 'w-12 shrink-0 text-sm font-normal text-muted-for
export const ROW_INPUT_CLASS =
'h-9 flex-1 min-w-0 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 focus:ring-0 placeholder:text-muted-foreground/60 data-[placeholder]:text-muted-foreground/60'
export const ROW_COMBOBOX_CLASS =
'h-9 flex-1 min-w-0 border-0 bg-transparent px-0 font-normal shadow-none hover:bg-transparent'
'h-9 flex-1 min-w-0 border-0 bg-transparent px-2 font-normal shadow-none hover:bg-transparent'
export const ROW_COMBOBOX_EMPTY_CLASS = `${ROW_COMBOBOX_CLASS} text-muted-foreground/60`
export const ROW_MESSAGE_CLASS = 'pb-2 pl-14'
frontend/apps/main/src/features/conversation/sidebar/ConversationSideBar.vue
+6 -5
View File
@@ -252,7 +252,8 @@ const sections = computed(() => [
{
id: 'contact_notes',
label: t('globals.terms.note', 2),
visible: !!conversationStore.current?.contact?.id && userStore.can('contact_notes:read')
visible: !!conversationStore.current?.contact?.id,
permitted: userStore.can('contact_notes:read')
},
{ id: 'previous_conversations', label: t('globals.terms.conversation', 2) }
])
@@ -268,7 +269,7 @@ const normalizedOrder = computed(() => {
const visibleSections = computed(() =>
normalizedOrder.value
.map((id) => sections.value.find((section) => section.id === id))
.filter((section) => section.visible !== false)
.filter((section) => section.visible !== false && section.permitted !== false)
)
const reducedMotion = usePreferredReducedMotion()
const editingSections = ref(false)
@@ -278,12 +279,12 @@ const editableSections = computed({
get: () =>
draftOrder.value
.map((id) => sections.value.find((section) => section.id === id))
.filter((section) => section && section.visible !== false),
.filter((section) => section && section.permitted !== false),
set: (reordered) => {
const visibleIds = new Set(editableSections.value.map((section) => section.id))
const editableIds = new Set(editableSections.value.map((section) => section.id))
let index = 0
draftOrder.value = draftOrder.value.map((id) =>
visibleIds.has(id) ? reordered[index++].id : id
editableIds.has(id) ? reordered[index++].id : id
)
}
})
frontend/apps/main/src/layouts/auth/AuthLayout.vue
+3 -21
View File
@@ -1,11 +1,7 @@
<template>
<div class="relative isolate h-screen overflow-y-auto overscroll-contain bg-background">
<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
<div class="auth-grid absolute inset-0" />
<div class="auth-light absolute inset-0" />
</div>
<div class="relative flex min-h-full flex-col">
<main class="flex flex-1 items-center justify-center px-4 py-10 sm:px-6 sm:py-16">
<div class="h-screen overflow-y-auto overscroll-contain bg-secondary">
<div class="flex min-h-full flex-col">
<main class="flex flex-1 items-start justify-center px-4 pb-10 pt-[15vh] sm:px-6">
<div class="auth-content w-full max-w-sm">
<slot />
</div>
@@ -22,21 +18,7 @@ import PoweredBy from '@shared-ui/components/PoweredBy.vue'
</script>
<style scoped>
.auth-grid {
background-image: linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, transparent 20%, black 85%);
}
.auth-light {
background: radial-gradient(ellipse at 50% 35%, hsl(var(--primary) / 0.08), transparent 65%);
}
.auth-content > :deep(*) {
border-radius: calc(var(--radius) + 0.25rem);
box-shadow:
0 20px 60px -20px hsl(var(--foreground) / 0.15),
0 0 0 4px hsl(var(--background) / 0.6);
}
</style>