From a535fbcef1c017b929e86ba30d05804d719ade22 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 21 Dec 2025 02:34:35 +0800 Subject: [PATCH] use the same code for page scrolling on both the desktop and mobile versions --- src/components/desktop/ColorSelect.vue | 4 +- src/components/desktop/IconSelect.vue | 4 +- .../desktop/ScheduleFrequencySelect.vue | 4 +- src/components/desktop/TwoColumnSelect.vue | 7 +- src/components/mobile/ColorSelectionSheet.vue | 5 +- src/components/mobile/IconSelectionSheet.vue | 5 +- .../mobile/ListItemSelectionPopup.vue | 5 +- .../mobile/ListItemSelectionSheet.vue | 5 +- .../mobile/ScheduleFrequencySheet.vue | 5 +- .../mobile/TransactionTagSelectionSheet.vue | 5 +- .../mobile/TreeViewSelectionSheet.vue | 11 +- .../TwoColumnListItemSelectionSheet.vue | 7 +- src/lib/ui/common.ts | 53 ++++++++ src/lib/ui/desktop.ts | 63 ---------- src/lib/ui/mobile.ts | 46 ------- src/styles/mobile/global.scss | 6 +- src/views/desktop/transactions/ListPage.vue | 5 +- src/views/mobile/HomePage.vue | 5 +- .../mobile/statistics/TransactionPage.vue | 94 +++++++-------- src/views/mobile/transactions/ListPage.vue | 113 +++++++++--------- 20 files changed, 197 insertions(+), 255 deletions(-) diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue index be2408ef..a899e055 100644 --- a/src/components/desktop/ColorSelect.vue +++ b/src/components/desktop/ColorSelect.vue @@ -50,7 +50,7 @@ import type { ColorValue, ColorInfo } from '@/core/color.ts'; import { arrayContainsFieldValue } from '@/lib/common.ts'; import { getColorsInRows, getDisplayColor } from '@/lib/color.ts'; -import { scrollToSelectedItem } from '@/lib/ui/desktop.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; import { mdiSquareRounded, @@ -90,7 +90,7 @@ function onMenuStateChanged(state: boolean): void { if (state) { nextTick(() => { if (dropdownMenu.value && dropdownMenu.value.parentElement) { - scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item'); + scrollToSelectedItem(dropdownMenu.value.parentElement, null, null, '.row-has-selected-item'); } }); } diff --git a/src/components/desktop/IconSelect.vue b/src/components/desktop/IconSelect.vue index 23f36426..61981904 100644 --- a/src/components/desktop/IconSelect.vue +++ b/src/components/desktop/IconSelect.vue @@ -48,7 +48,7 @@ import type { ColorValue } from '@/core/color.ts'; import type { IconInfo, IconInfoWithId } from '@/core/icon.ts'; import { arrayContainsFieldValue } from '@/lib/common.ts'; import { getIconsInRows } from '@/lib/icon.ts'; -import { scrollToSelectedItem } from '@/lib/ui/desktop.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; import { mdiCheck @@ -89,7 +89,7 @@ function onMenuStateChanged(state: boolean): void { if (state) { nextTick(() => { if (dropdownMenu.value && dropdownMenu.value.parentElement) { - scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item'); + scrollToSelectedItem(dropdownMenu.value.parentElement, null, null, '.row-has-selected-item'); } }); } diff --git a/src/components/desktop/ScheduleFrequencySelect.vue b/src/components/desktop/ScheduleFrequencySelect.vue index 2c5b8fb6..4c588250 100644 --- a/src/components/desktop/ScheduleFrequencySelect.vue +++ b/src/components/desktop/ScheduleFrequencySelect.vue @@ -67,7 +67,7 @@ import { useUserStore } from '@/stores/user.ts'; import { type WeekDayValue } from '@/core/datetime.ts'; import { ScheduledTemplateFrequencyType } from '@/core/template.ts'; import { sortNumbersArray } from '@/lib/common.ts'; -import { scrollToSelectedItem } from '@/lib/ui/desktop.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; const props = defineProps(); const emit = defineEmits<{ @@ -159,7 +159,7 @@ function onMenuStateChanged(state: boolean): void { if (state) { nextTick(() => { if (dropdownMenu.value && dropdownMenu.value.parentElement) { - scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected'); + scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.schedule-frequency-value-container', '.frequency-value-selected'); } }); } diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue index 3c1c8f49..73d90482 100644 --- a/src/components/desktop/TwoColumnSelect.vue +++ b/src/components/desktop/TwoColumnSelect.vue @@ -102,7 +102,8 @@ import { getItemByKeyValue, getNameByKeyValue } from '@/lib/common.ts'; -import { type ComponentDensity, type InputVariant, setChildInputFocus, scrollToSelectedItem } from '@/lib/ui/desktop.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type ComponentDensity, type InputVariant, setChildInputFocus } from '@/lib/ui/desktop.ts'; import { mdiChevronRight, @@ -246,8 +247,8 @@ function onMenuStateChanged(state: boolean): void { if (state) { nextTick(() => { if (dropdownMenu.value && dropdownMenu.value.parentElement) { - scrollToSelectedItem(dropdownMenu.value.parentElement, '.primary-list-container', '.primary-list-item-selected'); - scrollToSelectedItem(dropdownMenu.value.parentElement, '.secondary-list-container', '.secondary-list-item-selected'); + scrollToSelectedItem(dropdownMenu.value.parentElement, '.primary-list-container', '.primary-list-container', '.primary-list-item-selected'); + scrollToSelectedItem(dropdownMenu.value.parentElement, '.secondary-list-container', '.secondary-list-container', '.secondary-list-item-selected'); } }); } diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue index 67bc06e9..bca855ba 100644 --- a/src/components/mobile/ColorSelectionSheet.vue +++ b/src/components/mobile/ColorSelectionSheet.vue @@ -33,7 +33,8 @@ import { ref, computed } from 'vue'; import type { ColorValue, ColorInfo } from '@/core/color.ts'; import { arrayContainsFieldValue } from '@/lib/common.ts'; import { getColorsInRows } from '@/lib/color.ts'; -import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom } from '@/lib/ui/mobile.ts'; const props = defineProps<{ modelValue: ColorValue; @@ -63,7 +64,7 @@ function hasSelectedIcon(row: ColorInfo[]): boolean { function onSheetOpen(event: { $el: Framework7Dom }): void { currentValue.value = props.modelValue; - scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item'); + scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', '.row-has-selected-item'); } function onSheetClosed(): void { diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue index 25dfcbce..1e602c21 100644 --- a/src/components/mobile/IconSelectionSheet.vue +++ b/src/components/mobile/IconSelectionSheet.vue @@ -33,7 +33,8 @@ import { ref, computed } from 'vue'; import type { IconInfo, IconInfoWithId } from '@/core/icon.ts'; import { arrayContainsFieldValue } from '@/lib/common.ts'; import { getIconsInRows } from '@/lib/icon.ts'; -import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom } from '@/lib/ui/mobile.ts'; const props = defineProps<{ modelValue: string; @@ -73,7 +74,7 @@ function hasSelectedIcon(row: IconInfoWithId[]): boolean { } function onSheetOpen(event: { $el: Framework7Dom }): void { - scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item'); + scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', '.row-has-selected-item'); } function onSheetClosed(): void { diff --git a/src/components/mobile/ListItemSelectionPopup.vue b/src/components/mobile/ListItemSelectionPopup.vue index e0a0e023..c29cab27 100644 --- a/src/components/mobile/ListItemSelectionPopup.vue +++ b/src/components/mobile/ListItemSelectionPopup.vue @@ -56,7 +56,8 @@ import type { Searchbar } from 'framework7/types'; import { useI18n } from '@/locales/helpers.ts'; -import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom } from '@/lib/ui/mobile.ts'; const props = defineProps<{ modelValue: unknown; @@ -186,7 +187,7 @@ function onItemClicked(item: unknown, index: number): void { function onPopupOpen(event: { $el: Framework7Dom }): void { currentValue.value = props.modelValue; - scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', false); + scrollToSelectedItem(event.$el[0], '.popup > .page', '.page-content', 'li.list-item-selected'); } function onPopupClosed(): void { diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue index 4eeedb47..378c9615 100644 --- a/src/components/mobile/ListItemSelectionSheet.vue +++ b/src/components/mobile/ListItemSelectionSheet.vue @@ -36,7 +36,8 @@ import { ref, computed } from 'vue'; import { useI18n } from '@/locales/helpers.ts'; -import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom } from '@/lib/ui/mobile.ts'; const props = defineProps<{ modelValue: unknown; @@ -117,7 +118,7 @@ function onItemClicked(item: unknown, index: number): void { function onSheetOpen(event: { $el: Framework7Dom }): void { currentValue.value = props.modelValue; - scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected'); + scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', 'li.list-item-selected'); } function onSheetClosed(): void { diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue index ef0de020..c2cc2024 100644 --- a/src/components/mobile/ScheduleFrequencySheet.vue +++ b/src/components/mobile/ScheduleFrequencySheet.vue @@ -76,7 +76,8 @@ import { itemAndIndex } from '@/core/base.ts'; import { type WeekDayValue } from '@/core/datetime.ts'; import { ScheduledTemplateFrequencyType } from '@/core/template.ts'; import { sortNumbersArray } from '@/lib/common.ts'; -import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom } from '@/lib/ui/mobile.ts'; interface MobileScheduleFrequencySelectionProps extends CommonScheduleFrequencySelectionProps { show: boolean; @@ -151,7 +152,7 @@ function close(): void { function onSheetOpen(event: { $el: Framework7Dom }): void { currentFrequencyType.value = props.type; currentFrequencyValue.value = getFrequencyValues(props.modelValue); - scrollToSelectedItem(event.$el, '.schedule-frequency-value-container', 'li.list-item-selected'); + scrollToSelectedItem(event.$el[0], '.schedule-frequency-value-container', '.schedule-frequency-value-container', 'li.list-item-selected'); } function onSheetClosed(): void { diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue index 5b81270d..97b66907 100644 --- a/src/components/mobile/TransactionTagSelectionSheet.vue +++ b/src/components/mobile/TransactionTagSelectionSheet.vue @@ -94,7 +94,8 @@ import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.t import { TransactionTag } from '@/models/transaction_tag.ts'; import { useTransactionTagsStore } from '@/stores/transactionTag.ts'; -import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts'; const props = defineProps<{ modelValue: string[]; @@ -229,7 +230,7 @@ function onSearchBarFocus(): void { function onSheetOpen(event: { $el: Framework7Dom }): void { selectedItemIds.value = Array.from(props.modelValue); newTag.value = null; - scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected'); + scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', 'li.list-item-selected'); } function onSheetClosed(): void { diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue index 31bc3bb8..fb054c87 100644 --- a/src/components/mobile/TreeViewSelectionSheet.vue +++ b/src/components/mobile/TreeViewSelectionSheet.vue @@ -19,7 +19,7 @@ - + .treeview-item-selected'); } function onSheetClosed(): void { @@ -168,4 +169,8 @@ function onSheetClosed(): void { height: 320px; } } + +.tree-view-selection-treeview { + position: relative; +} diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue index b3799cba..cf9bbf9d 100644 --- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue +++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue @@ -75,7 +75,8 @@ import type { Sheet, Searchbar } from 'framework7/types'; import { useI18n } from '@/locales/helpers.ts'; import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts'; -import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts'; interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps { show: boolean; @@ -135,8 +136,8 @@ function onSearchBarFocus(): void { function onSheetOpen(event: { $el: Framework7Dom }): void { currentPrimaryValue.value = getCurrentPrimaryValueBySecondaryValue(props.modelValue); currentSecondaryValue.value = props.modelValue; - scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected'); - scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected'); + scrollToSelectedItem(event.$el[0], '.primary-list-container', '.primary-list-container', 'li.primary-list-item-selected'); + scrollToSelectedItem(event.$el[0], '.secondary-list-container', '.secondary-list-container', 'li.secondary-list-item-selected'); } function onSheetClosed(): void { diff --git a/src/lib/ui/common.ts b/src/lib/ui/common.ts index bebc2d27..1bb775a9 100644 --- a/src/lib/ui/common.ts +++ b/src/lib/ui/common.ts @@ -7,6 +7,59 @@ import { KnownFileType } from '@/core/file.ts'; import logger from '../logger.ts'; +export function scrollToSelectedItem(parentEl: Element | null | undefined, containerSelector: string | null, scrollableListSelector: string | null, selectedItemSelector: string): void { + if (!parentEl) { + return; + } + + const container = containerSelector ? parentEl.querySelector(containerSelector) : parentEl; + + if (!container) { + return; + } + + const scrollableList = scrollableListSelector ? parentEl.querySelector(scrollableListSelector) : parentEl; + + if (!scrollableList) { + return; + } + + const selectedItems = scrollableList.querySelectorAll(selectedItemSelector); + + if (!selectedItems.length) { + return; + } + + const containerHeight: number = container.clientHeight; + + const firstSelectedItem: HTMLElement = selectedItems[0] as HTMLElement; + const lastSelectedItem: HTMLElement = selectedItems[selectedItems.length - 1] as HTMLElement; + + const firstSelectedItemHeight: number = firstSelectedItem.offsetHeight; + const firstSelectedItemTop: number = firstSelectedItem.offsetTop; + const lastSelectedItemTop: number = lastSelectedItem.offsetTop; + const lastSelectedItemBottom: number = lastSelectedItem.offsetTop + lastSelectedItem.offsetHeight; + + const middle: number = (firstSelectedItemTop + lastSelectedItemBottom) / 2; + let targetScrollTop: number = middle - containerHeight / 2; + + if (containerSelector !== scrollableListSelector) { + const scrollableListStyle = window.getComputedStyle(scrollableList); + const paddingTop: number = parseFloat(scrollableListStyle.paddingTop) || 0; + targetScrollTop += paddingTop / 3 * 2; + + if (selectedItems.length > 1 && lastSelectedItemTop - firstSelectedItemTop > containerHeight - firstSelectedItemHeight - paddingTop) { + targetScrollTop = firstSelectedItemTop; + } + } else { + if (selectedItems.length > 1 && lastSelectedItemTop - firstSelectedItemTop > containerHeight - firstSelectedItemHeight) { + targetScrollTop = firstSelectedItemTop; + } + } + + scrollableList.scrollTop = Math.max(0, targetScrollTop); +} + export function getSystemTheme(): ThemeType { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return ThemeType.Dark; diff --git a/src/lib/ui/desktop.ts b/src/lib/ui/desktop.ts index 6bebe74d..73558425 100644 --- a/src/lib/ui/desktop.ts +++ b/src/lib/ui/desktop.ts @@ -39,15 +39,6 @@ export function getNavSideBarOuterHeight(element: HTMLElement | null): number { return totalHeight; } -export function getCssValue(element: HTMLElement | null, name: string): string { - if (!element) { - return '0'; - } - - const computedStyle = window.getComputedStyle(element); - return computedStyle.getPropertyValue(name); -} - export function setChildInputFocus(parentEl: HTMLElement | undefined, childSelector: string): void { if (!parentEl) { return; @@ -63,57 +54,3 @@ export function setChildInputFocus(parentEl: HTMLElement | undefined, childSelec childInput.focus(); childInput.select(); } - -export function scrollToSelectedItem(parentEl: HTMLElement | null | undefined, containerSelector: string | null, selectedItemSelector: string): void { - if (!parentEl) { - return; - } - - let container = parentEl; - - if (containerSelector) { - const lists = parentEl.querySelectorAll(containerSelector); - - if (!lists.length || !lists[0]) { - return; - } - - container = lists[0] as HTMLElement; - } - - const selectedItems = container.querySelectorAll(selectedItemSelector); - - if (!selectedItems.length || !selectedItems[0]) { - return; - } - - const selectedItem = selectedItems[0] as HTMLElement; - const containerOuterHeight = getOuterHeight(container); - const selectedItemOuterHeight = getOuterHeight(selectedItem); - - let targetPos = selectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10) - - (containerOuterHeight - selectedItemOuterHeight) / 2; - - if (selectedItems.length > 1) { - - const firstSelectedItem = selectedItems[0] as HTMLElement; - const lastSelectedItem = selectedItems[selectedItems.length - 1] as HTMLElement; - - const firstSelectedItemInTop = firstSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10); - const lastSelectedItemInTop = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10); - const lastSelectedItemInBottom = lastSelectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10) - - (containerOuterHeight - selectedItemOuterHeight); - - targetPos = (firstSelectedItemInTop + lastSelectedItemInBottom) / 2; - - if (lastSelectedItemInTop - firstSelectedItemInTop > containerOuterHeight) { - targetPos = firstSelectedItemInTop; - } - } - - if (targetPos <= 0) { - return; - } - - container.scrollTop = targetPos; -} diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts index 40cf4a0c..1c442d3c 100644 --- a/src/lib/ui/mobile.ts +++ b/src/lib/ui/mobile.ts @@ -6,7 +6,6 @@ import { useI18n } from '@/locales/helpers.ts'; import { TextDirection } from '@/core/text.ts'; import { FontSize, FONT_SIZE_PREVIEW_CLASSNAME_PREFIX } from '@/core/font.ts'; -import { getNumberValue } from '../common.ts'; import { isEnableAnimate } from '../settings.ts'; export interface Framework7Dom { @@ -148,51 +147,6 @@ export function getElementBoundingRect(selector: string): DOMRect | null { return el.getBoundingClientRect(); } -export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string, hasBottomToolbar?: boolean): void { - if (!parentEl || !parentEl.length) { - return; - } - - const container = parentEl.find(containerSelector); - const selectedItem = parentEl.find(selectedItemSelector); - - if (!container.length || !selectedItem.length) { - return; - } - - const containerPaddingTop = getNumberValue(container.css('padding-top'), 0) / 2; - - let targetPos = selectedItem.offset().top - container.offset().top - containerPaddingTop - - (container.outerHeight() - selectedItem.outerHeight()) / 2; - - if (selectedItem.length > 1) { - const firstSelectedItem = f7.$(selectedItem[0]); - const lastSelectedItem = f7.$(selectedItem[selectedItem.length - 1]); - - const firstSelectedItemInTop = firstSelectedItem.offset().top - container.offset().top - containerPaddingTop; - const lastSelectedItemInTop = lastSelectedItem.offset().top - container.offset().top - containerPaddingTop; - const lastSelectedItemInBottom = lastSelectedItem.offset().top - container.offset().top - containerPaddingTop - - (container.outerHeight() - firstSelectedItem.outerHeight()); - - targetPos = (firstSelectedItemInTop + lastSelectedItemInBottom) / 2; - - if (lastSelectedItemInTop - firstSelectedItemInTop > container.outerHeight()) { - targetPos = firstSelectedItemInTop; - } - } - - if (targetPos <= 0) { - return; - } - - if (hasBottomToolbar) { - const toolbarHeight = parentEl.find('.toolbar.toolbar-bottom').outerHeight() || 0; - targetPos += toolbarHeight / 2; - } - - container.scrollTop(targetPos); -} - export function scrollSheetToTop(sheetElement: HTMLElement | undefined, windowNormalInnerHeight: number): void { if (!sheetElement) { return; diff --git a/src/styles/mobile/global.scss b/src/styles/mobile/global.scss index 09cc8f00..8cdc73c2 100644 --- a/src/styles/mobile/global.scss +++ b/src/styles/mobile/global.scss @@ -135,6 +135,8 @@ i.icon.la, i.icon.las, i.icon.lab { } .ios .popover-inner { + touch-action: inherit; + > :not(.list) { display: none; } @@ -222,10 +224,6 @@ i.icon.la, i.icon.las, i.icon.lab { .lang-popover-menu .popover-inner { max-height: 350px; - - > .list { - overflow-y: auto; - } } .lang-popover-menu .popover-inner .item-title { diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue index d42f74cb..5de8036b 100644 --- a/src/views/desktop/transactions/ListPage.vue +++ b/src/views/desktop/transactions/ListPage.vue @@ -711,8 +711,7 @@ import { transactionTypeToCategoryType } from '@/lib/category.ts'; import { isDataExportingEnabled, isDataImportingEnabled, isTransactionFromAIImageRecognitionEnabled } from '@/lib/server_settings.ts'; -import { startDownloadFile } from '@/lib/ui/common.ts'; -import { scrollToSelectedItem } from '@/lib/ui/desktop.ts'; +import { scrollToSelectedItem, startDownloadFile } from '@/lib/ui/common.ts'; import logger from '@/lib/logger.ts'; import { @@ -1696,7 +1695,7 @@ function scrollTagMenuToSelectedItem(opened: boolean): void { function scrollMenuToSelectedItem(menu: VMenu | null): void { nextTick(() => { - scrollToSelectedItem(menu?.contentEl, 'div.v-list', 'div.v-list-item.list-item-selected'); + scrollToSelectedItem(menu?.contentEl, 'div.v-list', 'div.v-list', 'div.v-list-item.list-item-selected'); }); } diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue index b8002f2e..9ad7cb09 100644 --- a/src/views/mobile/HomePage.vue +++ b/src/views/mobile/HomePage.vue @@ -440,9 +440,6 @@ init(); .template-popover-menu .popover-inner { max-height: 400px; - - > .list { - overflow-y: auto; - } + overflow-y: auto; } diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue index 03df1a71..0de9e173 100644 --- a/src/views/mobile/statistics/TransactionPage.vue +++ b/src/views/mobile/statistics/TransactionPage.vue @@ -16,51 +16,45 @@ - - - {{ tt('Categorical Analysis') }} - - - - - - - - {{ tt('Trend Analysis') }} - - - - - - - - {{ tt('Asset Trends') }} - - - - - + + {{ tt('Categorical Analysis') }} + + + + + + {{ tt('Trend Analysis') }} + + + + + + {{ tt('Asset Trends') }} + + + + @@ -437,7 +431,8 @@ import { getDateTypeByDateRange, getDateRangeByDateType } from '@/lib/datetime.ts'; -import { type Framework7Dom, useI18nUIComponents, scrollToSelectedItem } from '@/lib/ui/mobile.ts'; +import { scrollToSelectedItem } from '@/lib/ui/common.ts'; +import { type Framework7Dom, useI18nUIComponents } from '@/lib/ui/mobile.ts'; const props = defineProps<{ f7router: Router.Router; @@ -884,7 +879,7 @@ function settings(): void { } function scrollPopoverToSelectedItem(event: { $el: Framework7Dom }): void { - scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected'); + scrollToSelectedItem(event.$el[0], '.popover-inner', '.popover-inner', 'li.list-item-selected'); } function onClickPieChartItem(item: Record): void { @@ -949,9 +944,6 @@ init(); .chart-data-type-popover-menu .popover-inner { max-height: 440px; - - > .list { - overflow-y: auto; - } + overflow-y: auto; } diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue index 65f50d93..d9682486 100644 --- a/src/views/mobile/transactions/ListPage.vue +++ b/src/views/mobile/transactions/ListPage.vue @@ -339,7 +339,7 @@ @update:modelValue="changeCustomMonthDateFilter"> - + - - - - -