mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2024-11-24 10:25:47 +03:00
perf(add-torrent): Use scrollable dialog instead of manual infinite scroll (#1442)
This commit is contained in:
Rémi Marseault
GitHub
parent
b261d1547a
commit
7288861515
1 changed files with 217 additions and 220 deletions
|
|
@ -181,6 +181,7 @@ const onCategoryChanged = () => {
|
||||||
v-model="isOpened"
|
v-model="isOpened"
|
||||||
:class="$vuetify.display.mobile ? '' : 'w-75'"
|
:class="$vuetify.display.mobile ? '' : 'w-75'"
|
||||||
:fullscreen="$vuetify.display.mobile"
|
:fullscreen="$vuetify.display.mobile"
|
||||||
|
scrollable
|
||||||
:transition="openSuddenly ? 'none' : 'dialog-bottom-transition'">
|
:transition="openSuddenly ? 'none' : 'dialog-bottom-transition'">
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
|
|
@ -190,236 +191,232 @@ const onCategoryChanged = () => {
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
|
|
||||||
<v-infinite-scroll mode="manual">
|
<v-card-text>
|
||||||
<v-card-text>
|
<v-row>
|
||||||
<v-row>
|
<v-col cols="12">
|
||||||
<v-col cols="12">
|
<v-file-input
|
||||||
<v-file-input
|
v-model="files"
|
||||||
v-model="files"
|
:label="t('dialogs.add.files')"
|
||||||
:label="t('dialogs.add.files')"
|
:show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
|
||||||
:show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
|
accept=".torrent"
|
||||||
accept=".torrent"
|
counter
|
||||||
counter
|
multiple
|
||||||
multiple
|
persistent-clear
|
||||||
persistent-clear
|
persistent-hint
|
||||||
persistent-hint
|
prepend-icon=""
|
||||||
prepend-icon=""
|
variant="outlined">
|
||||||
variant="outlined">
|
<template v-slot:prepend>
|
||||||
<template v-slot:prepend>
|
<v-icon color="accent">mdi-paperclip</v-icon>
|
||||||
<v-icon color="accent">mdi-paperclip</v-icon>
|
</template>
|
||||||
|
<template v-slot:selection="{ fileNames }">
|
||||||
|
<template v-for="(filename, index) in fileNames">
|
||||||
|
<v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
|
||||||
|
{{ filename }}
|
||||||
|
</v-chip>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:selection="{ fileNames }">
|
<span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
|
||||||
<template v-for="(filename, index) in fileNames">
|
{{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
|
||||||
<v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
|
</span>
|
||||||
{{ filename }}
|
</template>
|
||||||
</v-chip>
|
</v-file-input>
|
||||||
</template>
|
<v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
|
||||||
<span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
|
<template v-slot:prepend>
|
||||||
{{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
|
<v-icon color="accent">mdi-link</v-icon>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
</v-textarea>
|
||||||
</v-file-input>
|
<HistoryField
|
||||||
<v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
|
v-if="!!urls"
|
||||||
<template v-slot:prepend>
|
v-model="cookie"
|
||||||
<v-icon color="accent">mdi-link</v-icon>
|
:historyKey="HistoryKey.COOKIE"
|
||||||
</template>
|
ref="cookieField"
|
||||||
</v-textarea>
|
clearable
|
||||||
<HistoryField
|
:label="$t('dialogs.add.cookie')"
|
||||||
v-if="!!urls"
|
:placeholder="$t('dialogs.add.cookiePlaceholder')">
|
||||||
v-model="cookie"
|
<template v-slot:prepend>
|
||||||
:historyKey="HistoryKey.COOKIE"
|
<v-icon color="accent">mdi-cookie</v-icon>
|
||||||
ref="cookieField"
|
</template>
|
||||||
clearable
|
</HistoryField>
|
||||||
:label="$t('dialogs.add.cookie')"
|
<v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
|
||||||
:placeholder="$t('dialogs.add.cookiePlaceholder')">
|
<template v-slot:prepend>
|
||||||
<template v-slot:prepend>
|
<v-icon color="accent">mdi-rename</v-icon>
|
||||||
<v-icon color="accent">mdi-cookie</v-icon>
|
</template>
|
||||||
</template>
|
</v-text-field>
|
||||||
</HistoryField>
|
</v-col>
|
||||||
<v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<v-icon color="accent">mdi-rename</v-icon>
|
|
||||||
</template>
|
|
||||||
</v-text-field>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-combobox
|
<v-combobox
|
||||||
v-model="tags"
|
v-model="tags"
|
||||||
v-model:search="tagSearch"
|
v-model:search="tagSearch"
|
||||||
:hide-no-data="false"
|
:hide-no-data="false"
|
||||||
:items="maindataStore.tags"
|
:items="maindataStore.tags"
|
||||||
:label="t('dialogs.add.tags')"
|
:label="t('dialogs.add.tags')"
|
||||||
chips
|
chips
|
||||||
clearable
|
clearable
|
||||||
hide-details
|
hide-details
|
||||||
multiple
|
multiple
|
||||||
autocomplete="tags">
|
autocomplete="tags">
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-tag</v-icon>
|
<v-icon color="accent">mdi-tag</v-icon>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:no-data>
|
<template v-slot:no-data>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title v-if="tagSearch?.length > 0">
|
<v-list-item-title v-if="tagSearch?.length > 0">
|
||||||
{{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
|
{{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-title v-else>
|
<v-list-item-title v-else>
|
||||||
{{ t('dialogs.add.noTags') }}
|
{{ t('dialogs.add.noTags') }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</template>
|
</template>
|
||||||
</v-combobox>
|
</v-combobox>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-combobox
|
<v-combobox
|
||||||
v-model="category"
|
v-model="category"
|
||||||
v-model:search="categorySearch"
|
v-model:search="categorySearch"
|
||||||
:hide-no-data="false"
|
:hide-no-data="false"
|
||||||
:items="categories"
|
:items="categories"
|
||||||
:label="$t('dialogs.add.category')"
|
:label="$t('dialogs.add.category')"
|
||||||
clearable
|
clearable
|
||||||
hide-details
|
hide-details
|
||||||
autocomplete="categories"
|
autocomplete="categories"
|
||||||
@update:modelValue="onCategoryChanged">
|
@update:modelValue="onCategoryChanged">
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-label</v-icon>
|
<v-icon color="accent">mdi-label</v-icon>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:no-data>
|
<template v-slot:no-data>
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<v-list-item-title v-if="categorySearch?.length > 0">
|
<v-list-item-title v-if="categorySearch?.length > 0">
|
||||||
{{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
|
{{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
<v-list-item-title v-else>
|
<v-list-item-title v-else>
|
||||||
{{ t('dialogs.add.noCategories') }}
|
{{ t('dialogs.add.noCategories') }}
|
||||||
</v-list-item-title>
|
</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</template>
|
</template>
|
||||||
</v-combobox>
|
</v-combobox>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12">
|
<v-col cols="12">
|
||||||
<HistoryField
|
<HistoryField
|
||||||
v-model="downloadPath"
|
v-model="downloadPath"
|
||||||
:history-key="HistoryKey.TORRENT_PATH"
|
:history-key="HistoryKey.TORRENT_PATH"
|
||||||
ref="dlPathField"
|
ref="dlPathField"
|
||||||
:disabled="form.autoTMM"
|
:disabled="form.autoTMM"
|
||||||
:label="t('dialogs.add.downloadPath')"
|
:label="t('dialogs.add.downloadPath')"
|
||||||
hide-details>
|
hide-details>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-tray-arrow-down</v-icon>
|
<v-icon color="accent">mdi-tray-arrow-down</v-icon>
|
||||||
</template>
|
</template>
|
||||||
</HistoryField>
|
</HistoryField>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12">
|
<v-col cols="12">
|
||||||
<HistoryField
|
<HistoryField
|
||||||
v-model="form.savepath"
|
v-model="form.savepath"
|
||||||
:history-key="HistoryKey.TORRENT_PATH"
|
:history-key="HistoryKey.TORRENT_PATH"
|
||||||
ref="savePathField"
|
ref="savePathField"
|
||||||
:disabled="form.autoTMM"
|
:disabled="form.autoTMM"
|
||||||
:label="t('dialogs.add.savePath')"
|
:label="t('dialogs.add.savePath')"
|
||||||
hide-details>
|
hide-details>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-content-save</v-icon>
|
<v-icon color="accent">mdi-content-save</v-icon>
|
||||||
</template>
|
</template>
|
||||||
</HistoryField>
|
</HistoryField>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-select
|
<v-select
|
||||||
v-model="form.contentLayout"
|
v-model="form.contentLayout"
|
||||||
:items="contentLayoutOptions"
|
:items="contentLayoutOptions"
|
||||||
:label="t('constants.contentLayout.title')"
|
:label="t('constants.contentLayout.title')"
|
||||||
color="accent"
|
color="accent"
|
||||||
hide-details
|
hide-details
|
||||||
rounded="xl"
|
rounded="xl"
|
||||||
variant="solo-filled" />
|
variant="solo-filled" />
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-select
|
<v-select
|
||||||
v-model="form.stopCondition"
|
v-model="form.stopCondition"
|
||||||
:items="stopConditionOptions"
|
:items="stopConditionOptions"
|
||||||
:label="t('constants.stopCondition.title')"
|
:label="t('constants.stopCondition.title')"
|
||||||
color="accent"
|
color="accent"
|
||||||
hide-details
|
hide-details
|
||||||
rounded="xl"
|
rounded="xl"
|
||||||
variant="solo-filled" />
|
variant="solo-filled" />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-row class="mx-3">
|
<v-row class="mx-3">
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
|
<v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12">
|
<v-col cols="12">
|
||||||
<v-expansion-panels>
|
<v-expansion-panels>
|
||||||
<v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
|
<v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
|
||||||
<v-expansion-panel-text>
|
<v-expansion-panel-text>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
|
<v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-download</v-icon>
|
<v-icon color="accent">mdi-download</v-icon>
|
||||||
</template>
|
</template>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="6">
|
<v-col cols="12" md="6">
|
||||||
<v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
|
<v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-icon color="accent">mdi-upload</v-icon>
|
<v-icon color="accent">mdi-upload</v-icon>
|
||||||
</template>
|
</template>
|
||||||
</v-text-field>
|
</v-text-field>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" md="4">
|
<v-col cols="12" md="4">
|
||||||
<v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
|
<v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="4">
|
<v-col cols="12" md="4">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="seedingTimeLimit"
|
v-model="seedingTimeLimit"
|
||||||
:label="$t('dialogs.add.seedingTimeLimit')"
|
:label="$t('dialogs.add.seedingTimeLimit')"
|
||||||
:hint="$t('dialogs.add.limitHint')"
|
:hint="$t('dialogs.add.limitHint')"
|
||||||
:suffix="$t('units.minutes')"
|
:suffix="$t('units.minutes')"
|
||||||
type="number" />
|
type="number" />
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" md="4">
|
<v-col cols="12" md="4">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="inactiveSeedingTimeLimit"
|
v-model="inactiveSeedingTimeLimit"
|
||||||
:label="$t('dialogs.add.inactiveSeedingTimeLimit')"
|
:label="$t('dialogs.add.inactiveSeedingTimeLimit')"
|
||||||
:hint="$t('dialogs.add.limitHint')"
|
:hint="$t('dialogs.add.limitHint')"
|
||||||
:suffix="$t('units.minutes')"
|
:suffix="$t('units.minutes')"
|
||||||
type="number" />
|
type="number" />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-expansion-panel-text>
|
</v-expansion-panel-text>
|
||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<template v-slot:load-more></template>
|
|
||||||
</v-infinite-scroll>
|
|
||||||
|
|
||||||
<v-card-actions class="mb-2">
|
<v-card-actions class="mb-2">
|
||||||
<v-btn :text="$t('dialogs.add.resetForm')" color="error" variant="flat" @click="addTorrentStore.resetForm()" />
|
<v-btn :text="$t('dialogs.add.resetForm')" color="error" variant="flat" @click="addTorrentStore.resetForm()" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue