butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Select whole name on focus when choosing identity

Browse source
This commit is contained in:
N-Pex 2024-07-19 10:50:34 +02:00
parent 31b3ea38da
commit 1998bf2b64
2 changed files with 27 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/CreateRoom.vue
View file

@ -105,6 +105,9 @@
<input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
accept="image/*" class="d-none" />
<input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar" @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
<v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
<v-card>
<v-container v-if="canEditProfile" class="pa-10">
@ -112,9 +115,11 @@
<v-col class="py-0">
<div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
<v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
:value="availableAvatars[0]" single-line autofocus>
:value="selectedProfile">
<template v-slot:selection>
<v-text-field background-color="transparent" solo flat hide-details @click.native.stop="{}"
<v-text-field background-color="transparent" solo flat hide-details
@click.native.stop="(event) => event.target.focus()"
@focus="$event.target.select()"
v-model="selectedProfile.name"></v-text-field>
</template>
<template v-slot:item="data">
@ -126,7 +131,7 @@
</v-select>
</v-col>
<v-col cols="2" class="py-0">
<v-avatar @click="showAvatarPickerList">
<v-avatar @click="showUserAvatarPicker">
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
</v-avatar>
</v-col>
@ -586,6 +591,21 @@ export default {
showAvatarPickerList() {
this.$refs.avatar.$refs.input.click();
},
/**
* Show picker to select user avatar file
*/
showUserAvatarPicker() {
if (this.step == steps.INITIAL) {
this.$refs.useravatar.click();
}
},
handlePickedUserAvatar(event) {
util.loadAvatarFromFile(event, (image) => {
this.selectedProfile.image = image;
});
},
}
};
</script>

10
src/components/Join.vue
View file

@ -18,7 +18,7 @@
</div>
<hr class="my-10 join-line" />
<div class="font-weight-black mb-4" v-if="!currentUser">Choose a name to use.</div>
<div class="font-weight-black mb-4" v-if="!currentUser">{{ $t("join.choose_name") }}</div>
<v-row v-if="canEditProfile">
<v-col cols="10" sm="7" class="py-0">
@ -29,7 +29,7 @@
outlined
dense
@change="selectAvatar"
:value="availableAvatars[0]"
:value="selectedProfile"
single-line
autofocus
>
@ -39,10 +39,8 @@
solo
flat
hide-details
@click.native.stop="
{
}
"
@click.native.stop="(event) => event.target.focus()"
@focus="$event.target.select()"
v-model="selectedProfile.name"
></v-text-field>
</template>