Merge branch '132-join-page-new-design' into 'main'
Join page new design implemented Closes #132 See merge request keanuapp/keanuapp-weblite!24
This commit is contained in:
N Pex
commit
a9bb8b7940
18 changed files with 403 additions and 254 deletions
35
src/App.vue
35
src/App.vue
|
|
@ -7,27 +7,24 @@
|
|||
<v-container
|
||||
fluid
|
||||
fill-height
|
||||
style="
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
"
|
||||
v-if="loading"
|
||||
class="loading-container"
|
||||
>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col class="text-center">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
class="loading-convene"
|
||||
></v-progress-circular>
|
||||
<div>{{ $t("menu.loading", { appName: appName }) }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-skeleton-loader
|
||||
type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
|
||||
v-if="loading"
|
||||
></v-skeleton-loader>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
|
@ -190,4 +187,22 @@ export default {
|
|||
width: $main-desktop-width;
|
||||
}
|
||||
}
|
||||
.v-skeleton-loader--is-loading {
|
||||
z-index: 100;
|
||||
}
|
||||
.loading {
|
||||
&-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&-convene {
|
||||
color: $very-very-purple;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
$font-family: "Poppins";
|
||||
$background: #ffffff;
|
||||
$app-background: #f6f6f6;
|
||||
$main-desktop-width: 900px;
|
||||
$dialog-desktop-width: 940px;
|
||||
|
||||
$very-very-purple: #536dfe;
|
||||
|
||||
$chat-background: $background;
|
||||
$chat-standard-padding: 32px;
|
||||
$chat-standard-padding-s: 16px;
|
||||
$chat-standard-padding-xs: 8px;
|
||||
$chat-text-size: 1.0px;
|
||||
$chat-text-size: 1px;
|
||||
$chat-button-height: 50px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "~vuetify/src/styles/settings/_variables.scss";
|
||||
@import "@/assets/css/main.scss";
|
||||
|
||||
.v-btn.btn-light {
|
||||
|
|
@ -28,94 +29,127 @@
|
|||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
||||
.join-root {
|
||||
margin-top: 10%;
|
||||
padding: 40px;
|
||||
.join-room {
|
||||
.join-enter-room {
|
||||
margin-top: 10px;
|
||||
padding: 40px;
|
||||
border-radius: 18px;
|
||||
background: white;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.btn-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 20px;
|
||||
.join-user-info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.join-user-info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 500px;
|
||||
.join-lang {
|
||||
text-align: center;
|
||||
margin-top: 2%;
|
||||
padding: 20px;
|
||||
border-radius: 18px;
|
||||
background: white;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.active {
|
||||
color: $very-very-purple;
|
||||
font-weight: bold;
|
||||
}
|
||||
.language-more {
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 18px;
|
||||
border: 1px solid black;
|
||||
padding: 0px 5px !important;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
background-color: #FFFFFF !important;
|
||||
|
||||
&:hover {
|
||||
background-color: black !important;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.join-avatar {
|
||||
background-color: #ededed;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.join-avatar {
|
||||
background-color: #ededed;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.join-title {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 40 * $chat-text-size;
|
||||
line-height: 108.5%;
|
||||
/* or 43px */
|
||||
text-align: center;
|
||||
letter-spacing: -0.8px;
|
||||
.join-welcome {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.join-line {
|
||||
border: 1px solid #ECECEC;
|
||||
}
|
||||
|
||||
.join-message {
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * $chat-text-size;
|
||||
color: black;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.join-title {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-size: 28px;
|
||||
line-height: 108.5%;
|
||||
/* or 43px */
|
||||
text-align: center;
|
||||
letter-spacing: -0.8px;
|
||||
|
||||
.join-privacy {
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: #464646;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.join-privacy {
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: #464646;
|
||||
}
|
||||
}
|
||||
|
||||
.join-or-divider {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
height: 20px;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: var(--v-theme-title-featured-line-height);
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 9.88014 * $chat-text-size;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 14px */
|
||||
letter-spacing: 0.29px;
|
||||
color: #9C9CAE;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
height: 1px;
|
||||
background: #9C9CAE;
|
||||
content: " ";
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: #464646;
|
||||
}
|
||||
}
|
||||
|
||||
.join-or-divider {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
height: 20px;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: var(--v-theme-title-featured-line-height);
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 9.88014 * $chat-text-size;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 14px */
|
||||
letter-spacing: 0.29px;
|
||||
color: #9C9CAE;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
height: 1px;
|
||||
background: #9C9CAE;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"fallbacks": {
|
||||
"download_name": "ཕབ་ལེན།",
|
||||
"original_text": "<མ་ཡིག>",
|
||||
|
|
@ -73,6 +77,7 @@
|
|||
"delete": "སུབས།",
|
||||
"edit": "ཕྱོགས་སྒྲིག",
|
||||
"ok": "ལེགས་སོ།",
|
||||
"done": "",
|
||||
"send": "ཐོངས།",
|
||||
"back": "ཕྱིར་ལོག",
|
||||
"cancel": "ཕྱིར་འཐེན།",
|
||||
|
|
@ -94,7 +99,11 @@
|
|||
"temporary_identity": "ངོ་བོ་འདི་གནས་སྐབས་ཙམ་ཡིན། དེ་བསྐྱར་དུ་བཀོལ་བར་གསང་ཚིག་ཅིག་བཟོས།",
|
||||
"title": "ངའི་ཡིག་ཆ།",
|
||||
"display_name": "འཆར་མིང་།",
|
||||
"select_language": "སྐད་ཡིག"
|
||||
"select_language": "སྐད་ཡིག",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": ""
|
||||
},
|
||||
"device_list": {
|
||||
"not_verified": "ར་སྤྲོད་བྱས་མི་འདུག",
|
||||
|
|
@ -203,10 +212,10 @@
|
|||
"join": {
|
||||
"status_joining": "ཁ་བརྡ་ཁང་དུ་འཛུལ་བཞིན་པ།...",
|
||||
"status_logging_in": "ནང་འཛུལ་བྱེད་བཞིན་པ།...",
|
||||
"join_guest": "སྐུ་མགྲོན་གྱི་མིང་ཐོག་ནས་ཞུགས།",
|
||||
"enter_room": "",
|
||||
"join": "ཁ་བརྡ་ཁང་དུ་འཛུལ།",
|
||||
"joining_as": "ཁྱེད་རང་ཞུགས་བཞིན་པ།:",
|
||||
"shared_computer": "འདི་ནི་མཉམ་སྤྱོད་བྱས་པའི་ཡོ་ཆས་ཤིག་ཡིན།",
|
||||
"remember_me": "",
|
||||
"user_name_label": "སྤྱོད་མིང་།",
|
||||
"title": "{roomName} ནང་དུ་ཕེབས་པར་དགའ་བསུ་ཞུ།",
|
||||
"join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
{
|
||||
"language_display_name": "English",
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": "Simply connect"
|
||||
},
|
||||
"menu": {
|
||||
"start_private_chat": "Private chat with this user",
|
||||
"reply": "Reply",
|
||||
|
|
@ -7,6 +11,7 @@
|
|||
"delete": "Delete",
|
||||
"download": "Download",
|
||||
"ok": "Ok",
|
||||
"done": "Done",
|
||||
"cancel": "Cancel",
|
||||
"send": "Send",
|
||||
"back": "BACK",
|
||||
|
|
@ -119,6 +124,10 @@
|
|||
"change_name": "Change name",
|
||||
"change_password": "Change password",
|
||||
"select_language": "Language",
|
||||
"set_language": "Set your language",
|
||||
"language_description": "Convene is available in many languages.",
|
||||
"dont_see_yours": "Don't see yours?",
|
||||
"tell_us": "Tell us.",
|
||||
"password_old": "Old password",
|
||||
"password_new": "New password",
|
||||
"password_repeat": "Repeat new password",
|
||||
|
|
@ -135,12 +144,12 @@
|
|||
"new_room": "+ New room"
|
||||
},
|
||||
"join": {
|
||||
"title": "Welcome to {roomName}",
|
||||
"title": "Welcome you have been invited to join",
|
||||
"user_name_label": "User name",
|
||||
"shared_computer": "This is a shared device",
|
||||
"remember_me": "Remember me",
|
||||
"joining_as": "You are joining as:",
|
||||
"join": "Join room",
|
||||
"join_guest": "Join as guest",
|
||||
"enter_room": "Enter room",
|
||||
"status_logging_in": "Logging in...",
|
||||
"status_joining": "Joining room...",
|
||||
"join_failed": "Failed to join room."
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
{
|
||||
"language_display_name": "Español",
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"room_info": {
|
||||
"identity": "Has iniciado sesión como {displayName}.",
|
||||
"my_profile": "Mi perfil",
|
||||
|
|
@ -46,10 +50,10 @@
|
|||
"join": {
|
||||
"status_joining": "Uniendose a la sala...",
|
||||
"status_logging_in": "Iniciando sesión...",
|
||||
"join_guest": "Unirse como invitado",
|
||||
"enter_room": "",
|
||||
"join": "Unirse a la sala",
|
||||
"joining_as": "Te estas uniendo como:",
|
||||
"shared_computer": "Usando una computadora compartida",
|
||||
"remember_me": "",
|
||||
"user_name_label": "Nombre de usuario",
|
||||
"title": "Bienvenido a {roomName}"
|
||||
},
|
||||
|
|
@ -154,6 +158,7 @@
|
|||
"send": "Enviar",
|
||||
"cancel": "Cancelar",
|
||||
"ok": "OK",
|
||||
"done": "",
|
||||
"download": "Descargar",
|
||||
"delete": "Eliminar",
|
||||
"reply": "Responder",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"message": {
|
||||
"user_changed_guest_access_open": "{user} tillot gjester å ta del i rommet",
|
||||
"user_powerlevel_change_from_to": "{user} fra {powerOld} til {powerNew}",
|
||||
|
|
@ -67,7 +71,7 @@
|
|||
"join": "Ta del i rom",
|
||||
"status_joining": "Tar del i rom…",
|
||||
"status_logging_in": "Logger inn …",
|
||||
"join_guest": "Ta del som gjest",
|
||||
"enter_room": "",
|
||||
"title": "Velkommen til {roomName}"
|
||||
},
|
||||
"profile_info_popup": {
|
||||
|
|
@ -81,6 +85,10 @@
|
|||
"password_new": "Nytt passord",
|
||||
"password_old": "Gammelt passord",
|
||||
"select_language": "Språk",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": "",
|
||||
"change_password": "Endre passord",
|
||||
"change_name": "Endre navn",
|
||||
"set_password": "Sett passord",
|
||||
|
|
@ -140,6 +148,7 @@
|
|||
"login": "Logg inn",
|
||||
"send": "Send",
|
||||
"ok": "OK",
|
||||
"done": "",
|
||||
"cancel": "Avbryt",
|
||||
"download": "last ned",
|
||||
"delete": "Slett",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"invite": {
|
||||
"title": "Adiciona amigos",
|
||||
"done": "Feito",
|
||||
|
|
@ -20,6 +24,7 @@
|
|||
"delete": "Excluir",
|
||||
"download": "Baixar",
|
||||
"ok": "OK",
|
||||
"done": "",
|
||||
"cancel": "Cancela",
|
||||
"send": "Envia",
|
||||
"back": "RETORNA",
|
||||
|
|
@ -132,6 +137,10 @@
|
|||
"change_name": "Altere o nome",
|
||||
"change_password": "Altere a senha",
|
||||
"select_language": "Idioma",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": "",
|
||||
"password_old": "Senha antiga",
|
||||
"password_new": "Nova senha",
|
||||
"password_repeat": "Repita a nova senha",
|
||||
|
|
@ -150,10 +159,10 @@
|
|||
"join": {
|
||||
"title": "Bem-vindo ao {roomName}",
|
||||
"user_name_label": "Nome do usuário",
|
||||
"shared_computer": "Este é um dispositivo compartilhado",
|
||||
"remember_me": "",
|
||||
"joining_as": "Você está entrando como:",
|
||||
"join": "Entrar na sala",
|
||||
"join_guest": "Entrar como um convidado",
|
||||
"enter_room": "",
|
||||
"status_logging_in": "Fazendo login...",
|
||||
"status_joining": "Entrando na sala...",
|
||||
"join_failed": "Houve uma falha ao entrar na sala."
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"menu": {
|
||||
"ok": "OK",
|
||||
"done": "",
|
||||
"loading": "Se încarcă {appName}",
|
||||
"undo": "Anulează",
|
||||
"new_room": "Cameră nouă",
|
||||
|
|
@ -89,10 +94,10 @@
|
|||
"join_failed": "Nu a reușit să intre în cameră.",
|
||||
"status_joining": "Intrarea în cameră...",
|
||||
"status_logging_in": "Autentificare...",
|
||||
"join_guest": "Alăturați-vă ca invitat",
|
||||
"enter_room": "",
|
||||
"join": "Alăturați-vă camerei",
|
||||
"joining_as": "Vă înscrieți ca:",
|
||||
"shared_computer": "Acesta este un dispozitiv partajat",
|
||||
"remember_me": "",
|
||||
"user_name_label": "Numele utilizatorului",
|
||||
"title": "Bine ați venit la {roomName}"
|
||||
},
|
||||
|
|
@ -112,6 +117,10 @@
|
|||
"password_new": "Parolă nouă",
|
||||
"password_old": "Parolă veche",
|
||||
"select_language": "Limbă",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": "",
|
||||
"change_password": "Schimbați parola",
|
||||
"change_name": "Schimbă numele",
|
||||
"set_password": "Setați parola",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"menu": {
|
||||
"ok": "හරි",
|
||||
"done": "",
|
||||
"download": "බාගන්න",
|
||||
"edit": "සංස්කරණය",
|
||||
"reply": "පිලිතුර",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"language_is_rtl": true,
|
||||
"menu": {
|
||||
"ok": "تامام",
|
||||
"done": "",
|
||||
"download": "چۈشۈرۈش",
|
||||
"delete": "ئۆچۈرۈش",
|
||||
"edit": "تەھرىر",
|
||||
|
|
@ -101,10 +106,10 @@
|
|||
"join_failed": "مۇنازىرە ئۆيىگە قوشۇلۇش مەغلۇب بولدى.",
|
||||
"status_joining": "مۇنازىرىگە كىرىش...",
|
||||
"status_logging_in": "كىرىش ...",
|
||||
"join_guest": "مېھمان سۈپىتىدە قاتنىشىڭ",
|
||||
"enter_room": "",
|
||||
"join": "مۇنازىرىگە قوشۇلۇڭ",
|
||||
"joining_as": "سىز تۆۋەندىكىدەك قاتنىشىۋاتىسىز:",
|
||||
"shared_computer": "بۇ ئورتاق ئىشلىتىلىدىغان ئۈسكۈنە",
|
||||
"remember_me": "",
|
||||
"user_name_label": "قوللانغۇچى ئىسمى",
|
||||
"title": "{ياتاق ئىسمى} غا خۇش كەپسىز"
|
||||
},
|
||||
|
|
@ -198,6 +203,10 @@
|
|||
"password_new": "يېڭى پارول",
|
||||
"password_old": "كونا پارول",
|
||||
"select_language": "تىل",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": "",
|
||||
"change_password": "پارولنى ئۆزگەرتىڭ",
|
||||
"change_name": "ئىسىم ئۆزگەرتىش",
|
||||
"set_password": "پارول بەلگىلەڭ",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"project": {
|
||||
"name": "Convene",
|
||||
"tag_line": ""
|
||||
},
|
||||
"fallbacks": {
|
||||
"download_name": "下载",
|
||||
"original_text": "<原文>",
|
||||
|
|
@ -112,6 +116,7 @@
|
|||
"start_private_chat": "与该用户私人聊天",
|
||||
"logout": "退出",
|
||||
"ok": "好的",
|
||||
"done": "",
|
||||
"reply": "回复",
|
||||
"back": "返回",
|
||||
"new_room": "新的聊天室",
|
||||
|
|
@ -159,10 +164,10 @@
|
|||
"join": {
|
||||
"status_joining": "正在加入聊天室...",
|
||||
"status_logging_in": "正在登录中...",
|
||||
"join_guest": "以访客身份加入",
|
||||
"enter_room": "",
|
||||
"join": "加入聊天室",
|
||||
"joining_as": "您以以下身份加入：",
|
||||
"shared_computer": "这是一台共享设备",
|
||||
"remember_me": "",
|
||||
"user_name_label": "用户名",
|
||||
"title": "欢迎来到 {roomName}",
|
||||
"join_failed": "加入聊天室失败。"
|
||||
|
|
@ -177,7 +182,11 @@
|
|||
"set_password": "设置密码",
|
||||
"temporary_identity": "这个身份是暂时的。为了再次使用这个暂时身份，请设置密码",
|
||||
"title": "我的简历",
|
||||
"select_language": "语言"
|
||||
"select_language": "语言",
|
||||
"set_language": "",
|
||||
"language_description": "",
|
||||
"dont_see_yours": "",
|
||||
"tell_us": ""
|
||||
},
|
||||
"new_room": {
|
||||
"status_avatar": "正在上传头像：{count}",
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@
|
|||
</v-select>
|
||||
<v-checkbox
|
||||
class="mt-0"
|
||||
v-model="sharedComputer"
|
||||
:label="$t('join.shared_computer')"
|
||||
v-model="rememberMe"
|
||||
:label="$t('join.remember_me')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
@ -287,12 +287,12 @@ export default {
|
|||
}
|
||||
return true;
|
||||
},
|
||||
sharedComputer: {
|
||||
rememberMe: {
|
||||
get: function () {
|
||||
return !this.$store.state.useLocalStorage;
|
||||
},
|
||||
set: function (sharedComputer) {
|
||||
this.$store.commit("setUseLocalStorage", !sharedComputer);
|
||||
set: function (rememberMe) {
|
||||
this.$store.commit("setUseLocalStorage", !rememberMe);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,71 +1,41 @@
|
|||
<template>
|
||||
<div class="join-root">
|
||||
<div v-if="!waitingForInfo && !waitingForMembership" class="text-center">
|
||||
<v-btn
|
||||
class="btn-login"
|
||||
text
|
||||
small
|
||||
@click.stop="handleLogin"
|
||||
:loading="loading"
|
||||
v-if="!currentUser"
|
||||
>{{ $t("menu.login") }}</v-btn
|
||||
>
|
||||
<div class="join-room" v-if="!waitingForInfo && !waitingForMembership">
|
||||
<div class="join-enter-room">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<v-avatar class="join-avatar">
|
||||
<v-img v-if="roomAvatar" :src="roomAvatar" />
|
||||
<span v-else class="white--text headline">
|
||||
{{roomName.substring(0, 1).toUpperCase() }}
|
||||
</span>
|
||||
</v-avatar>
|
||||
<div class="join-welcome font-weight-bold">
|
||||
{{ $t("join.title") }}
|
||||
</div>
|
||||
<div class="join-title">
|
||||
{{ roomName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-10 join-line">
|
||||
<div class="font-weight-black mb-2" v-if="!currentUser"> Choose a name to use.</div>
|
||||
|
||||
<v-avatar class="join-avatar">
|
||||
<v-img v-if="roomAvatar" :src="roomAvatar" />
|
||||
<span v-else class="white--text headline">{{
|
||||
roomName.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
<div class="join-title">
|
||||
{{ $t("join.title", { roomName: roomName }) }}
|
||||
</div>
|
||||
<div class="join-message">
|
||||
<!-- Join the group chat in a web browser or with the Keanu app. -->
|
||||
</div>
|
||||
<v-container class="join-user-info">
|
||||
<v-row v-if="canEditProfile">
|
||||
<v-col class="flex-grow-0 flex-shrink-0">
|
||||
<v-col cols="10" sm="7">
|
||||
<v-text-field
|
||||
solo
|
||||
@click.native.stop="{}"
|
||||
v-model="selectedProfile.name"
|
||||
></v-text-field>
|
||||
<v-checkbox class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
|
||||
</v-col>
|
||||
<v-col cols="2" sm="5">
|
||||
<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 class="mt-0" v-model="sharedComputer" :label="$t('join.shared_computer')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else>
|
||||
<v-row v-else class="text-center">
|
||||
<v-col>
|
||||
{{ $t("join.joining_as") }}
|
||||
<div style="display: inline-block">
|
||||
|
|
@ -79,52 +49,79 @@
|
|||
{{ userDisplayName }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!--<v-btn
|
||||
class="btn-light"
|
||||
large
|
||||
block
|
||||
@click.stop="handleOpenApp"
|
||||
:loading="loading"
|
||||
>Open Keanu app</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="btn-dark"
|
||||
large
|
||||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-if="!currentUser"
|
||||
>{{ $t("join.enter_room") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="btn-dark"
|
||||
large
|
||||
block
|
||||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-else
|
||||
>{{ $t("join.join") }}</v-btn
|
||||
>
|
||||
|
||||
<div class="join-or-divider">OR</div> -->
|
||||
<div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
class="btn-dark"
|
||||
large
|
||||
block
|
||||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-if="!currentUser"
|
||||
>{{ $t("join.join_guest") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="btn-dark"
|
||||
large
|
||||
block
|
||||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-else
|
||||
>{{ $t("join.join") }}</v-btn
|
||||
>
|
||||
<div class="join-lang">
|
||||
<h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
|
||||
<v-row class="align-center">
|
||||
<v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
|
||||
<span :class="$i18n.locale==lang.value?'active':''" > {{lang.text}} </span>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn
|
||||
class="language-more"
|
||||
@click="showSelectLanguageDialog = true"
|
||||
>
|
||||
<v-icon >language</v-icon><v-icon >more_horiz</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<SelectLanguageDialog
|
||||
v-model="showSelectLanguageDialog"
|
||||
v-on:close="showSelectLanguageDialog = false"
|
||||
/>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- <div class="join-privacy">
|
||||
Enhance your physical privacy. <a href="#">Learn how</a>
|
||||
</div> -->
|
||||
|
||||
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
||||
<div class="d-flex justify-center align-center mt-9">
|
||||
<div class="mr-2">
|
||||
<img
|
||||
src="@/assets/logo.svg"
|
||||
width="32"
|
||||
height="32"
|
||||
class="d-inline"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{{ $t("project.name") }}</strong>
|
||||
{{ $t("project.tag_line") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from "../plugins/utils";
|
||||
import LanguageMixin from "./languageMixin";
|
||||
|
||||
import SelectLanguageDialog from "./SelectLanguageDialog.vue";
|
||||
|
||||
export default {
|
||||
name: "Join",
|
||||
mixins: [LanguageMixin],
|
||||
components: {
|
||||
SelectLanguageDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roomName: null,
|
||||
|
|
@ -135,20 +132,10 @@ export default {
|
|||
waitingForMembership: false,
|
||||
availableAvatars: [],
|
||||
selectedProfile: null,
|
||||
showEditDisplaynameDialog: false,
|
||||
showSelectLanguageDialog: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.selectAvatar(
|
||||
this.availableAvatars[
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
]
|
||||
);
|
||||
},
|
||||
destroyed() {
|
||||
this.$matrix.off("Room.myMembership", this.onMyMembership);
|
||||
},
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
|
|
@ -204,14 +191,25 @@ export default {
|
|||
.substring(0, 1)
|
||||
.toUpperCase();
|
||||
},
|
||||
sharedComputer: {
|
||||
rememberMe: {
|
||||
get: function () {
|
||||
return !this.$store.state.useLocalStorage;
|
||||
},
|
||||
set: function (sharedComputer) {
|
||||
this.$store.commit("setUseLocalStorage", !sharedComputer);
|
||||
set: function (rememberMe) {
|
||||
this.$store.commit("setUseLocalStorage", !rememberMe);
|
||||
},
|
||||
},
|
||||
|
||||
getSortedLangByActive() {
|
||||
const context = this;
|
||||
return this.getLanguages().sort(function(lang) {
|
||||
if(lang.value == context.$i18n.locale) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
roomId: {
|
||||
|
|
@ -265,7 +263,6 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getRoomInfo() {
|
||||
if (this.roomId.startsWith("#")) {
|
||||
|
|
@ -306,10 +303,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
handleLogin() {
|
||||
this.$navigation.push({ path: "/login" }, 1);
|
||||
},
|
||||
|
||||
handleOpenApp() {
|
||||
console.log("Open app..."); //TODO
|
||||
},
|
||||
|
|
@ -408,9 +401,21 @@ export default {
|
|||
this.$refs.avatar.$refs.input.click();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.selectAvatar(
|
||||
this.availableAvatars[
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
]
|
||||
);
|
||||
},
|
||||
destroyed() {
|
||||
this.$matrix.off("Room.myMembership", this.onMyMembership);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/join.scss";
|
||||
@import "@/assets/css/join.scss";
|
||||
</style>
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
|
||||
<v-dialog
|
||||
v-model="showDialog"
|
||||
v-show="room"
|
||||
class="ma-0 pa-0"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '688px' : '80%'"
|
||||
>
|
||||
<div class="dialog-content text-center">
|
||||
<template v-if="roomJoinRule == 'public'">
|
||||
<h1>👋</h1>
|
||||
|
|
@ -142,4 +147,4 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
></v-text-field>
|
||||
<v-checkbox
|
||||
class="mt-0"
|
||||
v-model="sharedComputer"
|
||||
:label="$t('join.shared_computer')"
|
||||
v-model="rememberMe"
|
||||
:label="$t('join.remember_me')"
|
||||
/>
|
||||
<v-btn
|
||||
:disabled="!isValid || loading"
|
||||
|
|
@ -114,12 +114,12 @@ export default {
|
|||
showCloseButton() {
|
||||
return this.$navigation && this.$navigation.canPop();
|
||||
},
|
||||
sharedComputer: {
|
||||
rememberMe: {
|
||||
get: function () {
|
||||
return !this.$store.state.useLocalStorage;
|
||||
},
|
||||
set: function (sharedComputer) {
|
||||
this.$store.commit("setUseLocalStorage", !sharedComputer);
|
||||
set: function (rememberMe) {
|
||||
this.$store.commit("setUseLocalStorage", !rememberMe);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,12 +3,17 @@
|
|||
class="ma-0 pa-0"
|
||||
v-bind="{ ...$props, ...$attrs }"
|
||||
v-on="$listeners"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
|
||||
>
|
||||
<v-card class="dialog-card">
|
||||
<v-card-title class="dialog-title"
|
||||
><h3>{{ $t("profile.select_language") }}</h3></v-card-title
|
||||
>
|
||||
<v-card-title class="dialog-title d-block">
|
||||
<h2>{{ $t("profile.set_language") }}</h2>
|
||||
<div class="subtitle-1">{{ $t("profile.language_description") }}</div>
|
||||
<div class="subtitle-1">
|
||||
{{ $t("profile.dont_see_yours") }}
|
||||
<a href="https://letsconvene.im/">{{ $t("profile.tell_us") }}</a>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-select
|
||||
v-model="$i18n.locale"
|
||||
|
|
@ -26,9 +31,9 @@
|
|||
color="black"
|
||||
depressed
|
||||
block
|
||||
class="filled-button"
|
||||
class="btn-dark"
|
||||
@click="$emit('close')"
|
||||
>{{ $t("menu.ok") }}</v-btn
|
||||
>{{ $t("menu.done") }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
|
@ -36,20 +41,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import LanguageMixin from "./languageMixin";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
languages: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
for (const locale of Object.keys(this.$i18n.messages)) {
|
||||
this.languages.push({
|
||||
text: this.$i18n.messages[locale].language_display_name || locale,
|
||||
value: locale,
|
||||
});
|
||||
}
|
||||
},
|
||||
mixins: [LanguageMixin],
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
21
src/components/languageMixin.js
Normal file
21
src/components/languageMixin.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
languages: [],
|
||||
activeLang:null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLanguages() {
|
||||
return this.languages;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for (const locale of Object.keys(this.$i18n.messages)) {
|
||||
this.languages.push({
|
||||
text: this.$i18n.messages[locale].language_display_name || locale,
|
||||
value: locale,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue