perf(modals): add autofocus (#955)

This commit is contained in:
Rémi Marseault 2023-07-11 20:19:01 +02:00 committed by GitHub
parent 34e43f6add
commit 5f33d94d88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 34 deletions

View file

@ -19,7 +19,7 @@
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-text-field v-model="newPath" :label="$t('directory')" :prepend-icon="mdiFolder" @keydown.enter="setLocation" /> <v-text-field v-model="newPath" :label="$t('directory')" :prepend-icon="mdiFolder" autofocus @keydown.enter="setLocation" />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -38,9 +38,9 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import {mapGetters} from 'vuex'
import { mdiFile, mdiFolder, mdiClose } from '@mdi/js' import {mdiClose, mdiFile, mdiFolder} from '@mdi/js'
import { Modal, FullScreenModal } from '@/mixins' import {FullScreenModal, Modal} from '@/mixins'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
export default { export default {

View file

@ -10,7 +10,7 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col> <v-col>
<v-text-field v-model="name" clearable :label="$t('modals.rename.torrentName')" :prepend-inner-icon="mdiFile" /> <v-text-field v-model="name" clearable :label="$t('modals.rename.torrentName')" autofocus :prepend-inner-icon="mdiFile" />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -29,12 +29,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { mapGetters } from 'vuex' import {mapGetters} from 'vuex'
import Modal from '@/mixins/Modal' import Modal from '@/mixins/Modal'
import { mdiFile } from '@mdi/js' import {mdiFile} from '@mdi/js'
import { FullScreenModal } from '@/mixins' import {FullScreenModal} from '@/mixins'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { defineComponent } from 'vue' import {defineComponent} from 'vue'
export default defineComponent({ export default defineComponent({
name: 'RenameModal', name: 'RenameModal',

View file

@ -9,10 +9,10 @@
<v-card-text> <v-card-text>
<v-form ref="feedForm" class="px-6 mt-3"> <v-form ref="feedForm" class="px-6 mt-3">
<v-container v-if="!hasInitialFeed"> <v-container v-if="!hasInitialFeed">
<v-text-field v-model="feed.url" :rules="rules" :label="$t('modals.newFeed.url')" required /> <v-text-field v-model="feed.url" :rules="rules" :label="$t('modals.newFeed.url')" autofocus required />
</v-container> </v-container>
<v-container> <v-container>
<v-text-field v-model="feed.name" :rules="rules" :label="$t('modals.newFeed.feedName')" required /> <v-text-field v-model="feed.name" :rules="rules" :label="$t('modals.newFeed.feedName')" autofocus required />
</v-container> </v-container>
</v-form> </v-form>
</v-card-text> </v-card-text>
@ -31,9 +31,9 @@
<script lang="ts"> <script lang="ts">
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { Modal } from '@/mixins' import {Modal} from '@/mixins'
import { mdiCancel, mdiTagPlus, mdiPencil } from '@mdi/js' import {mdiCancel, mdiPencil, mdiTagPlus} from '@mdi/js'
import { defineComponent } from 'vue' import {defineComponent} from 'vue'
export default defineComponent({ export default defineComponent({
name: 'FeedForm', name: 'FeedForm',

View file

@ -17,7 +17,7 @@
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
<v-form ref="form"> <v-form ref="form">
<v-container> <v-container>
<v-text-field v-model="rule.name" :label="$t('modals.newRule.name')" required /> <v-text-field v-model="rule.name" :label="$t('modals.newRule.name')" autofocus required />
<v-divider /> <v-divider />
@ -101,14 +101,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import {defineComponent} from 'vue'
import { mapGetters } from 'vuex' import {mapGetters} from 'vuex'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { Modal } from '@/mixins' import {Modal} from '@/mixins'
import { mdiClose, mdiContentSave } from '@mdi/js' import {mdiClose, mdiContentSave} from '@mdi/js'
import i18n from '@/plugins/i18n' import i18n from '@/plugins/i18n'
import { AppPreferences } from '@/enums/qbit' import {AppPreferences} from '@/enums/qbit'
import { Category, Feed } from '@/types/vuetorrent' import {Category, Feed} from '@/types/vuetorrent'
type FormattedArticle = { type: string; value?: string } type FormattedArticle = { type: string; value?: string }

View file

@ -19,7 +19,7 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-text-field v-model="installInput" :label="$t('modals.searchPluginManager.install.label')" required /> <v-text-field v-model="installInput" :label="$t('modals.searchPluginManager.install.label')" autofocus required />
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
@ -69,12 +69,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import {defineComponent} from 'vue'
import { FullScreenModal, Modal } from '@/mixins' import {FullScreenModal, Modal} from '@/mixins'
import { mapState } from 'vuex' import {mapState} from 'vuex'
import { SearchPlugin } from '@/types/qbit/models' import {SearchPlugin} from '@/types/qbit/models'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { mdiDelete } from '@mdi/js' import {mdiDelete} from '@mdi/js'
export default defineComponent({ export default defineComponent({
name: 'SearchPluginManager', name: 'SearchPluginManager',

View file

@ -8,8 +8,8 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-text-field v-model="category.name" :rules="nameRules" :label="$t('modals.newCategory.categoryName')" required :disabled="hasInitialCategory" /> <v-text-field v-model="category.name" :rules="nameRules" :label="$t('modals.newCategory.categoryName')" required :autofocus="!hasInitialCategory" :disabled="hasInitialCategory" />
<v-text-field v-model="category.savePath" :rules="pathRules" :label="$t('path')" required /> <v-text-field v-model="category.savePath" :rules="pathRules" :label="$t('path')" required :autofocus="hasInitialCategory" />
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-divider /> <v-divider />
@ -29,10 +29,10 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import {mapGetters} from 'vuex'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { Modal } from '@/mixins' import {Modal} from '@/mixins'
import { mdiCancel, mdiTagPlus, mdiPencil } from '@mdi/js' import {mdiCancel, mdiPencil, mdiTagPlus} from '@mdi/js'
import Vue from 'vue' import Vue from 'vue'
export default { export default {

View file

@ -8,7 +8,7 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-text-field v-model="tagname" :rules="rules" :label="$t('modals.newTag.tagName')" required /> <v-text-field v-model="tagname" :rules="rules" :label="$t('modals.newTag.tagName')" autofocus required />
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-divider /> <v-divider />
@ -26,7 +26,8 @@
<script> <script>
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import { Modal } from '@/mixins' import {Modal} from '@/mixins'
export default { export default {
name: 'CreateTagDialog', name: 'CreateTagDialog',
mixins: [Modal], mixins: [Modal],