scroll page to bottom when creating a new tag

This commit is contained in:
MaysWind 2026-04-06 23:56:06 +08:00
parent b4c31fc9d0
commit fe0187ac2c
3 changed files with 31 additions and 8 deletions

View file

@ -52,7 +52,7 @@ export function useTagListPageBase() {
}
}
function add(): void {
function createNewTag(): void {
newTag.value = TransactionTag.createNewTag('', activeTagGroupId.value);
}
@ -78,7 +78,7 @@ export function useTagListPageBase() {
// functions
isTagModified,
switchTagGroup,
add,
createNewTag,
edit
};
}

View file

@ -258,7 +258,7 @@
</template>
</draggable-list>
<tbody v-if="newTag">
<tbody ref="newTagRow" v-if="newTag">
<tr class="text-sm" :class="{ 'even-row': (availableTagCount & 1) === 1}">
<td>
<div class="d-flex align-center">
@ -348,7 +348,7 @@ import RenameDialog from '@/components/desktop/RenameDialog.vue';
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, computed, useTemplateRef, watch } from 'vue';
import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
import { useDisplay } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
@ -406,12 +406,13 @@ const {
hasEditingTag,
isTagModified,
switchTagGroup,
add,
createNewTag,
edit
} = useTagListPageBase();
const transactionTagsStore = useTransactionTagsStore();
const newTagRow = useTemplateRef<HTMLElement>('newTagRow');
const tagGroupChangeDisplayOrderDialog = useTemplateRef<TagGroupChangeDisplayOrderDialogType>('tagGroupChangeDisplayOrderDialog');
const renameDialog = useTemplateRef<RenameDialogType>('renameDialog');
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
@ -461,6 +462,14 @@ function reload(): void {
});
}
function add(): void {
createNewTag();
nextTick(() => {
newTagRow.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
}
function addTagGroup(): void {
renameDialog.value?.open('', tt('New Tag Group Name')).then((newName: string) => {
updating.value = true;

View file

@ -118,7 +118,7 @@
</f7-swipeout-actions>
</f7-list-item>
<f7-list-item class="editing-list-item" v-if="newTag">
<f7-list-item ref="newTagItem" class="editing-list-item" v-if="newTag">
<template #media>
<f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
</template>
@ -219,7 +219,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, computed, useTemplateRef, nextTick } from 'vue';
import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
@ -257,12 +257,14 @@ const {
hasEditingTag,
isTagModified,
switchTagGroup,
add,
createNewTag,
edit
} = useTagListPageBase();
const transactionTagsStore = useTransactionTagsStore();
const newTagItem = useTemplateRef<{ $el: HTMLElement }>('newTagItem');
const loadingError = ref<unknown | null>(null);
const sortable = ref<boolean>(false);
const moveToTagGroupId = ref<string | undefined>(undefined);
@ -336,6 +338,18 @@ function reload(done?: () => void): void {
});
}
function add(): void {
createNewTag();
nextTick(() => {
const el = newTagItem.value?.$el as HTMLElement | undefined;
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
});
}
function save(tag: TransactionTag): void {
showLoading();