mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
1 year ago
35 changed files with 536 additions and 557 deletions
After Width: | Height: | Size: 463 B |
@ -0,0 +1,190 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Pane, Splitpanes } from 'splitpanes' |
||||||
|
import 'splitpanes/dist/splitpanes.css' |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
const route = router.currentRoute |
||||||
|
|
||||||
|
const { |
||||||
|
isLeftSidebarOpen, |
||||||
|
leftSidebarWidthPercent, |
||||||
|
leftSideBarSize: sideBarSize, |
||||||
|
leftSidebarState: sidebarState, |
||||||
|
} = storeToRefs(useSidebarStore()) |
||||||
|
|
||||||
|
const wrapperRef = ref<HTMLDivElement>() |
||||||
|
|
||||||
|
const contentSize = computed(() => 100 - sideBarSize.value.current) |
||||||
|
const animationDuration = 250 |
||||||
|
const viewportWidth = ref(window.innerWidth) |
||||||
|
|
||||||
|
const sidebarWidth = computed(() => (sideBarSize.value.old * viewportWidth.value) / 100) |
||||||
|
const currentSidebarSize = computed({ |
||||||
|
get: () => sideBarSize.value.current, |
||||||
|
set: (val) => { |
||||||
|
sideBarSize.value.current = val |
||||||
|
sideBarSize.value.old = val |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
watch(currentSidebarSize, () => { |
||||||
|
leftSidebarWidthPercent.value = currentSidebarSize.value |
||||||
|
}) |
||||||
|
|
||||||
|
watch(isLeftSidebarOpen, () => { |
||||||
|
sideBarSize.value.current = sideBarSize.value.old |
||||||
|
|
||||||
|
if (isLeftSidebarOpen.value) { |
||||||
|
setTimeout(() => (sidebarState.value = 'openStart'), 0) |
||||||
|
|
||||||
|
setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration) |
||||||
|
} else { |
||||||
|
sideBarSize.value.old = sideBarSize.value.current |
||||||
|
|
||||||
|
sidebarState.value = 'hiddenStart' |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
sideBarSize.value.current = 0 |
||||||
|
|
||||||
|
sidebarState.value = 'hiddenEnd' |
||||||
|
}, animationDuration) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
function handleMouseMove(e: MouseEvent) { |
||||||
|
if (!wrapperRef.value) return |
||||||
|
if (sidebarState.value === 'openEnd') return |
||||||
|
|
||||||
|
if (e.clientX < 4 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) { |
||||||
|
sidebarState.value = 'peekOpenStart' |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
sidebarState.value = 'peekOpenEnd' |
||||||
|
}, animationDuration) |
||||||
|
} else if (e.clientX > sidebarWidth.value + 10 && sidebarState.value === 'peekOpenEnd') { |
||||||
|
sidebarState.value = 'peekCloseOpen' |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
sidebarState.value = 'peekCloseEnd' |
||||||
|
}, animationDuration) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function onWindowResize() { |
||||||
|
viewportWidth.value = window.innerWidth |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
document.addEventListener('mousemove', handleMouseMove) |
||||||
|
window.addEventListener('resize', onWindowResize) |
||||||
|
}) |
||||||
|
|
||||||
|
onBeforeUnmount(() => { |
||||||
|
document.removeEventListener('mousemove', handleMouseMove) |
||||||
|
window.removeEventListener('resize', onWindowResize) |
||||||
|
}) |
||||||
|
|
||||||
|
watch(route, () => { |
||||||
|
if (route.value.name === 'index-index') { |
||||||
|
isLeftSidebarOpen.value = true |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<Splitpanes |
||||||
|
class="nc-sidebar-content-resizable-wrapper w-full h-full" |
||||||
|
:class="{ |
||||||
|
'hide-resize-bar': !isLeftSidebarOpen || sidebarState === 'openStart', |
||||||
|
}" |
||||||
|
@resize="currentSidebarSize = $event[0].size" |
||||||
|
> |
||||||
|
<Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-sidebar-splitpane relative !overflow-visible"> |
||||||
|
<div |
||||||
|
ref="wrapperRef" |
||||||
|
class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible" |
||||||
|
:class="{ |
||||||
|
'minimized-height': !isLeftSidebarOpen, |
||||||
|
'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState), |
||||||
|
}" |
||||||
|
:style="{ |
||||||
|
width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`, |
||||||
|
}" |
||||||
|
> |
||||||
|
<slot name="sidebar" /> |
||||||
|
</div> |
||||||
|
</Pane> |
||||||
|
<Pane :size="contentSize"> |
||||||
|
<slot name="content" /> |
||||||
|
</Pane> |
||||||
|
</Splitpanes> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.nc-sidebar-wrapper.minimized-height > * { |
||||||
|
@apply h-4/5 pb-2 !(rounded-r-lg border-1 border-gray-200 shadow-lg); |
||||||
|
width: calc(100% + 4px); |
||||||
|
} |
||||||
|
|
||||||
|
.nc-sidebar-wrapper > * { |
||||||
|
transition: all 0.2s ease-in-out; |
||||||
|
@apply z-10 absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-sidebar-wrapper.hide-sidebar { |
||||||
|
@apply !min-w-0; |
||||||
|
|
||||||
|
> * { |
||||||
|
@apply opacity-0; |
||||||
|
transform: translateX(-100%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** Split pane CSS */ |
||||||
|
|
||||||
|
.nc-sidebar-content-resizable-wrapper > { |
||||||
|
.splitpanes__splitter { |
||||||
|
@apply !w-0 relative overflow-visible; |
||||||
|
} |
||||||
|
.splitpanes__splitter:before { |
||||||
|
@apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40; |
||||||
|
content: ''; |
||||||
|
} |
||||||
|
|
||||||
|
.splitpanes__splitter:hover:before { |
||||||
|
@apply bg-scrollbar; |
||||||
|
width: 3px !important; |
||||||
|
left: -3px; |
||||||
|
} |
||||||
|
|
||||||
|
.splitpanes--dragging .splitpanes__splitter:before { |
||||||
|
@apply bg-scrollbar; |
||||||
|
width: 3px !important; |
||||||
|
left: -3px; |
||||||
|
} |
||||||
|
|
||||||
|
.splitpanes--dragging .splitpanes__splitter { |
||||||
|
@apply w-1 mr-0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nc-sidebar-content-resizable-wrapper.hide-resize-bar > { |
||||||
|
.splitpanes__splitter { |
||||||
|
cursor: default !important; |
||||||
|
opacity: 0 !important; |
||||||
|
background-color: transparent !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.splitpanes__pane { |
||||||
|
transition: width 0.15s ease-in-out !important; |
||||||
|
} |
||||||
|
|
||||||
|
.splitpanes--dragging { |
||||||
|
cursor: col-resize; |
||||||
|
|
||||||
|
> .splitpanes__pane { |
||||||
|
transition: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,43 @@ |
|||||||
|
<template> |
||||||
|
<a-sub-menu class="nc-sub-menu" popup-class-name="nc-submenu-popup"> |
||||||
|
<template #title> |
||||||
|
<div class="flex flex-row items-center gap-x-1.5 py-1.75 justify-between group hover:text-gray-800"> |
||||||
|
<div class="flex flex-row items-center gap-x-2"> |
||||||
|
<slot name="title" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<GeneralIcon icon="arrowRight" class="text-base text-gray-600 group-hover:text-gray-800" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #expandIcon> </template> |
||||||
|
<div class="py-1.5"> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</a-sub-menu> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.ant-dropdown-menu-submenu.nc-sub-menu { |
||||||
|
@apply flex mx-1.5 rounded-md overflow-hidden !hover:bg-gray-100; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-sub-menu > .ant-dropdown-menu-submenu-title { |
||||||
|
@apply pl-2 py-0 w-full; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title:hover { |
||||||
|
@apply !bg-gray-100; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-submenu-popup { |
||||||
|
@apply !rounded-lg border-1 border-gray-50; |
||||||
|
} |
||||||
|
.nc-submenu-popup .ant-dropdown-menu.ant-dropdown-menu-sub { |
||||||
|
@apply !rounded-lg !shadow-lg shadow-gray-200; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-menu-item::after { |
||||||
|
background: none; |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue