butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Basic support for RTL languages

Browse source 
Issue #77.
This commit is contained in:
N-Pex 2021-06-29 11:55:53 +02:00
parent 2112448ae9
commit eb6f02b3d4
10 changed files with 283 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/App.vue
View file

@ -12,7 +12,16 @@ import config from "./assets/config";
export default { export default {
name: "App", name: "App",
mounted() { 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 // Redirect to HTTPS
window.location.href = window.location.href.replace("http:", "https:"); window.location.href = window.location.href.replace("http:", "https:");
return; return;

1
src/assets/config.json
View file

@ -4,6 +4,7 @@
"productLink": "letsconvene.im", "productLink": "letsconvene.im",
"defaultServer": "https://neo.keanu.im", "defaultServer": "https://neo.keanu.im",
"useShortCodeStickers": false, "useShortCodeStickers": false,
"rtl": false,
"analytics": { "analytics": {
"enabled": true, "enabled": true,
"config": { "config": {

72
src/assets/css/chat.scss
View file

@ -51,6 +51,7 @@ $admin-fg: white;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 40px; left: 40px;
right: initial;
color: white; color: white;
background-color: black; background-color: black;
font-size: 10px; font-size: 10px;
@ -61,6 +62,10 @@ $admin-fg: white;
text-align: center; text-align: center;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
[dir="rtl"] & {
right: 40px;
left: initial;
}
} }
.chat-root { .chat-root {
@ -138,6 +143,9 @@ $admin-fg: white;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0 0 0px 20px; padding: 0 0 0px 20px;
[dir="rtl"] & {
padding: 0 20px 0px 0px;
}
margin: 6px 0; margin: 6px 0;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
@ -181,10 +189,16 @@ $admin-fg: white;
.messageIn { .messageIn {
margin: 8px; margin: 8px;
text-align: left; text-align: left;
[dir="rtl"] & {
text-align: right;
}
position: relative; position: relative;
.bubble { .bubble {
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 0px 10px 10px 10px; border-radius: 0px 10px 10px 10px;
[dir="rtl"] & {
border-radius: 10px 0px 10px 0px;
}
padding: 8px; padding: 8px;
border-width: 1px !important; border-width: 1px !important;
border-style: solid !important; border-style: solid !important;
@ -220,6 +234,10 @@ $admin-fg: white;
display: inline-block; display: inline-block;
vertical-align: top !important; vertical-align: top !important;
margin-right: 10px; margin-right: 10px;
[dir="rtl"] & {
margin-right: initial;
margin-left: 10px;
}
top: 0; top: 0;
border: 2px solid white; border: 2px solid white;
} }
@ -234,6 +252,10 @@ $admin-fg: white;
color: rgba(#000000, 0.6); color: rgba(#000000, 0.6);
margin-left: 40px; margin-left: 40px;
margin-right: 8px; margin-right: 8px;
[dir="rtl"] & {
margin-left: 8px;
margin-right: 40px;
}
display: inline-block; display: inline-block;
} }
.time { .time {
@ -252,10 +274,16 @@ $admin-fg: white;
.messageOut { .messageOut {
margin: 8px; margin: 8px;
text-align: right; text-align: right;
[dir="rtl"] & {
text-align: left;
}
position: relative; position: relative;
.bubble { .bubble {
background-color: #e5e5e5; background-color: #e5e5e5;
border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
padding: 8px; padding: 8px;
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -264,6 +292,9 @@ $admin-fg: white;
.audio-bubble { .audio-bubble {
background-color: #e5e5e5; background-color: #e5e5e5;
border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
padding: 8px; padding: 8px;
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -274,6 +305,9 @@ $admin-fg: white;
.video2-bubble { .video2-bubble {
background-color: #e5e5e5; background-color: #e5e5e5;
border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
} }
.bubble.image-bubble { .bubble.image-bubble {
padding: 0px; padding: 0px;
@ -283,6 +317,9 @@ $admin-fg: white;
.v-image, .v-image,
video { video {
border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px;
[dir="rtl"] & {
border-radius: 10px 10px 10px 0px;
}
} }
} }
.bubble.sticker-bubble { .bubble.sticker-bubble {
@ -296,6 +333,10 @@ $admin-fg: white;
display: inline-block; display: inline-block;
vertical-align: bottom !important; vertical-align: bottom !important;
margin-left: 10px; margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
bottom: 0; bottom: 0;
border: 2px solid white; border: 2px solid white;
} }
@ -311,6 +352,10 @@ $admin-fg: white;
display: inline-block; display: inline-block;
margin-left: 40px; margin-left: 40px;
margin-right: 8px; margin-right: 8px;
[dir="rtl"] & {
margin-left: 8px;
margin-right: 40px;
}
} }
.time { .time {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
@ -566,6 +611,9 @@ $admin-fg: white;
top: -4px; top: -4px;
background: white; background: white;
transform: translate(-50%, 0); transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
content: attr(title); content: attr(title);
@ -595,6 +643,9 @@ $admin-fg: white;
top: -8px; top: -8px;
background: white; background: white;
transform: translate(-50%, 0); transform: translate(-50%, 0);
[dir="rtl"] & {
transform: translate(50%, 0);
}
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
content: attr(title); content: attr(title);
@ -684,6 +735,11 @@ $admin-fg: white;
font-size: 14 * $chat-text-size; font-size: 14 * $chat-text-size;
font-weight: bold; font-weight: bold;
margin-left: 10px; margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
text-decoration: underline; text-decoration: underline;
} }
} }
@ -695,12 +751,24 @@ $admin-fg: white;
margin: 10px 0px; margin: 10px 0px;
font-weight: bold; font-weight: bold;
font-size: 12 * $chat-text-size; font-size: 12 * $chat-text-size;
[dir="rtl"] & {
right: 0px;
left: unset;
.v-icon {
// Mirror the icon
transform: scale(-1, 1);
}
}
} }
.header-button-right { .header-button-right {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
[dir="rtl"] & {
left: 0px;
right: unset;
}
margin: 10px 0px; margin: 10px 0px;
font-weight: bold; font-weight: bold;
font-size: 12 * $chat-text-size; font-size: 12 * $chat-text-size;
@ -729,6 +797,10 @@ $admin-fg: white;
font-size: 14 * $chat-text-size; font-size: 14 * $chat-text-size;
font-weight: bold; font-weight: bold;
margin-left: 10px; margin-left: 10px;
[dir="rtl"] & {
margin-left: initial;
margin-right: 10px;
}
} }
} }

9
src/components/ActionRow.vue
View file

@ -1,6 +1,11 @@
<template> <template>
<v-row class="action-row ma-0 pa-0" no-gutters align-content="center" v-on="$listeners"> <v-row
<v-col cols="auto" class="mr-2"> 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-icon size="22">{{ icon }}</v-icon>
</v-col> </v-col>
<v-col>{{ text }}</v-col> <v-col>{{ text }}</v-col>

65
src/components/ChatHeader.vue
View file

@ -2,58 +2,77 @@
<v-container fluid v-if="room"> <v-container fluid v-if="room">
<v-row class="chat-header-row flex-nowrap"> <v-row class="chat-header-row flex-nowrap">
<v-col <v-col
cols="auto" cols="auto"
class="chat-header-members text-start ma-0 pa-0" 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-img :src="room.avatar" />
</v-avatar> </v-avatar>
</v-col> </v-col>
<v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked"> <v-col
<div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div> class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
<div class="num-members">{{ $tc('room.members', memberCount) }}</div> 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>
<v-col cols="auto" class="text-end ma-0 pa-0"> <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>
<v-col cols="auto" class="text-end ma-0 pa-0 ml-2"> <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"> <v-avatar
class="avatar-32 clickable"
size="32"
color="#e0e0e0"
@click.stop="showProfileInfo = true"
>
<img v-if="userAvatar" :src="userAvatar" /> <img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ <span v-else class="white--text">{{ userAvatarLetter }}</span>
userAvatarLetter </v-avatar>
}}</span>
</v-avatar>
</v-col> </v-col>
</v-row> </v-row>
<!-- "REALLY LEAVE?" dialog --> <!-- "REALLY LEAVE?" dialog -->
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" /> <LeaveRoomDialog
:show="showLeaveConfirmation"
:room="room"
@close="showLeaveConfirmation = false"
/>
<!-- PROFILE INFO POPUP --> <!-- PROFILE INFO POPUP -->
<ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" /> <ProfileInfoPopup
:show="showProfileInfo"
@close="showProfileInfo = false"
/>
</v-container> </v-container>
</template> </template>
<script> <script>
import LeaveRoomDialog from '../components/LeaveRoomDialog'; import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from '../components/ProfileInfoPopup'; import ProfileInfoPopup from "../components/ProfileInfoPopup";
import profileInfoMixin from '../components/profileInfoMixin'; import profileInfoMixin from "../components/profileInfoMixin";
export default { export default {
name: "ChatHeader", name: "ChatHeader",
mixins: [profileInfoMixin], mixins: [profileInfoMixin],
components: { components: {
LeaveRoomDialog, LeaveRoomDialog,
ProfileInfoPopup ProfileInfoPopup,
}, },
data() { data() {
return { return {
memberCount: null, memberCount: null,
showLeaveConfirmation: false, showLeaveConfirmation: false,
showProfileInfo: false showProfileInfo: false,
}; };
}, },
mounted() { mounted() {
@ -92,9 +111,9 @@ export default {
this.updateMemberCount(); this.updateMemberCount();
} }
}, },
onHeaderClicked() { onHeaderClicked() {
this.$emit("header-click", {event: this.event}); this.$emit("header-click", { event: this.event });
}, },
updateMemberCount() { updateMemberCount() {

28
src/components/CreateRoom.vue
View file

@ -63,7 +63,7 @@
<v-avatar size="32"> <v-avatar size="32">
<v-img :src="data.item.image" /> <v-img :src="data.item.image" />
</v-avatar> </v-avatar>
<div class="ml-2">{{ data.item.name }}</div> <div class="ms-2">{{ data.item.name }}</div>
</template> </template>
</v-select> </v-select>
<v-switch <v-switch
@ -103,20 +103,20 @@
:disabled="step > steps.INITIAL" :disabled="step > steps.INITIAL"
></v-text-field> ></v-text-field>
<v-btn <v-btn
color="black" color="black"
depressed depressed
class="filled-button" class="filled-button"
@click.stop="next" @click.stop="next"
:disabled="roomName.length == 0" :disabled="roomName.length == 0"
>{{$t('new_room.create')}}</v-btn >{{ $t("new_room.create") }}</v-btn
> >
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<v-fade-transition> <v-fade-transition>
<!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> --> <!-- <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"> <div class="h2 text-left">
{{ $t("new_room.set_join_permissions") }} {{ $t("new_room.set_join_permissions") }}
</div> </div>
@ -171,7 +171,7 @@
depressed depressed
class="outlined-button" class="outlined-button"
@click.stop="getPublicLink" @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 >{{ $t("new_room.get_link") }}</v-btn
> >
<v-btn <v-btn
@ -180,7 +180,7 @@
depressed depressed
class="outlined-button" class="outlined-button"
@click.stop="addPeople" @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 >{{ $t("new_room.add_people") }}</v-btn
> >
@ -188,7 +188,7 @@
{{ $t("new_room.link_copied") }} {{ $t("new_room.link_copied") }}
</div> </div>
--> -->
<div v-if="status">{{ status }}</div> <div v-if="status">{{ status }}</div>
<!-- </div> --> <!-- </div> -->
</v-fade-transition> </v-fade-transition>
<input <input
@ -292,8 +292,8 @@ export default {
if (this.step == steps.CREATED) { if (this.step == steps.CREATED) {
this.openRoom(); this.openRoom();
} else if (this.step == steps.INITIAL) { } else if (this.step == steps.INITIAL) {
// this.step = steps.NAME_SET; // this.step = steps.NAME_SET;
//} else if (this.step == steps.NAME_SET) { //} else if (this.step == steps.NAME_SET) {
// Create room with deafult setting // Create room with deafult setting
this.createRoom().then((roomId) => { this.createRoom().then((roomId) => {
this.roomId = roomId; this.roomId = roomId;

118
src/components/Join.vue
View file

@ -8,7 +8,7 @@
@click.stop="handleLogin" @click.stop="handleLogin"
:loading="loading" :loading="loading"
v-if="!currentUser" v-if="!currentUser"
>{{$t('menu.login')}}</v-btn >{{ $t("menu.login") }}</v-btn
> >
<v-avatar class="join-avatar"> <v-avatar class="join-avatar">
@ -17,7 +17,9 @@
roomName.substring(0, 1).toUpperCase() roomName.substring(0, 1).toUpperCase()
}}</span> }}</span>
</v-avatar> </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"> <div class="join-message">
<!-- Join the group chat in a web browser or with the Keanu app. --> <!-- Join the group chat in a web browser or with the Keanu app. -->
</div> </div>
@ -57,15 +59,18 @@
<v-avatar size="32"> <v-avatar size="32">
<v-img :src="data.item.image" /> <v-img :src="data.item.image" />
</v-avatar> </v-avatar>
<div class="ml-2">{{ data.item.name }}</div> <div class="ms-2">{{ data.item.name }}</div>
</template> </template>
</v-select> </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-col>
</v-row> </v-row>
<v-row v-else> <v-row v-else>
<v-col> <v-col>
{{$t('join.joining_as')}} {{ $t("join.joining_as") }}
<div style="display: inline-block"> <div style="display: inline-block">
<v-avatar color="#e0e0e0" style=""> <v-avatar color="#e0e0e0" style="">
<v-img v-if="userAvatar" :src="userAvatar" /> <v-img v-if="userAvatar" :src="userAvatar" />
@ -97,7 +102,7 @@
@click.stop="handleJoin" @click.stop="handleJoin"
:loading="loading" :loading="loading"
v-if="!currentUser" v-if="!currentUser"
>{{$t('join.join_guest')}}</v-btn >{{ $t("join.join_guest") }}</v-btn
> >
<v-btn <v-btn
class="btn-dark" class="btn-dark"
@ -106,7 +111,7 @@
@click.stop="handleJoin" @click.stop="handleJoin"
:loading="loading" :loading="loading"
v-else v-else
>{{$t('join.join')}}</v-btn >{{ $t("join.join") }}</v-btn
> >
<!-- <div class="join-privacy"> <!-- <div class="join-privacy">
@ -138,9 +143,11 @@ export default {
mounted() { mounted() {
this.$matrix.on("Room.myMembership", this.onMyMembership); this.$matrix.on("Room.myMembership", this.onMyMembership);
this.availableAvatars = util.getDefaultAvatars(); this.availableAvatars = util.getDefaultAvatars();
this.selectAvatar(this.availableAvatars[ this.selectAvatar(
Math.floor(Math.random() * this.availableAvatars.length) this.availableAvatars[
]); Math.floor(Math.random() * this.availableAvatars.length)
]
);
}, },
destroyed() { destroyed() {
this.$matrix.off("Room.myMembership", this.onMyMembership); this.$matrix.off("Room.myMembership", this.onMyMembership);
@ -194,7 +201,9 @@ export default {
if (!this.currentUser || !this.currentUser.userId) { if (!this.currentUser || !this.currentUser.userId) {
return null; return null;
} }
return (this.currentUserDisplayName || this.currentUser.userId.substring(1)) return (
this.currentUserDisplayName || this.currentUser.userId.substring(1)
)
.substring(0, 1) .substring(0, 1)
.toUpperCase(); .toUpperCase();
}, },
@ -203,9 +212,9 @@ export default {
return !this.$store.state.useLocalStorage; return !this.$store.state.useLocalStorage;
}, },
set: function (sharedComputer) { set: function (sharedComputer) {
this.$store.commit('setUseLocalStorage', !sharedComputer); this.$store.commit("setUseLocalStorage", !sharedComputer);
}, },
} },
}, },
watch: { watch: {
roomId: { roomId: {
@ -221,41 +230,42 @@ export default {
this.waitingForInfo = true; this.waitingForInfo = true;
const self = this; const self = this;
this.waitingForMembership = true; this.waitingForMembership = true;
if (this.currentUser) { if (this.currentUser) {
this.$matrix.getLoginPromise() this.$matrix
.then(() => { .getLoginPromise()
self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined. .then(() => {
const room = self.$matrix.getRoom(self.roomAliasOrId); self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
const room = self.$matrix.getRoom(self.roomAliasOrId);
// Already joined? // Already joined?
if ( if (
room && room &&
room.hasMembershipState(self.currentUser.user_id, "join") room.hasMembershipState(self.currentUser.user_id, "join")
) { ) {
// Yes, go to room // Yes, go to room
self.$navigation.push( self.$navigation.push(
{ {
name: "Chat", name: "Chat",
params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) }, params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
}, },
-1 -1
); );
return; return;
} }
}) })
.catch(err => { .catch((err) => {
console.log("Error logging in: ", err) console.log("Error logging in: ", err);
}) })
.finally(() => { .finally(() => {
this.waitingForMembership = false; this.waitingForMembership = false;
this.getRoomInfo(); this.getRoomInfo();
}); });
} else { } else {
this.waitingForMembership = false; this.waitingForMembership = false;
this.getRoomInfo(); this.getRoomInfo();
} }
} },
}, },
}, },
@ -300,7 +310,7 @@ export default {
}, },
handleLogin() { handleLogin() {
this.$navigation.push({path: "/login"}, 1); this.$navigation.push({ path: "/login" }, 1);
}, },
handleOpenApp() { handleOpenApp() {
@ -309,10 +319,11 @@ export default {
handleJoin() { handleJoin() {
this.loading = true; 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; const hasUser = this.currentUser ? true : false;
var setProfileData = false; var setProfileData = false;
return this.$matrix.getLoginPromise() return this.$matrix
.getLoginPromise()
.then( .then(
function (user) { function (user) {
if (user.is_guest && !hasUser) { if (user.is_guest && !hasUser) {
@ -322,15 +333,24 @@ export default {
setProfileData = true; setProfileData = true;
// Set display name and avatar directly on the matrix object. // 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; 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); return Promise.resolve(user);
} else { } 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( return this.$matrix.matrixClient.setDisplayName(
this.selectedProfile.name, this.selectedProfile.name,
undefined undefined
@ -358,7 +378,7 @@ export default {
.then( .then(
function (ignoreduser) { function (ignoreduser) {
console.log("Join: joining room"); 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); return this.$matrix.matrixClient.joinRoom(this.roomId);
}.bind(this) }.bind(this)
) )

106
src/components/ProfileInfoPopup.vue
View file

@ -41,20 +41,36 @@
</v-container> </v-container>
<v-container class="mt-4 pa-0"> <v-container class="mt-4 pa-0">
<ActionRow @click="viewProfile" :icon="'account_circle'" :text="$t('profile_info_popup.edit_profile')" /> <ActionRow
<ActionRow @click="logout" :icon="'logout'" :text="$t('profile_info_popup.logout')" /> @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> </v-container>
<div class="more-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"> <i18n path="profile_info_popup.powered_by" tag="div">
<template v-slot:product>{{ product }}</template> <template v-slot:product>{{ product }}</template>
<template v-slot:productLink> <template v-slot:productLink>
<a :href="productLink">{{ productLink }}</a> <a :href="productLink">{{ productLink }}</a>
</template> </template>
</i18n> </i18n>
<div style="position:relative;width:100%;height: 40px"> <div
<v-btn class="new_room" right absolute text @click="createRoom">{{ $t('profile_info_popup.new_room') }}</v-btn></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> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -69,7 +85,7 @@ export default {
name: "ProfileInfoPopup", name: "ProfileInfoPopup",
mixins: [profileInfoMixin], mixins: [profileInfoMixin],
components: { components: {
ActionRow ActionRow,
}, },
props: { props: {
show: { show: {
@ -90,7 +106,7 @@ export default {
}, },
productLink() { productLink() {
return config.productLink; return config.productLink;
} },
}, },
watch: { watch: {
show: { show: {
@ -113,7 +129,7 @@ export default {
createRoom() { createRoom() {
this.showDialog = false; this.showDialog = false;
this.$navigation.push({ name: "CreateRoom" }); this.$navigation.push({ name: "CreateRoom" });
} },
}, },
}; };
</script> </script>
@ -121,42 +137,50 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/assets/css/chat.scss"; @import "@/assets/css/chat.scss";
.profile-info-popup { .profile-info-popup {
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
font-size: 16px; font-size: 16px;
position: fixed;
margin: 0px;
top: 70px;
right: 10px;
[dir="rtl"] & {
right: inherit;
left: 10px;
}
border-radius: 40px;
&::before {
content: "▲";
position: fixed; position: fixed;
margin: 0px; top: 57px;
top: 70px; right: 22px;
right: 10px; [dir="rtl"] & {
border-radius: 40px; left: 22px;
&::before { right: inherit;
content: '▲';
position: fixed;
top: 57px;
right: 22px;
color: white;
} }
.you-are { color: white;
padding-top: 20px; }
font-size: 12px; .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 { .new_room .v-btn__content {
border-radius: 4px; font-family: "Poppins", sans-serif !important;
background-color: #f5f5f5; font-weight: 700 !important;
} font-size: 13 * $chat-text-size !important;
.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;
}
} }
}
} }
</style> </style>

4
src/components/RoomInfo.vue
View file

@ -15,7 +15,7 @@
<v-btn <v-btn
color="black" color="black"
depressed depressed
class="header-button-right filled-button mr-3" class="header-button-right filled-button me-3"
@click.stop="showLeaveConfirmation = true" @click.stop="showLeaveConfirmation = true"
>👋 {{ $t("room_info.leave_room") }}</v-btn >👋 {{ $t("room_info.leave_room") }}</v-btn
> >
@ -83,7 +83,7 @@
item-value="id" item-value="id"
> >
<template v-slot:selection="{ item }"> <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 }} {{ item.text }}
</template> </template>
<template v-slot:item="{ item, attrs, on }"> <template v-slot:item="{ item, attrs, on }">

1
src/components/RoomList.vue
View file

@ -49,6 +49,7 @@
v-for="room in $matrix.joinedRooms" v-for="room in $matrix.joinedRooms"
:key="room.roomId" :key="room.roomId"
:value="room.roomId" :value="room.roomId"
style="position: relative"
> >
<v-list-item-avatar size="40" color="#e0e0e0"> <v-list-item-avatar size="40" color="#e0e0e0">
<v-img :src="room.avatar" /> <v-img :src="room.avatar" />