mirror of
https://github.com/frappe/books.git
synced 2024-12-23 03:19:01 +00:00
fix(ui): custom scrollbars
This commit is contained in:
parent
7899619ab4
commit
8528f3024d
@ -15,8 +15,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="bg-white rounded w-full min-w-40">
|
||||
<div class="p-1 max-h-64 overflow-auto text-sm">
|
||||
<div class="bg-white rounded w-full min-w-40 overflow-hidden">
|
||||
<div class="p-1 max-h-64 overflow-auto custom-scroll text-sm">
|
||||
<div v-if="isLoading" class="p-2 text-gray-600 italic">
|
||||
{{ t`Loading...` }}
|
||||
</div>
|
||||
|
@ -10,7 +10,7 @@
|
||||
<div
|
||||
ref="popover"
|
||||
:class="popoverClass"
|
||||
class="bg-white rounded border shadow-md popover-container relative z-10"
|
||||
class="bg-white rounded border shadow-lg popover-container relative z-10"
|
||||
v-show="isOpen"
|
||||
>
|
||||
<slot name="content" :togglePopover="togglePopover"></slot>
|
||||
@ -79,6 +79,7 @@ export default {
|
||||
if (!this.popper) {
|
||||
this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
|
||||
placement: this.placement,
|
||||
modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
|
||||
});
|
||||
} else {
|
||||
this.popper.update();
|
||||
|
@ -21,6 +21,7 @@
|
||||
flex-shrink-0
|
||||
overflow-x-auto
|
||||
whitespace-nowrap
|
||||
no-scrollbar
|
||||
"
|
||||
>
|
||||
{{ col.label }}
|
||||
@ -58,6 +59,7 @@
|
||||
flex-shrink-0
|
||||
overflow-x-auto
|
||||
whitespace-nowrap
|
||||
no-scrollbar
|
||||
"
|
||||
>
|
||||
{{ cell.value }}
|
||||
@ -73,7 +75,6 @@
|
||||
|
||||
<!-- Pagination Footer -->
|
||||
<div class="mt-auto flex-shrink-0" v-if="report.usePagination">
|
||||
<hr />
|
||||
<Paginator
|
||||
:item-count="report?.reportData?.length ?? 0"
|
||||
class="px-4"
|
||||
|
@ -10,10 +10,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPopper } from '@popperjs/core/lib/popper-lite';
|
||||
import flip from '@popperjs/core/lib/modifiers/flip';
|
||||
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
|
||||
import offset from '@popperjs/core/lib/modifiers/offset';
|
||||
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
|
||||
import { createPopper } from '@popperjs/core/lib/popper-lite';
|
||||
|
||||
function generateGetBoundingClientRect(x = 0, y = 0) {
|
||||
return () => ({
|
||||
|
@ -20,7 +20,7 @@
|
||||
:key="`${df.fieldname}-inline`"
|
||||
>
|
||||
<TwoColumnForm
|
||||
class="overflow-auto"
|
||||
class="overflow-auto custom-scroll"
|
||||
style="max-height: calc((var(--h-row-mid) + 1px) * 3 - 1px)"
|
||||
ref="inlineEditForm"
|
||||
:doc="inlineEditDoc"
|
||||
|
@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="scroll-container">
|
||||
<div class="custom-scroll">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WithScroll',
|
||||
emits: ['scroll'],
|
||||
data() {
|
||||
return { listener: undefined } as { listener?: () => void };
|
||||
},
|
||||
mounted() {
|
||||
this.listener = () => {
|
||||
let { scrollLeft, scrollTop } = this.$el;
|
||||
@ -15,26 +20,12 @@ export default {
|
||||
this.$el.addEventListener('scroll', this.listener);
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.listener) {
|
||||
this.$el.removeEventListener('scroll', this.listener);
|
||||
delete this.listener;
|
||||
if (!this.listener) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: var(--w-scrollbar);
|
||||
height: var(--w-scrollbar);
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar-thumb {
|
||||
background-color: theme('colors.gray.100');
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar-thumb:hover {
|
||||
background-color: theme('colors.gray.200');
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar-track {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
this.$el.removeEventListener('scroll', this.listener);
|
||||
delete this.listener;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<PageHeader :title="t`Chart of Accounts`" />
|
||||
|
||||
<!-- Chart of Accounts -->
|
||||
<div class="flex-1 flex flex-col overflow-y-auto mb-4" v-if="root">
|
||||
<div class="flex-1 flex flex-col overflow-y-auto mb-4 custom-scroll" v-if="root">
|
||||
<!-- Chart of Accounts Indented List -->
|
||||
<template v-for="account in allAccounts" :key="account.name">
|
||||
<!-- Account List Item -->
|
||||
@ -135,11 +135,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { fyo } from 'src/initFyo';
|
||||
import { t } from 'fyo';
|
||||
import { isCredit } from 'models/helpers';
|
||||
import { ModelNameEnum } from 'models/types';
|
||||
import PageHeader from 'src/components/PageHeader';
|
||||
import { fyo } from 'src/initFyo';
|
||||
import { docsPathMap } from 'src/utils/misc';
|
||||
import { docsPath, openQuickEdit } from 'src/utils/ui';
|
||||
import { nextTick } from 'vue';
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col overflow-y-hidden">
|
||||
<PageHeader :title="t`Set Up Your Workspace`" />
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
|
||||
<div
|
||||
class="p-4 border-b"
|
||||
v-for="section in sections"
|
||||
|
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="text-base flex flex-col overflow-y-hidden">
|
||||
<!-- Title Row -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex items-center"
|
||||
:style="{
|
||||
paddingRight: dataSlice.length > 13 ? 'var(--w-scrollbar)' : '',
|
||||
}"
|
||||
>
|
||||
<p class="w-8 text-right mr-4 text-gray-700">#</p>
|
||||
<Row
|
||||
class="flex-1 text-gray-700 border-none h-row-mid"
|
||||
@ -31,8 +36,12 @@
|
||||
<hr />
|
||||
|
||||
<!-- Data Rows -->
|
||||
<div class="overflow-y-auto" v-if="dataSlice.length !== 0">
|
||||
<div v-for="(doc, i) in dataSlice" :key="doc.name">
|
||||
<div class="overflow-y-auto custom-scroll" v-if="dataSlice.length !== 0">
|
||||
<div
|
||||
v-for="(doc, i) in dataSlice"
|
||||
:key="doc.name"
|
||||
style="min-width: calc(var(--w-desk) - var(--w-scrollbar))"
|
||||
>
|
||||
<!-- Row Content -->
|
||||
<div class="flex hover:bg-gray-50 items-center">
|
||||
<p class="w-8 text-right mr-4 text-gray-900">
|
||||
|
@ -63,7 +63,7 @@ input[type='number']::-webkit-inner-spin-button {
|
||||
--w-desk: calc(100vw - var(--w-sidebar));
|
||||
--w-desk-fixed: calc(var(--w-app) - var(--w-sidebar));
|
||||
--w-quick-edit: 22rem;
|
||||
--w-scrollbar: 0.5rem;
|
||||
--w-scrollbar: 0.6rem;
|
||||
|
||||
/* Row Heights */
|
||||
--h-row-smallest: 2rem;
|
||||
@ -123,3 +123,24 @@ input[type='number']::-webkit-inner-spin-button {
|
||||
vertical-align: -3px;
|
||||
@apply text-red-500;
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar {
|
||||
width: var(--w-scrollbar);
|
||||
height: var(--w-scrollbar);
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-track:vertical {
|
||||
border-left: solid 1px theme('colors.gray.200');
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-track:horizontal {
|
||||
border-top: solid 1px theme('colors.gray.200');
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
background: theme('colors.gray.200');
|
||||
}
|
||||
|
||||
.custom-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: theme('colors.gray.400');
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user