mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-18 00:34:28 +08:00
use the same code for page scrolling on both the desktop and mobile versions
This commit is contained in:
MaysWind
@@ -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');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -440,9 +440,6 @@ init();
|
||||
|
||||
.template-popover-menu .popover-inner {
|
||||
max-height: 400px;
|
||||
|
||||
> .list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,51 +16,45 @@
|
||||
<f7-popover class="chart-data-type-popover-menu"
|
||||
@popover:open="scrollPopoverToSelectedItem">
|
||||
<f7-list dividers>
|
||||
<f7-list-group>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Categorical Analysis') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.CategoricalAnalysis)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.CategoricalAnalysis, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list-group>
|
||||
<f7-list-group>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Trend Analysis') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.TrendAnalysis)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.TrendAnalysis, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list-group>
|
||||
<f7-list-group>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Asset Trends') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.AssetTrends)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.AssetTrends, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list-group>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Categorical Analysis') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.CategoricalAnalysis)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.CategoricalAnalysis, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Trend Analysis') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.TrendAnalysis)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.TrendAnalysis, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item group-title>
|
||||
<small>{{ tt('Asset Trends') }}</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:title="tt(dataType.name)"
|
||||
:class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type }"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in ChartDataType.values(StatisticsAnalysisType.AssetTrends)"
|
||||
@click="setChartDataType(StatisticsAnalysisType.AssetTrends, dataType.type)">
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.AssetTrends && query.chartDataType === dataType.type"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-popover>
|
||||
|
||||
@@ -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<string, unknown>): void {
|
||||
@@ -949,9 +944,6 @@ init();
|
||||
|
||||
.chart-data-type-popover-menu .popover-inner {
|
||||
max-height: 440px;
|
||||
|
||||
> .list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -339,7 +339,7 @@
|
||||
@update:modelValue="changeCustomMonthDateFilter">
|
||||
</month-selection-sheet>
|
||||
|
||||
<f7-popover class="category-popover-menu" @popover:open="onPopoverOpen">
|
||||
<f7-popover class="category-popover-menu" @popover:open="onCategoryPopoverOpen">
|
||||
<f7-list dividers accordion-list>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:class="{ 'list-item-selected': !query.categoryIds }"
|
||||
@@ -364,57 +364,55 @@
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds && queryAllFilterCategoryIdsCount > 1"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
<f7-list dividers accordion-list
|
||||
class="no-margin-vertical"
|
||||
:key="categoryType"
|
||||
v-for="(categories, categoryType) in allPrimaryCategories"
|
||||
v-show="categories && categories.length"
|
||||
>
|
||||
<f7-list-item divider :title="getTransactionTypeName(categoryTypeToTransactionType(parseInt(categoryType)), 'Type')"></f7-list-item>
|
||||
<f7-list-item accordion-item
|
||||
:title="category.name"
|
||||
:class="getCategoryListItemCheckedClass(category, queryAllFilterCategoryIds)"
|
||||
:key="category.id"
|
||||
v-for="category in categories"
|
||||
v-show="!category.hidden || queryAllFilterCategoryIds[category.id] || allCategories[query.categoryIds]?.parentId === category.id || hasSubCategoryInQuery(category)"
|
||||
>
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
|
||||
<template :key="categoryType"
|
||||
v-for="(categories, categoryType) in allPrimaryCategories">
|
||||
<template v-if="categories && categories.length">
|
||||
<f7-list-item divider :title="getTransactionTypeName(categoryTypeToTransactionType(parseInt(categoryType)), 'Type')"></f7-list-item>
|
||||
<f7-list-item accordion-item
|
||||
:title="category.name"
|
||||
:class="getCategoryListItemCheckedClass(category, queryAllFilterCategoryIds)"
|
||||
:key="category.id"
|
||||
v-for="category in categories"
|
||||
v-show="!category.hidden || queryAllFilterCategoryIds[category.id] || allCategories[query.categoryIds]?.parentId === category.id || hasSubCategoryInQuery(category)"
|
||||
>
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
|
||||
</template>
|
||||
<f7-accordion-content>
|
||||
<f7-list dividers class="padding-inline-start">
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
|
||||
:title="tt('All')" @click="changeCategoryFilter(category.id)">
|
||||
<template #media>
|
||||
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
|
||||
</template>
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:class="{ 'list-item-selected': query.categoryIds === subCategory.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[subCategory.id] }"
|
||||
:title="subCategory.name"
|
||||
:key="subCategory.id"
|
||||
v-for="subCategory in category.subCategories"
|
||||
v-show="!subCategory.hidden || queryAllFilterCategoryIds[subCategory.id]"
|
||||
@click="changeCategoryFilter(subCategory.id)"
|
||||
>
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
|
||||
</template>
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon"
|
||||
f7="checkmark_alt"
|
||||
v-if="query.categoryIds === subCategory.id">
|
||||
</f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-content>
|
||||
</f7-list-item>
|
||||
</template>
|
||||
<f7-accordion-content>
|
||||
<f7-list dividers class="padding-inline-start">
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
|
||||
:title="tt('All')" @click="changeCategoryFilter(category.id)">
|
||||
<template #media>
|
||||
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
|
||||
</template>
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item link="#" no-chevron popover-close
|
||||
:class="{ 'list-item-selected': query.categoryIds === subCategory.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[subCategory.id] }"
|
||||
:title="subCategory.name"
|
||||
:key="subCategory.id"
|
||||
v-for="subCategory in category.subCategories"
|
||||
v-show="!subCategory.hidden || queryAllFilterCategoryIds[subCategory.id]"
|
||||
@click="changeCategoryFilter(subCategory.id)"
|
||||
>
|
||||
<template #media>
|
||||
<ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
|
||||
</template>
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon"
|
||||
f7="checkmark_alt"
|
||||
v-if="query.categoryIds === subCategory.id">
|
||||
</f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-accordion-content>
|
||||
</f7-list-item>
|
||||
</template>
|
||||
</f7-list>
|
||||
</f7-popover>
|
||||
|
||||
@@ -598,6 +596,7 @@ import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { scrollToSelectedItem } from '@/lib/ui/common.ts';
|
||||
import {
|
||||
type Framework7Dom,
|
||||
useI18nUIComponents,
|
||||
@@ -606,7 +605,6 @@ import {
|
||||
onSwipeoutDeleted,
|
||||
getElementActualHeights,
|
||||
getElementBoundingRect,
|
||||
scrollToSelectedItem,
|
||||
onInfiniteScrolling
|
||||
} from '@/lib/ui/mobile.ts';
|
||||
import { TransactionListPageType, useTransactionListPageBase } from '@/views/base/transactions/TransactionListPageBase.ts';
|
||||
@@ -1440,7 +1438,11 @@ function collapseTransactionMonthList(monthList: TransactionMonthList, collapse:
|
||||
}
|
||||
|
||||
function onPopoverOpen(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 onCategoryPopoverOpen(event: { $el: Framework7Dom }): void {
|
||||
scrollToSelectedItem(event.$el[0], '.popover-inner', '.popover-inner', 'li.list-item-checked');
|
||||
}
|
||||
|
||||
function onPageAfterIn(): void {
|
||||
@@ -1604,10 +1606,7 @@ html[dir="rtl"] .list.transaction-info-list li.transaction-info .transaction-foo
|
||||
.account-popover-menu .popover-inner,
|
||||
.more-popover-menu .popover-inner {
|
||||
max-height: 400px;
|
||||
|
||||
> .list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transaction-calendar-container .dp__theme_light,
|
||||
|
||||
Reference in New Issue
Block a user