MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-26 22:23:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Present a numeric keypad for integer input fields

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-04-15 22:50:11 +02:00
parent a2dd2251c9
commit 1ccc97d824
5 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/ModalDialogAddRss.vue
View File

@ -78,7 +78,7 @@ export default {
show() { show() {
if (this.show) { if (this.show) {
this.loading = false this.loading = false
// We need to delay setting the focus to the input field until the field is part of the dom and visible // Delay setting the focus on the input field until it is part of the DOM and visible
setTimeout(() => { setTimeout(() => {
this.$refs.url_field.focus() this.$refs.url_field.focus()
}, 10) }, 10)

2
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -85,7 +85,7 @@ export default {
show() { show() {
if (this.show) { if (this.show) {
this.loading = false this.loading = false
// We need to delay setting the focus to the input field until the field is part of the dom and visible // Delay setting the focus on the input field until it is part of the DOM and visible
setTimeout(() => { setTimeout(() => {
this.$refs.url_field.focus() this.$refs.url_field.focus()
}, 10) }, 10)

3
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -80,8 +80,7 @@ export default {
show() { show() {
if (this.show) { if (this.show) {
this.loading = false this.loading = false
// Delay setting the focus on the input field until it is part of the DOM and visible
// We need to delay setting the focus to the input field until the field is part of the dom and visible
setTimeout(() => { setTimeout(() => {
this.$refs.playlist_name_field.focus() this.$refs.playlist_name_field.focus()
}, 10) }, 10)

5
web-src/src/components/ModalDialogRemotePairing.vue
View File

@ -14,7 +14,7 @@
ref="pin_field" ref="pin_field"
v-model="pairing_req.pin" v-model="pairing_req.pin"
class="input" class="input"
type="text" inputmode="numeric"
pattern="[\d]{4}" pattern="[\d]{4}"
:placeholder="$t('dialog.remote-pairing.pairing-code')" :placeholder="$t('dialog.remote-pairing.pairing-code')"
/> />
@ -76,8 +76,7 @@ export default {
show() { show() {
if (this.show) { if (this.show) {
this.loading = false this.loading = false
// Delay setting the focus on the input field until it is part of the DOM and visible
// We need to delay setting the focus to the input field until the field is part of the dom and visible
setTimeout(() => { setTimeout(() => {
this.$refs.pin_field.focus() this.$refs.pin_field.focus()
}, 10) }, 10)

12
web-src/src/pages/PageSettingsRemotesOutputs.vue
View File

@ -6,10 +6,9 @@
<p class="title is-4" v-text="$t('page.settings.devices.pairing')" /> <p class="title is-4" v-text="$t('page.settings.devices.pairing')" />
</template> </template>
<template #content> <template #content>
<!-- Paring request active --> <div v-if="pairing.active">
<div v-if="pairing.active" class="notification">
<form @submit.prevent="kickoff_pairing"> <form @submit.prevent="kickoff_pairing">
<label class="label has-text-weight-normal"> <label class="label has-text-weight-normal content">
<span v-text="$t('page.settings.devices.pairing-request')" /> <span v-text="$t('page.settings.devices.pairing-request')" />
<b v-text="pairing.remote" /> <b v-text="pairing.remote" />
</label> </label>
@ -18,7 +17,7 @@
<input <input
v-model="pairing_req.pin" v-model="pairing_req.pin"
class="input" class="input"
type="text" inputmode="numeric"
pattern="[\d]{4}" pattern="[\d]{4}"
:placeholder="$t('page.settings.devices.pairing-code')" :placeholder="$t('page.settings.devices.pairing-code')"
/> />
@ -33,8 +32,7 @@
</div> </div>
</form> </form>
</div> </div>
<!-- No pairing requests --> <div v-else>
<div v-if="!pairing.active" class="content">
<p v-text="$t('page.settings.devices.no-active-pairing')" /> <p v-text="$t('page.settings.devices.no-active-pairing')" />
</div> </div>
</template> </template>
@ -74,7 +72,7 @@
<input <input
v-model="verification_req.pin" v-model="verification_req.pin"
class="input" class="input"
type="text" inputmode="numeric"
pattern="[\d]{4}" pattern="[\d]{4}"
:placeholder="$t('page.settings.devices.verification-code')" :placeholder="$t('page.settings.devices.verification-code')"
/> />