accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-23 11:29:03 +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>
export default {
name: 'WithScroll',
@ -14,8 +19,23 @@ export default {
delete this.listener;
}
},
render() {
return this.$slots.default[0];
},
};
</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>

78
src/pages/Report.vue
View File

@ -7,7 +7,6 @@
<template #actions>
<DropdownWithActions
v-for="group of actionGroups"
@click="group.action(reportData, filters)"
:key="group.label"
:type="group.type"
:actions="group.actions"
@ -60,37 +59,39 @@
</div>
</Row>
</div>
<WithScroll @scroll="onBodyScroll">
<div class="flex-1 overflow-auto report-scroll-container">
<Row
v-show="row.isShown"
v-for="(row, i) in rows"
:key="i"
gap="2rem"
:grid-template-columns="gridTemplateColumns"
<WithScroll
@scroll="onBodyScroll"
class="flex-1 overflow-auto"
style="height: calc(100vh - 12rem)"
>
<Row
v-show="row.isShown"
v-for="(row, i) in rows"
:key="i"
gap="2rem"
:grid-template-columns="gridTemplateColumns"
>
<div
class="py-4 text-base overflow-scroll no-scrollbar"
:class="getCellClasses(row, column)"
v-for="column in columns"
:key="column.label"
@click="toggleChildren(row, i)"
>
<div
class="py-4 text-base overflow-scroll no-scrollbar"
:class="getCellClasses(row, column)"
v-for="column in columns"
:key="column.label"
@click="toggleChildren(row, i)"
>
<div class="inline-flex">
<feather-icon
v-if="row.isBranch && !row.isLeaf && column === columns[0]"
class="flex-shrink-0 w-4 h-4 mr-2"
:name="row.expanded ? 'chevron-down' : 'chevron-right'"
<div class="inline-flex">
<feather-icon
v-if="row.isBranch && !row.isLeaf && column === columns[0]"
class="flex-shrink-0 w-4 h-4 mr-2"
:name="row.expanded ? 'chevron-down' : 'chevron-right'"
/>
<span class="truncate" :class="{ 'bg-gray-100': loading }">
<component
:is="cellComponent(row[column.fieldname], column)"
/>
<span class="truncate" :class="{ 'bg-gray-100': loading }">
<component
:is="cellComponent(row[column.fieldname], column)"
/>
</span>
</div>
</span>
</div>
</Row>
</div>
</div>
</Row>
</WithScroll>
</div>
</div>
@ -372,22 +373,3 @@ export default {
},
};
</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 = {
bind(el, binding) {
beforeMount(el, binding) {
el.dataset.outsideClickIndex = instances.length;
const fn = binding.value;
@ -19,7 +19,7 @@ export const outsideClickDirective = {
document.addEventListener('click', click);
instances.push(click);
},
unbind(el) {
unmounted(el) {
const index = el.dataset.outsideClickIndex;
const handler = instances[index];
document.addEventListener('click', handler);