From 7224b20cab00d43f750fd97997a90fdd8722537f Mon Sep 17 00:00:00 2001 From: Tenzin Passang Date: Sun, 19 Dec 2021 16:04:19 +0200 Subject: [PATCH] Join page new design implemented --- src/App.vue | 35 +++- src/assets/css/_variables.scss | 5 +- src/assets/css/join.scss | 192 +++++++++++-------- src/assets/translations/bo.json | 15 +- src/assets/translations/en.json | 15 +- src/assets/translations/es.json | 9 +- src/assets/translations/nb_NO.json | 11 +- src/assets/translations/pt_BR.json | 13 +- src/assets/translations/ro.json | 13 +- src/assets/translations/si.json | 5 + src/assets/translations/ug.json | 13 +- src/assets/translations/zh_Hans.json | 15 +- src/components/CreateRoom.vue | 10 +- src/components/Join.vue | 233 ++++++++++++------------ src/components/LeaveRoomDialog.vue | 9 +- src/components/Login.vue | 10 +- src/components/SelectLanguageDialog.vue | 33 ++-- src/components/languageMixin.js | 21 +++ 18 files changed, 403 insertions(+), 254 deletions(-) create mode 100644 src/components/languageMixin.js diff --git a/src/App.vue b/src/App.vue index 0b811d8..68a9084 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,27 +7,24 @@
{{ $t("menu.loading", { appName: appName }) }}
 + + @@ -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; + } +} diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss index b3db302..af1369e 100644 --- a/src/assets/css/_variables.scss +++ b/src/assets/css/_variables.scss @@ -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; diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss index 93618f1..04ace2a 100644 --- a/src/assets/css/join.scss +++ b/src/assets/css/join.scss @@ -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; } } diff --git a/src/assets/translations/bo.json b/src/assets/translations/bo.json index 01f928a..0fa658c 100644 --- a/src/assets/translations/bo.json +++ b/src/assets/translations/bo.json @@ -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": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།" diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 24a7bec..e9f60d1 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -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." diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json index e9a07de..31278b9 100644 --- a/src/assets/translations/es.json +++ b/src/assets/translations/es.json @@ -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", diff --git a/src/assets/translations/nb_NO.json b/src/assets/translations/nb_NO.json index 26d42c1..0921857 100644 --- a/src/assets/translations/nb_NO.json +++ b/src/assets/translations/nb_NO.json @@ -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", diff --git a/src/assets/translations/pt_BR.json b/src/assets/translations/pt_BR.json index f6f10d4..c2530dd 100644 --- a/src/assets/translations/pt_BR.json +++ b/src/assets/translations/pt_BR.json @@ -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." diff --git a/src/assets/translations/ro.json b/src/assets/translations/ro.json index f315819..d167c07 100644 --- a/src/assets/translations/ro.json +++ b/src/assets/translations/ro.json @@ -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", diff --git a/src/assets/translations/si.json b/src/assets/translations/si.json index 34a833d..deca16d 100644 --- a/src/assets/translations/si.json +++ b/src/assets/translations/si.json @@ -1,6 +1,11 @@ { + "project": { + "name": "Convene", + "tag_line": "" + }, "menu": { "ok": "හරි", + "done": "", "download": "බාගන්න", "edit": "සංස්කරණය", "reply": "පිලිතුර", diff --git a/src/assets/translations/ug.json b/src/assets/translations/ug.json index 359f159..c444844 100644 --- a/src/assets/translations/ug.json +++ b/src/assets/translations/ug.json @@ -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": "پارول بەلگىلەڭ", diff --git a/src/assets/translations/zh_Hans.json b/src/assets/translations/zh_Hans.json index 1e1ae4d..fb4d61c 100644 --- a/src/assets/translations/zh_Hans.json +++ b/src/assets/translations/zh_Hans.json @@ -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}", diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue index e2d812c..2a6cc9a 100644 --- a/src/components/CreateRoom.vue +++ b/src/components/CreateRoom.vue @@ -68,8 +68,8 @@ @@ -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); }, }, }, diff --git a/src/components/Join.vue b/src/components/Join.vue index f79a590..ae8fd2c 100644 --- a/src/components/Join.vue +++ b/src/components/Join.vue @@ -1,71 +1,41 @@ \ No newline at end of file diff --git a/src/components/LeaveRoomDialog.vue b/src/components/LeaveRoomDialog.vue index 1f99c3e..e7ff897 100644 --- a/src/components/LeaveRoomDialog.vue +++ b/src/components/LeaveRoomDialog.vue @@ -1,5 +1,10 @@