N-Pex
parent
2112448ae9
commit
eb6f02b3d4
10 changed files with 283 additions and 132 deletions
11
src/App.vue
11
src/App.vue
|
|
@ -12,7 +12,16 @@ import config from "./assets/config";
|
|||
export default {
|
||||
name: "App",
|
||||
mounted() {
|
||||
if (window.location.protocol == "http" && !window.location.hostname.endsWith('.onion')) {
|
||||
// Set RTL mode if flag given in config. TODO: this should be based on language, not a global setting.
|
||||
//
|
||||
if (config.rtl) {
|
||||
this.$vuetify.rtl = true;
|
||||
document.documentElement.setAttribute("dir", "rtl");
|
||||
}
|
||||
if (
|
||||
window.location.protocol == "http" &&
|
||||
!window.location.hostname.endsWith(".onion")
|
||||
) {
|
||||
// Redirect to HTTPS
|
||||
window.location.href = window.location.href.replace("http:", "https:");
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"productLink": "letsconvene.im",
|
||||
"defaultServer": "https://neo.keanu.im",
|
||||
"useShortCodeStickers": false,
|
||||
"rtl": false,
|
||||
"analytics": {
|
||||
"enabled": true,
|
||||
"config": {
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ $admin-fg: white;
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 40px;
|
||||
right: initial;
|
||||
color: white;
|
||||
background-color: black;
|
||||
font-size: 10px;
|
||||
|
|
@ -61,6 +62,10 @@ $admin-fg: white;
|
|||
text-align: center;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
[dir="rtl"] & {
|
||||
right: 40px;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-root {
|
||||
|
|
@ -138,6 +143,9 @@ $admin-fg: white;
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 0px 20px;
|
||||
[dir="rtl"] & {
|
||||
padding: 0 20px 0px 0px;
|
||||
}
|
||||
margin: 6px 0;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -181,10 +189,16 @@ $admin-fg: white;
|
|||
.messageIn {
|
||||
margin: 8px;
|
||||
text-align: left;
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
position: relative;
|
||||
.bubble {
|
||||
background-color: #eeeeee;
|
||||
border-radius: 0px 10px 10px 10px;
|
||||
[dir="rtl"] & {
|
||||
border-radius: 10px 0px 10px 0px;
|
||||
}
|
||||
padding: 8px;
|
||||
border-width: 1px !important;
|
||||
border-style: solid !important;
|
||||
|
|
@ -220,6 +234,10 @@ $admin-fg: white;
|
|||
display: inline-block;
|
||||
vertical-align: top !important;
|
||||
margin-right: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: initial;
|
||||
margin-left: 10px;
|
||||
}
|
||||
top: 0;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
|
@ -234,6 +252,10 @@ $admin-fg: white;
|
|||
color: rgba(#000000, 0.6);
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: 8px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
display: inline-block;
|
||||
}
|
||||
.time {
|
||||
|
|
@ -252,10 +274,16 @@ $admin-fg: white;
|
|||
.messageOut {
|
||||
margin: 8px;
|
||||
text-align: right;
|
||||
[dir="rtl"] & {
|
||||
text-align: left;
|
||||
}
|
||||
position: relative;
|
||||
.bubble {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
[dir="rtl"] & {
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -264,6 +292,9 @@ $admin-fg: white;
|
|||
.audio-bubble {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
[dir="rtl"] & {
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -274,6 +305,9 @@ $admin-fg: white;
|
|||
.video2-bubble {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
[dir="rtl"] & {
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
}
|
||||
.bubble.image-bubble {
|
||||
padding: 0px;
|
||||
|
|
@ -283,6 +317,9 @@ $admin-fg: white;
|
|||
.v-image,
|
||||
video {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
[dir="rtl"] & {
|
||||
border-radius: 10px 10px 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bubble.sticker-bubble {
|
||||
|
|
@ -296,6 +333,10 @@ $admin-fg: white;
|
|||
display: inline-block;
|
||||
vertical-align: bottom !important;
|
||||
margin-left: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: initial;
|
||||
margin-right: 10px;
|
||||
}
|
||||
bottom: 0;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
|
@ -311,6 +352,10 @@ $admin-fg: white;
|
|||
display: inline-block;
|
||||
margin-left: 40px;
|
||||
margin-right: 8px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: 8px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-family: "Inter", sans-serif;
|
||||
|
|
@ -566,6 +611,9 @@ $admin-fg: white;
|
|||
top: -4px;
|
||||
background: white;
|
||||
transform: translate(-50%, 0);
|
||||
[dir="rtl"] & {
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
content: attr(title);
|
||||
|
|
@ -595,6 +643,9 @@ $admin-fg: white;
|
|||
top: -8px;
|
||||
background: white;
|
||||
transform: translate(-50%, 0);
|
||||
[dir="rtl"] & {
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
content: attr(title);
|
||||
|
|
@ -684,6 +735,11 @@ $admin-fg: white;
|
|||
font-size: 14 * $chat-text-size;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: initial;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -695,12 +751,24 @@ $admin-fg: white;
|
|||
margin: 10px 0px;
|
||||
font-weight: bold;
|
||||
font-size: 12 * $chat-text-size;
|
||||
[dir="rtl"] & {
|
||||
right: 0px;
|
||||
left: unset;
|
||||
.v-icon {
|
||||
// Mirror the icon
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-button-right {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
[dir="rtl"] & {
|
||||
left: 0px;
|
||||
right: unset;
|
||||
}
|
||||
margin: 10px 0px;
|
||||
font-weight: bold;
|
||||
font-size: 12 * $chat-text-size;
|
||||
|
|
@ -729,6 +797,10 @@ $admin-fg: white;
|
|||
font-size: 14 * $chat-text-size;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: initial;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<v-row class="action-row ma-0 pa-0" no-gutters align-content="center" v-on="$listeners">
|
||||
<v-col cols="auto" class="mr-2">
|
||||
<v-row
|
||||
class="action-row ma-0 pa-0"
|
||||
no-gutters
|
||||
align-content="center"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<v-col cols="auto" class="me-2">
|
||||
<v-icon size="22">{{ icon }}</v-icon>
|
||||
</v-col>
|
||||
<v-col>{{ text }}</v-col>
|
||||
|
|
|
|||
|
|
@ -2,58 +2,77 @@
|
|||
<v-container fluid v-if="room">
|
||||
<v-row class="chat-header-row flex-nowrap">
|
||||
<v-col
|
||||
cols="auto"
|
||||
cols="auto"
|
||||
class="chat-header-members text-start ma-0 pa-0"
|
||||
style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked"
|
||||
style="overflow: hidden; cursor: pointer"
|
||||
@click.stop="onHeaderClicked"
|
||||
>
|
||||
<v-avatar size="40" class="mr-2">
|
||||
<v-avatar size="40" class="me-2">
|
||||
<v-img :src="room.avatar" />
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
|
||||
<v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked">
|
||||
<div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
|
||||
<div class="num-members">{{ $tc('room.members', memberCount) }}</div>
|
||||
<v-col
|
||||
class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
|
||||
style="overflow: hidden; cursor: pointer"
|
||||
@click.stop="onHeaderClicked"
|
||||
>
|
||||
<div class="d-flex flex-nowrap room-name-inline">
|
||||
{{ room.summary.info.title }}
|
||||
<!--<v-icon>expand_more</v-icon>-->
|
||||
</div>
|
||||
<div class="num-members">{{ $tc("room.members", memberCount) }}</div>
|
||||
</v-col>
|
||||
<v-col cols="auto" class="text-end ma-0 pa-0">
|
||||
<v-btn text class="leave-button" @click.stop="leaveRoom">{{$t('room.leave')}}</v-btn>
|
||||
<v-btn text class="leave-button" @click.stop="leaveRoom">{{
|
||||
$t("room.leave")
|
||||
}}</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="auto" class="text-end ma-0 pa-0 ml-2">
|
||||
<v-avatar class="avatar-32 clickable" size="32" color="#e0e0e0" @click.stop="showProfileInfo = true">
|
||||
<v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
|
||||
<v-avatar
|
||||
class="avatar-32 clickable"
|
||||
size="32"
|
||||
color="#e0e0e0"
|
||||
@click.stop="showProfileInfo = true"
|
||||
>
|
||||
<img v-if="userAvatar" :src="userAvatar" />
|
||||
<span v-else class="white--text">{{
|
||||
userAvatarLetter
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
<span v-else class="white--text">{{ userAvatarLetter }}</span>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "REALLY LEAVE?" dialog -->
|
||||
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
|
||||
<LeaveRoomDialog
|
||||
:show="showLeaveConfirmation"
|
||||
:room="room"
|
||||
@close="showLeaveConfirmation = false"
|
||||
/>
|
||||
|
||||
<!-- PROFILE INFO POPUP -->
|
||||
<ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
|
||||
|
||||
<ProfileInfoPopup
|
||||
:show="showProfileInfo"
|
||||
@close="showProfileInfo = false"
|
||||
/>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeaveRoomDialog from '../components/LeaveRoomDialog';
|
||||
import ProfileInfoPopup from '../components/ProfileInfoPopup';
|
||||
import profileInfoMixin from '../components/profileInfoMixin';
|
||||
import LeaveRoomDialog from "../components/LeaveRoomDialog";
|
||||
import ProfileInfoPopup from "../components/ProfileInfoPopup";
|
||||
import profileInfoMixin from "../components/profileInfoMixin";
|
||||
|
||||
export default {
|
||||
name: "ChatHeader",
|
||||
mixins: [profileInfoMixin],
|
||||
components: {
|
||||
LeaveRoomDialog,
|
||||
ProfileInfoPopup
|
||||
ProfileInfoPopup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberCount: null,
|
||||
showLeaveConfirmation: false,
|
||||
showProfileInfo: false
|
||||
showProfileInfo: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -92,9 +111,9 @@ export default {
|
|||
this.updateMemberCount();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
onHeaderClicked() {
|
||||
this.$emit("header-click", {event: this.event});
|
||||
this.$emit("header-click", { event: this.event });
|
||||
},
|
||||
|
||||
updateMemberCount() {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<v-avatar size="32">
|
||||
<v-img :src="data.item.image" />
|
||||
</v-avatar>
|
||||
<div class="ml-2">{{ data.item.name }}</div>
|
||||
<div class="ms-2">{{ data.item.name }}</div>
|
||||
</template>
|
||||
</v-select>
|
||||
<v-switch
|
||||
|
|
@ -103,20 +103,20 @@
|
|||
:disabled="step > steps.INITIAL"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
@click.stop="next"
|
||||
:disabled="roomName.length == 0"
|
||||
>{{$t('new_room.create')}}</v-btn
|
||||
>
|
||||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
@click.stop="next"
|
||||
:disabled="roomName.length == 0"
|
||||
>{{ $t("new_room.create") }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-fade-transition>
|
||||
<!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
|
||||
<!-- <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
|
||||
<!-- <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
|
||||
<div class="h2 text-left">
|
||||
{{ $t("new_room.set_join_permissions") }}
|
||||
</div>
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="getPublicLink"
|
||||
><v-icon class="mr-2">link</v-icon
|
||||
><v-icon class="me-2">link</v-icon
|
||||
>{{ $t("new_room.get_link") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="addPeople"
|
||||
><v-icon class="mr-2">person_add</v-icon
|
||||
><v-icon class="me-2">person_add</v-icon
|
||||
>{{ $t("new_room.add_people") }}</v-btn
|
||||
>
|
||||
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
{{ $t("new_room.link_copied") }}
|
||||
</div>
|
||||
-->
|
||||
<div v-if="status">{{ status }}</div>
|
||||
<div v-if="status">{{ status }}</div>
|
||||
<!-- </div> -->
|
||||
</v-fade-transition>
|
||||
<input
|
||||
|
|
@ -292,8 +292,8 @@ export default {
|
|||
if (this.step == steps.CREATED) {
|
||||
this.openRoom();
|
||||
} else if (this.step == steps.INITIAL) {
|
||||
// this.step = steps.NAME_SET;
|
||||
//} else if (this.step == steps.NAME_SET) {
|
||||
// this.step = steps.NAME_SET;
|
||||
//} else if (this.step == steps.NAME_SET) {
|
||||
// Create room with deafult setting
|
||||
this.createRoom().then((roomId) => {
|
||||
this.roomId = roomId;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@click.stop="handleLogin"
|
||||
:loading="loading"
|
||||
v-if="!currentUser"
|
||||
>{{$t('menu.login')}}</v-btn
|
||||
>{{ $t("menu.login") }}</v-btn
|
||||
>
|
||||
|
||||
<v-avatar class="join-avatar">
|
||||
|
|
@ -17,7 +17,9 @@
|
|||
roomName.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
<div class="join-title">{{$t('join.title', {roomName: roomName})}}</div>
|
||||
<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>
|
||||
|
|
@ -57,15 +59,18 @@
|
|||
<v-avatar size="32">
|
||||
<v-img :src="data.item.image" />
|
||||
</v-avatar>
|
||||
<div class="ml-2">{{ data.item.name }}</div>
|
||||
<div class="ms-2">{{ data.item.name }}</div>
|
||||
</template>
|
||||
</v-select>
|
||||
<v-switch v-model="sharedComputer" :label="$t('join.shared_computer')" />
|
||||
<v-switch
|
||||
v-model="sharedComputer"
|
||||
:label="$t('join.shared_computer')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else>
|
||||
<v-col>
|
||||
{{$t('join.joining_as')}}
|
||||
{{ $t("join.joining_as") }}
|
||||
<div style="display: inline-block">
|
||||
<v-avatar color="#e0e0e0" style="">
|
||||
<v-img v-if="userAvatar" :src="userAvatar" />
|
||||
|
|
@ -97,7 +102,7 @@
|
|||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-if="!currentUser"
|
||||
>{{$t('join.join_guest')}}</v-btn
|
||||
>{{ $t("join.join_guest") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="btn-dark"
|
||||
|
|
@ -106,7 +111,7 @@
|
|||
@click.stop="handleJoin"
|
||||
:loading="loading"
|
||||
v-else
|
||||
>{{$t('join.join')}}</v-btn
|
||||
>{{ $t("join.join") }}</v-btn
|
||||
>
|
||||
|
||||
<!-- <div class="join-privacy">
|
||||
|
|
@ -138,9 +143,11 @@ export default {
|
|||
mounted() {
|
||||
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.selectAvatar(this.availableAvatars[
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
]);
|
||||
this.selectAvatar(
|
||||
this.availableAvatars[
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
]
|
||||
);
|
||||
},
|
||||
destroyed() {
|
||||
this.$matrix.off("Room.myMembership", this.onMyMembership);
|
||||
|
|
@ -194,7 +201,9 @@ export default {
|
|||
if (!this.currentUser || !this.currentUser.userId) {
|
||||
return null;
|
||||
}
|
||||
return (this.currentUserDisplayName || this.currentUser.userId.substring(1))
|
||||
return (
|
||||
this.currentUserDisplayName || this.currentUser.userId.substring(1)
|
||||
)
|
||||
.substring(0, 1)
|
||||
.toUpperCase();
|
||||
},
|
||||
|
|
@ -203,9 +212,9 @@ export default {
|
|||
return !this.$store.state.useLocalStorage;
|
||||
},
|
||||
set: function (sharedComputer) {
|
||||
this.$store.commit('setUseLocalStorage', !sharedComputer);
|
||||
this.$store.commit("setUseLocalStorage", !sharedComputer);
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
roomId: {
|
||||
|
|
@ -221,41 +230,42 @@ export default {
|
|||
|
||||
this.waitingForInfo = true;
|
||||
const self = this;
|
||||
this.waitingForMembership = true;
|
||||
this.waitingForMembership = true;
|
||||
if (this.currentUser) {
|
||||
this.$matrix.getLoginPromise()
|
||||
.then(() => {
|
||||
self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
|
||||
const room = self.$matrix.getRoom(self.roomAliasOrId);
|
||||
this.$matrix
|
||||
.getLoginPromise()
|
||||
.then(() => {
|
||||
self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
|
||||
const room = self.$matrix.getRoom(self.roomAliasOrId);
|
||||
|
||||
// Already joined?
|
||||
if (
|
||||
room &&
|
||||
room.hasMembershipState(self.currentUser.user_id, "join")
|
||||
) {
|
||||
// Yes, go to room
|
||||
self.$navigation.push(
|
||||
{
|
||||
name: "Chat",
|
||||
params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
|
||||
},
|
||||
-1
|
||||
);
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("Error logging in: ", err)
|
||||
})
|
||||
.finally(() => {
|
||||
this.waitingForMembership = false;
|
||||
this.getRoomInfo();
|
||||
});
|
||||
// Already joined?
|
||||
if (
|
||||
room &&
|
||||
room.hasMembershipState(self.currentUser.user_id, "join")
|
||||
) {
|
||||
// Yes, go to room
|
||||
self.$navigation.push(
|
||||
{
|
||||
name: "Chat",
|
||||
params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
|
||||
},
|
||||
-1
|
||||
);
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Error logging in: ", err);
|
||||
})
|
||||
.finally(() => {
|
||||
this.waitingForMembership = false;
|
||||
this.getRoomInfo();
|
||||
});
|
||||
} else {
|
||||
this.waitingForMembership = false;
|
||||
this.getRoomInfo();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -300,7 +310,7 @@ export default {
|
|||
},
|
||||
|
||||
handleLogin() {
|
||||
this.$navigation.push({path: "/login"}, 1);
|
||||
this.$navigation.push({ path: "/login" }, 1);
|
||||
},
|
||||
|
||||
handleOpenApp() {
|
||||
|
|
@ -309,10 +319,11 @@ export default {
|
|||
|
||||
handleJoin() {
|
||||
this.loading = true;
|
||||
this.loadingMessage = this.$t('join.status_logging_in');
|
||||
this.loadingMessage = this.$t("join.status_logging_in");
|
||||
const hasUser = this.currentUser ? true : false;
|
||||
var setProfileData = false;
|
||||
return this.$matrix.getLoginPromise()
|
||||
return this.$matrix
|
||||
.getLoginPromise()
|
||||
.then(
|
||||
function (user) {
|
||||
if (user.is_guest && !hasUser) {
|
||||
|
|
@ -322,15 +333,24 @@ export default {
|
|||
setProfileData = true;
|
||||
|
||||
// Set display name and avatar directly on the matrix object.
|
||||
if (this.selectedProfile.name && this.selectedProfile.name.length > 0) {
|
||||
if (
|
||||
this.selectedProfile.name &&
|
||||
this.selectedProfile.name.length > 0
|
||||
) {
|
||||
this.$matrix.userDisplayName = this.selectedProfile.name;
|
||||
}
|
||||
}
|
||||
|
||||
if (!setProfileData || !this.selectedProfile.name || this.selectedProfile.name.length == 0) {
|
||||
if (
|
||||
!setProfileData ||
|
||||
!this.selectedProfile.name ||
|
||||
this.selectedProfile.name.length == 0
|
||||
) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
console.log("Join: Set display name to: " + this.selectedProfile.name);
|
||||
console.log(
|
||||
"Join: Set display name to: " + this.selectedProfile.name
|
||||
);
|
||||
return this.$matrix.matrixClient.setDisplayName(
|
||||
this.selectedProfile.name,
|
||||
undefined
|
||||
|
|
@ -358,7 +378,7 @@ export default {
|
|||
.then(
|
||||
function (ignoreduser) {
|
||||
console.log("Join: joining room");
|
||||
this.loadingMessage = this.$t('join.status_joining');
|
||||
this.loadingMessage = this.$t("join.status_joining");
|
||||
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
||||
}.bind(this)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -41,20 +41,36 @@
|
|||
</v-container>
|
||||
|
||||
<v-container class="mt-4 pa-0">
|
||||
<ActionRow @click="viewProfile" :icon="'account_circle'" :text="$t('profile_info_popup.edit_profile')" />
|
||||
<ActionRow @click="logout" :icon="'logout'" :text="$t('profile_info_popup.logout')" />
|
||||
<ActionRow
|
||||
@click="viewProfile"
|
||||
:icon="'account_circle'"
|
||||
:text="$t('profile_info_popup.edit_profile')"
|
||||
/>
|
||||
<ActionRow
|
||||
@click="logout"
|
||||
:icon="'logout'"
|
||||
:text="$t('profile_info_popup.logout')"
|
||||
/>
|
||||
</v-container>
|
||||
|
||||
<div class="more-container">
|
||||
<div class="want_more">🙌 {{$t('profile_info_popup.want_more')}}</div>
|
||||
<div class="want_more">
|
||||
🙌 {{ $t("profile_info_popup.want_more") }}
|
||||
</div>
|
||||
<i18n path="profile_info_popup.powered_by" tag="div">
|
||||
<template v-slot:product>{{ product }}</template>
|
||||
<template v-slot:productLink>
|
||||
<a :href="productLink">{{ productLink }}</a>
|
||||
</template>
|
||||
</i18n>
|
||||
<div style="position:relative;width:100%;height: 40px">
|
||||
<v-btn class="new_room" right absolute text @click="createRoom">{{ $t('profile_info_popup.new_room') }}</v-btn></div>
|
||||
<div
|
||||
style="position: relative; width: 100%; height: 40px"
|
||||
class="text-end"
|
||||
>
|
||||
<v-btn class="new_room" text @click="createRoom">{{
|
||||
$t("profile_info_popup.new_room")
|
||||
}}</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -69,7 +85,7 @@ export default {
|
|||
name: "ProfileInfoPopup",
|
||||
mixins: [profileInfoMixin],
|
||||
components: {
|
||||
ActionRow
|
||||
ActionRow,
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
|
|
@ -90,7 +106,7 @@ export default {
|
|||
},
|
||||
productLink() {
|
||||
return config.productLink;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
|
|
@ -113,7 +129,7 @@ export default {
|
|||
createRoom() {
|
||||
this.showDialog = false;
|
||||
this.$navigation.push({ name: "CreateRoom" });
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -121,42 +137,50 @@ export default {
|
|||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
.profile-info-popup {
|
||||
font-family: "Inter", sans-serif !important;
|
||||
font-size: 16px;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
[dir="rtl"] & {
|
||||
right: inherit;
|
||||
left: 10px;
|
||||
}
|
||||
border-radius: 40px;
|
||||
&::before {
|
||||
content: "▲";
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
border-radius: 40px;
|
||||
&::before {
|
||||
content: '▲';
|
||||
position: fixed;
|
||||
top: 57px;
|
||||
right: 22px;
|
||||
color: white;
|
||||
top: 57px;
|
||||
right: 22px;
|
||||
[dir="rtl"] & {
|
||||
left: 22px;
|
||||
right: inherit;
|
||||
}
|
||||
.you-are {
|
||||
padding-top: 20px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
.you-are {
|
||||
padding-top: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.username {
|
||||
border-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.more-container {
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
.want_more {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13 * $chat-text-size;
|
||||
}
|
||||
.username {
|
||||
border-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.more-container {
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
.want_more {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13 * $chat-text-size;
|
||||
}
|
||||
.new_room .v-btn__content {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 13 * $chat-text-size !important;
|
||||
}
|
||||
.new_room .v-btn__content {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 13 * $chat-text-size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<v-btn
|
||||
color="black"
|
||||
depressed
|
||||
class="header-button-right filled-button mr-3"
|
||||
class="header-button-right filled-button me-3"
|
||||
@click.stop="showLeaveConfirmation = true"
|
||||
>👋 {{ $t("room_info.leave_room") }}</v-btn
|
||||
>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
item-value="id"
|
||||
>
|
||||
<template v-slot:selection="{ item }">
|
||||
<v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
|
||||
<v-icon color="black" class="me-2">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</template>
|
||||
<template v-slot:item="{ item, attrs, on }">
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
v-for="room in $matrix.joinedRooms"
|
||||
:key="room.roomId"
|
||||
:value="room.roomId"
|
||||
style="position: relative"
|
||||
>
|
||||
<v-list-item-avatar size="40" color="#e0e0e0">
|
||||
<v-img :src="room.avatar" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue