test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added resizer in side panel

Browse Source
This commit is contained in:
Shariq Ansari 2024-10-29 12:27:19 +05:30
parent 79a9545319
commit 069b58506f
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Resizer.vue
View File

@ -2,8 +2,12 @@
<div class="relative" :style="{ width: `${sidebarWidth}px` }"> <div class="relative" :style="{ width: `${sidebarWidth}px` }">
<slot v-bind="{ sidebarResizing, sidebarWidth }" /> <slot v-bind="{ sidebarResizing, sidebarWidth }" />
<div <div
class="absolute left-0 z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100" class="absolute z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100"
:class="{ 'opacity-100': sidebarResizing }" :class="{
'opacity-100': sidebarResizing,
'left-0': side == 'right',
'right-0': side == 'left',
}"
@mousedown="startResize" @mousedown="startResize"
/> />
</div> </div>
@ -81,6 +85,6 @@ function resize(e) {
function distance() { function distance() {
if (!props.parent) return 0 if (!props.parent) return 0
const rect = props.parent.getBoundingClientRect() const rect = props.parent.getBoundingClientRect()
return window.innerWidth - rect[props.side] return rect[props.side]
} }
</script> </script>

10
frontend/src/pages/Contact.vue
View File

@ -8,10 +8,11 @@
</Breadcrumbs> </Breadcrumbs>
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex h-full"> <div ref="parentRef" class="flex h-full">
<div <Resizer
v-if="contact.data" v-if="contact.data"
class="flex h-full flex-col overflow-hidden border-r min-w-[352px]" :parent="$refs.parentRef"
class="flex h-full flex-col overflow-hidden border-r"
> >
<div class="border-b"> <div class="border-b">
<FileUploader <FileUploader
@ -148,7 +149,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </Resizer>
<Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs"> <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
<template #tab="{ tab, selected }"> <template #tab="{ tab, selected }">
<button <button
@ -203,6 +204,7 @@
</template> </template>
<script setup> <script setup>
import Resizer from '@/components/Resizer.vue'
import Icon from '@/components/Icon.vue' import Icon from '@/components/Icon.vue'
import Section from '@/components/Section.vue' import Section from '@/components/Section.vue'
import SectionFields from '@/components/SectionFields.vue' import SectionFields from '@/components/SectionFields.vue'