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

Merge branch '192-improve-interaction-of-input-bar-for-changing-identity' into 'dev'

Browse source 
Resolve "Improve interaction of input bar for changing identity"

See merge request keanuapp/keanuapp-weblite!51
This commit is contained in:
N Pex 2022-02-23 12:30:10 +00:00
commit 26578fe296
3 changed files with 44 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/ProfileInfoPopup.vue
View file

@ -9,18 +9,32 @@
<div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
<v-container fluid>
<v-row>
<v-col class="username" cols="pa-2">
<v-col :class="['username',{'editable': editDisplayName }]" cols="pa-2" ref="username">
<div v-if="$matrix.currentUser.is_guest">
<i18n path="profile_info_popup.identity_temporary" tag="span">
<template v-slot:displayName>
<b>{{ displayName }}</b>
<input
v-model="displayName"
@blur="
updateDisplayName($event.target.value);
editDisplayName = !editDisplayName;
"
@focus="editDisplayName = !editDisplayName"
/>
</template>
</i18n>
</div>
<div v-else>
<i18n path="profile_info_popup.identity" tag="span">
<template v-slot:displayName>
<b>{{ displayName }}</b>
<input
v-model="displayName"
@blur="
updateDisplayName($event.target.value);
editDisplayName = !editDisplayName;
"
@focus="editDisplayName = !editDisplayName"
/>
</template>
</i18n>
</div>
@ -93,6 +107,7 @@ export default {
data() {
return {
showDialog: false,
editDisplayName: false
};
},
computed: {
@ -165,6 +180,19 @@ export default {
.username {
border-radius: 4px;
background-color: #f5f5f5;
&.editable {
background-color: unset;
box-shadow: 0px 2px 6px rgb(0 0 0 / 8%);
}
input {
width: 100%;
&:focus {
outline: none;
}
}
}
.more-container {
border-radius: 10px;