accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-25 16:18:33 +00:00
Code Issues Releases Activity

refactor: scrolling and outsideclick directive

Browse Source
This commit is contained in:
18alantom 2022-02-10 15:28:20 +05:30
parent fec1f65e33
commit a2ff952b4a
3 changed files with 55 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/WithScroll.vue
View File

@ -1,3 +1,8 @@
<template>
<div class="scroll-container">
<slot></slot>
</div>
</template>
<script> <script>
export default { export default {
name: 'WithScroll', name: 'WithScroll',
@ -14,8 +19,23 @@ export default {
delete this.listener; delete this.listener;
} }
}, },
render() {
return this.$slots.default[0];
},
}; };
</script> </script>
<style>
.scroll-container {
height: calc(100vh - 12rem);
}
.scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.200');
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.300');
}
.scroll-container::-webkit-scrollbar-track {
background-color: white;
}
</style>

28
src/pages/Report.vue
View File

@ -7,7 +7,6 @@
<template #actions> <template #actions>
<DropdownWithActions <DropdownWithActions
v-for="group of actionGroups" v-for="group of actionGroups"
@click="group.action(reportData, filters)"
:key="group.label" :key="group.label"
:type="group.type" :type="group.type"
:actions="group.actions" :actions="group.actions"
@ -60,8 +59,11 @@
</div> </div>
</Row> </Row>
</div> </div>
<WithScroll @scroll="onBodyScroll"> <WithScroll
<div class="flex-1 overflow-auto report-scroll-container"> @scroll="onBodyScroll"
class="flex-1 overflow-auto"
style="height: calc(100vh - 12rem)"
>
<Row <Row
v-show="row.isShown" v-show="row.isShown"
v-for="(row, i) in rows" v-for="(row, i) in rows"
@ -90,7 +92,6 @@
</div> </div>
</div> </div>
</Row> </Row>
</div>
</WithScroll> </WithScroll>
</div> </div>
</div> </div>
@ -372,22 +373,3 @@ export default {
}, },
}; };
</script> </script>
<style>
.report-scroll-container {
height: calc(100vh - 12rem);
}
.report-scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.report-scroll-container::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.200');
}
.report-scroll-container::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.300');
}
.report-scroll-container::-webkit-scrollbar-track {
background-color: white;
}
</style>

4
src/ui.js
View File

@ -8,7 +8,7 @@ function onDocumentClick(e, el, fn) {
} }
export const outsideClickDirective = { export const outsideClickDirective = {
bind(el, binding) { beforeMount(el, binding) {
el.dataset.outsideClickIndex = instances.length; el.dataset.outsideClickIndex = instances.length;
const fn = binding.value; const fn = binding.value;
@ -19,7 +19,7 @@ export const outsideClickDirective = {
document.addEventListener('click', click); document.addEventListener('click', click);
instances.push(click); instances.push(click);
}, },
unbind(el) { unmounted(el) {
const index = el.dataset.outsideClickIndex; const index = el.dataset.outsideClickIndex;
const handler = instances[index]; const handler = instances[index];
document.addEventListener('click', handler); document.addEventListener('click', handler);