Join page new design implemented
This commit is contained in:
Tenzin Passang
N-Pex
parent
70270f450c
commit
7224b20cab
18 changed files with 403 additions and 254 deletions
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue