WIP - UI fixes for bottom bar
This commit is contained in:
@@ -50,6 +50,6 @@ const handleSend = () => {
|
||||
|
||||
<style scoped>
|
||||
.ai-chat-area {
|
||||
min-height: 120px;
|
||||
min-height: 190px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -190,15 +190,17 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4">
|
||||
<div class="pointer-events-none fixed inset-x-0 bottom-0 z-30 flex justify-center px-2">
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-5xl border border-border bg-background shadow-xl transition-all duration-200"
|
||||
class="pointer-events-auto w-full border border-border bg-background shadow-xl transition-all duration-200"
|
||||
:style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
|
||||
>
|
||||
<div class="flex items-center justify-between border-border px-4 py-2">
|
||||
<div class="grid grid-cols-3 items-center justify-between border-border px-2 py-2">
|
||||
|
||||
<div class="flex">
|
||||
|
||||
<Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
|
||||
<TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
|
||||
<TabsList class="mx-2 mt-2 grid w-fit grid-cols-2">
|
||||
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
|
||||
<Phone class="h-4 w-4" />
|
||||
Softphone
|
||||
@@ -214,6 +216,9 @@ onBeforeUnmount(() => {
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
|
||||
@mousedown="startResize"
|
||||
@@ -221,6 +226,8 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<span class="h-1.5 w-12 rounded-full bg-muted" />
|
||||
</div>
|
||||
|
||||
<div class="flex col-start-3 justify-end">
|
||||
<Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
|
||||
<X v-if="isDrawerOpen" class="h-4 w-4" />
|
||||
<ChevronUp v-else class="h-4 w-4" />
|
||||
@@ -228,6 +235,8 @@ onBeforeUnmount(() => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
|
||||
<TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
|
||||
<TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
|
||||
@@ -422,8 +431,8 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="ai" class="h-full">
|
||||
<div class="flex h-full flex-col justify-end">
|
||||
<TabsContent value="ai" class="h-full relative">
|
||||
<div class="flex flex-col justify-end absolute bottom-0 w-full">
|
||||
<AIChatBar />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
Reference in New Issue
Block a user