Style joining page
This commit is contained in:
N-Pex
parent
2ebe4d982c
commit
3067fcbfc7
5 changed files with 206 additions and 14 deletions
|
|
@ -1,11 +1,5 @@
|
|||
@import "@/assets/css/main.scss";
|
||||
|
||||
$chat-background: $background;
|
||||
$chat-standard-padding: 32px;
|
||||
$chat-standard-padding-s: 16px;
|
||||
$chat-standard-padding-xs: 8px;
|
||||
$chat-text-size: 0.7pt;
|
||||
|
||||
.chat-root {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
|
|
|||
115
src/assets/css/join.scss
Normal file
115
src/assets/css/join.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
@import "@/assets/css/main.scss";
|
||||
|
||||
.v-btn.btn-light {
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11.54 * $chat-text-size;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
border-radius: $chat-button-height / 2;
|
||||
min-height: 0;
|
||||
height: $chat-button-height !important;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
||||
.v-btn.btn-dark {
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11.54 * $chat-text-size;
|
||||
color: white;
|
||||
background-color: black !important;
|
||||
border: 1px solid black;
|
||||
border-radius: $chat-button-height / 2;
|
||||
min-height: 0;
|
||||
height: $chat-button-height !important;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
|
||||
.join-root {
|
||||
margin-top: 10%;
|
||||
padding: 40px;
|
||||
|
||||
.btn-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.join-message {
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * $chat-text-size;
|
||||
color: black;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.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: #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: " ";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,10 @@
|
|||
$background: #ffffff;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
|
||||
|
||||
$chat-background: $background;
|
||||
$chat-standard-padding: 32px;
|
||||
$chat-standard-padding-s: 16px;
|
||||
$chat-standard-padding-xs: 8px;
|
||||
$chat-text-size: 0.7pt;
|
||||
$chat-button-height: 50px;
|
||||
|
|
@ -1,13 +1,28 @@
|
|||
<template>
|
||||
<div class="d-flex justify-center login-root">
|
||||
<div v-if="!waiting">
|
||||
<h4>Join room</h4>
|
||||
<div>You have been invited to the room {{ roomId }}</div>
|
||||
<div class="join-root">
|
||||
<div v-if="!waiting" class="text-center">
|
||||
<v-btn class="btn-login" text small @click.stop="handleLogin" :loading="loading">Login</v-btn>
|
||||
|
||||
<v-btn primary large block @click.stop="handleJoin" :loading="loading"
|
||||
<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">Welcome to {{ roomName }}</div>
|
||||
<div class="join-message">Join the group chat in a web browser or with the Keanu app.</div>
|
||||
<v-btn class="btn-light" large block @click.stop="handleOpenApp" :loading="loading"
|
||||
>Open Keanu app</v-btn
|
||||
>
|
||||
|
||||
<div class="join-or-divider">OR</div>
|
||||
|
||||
<v-btn class="btn-dark" large block @click.stop="handleJoin" :loading="loading"
|
||||
>Join as guest</v-btn
|
||||
>
|
||||
|
||||
<div class="join-privacy">Enhance your physical privacy. <a href="#">Learn how</a></div>
|
||||
|
||||
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,14 +36,17 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
roomId: null,
|
||||
roomName: null,
|
||||
roomAvatar: null,
|
||||
guestUser: new User("https://neo.keanu.im", "", "", true),
|
||||
loading: false,
|
||||
loadingMessage: null,
|
||||
waiting: false
|
||||
waiting: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.roomId = this.$route.hash;
|
||||
this.roomName = this.roomId;
|
||||
if (this.currentUser) {
|
||||
this.waiting = true;
|
||||
const self = this;
|
||||
|
|
@ -48,6 +66,18 @@ export default {
|
|||
.catch(ignoredErr => {
|
||||
this.waiting = false;
|
||||
});
|
||||
} else {
|
||||
this.$matrix.getPublicRoomInfo(this.roomId)
|
||||
.then(room => {
|
||||
console.log("Found room:", room);
|
||||
this.roomName = room.name;
|
||||
this.roomAvatar = room.avatar;
|
||||
this.waiting = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("Could not find room info", err);
|
||||
this.waiting = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -56,6 +86,14 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
this.$router.push("/login"); // TODO - replace?
|
||||
},
|
||||
|
||||
handleOpenApp() {
|
||||
console.log("Open app..."); //TODO
|
||||
},
|
||||
|
||||
handleJoin() {
|
||||
this.loading = true;
|
||||
this.loadingMessage = "Logging in...";
|
||||
|
|
@ -88,5 +126,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/login.scss";
|
||||
@import "@/assets/css/join.scss";
|
||||
</style>
|
||||
|
|
@ -296,6 +296,44 @@ export default {
|
|||
uploadFile(file, opts) {
|
||||
return this.matrixClient.uploadContent(file, opts);
|
||||
},
|
||||
|
||||
getPublicRoomInfo(roomId) {
|
||||
if (!roomId) {
|
||||
return Promise.reject("Invalid parameters");
|
||||
}
|
||||
|
||||
const parts = roomId.split(':');
|
||||
if (parts.length != 2) {
|
||||
return Promise.reject("Unknown room server");
|
||||
}
|
||||
|
||||
const server = parts[1];
|
||||
const tempMatrixClient = sdk.createClient("https://" + server);
|
||||
|
||||
const findOrGetMore = function _findOrGetMore(response) {
|
||||
for (var room of response.chunk) {
|
||||
if ((roomId.startsWith("#") && room.canonical_alias == roomId) || (roomId.startsWith("!") && room.room_id == roomId)){
|
||||
room.avatar = tempMatrixClient.mxcUrlToHttp(room.avatar_url, 80, 80, 'scale', true);
|
||||
return Promise.resolve(room);
|
||||
}
|
||||
}
|
||||
if (response.next_batch) {
|
||||
return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000, next_batch:response.next_batch})
|
||||
//return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
|
||||
.then(response => {
|
||||
return _findOrGetMore(response);
|
||||
})
|
||||
} else {
|
||||
return Promise.reject("No more data");
|
||||
}
|
||||
};
|
||||
|
||||
return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000})
|
||||
//return tempMatrixClient.publicRooms({limit:1})
|
||||
.then(response => {
|
||||
return findOrGetMore(response);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue