ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(Sidebar): Only close sidebar on v-click-outside for specific targets

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2023-01-02 08:50:53 +01:00
parent 0f71a525c0
commit 9cc199dc47
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Sidebar.vue
View File

@@ -38,10 +38,9 @@ export default {
this.$router.push({ name: 'board' }) this.$router.push({ name: 'board' })
}, },
onClickOutside(e) { onClickOutside(e) {
if (Array.from(document.querySelectorAll('.card')).some(node => node.contains(e.target))) { if (e.target?.dataset?.clickClosesSidebar) {
return this.closeSidebar()
} }
this.closeSidebar()
}, },
}, },
} }

5
src/components/board/Board.vue
View File

@@ -53,11 +53,12 @@
<Container lock-axix="y" <Container lock-axix="y"
orientation="horizontal" orientation="horizontal"
:drag-handle-selector="dragHandleSelector" :drag-handle-selector="dragHandleSelector"
data-click-closes-sidebar="true"
@drag-start="draggingStack = true" @drag-start="draggingStack = true"
@drag-end="draggingStack = false" @drag-end="draggingStack = false"
@drop="onDropStack"> @drop="onDropStack">
<Draggable v-for="stack in stacksByBoard" :key="stack.id"> <Draggable v-for="stack in stacksByBoard" :key="stack.id" data-click-closes-sidebar="true">
<Stack :stack="stack" :dragging="draggingStack" /> <Stack :stack="stack" :dragging="draggingStack" data-click-closes-sidebar="true" />
</Draggable> </Draggable>
</Container> </Container>
</div> </div>

1
src/components/board/Stack.vue
View File

@@ -128,6 +128,7 @@
<Container :get-child-payload="payloadForCard(stack.id)" <Container :get-child-payload="payloadForCard(stack.id)"
group-name="stack" group-name="stack"
data-click-closes-sidebar="true"
non-drag-area-selector=".dragDisabled" non-drag-area-selector=".dragDisabled"
:drag-handle-selector="dragHandleSelector" :drag-handle-selector="dragHandleSelector"
@should-accept-drop="canEdit" @should-accept-drop="canEdit"