2
0
mirror of https://github.com/frappe/books.git synced 2024-12-22 19:09:01 +00:00

incr: persistent scroll bars

This commit is contained in:
18alantom 2022-05-13 16:50:48 +05:30
parent 5188f28c0d
commit fa063b719a
3 changed files with 36 additions and 36 deletions

View File

@ -20,7 +20,7 @@
<div class="flex gap-1 bg-gray-100 rounded"> <div class="flex gap-1 bg-gray-100 rounded">
<input <input
type="number" type="number"
class="w-6 text-right outline-none bg-transparent focus:text-gray-900" class="w-7 text-right outline-none bg-transparent focus:text-gray-900"
:value="pageNo" :value="pageNo"
@change="(e) => setPageNo(e.target.value)" @change="(e) => setPageNo(e.target.value)"
@input="(e) => setPageNo(e.target.value)" @input="(e) => setPageNo(e.target.value)"
@ -28,7 +28,7 @@
:max="maxPages" :max="maxPages"
/> />
<p class="text-gray-600">/</p> <p class="text-gray-600">/</p>
<p class="w-5"> <p class="w-7">
{{ maxPages }} {{ maxPages }}
</p> </p>
</div> </div>
@ -46,7 +46,7 @@
<!-- Count Selector --> <!-- Count Selector -->
<div <div
class="border rounded flex justify-self-end" class="border border-gray-100 rounded flex justify-self-end"
v-if="filteredCounts.length" v-if="filteredCounts.length"
> >
<template v-for="c in filteredCounts" :key="c + '-count'"> <template v-for="c in filteredCounts" :key="c + '-count'">
@ -55,7 +55,7 @@
class="w-9" class="w-9"
:class=" :class="
count === c || (count === itemCount && c === -1) count === c || (count === itemCount && c === -1)
? 'bg-gray-200' ? 'bg-gray-100'
: '' : ''
" "
> >

View File

@ -1,41 +1,39 @@
<template> <template>
<div class="overflow-hidden flex flex-col h-full"> <div class="overflow-hidden flex flex-col h-full">
<!-- Report Outer Container --> <!-- Report Outer Container -->
<div class="overflow-x-scroll overflow-y-hidden"> <div class="overflow-hidden">
<!-- Title Row --> <!--Title Row -->
<div class="inline-block"> <div
class="w-full overflow-x-hidden flex items-center border-b"
ref="titlerow"
:style="{ height: `${hconst}px`, paddingRight: '8px' }"
>
<div <div
class="flex items-center border-b" v-for="(col, c) in report.columns"
:style="{ height: `${hconst}px` }" :key="c + '-col'"
ref="titleRow" :style="getCellStyle(col, c)"
class="
text-gray-600 text-base
px-3
flex-shrink-0
overflow-x-scroll
whitespace-nowrap
"
> >
<p {{ col.label }}
v-for="(col, c) in report.columns"
:key="c + '-col'"
:style="getCellStyle(col, c)"
class="
text-gray-600 text-base
px-3
flex-shrink-0
overflow-x-scroll
whitespace-nowrap
"
>
{{ col.label }}
</p>
</div> </div>
</div> </div>
<!-- Report Rows Container --> <WithScroll
<div class="overflow-auto w-full"
class="overflow-y-scroll inline-block"
style="height: calc(100% - 49px)" style="height: calc(100% - 49px)"
@scroll="scroll"
> >
<!-- Report Rows --> <!-- Report Rows -->
<div <div
v-for="(row, r) in report.reportData.slice(pageStart, pageEnd)" v-for="(row, r) in report.reportData.slice(pageStart, pageEnd)"
:key="r + '-row'" :key="r + '-row'"
class="flex items-center" class="flex items-center w-max"
:style="{ height: `${hconst}px` }" :style="{ height: `${hconst}px` }"
:class="r !== pageEnd - 1 ? 'border-b' : ''" :class="r !== pageEnd - 1 ? 'border-b' : ''"
> >
@ -55,8 +53,8 @@
{{ cell.value }} {{ cell.value }}
</div> </div>
</div> </div>
<!-- </div> --> </WithScroll>
</div> <!-- Report Rows Container -->
</div> </div>
<!-- Pagination Footer --> <!-- Pagination Footer -->
@ -73,6 +71,7 @@
import { Report } from 'reports/Report'; import { Report } from 'reports/Report';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Paginator from '../Paginator.vue'; import Paginator from '../Paginator.vue';
import WithScroll from '../WithScroll.vue';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -87,6 +86,9 @@ export default defineComponent({
}; };
}, },
methods: { methods: {
scroll({ scrollLeft }) {
this.$refs.titlerow.scrollLeft = scrollLeft;
},
setPageIndices({ start, end }) { setPageIndices({ start, end }) {
this.pageStart = start; this.pageStart = start;
this.pageEnd = end; this.pageEnd = end;
@ -112,6 +114,6 @@ export default defineComponent({
return styles; return styles;
}, },
}, },
components: { Paginator }, components: { Paginator, WithScroll },
}); });
</script> </script>

View File

@ -22,19 +22,17 @@ export default {
}, },
}; };
</script> </script>
<style> <style>
.scroll-container {
height: calc(100vh - 12rem);
}
.scroll-container::-webkit-scrollbar { .scroll-container::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
.scroll-container::-webkit-scrollbar-thumb { .scroll-container::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.200'); background-color: theme('colors.gray.100');
} }
.scroll-container::-webkit-scrollbar-thumb:hover { .scroll-container::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.300'); background-color: theme('colors.gray.200');
} }
.scroll-container::-webkit-scrollbar-track { .scroll-container::-webkit-scrollbar-track {
background-color: white; background-color: white;