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

Resolve "Improve UX/UI of new room (with no remembered identity)"

Browse source
This commit is contained in:
10G Meow 2022-05-11 14:08:45 +00:00 • committed by N Pex
parent fa8edb2d24
commit df2bbacffc
17 changed files with 161 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/assets/css/join.scss
View file

@ -37,12 +37,6 @@
background: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
.join-user-info {
display: flex;
flex-wrap: nowrap;
max-width: 500px;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
padding: 20px;
}

3
src/assets/translations/bo.json
View file

@ -222,7 +222,8 @@
"remember_me": "ང་དྲན་པར་བྱོས།",
"user_name_label": "སྤྱོད་མིང་།",
"title": "ཁྱེད་རང་ནང་དུ་ཞུགས་པར་དགའ་བསུ་ཞུ།",
"join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།"
"join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།",
"choose_name": ""
},
"profile_info_popup": {
"powered_by": "ཁ་བརྡ་ཁང་འདི་{product} ནུས་ཤུགས་བསྩལ་ཡོད། {productLink} ནས་དེ་ལས་མང་བ་སྦྱོང་ཆོག་ལ། མདུན་དུ་བསྐྱོད་དེ་ཁ་བརྡ་ཁང་གཞན་ཞིག་བསྐྲུན་ཆོག",

3
src/assets/translations/de.json
View file

@ -144,7 +144,8 @@
"status_logging_in": "Wird angemeldet …",
"status_joining": "Raum beitreten …",
"join_failed": "Beitritt zum Raum fehlgeschlagen.",
"title": "Willkommen in {roomName}"
"title": "Willkommen in {roomName}",
"choose_name": ""
},
"invite": {
"title": "Freunde hinzufügen",

5
src/assets/translations/en.json
View file

@ -90,7 +90,7 @@
"new_room": "New Room",
"create": "Create",
"next": "Next",
"name_room": "Name room",
"name_room": "Room name",
"room_topic": "Add a description if you like",
"join_permissions": "Join permissions",
"set_join_permissions": "Set Join Permissions",
@ -158,7 +158,8 @@
"enter_room": "Enter room",
"status_logging_in": "Logging in...",
"status_joining": "Joining room...",
"join_failed": "Failed to join room."
"join_failed": "Failed to join room.",
"choose_name": "Choose a name to use"
},
"invite": {
"title": "Add Friends",

3
src/assets/translations/es.json
View file

@ -63,7 +63,8 @@
"remember_me": "Recordarme",
"user_name_label": "Nombre de usuario",
"title": "Bienvenido has sido invitado a unirte",
"join_failed": "No se pudo unir a la sala."
"join_failed": "No se pudo unir a la sala.",
"choose_name": ""
},
"profile": {
"display_name": "Nombre para mostrar",

3
src/assets/translations/fi.json
View file

@ -72,7 +72,8 @@
"user_name_label": "Käyttäjätunnus",
"status_joining": "Liittyminen huoneeseen…",
"status_logging_in": "Kirjautuminen sisään…",
"join_failed": "Huoneeseen liittyminen epäonnistui."
"join_failed": "Huoneeseen liittyminen epäonnistui.",
"choose_name": ""
},
"leave": {
"title_public": "Näkemiin, {user}",

3
src/assets/translations/fr.json
View file

@ -144,7 +144,8 @@
"status_joining": "Adhésion au salon…",
"join_failed": "Impossible de rejoindre le salon.",
"joining_as": "Vous rejoignez en tant que :",
"join_guest": "Rejoindre comme invité·e"
"join_guest": "Rejoindre comme invité·e",
"choose_name": ""
},
"invite": {
"title": "Ajouter des amis",

3
src/assets/translations/it.json
View file

@ -143,7 +143,8 @@
"join_guest": "Unisciti come ospite",
"status_joining": "Unendosi alla stanza…",
"join_failed": "Impossibile unirsi alla stanza.",
"status_logging_in": "Accesso in corso…"
"status_logging_in": "Accesso in corso…",
"choose_name": ""
},
"invite": {
"title": "Aggiungi amici",

3
src/assets/translations/nb_NO.json
View file

@ -75,7 +75,8 @@
"status_joining": "Tar del i rom…",
"status_logging_in": "Logger inn …",
"enter_room": "",
"title": "Velkommen til {roomName}"
"title": "Velkommen til {roomName}",
"choose_name": ""
},
"profile_info_popup": {
"identity_temporary": "{displayName}",

3
src/assets/translations/pt_BR.json
View file

@ -169,7 +169,8 @@
"enter_room": "Entre na sala",
"status_logging_in": "Fazendo login...",
"status_joining": "Entrando na sala...",
"join_failed": "Houve uma falha ao entrar na sala."
"join_failed": "Houve uma falha ao entrar na sala.",
"choose_name": ""
},
"leave": {
"title_public": "Adeus, {user}",

3
src/assets/translations/ro.json
View file

@ -99,7 +99,8 @@
"joining_as": "Vă înscrieți ca:",
"remember_me": "Amintește-ți de mine",
"user_name_label": "Numele utilizatorului",
"title": "Bine ați venit, ați fost invitat să vă alăturați"
"title": "Bine ați venit, ați fost invitat să vă alăturați",
"choose_name": ""
},
"profile_info_popup": {
"new_room": "+ Cameră nouă",

3
src/assets/translations/ug.json
View file

@ -114,7 +114,8 @@
"joining_as": "سىز تۆۋەندىكىدەك قاتنىشىۋاتىسىز:",
"remember_me": "",
"user_name_label": "قوللانغۇچى ئىسمى",
"title": "{ياتاق ئىسمى} غا خۇش كەپسىز"
"title": "{ياتاق ئىسمى} غا خۇش كەپسىز",
"choose_name": ""
},
"room_welcome": {
"info_permissions": "ياتاق تەڭشىكىدە خالىغان ۋاقىتتا «قوشۇلۇش ئىجازەتنامىسى» نى ئۆزگەرتەلەيسىز.",

3
src/assets/translations/zh_Hans.json
View file

@ -174,7 +174,8 @@
"remember_me": "记得我",
"user_name_label": "用户名",
"title": "欢迎您被邀请加入",
"join_failed": "加入聊天室失败。"
"join_failed": "加入聊天室失败。",
"choose_name": ""
},
"profile": {
"display_name": "显示名称",

181
src/components/CreateRoom.vue
View file

@ -20,7 +20,7 @@
!roomName || (step != steps.INITIAL && step != steps.CREATED)
"
class="header-button-right"
@click.stop="next"
@click.stop="onCreate"
>
<span>{{
step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
@ -28,54 +28,6 @@
</v-btn> -->
</v-container>
</div>
<v-container class="join-user-info">
<v-row v-if="canEditProfile">
<v-col class="flex-grow-0 flex-shrink-0">
<v-avatar @click="showAvatarPickerList">
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
</v-avatar>
</v-col>
<v-col class="flex-shrink-1 flex-grow-1">
<v-select
ref="avatar"
:items="availableAvatars"
cache-items
:label="$t('join.user_name_label')"
outlined
dense
@change="selectAvatar"
:value="availableAvatars[0]"
single-line
>
<template v-slot:selection>
<v-text-field
background-color="transparent"
solo
flat
hide-details
@click.native.stop="
{
}
"
v-model="selectedProfile.name"
></v-text-field>
</template>
<template v-slot:item="data">
<v-avatar size="32">
<v-img :src="data.item.image" />
</v-avatar>
<div class="ms-2">{{ data.item.name }}</div>
</template>
</v-select>
<v-checkbox
id="chk-remember-me"
class="mt-0"
v-model="rememberMe"
:label="$t('join.remember_me')"
/>
</v-col>
</v-row>
</v-container>
<v-container fluid class="mt-40">
<v-row align="center">
@ -86,34 +38,47 @@
</v-avatar>
</v-col>
</v-row>
<v-row cols="12" align="center">
<v-col cols="8" offset="2" align="center">
<v-row cols="12" align="center" justify="center">
<v-col sm="8" align="center">
<div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
<v-text-field
v-model="roomName"
:label="$t('new_room.name_room')"
color="black"
background-color="white"
v-on:keyup.enter="$refs.topic.focus()"
:disabled="step > steps.INITIAL"
autofocus
solo
></v-text-field>
<div class="text-left font-weight-light" v-show="roomName.length> 0">{{ $t("new_room.room_topic") }}</div>
<v-text-field
v-model="roomTopic"
v-show="roomName.length > 0"
:label="$t('new_room.room_topic')"
color="black"
background-color="white"
v-on:keyup.enter="$refs.create.focus()"
:disabled="step > steps.INITIAL"
solo
></v-text-field>
<v-btn
id="btn-room-create"
color="black"
depressed
class="filled-button"
@click.stop="next"
:disabled="roomName.length == 0"
>{{ $t("new_room.create") }}</v-btn
>
@click.stop="onCreate"
:disabled="status ? true : roomName.length == 0"
>
<div v-if="status && !enterRoomDialog" class="text-center">
{{ status }}
<v-progress-circular
v-if="step == steps.CREATING"
indeterminate
color="primary"
size="20"
></v-progress-circular>
</div>
<span v-else>{{ $t("new_room.create") }}</span>
</v-btn>
</v-col>
</v-row>
</v-container>
@ -192,7 +157,7 @@
{{ $t("new_room.link_copied") }}
</div>
-->
<div v-if="status" class="text-center">
<!-- <div v-if="status && !enterRoomDialog" class="text-center">
<v-progress-circular
v-if="step == steps.CREATING"
indeterminate
@ -200,7 +165,7 @@
size="20"
></v-progress-circular>
{{ status }}
</div>
</div> -->
<!-- </div> -->
</v-fade-transition>
<input
@ -212,11 +177,79 @@
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">
<v-row class="align-center">
<v-col class="py-0">
<div class="text-left 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
>
<template v-slot:selection>
<v-text-field
background-color="transparent"
solo
flat
hide-details
@click.native.stop="{}"
v-model="selectedProfile.name"
></v-text-field>
</template>
<template v-slot:item="data">
<v-avatar size="32">
<v-img :src="data.item.image" />
</v-avatar>
<div class="ms-2">{{ data.item.name }}</div>
</template>
</v-select>
</v-col>
<v-col cols="2" class="py-0">
<v-avatar @click="showAvatarPickerList">
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
</v-avatar>
</v-col>
</v-row>
<v-row class="mt-0">
<v-col class="py-0">
<v-checkbox
id="chk-remember-me"
class="mt-0"
v-model="rememberMe"
@change="onRememberMe"
:label="$t('join.remember_me')"
/>
</v-col>
</v-row>
<v-btn
color="black"
depressed
class="filled-button"
@click.stop="onEnterRoom"
:disabled="!selectedProfile.name"
>
{{ $t("join.enter_room") }}
</v-btn>
</v-container>
</v-card>
</v-dialog>
</div>
</template>
<script>
import util from "../plugins/utils";
import rememberMeMixin from "./rememberMeMixin";
const steps = Object.freeze({
INITIAL: 0,
@ -227,6 +260,7 @@ const steps = Object.freeze({
export default {
name: "CreateRoom",
mixins:[rememberMeMixin],
data() {
return {
steps,
@ -255,7 +289,12 @@ export default {
publicRoomLink: null,
publicRoomLinkCopied: false,
availableAvatars: [],
selectedProfile: null,
selectedProfile: {
id: "",
image: "",
name: ""
},
enterRoomDialog: false
};
},
@ -290,15 +329,7 @@ export default {
return false;
}
return true;
},
rememberMe: {
get: function () {
return this.$store.state.useLocalStorage;
},
set: function (rememberMe) {
this.$store.commit("setUseLocalStorage", rememberMe);
},
},
}
},
methods: {
@ -309,7 +340,17 @@ export default {
this.$navigation.pop();
}
},
next() {
onCreate() {
if(this.currentUser) {
this.onEnterRoom();
} else {
this.enterRoomDialog = true;
}
},
onEnterRoom() {
this.enterRoomDialog = false;
if (this.step == steps.CREATED) {
this.openRoom();
} else if (this.step == steps.INITIAL) {

19
src/components/Join.vue
View file

@ -27,7 +27,13 @@
@click.native.stop="{}"
v-model="selectedProfile.name"
></v-text-field>
<v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
<v-checkbox
id="chk-remember-me"
class="mt-0"
v-model="rememberMe"
:label="$t('join.remember_me')"
@change="onRememberMe"
/>
</v-col>
<v-col cols="2" sm="5">
<v-avatar @click="showAvatarPickerList">
@ -119,12 +125,13 @@
<script>
import util from "../plugins/utils";
import LanguageMixin from "./languageMixin";
import rememberMeMixin from "./rememberMeMixin";
import SelectLanguageDialog from "./SelectLanguageDialog.vue";
export default {
name: "Join",
mixins: [LanguageMixin],
mixins: [LanguageMixin,rememberMeMixin],
components: {
SelectLanguageDialog,
},
@ -197,14 +204,6 @@ export default {
.substring(0, 1)
.toUpperCase();
},
rememberMe: {
get: function () {
return this.$store.state.useLocalStorage;
},
set: function (rememberMe) {
this.$store.commit("setUseLocalStorage", rememberMe);
},
},
getDisplayLanguage() {
let displayLanguages = [...this.getLanguages()];
return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);

13
src/components/Login.vue
View file

@ -66,6 +66,7 @@
id="chk-remember-me"
class="mt-0"
v-model="rememberMe"
@change="onRememberMe"
:label="$t('join.remember_me')"
/>
<v-btn
@ -97,9 +98,11 @@
<script>
import User from "../models/user";
import util from "../plugins/utils";
import rememberMeMixin from "./rememberMeMixin";
export default {
name: "Login",
mixins:[rememberMeMixin],
data() {
return {
user: new User(this.$config.defaultServer, "", ""),
@ -120,15 +123,7 @@ export default {
},
showCloseButton() {
return this.$navigation && this.$navigation.canPop();
},
rememberMe: {
get: function () {
return this.$store.state.useLocalStorage;
},
set: function (rememberMe) {
this.$store.commit("setUseLocalStorage", rememberMe);
},
},
}
},
created() {
if (this.loggedIn) {

12
src/components/rememberMeMixin.js Normal file
View file

@ -0,0 +1,12 @@
export default {
data() {
return {
rememberMe: false
}
},
methods: {
onRememberMe(val) {
this.$store.commit("setUseLocalStorage", val);
}
}
}