Merge branch 'main' of gitlab.com:keanuapp/keanuapp-weblite into main
This commit is contained in:
commit
cd102c079f
13 changed files with 527 additions and 183 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "keanuapp-weblite",
|
||||
"version": "0.1.5",
|
||||
"version": "0.1.9",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "0.1.5",
|
||||
"version": "0.1.9",
|
||||
"dependencies": {
|
||||
"aes-js": "^3.1.2",
|
||||
"axios": "^0.21.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "keanuapp-weblite",
|
||||
"version": "0.1.9",
|
||||
"version": "0.1.10",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "keanuapp-weblite",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.9",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{
|
||||
"appName": "Keanu Weblite",
|
||||
"product": "Convene",
|
||||
"productLink": "letsconvene.im",
|
||||
"defaultServer": "https://neo.keanu.im",
|
||||
"useShortCodeStickers": false,
|
||||
"analytics": {
|
||||
|
|
|
|||
|
|
@ -16,13 +16,25 @@ $admin-fg: white;
|
|||
height: 100%;
|
||||
}
|
||||
.num-members {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: black;
|
||||
}
|
||||
.v-btn.leave-button {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
}
|
||||
.v-btn.avatar {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
|
|
@ -104,7 +116,7 @@ $admin-fg: white;
|
|||
padding-right: 2 * $chat-standard-padding-s;
|
||||
padding-top: 0px;
|
||||
.typing {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: #1c242a;
|
||||
|
|
@ -127,7 +139,7 @@ $admin-fg: white;
|
|||
overflow-y: auto;
|
||||
padding: 0 0 0px 20px;
|
||||
margin: 6px 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 18 * $chat-text-size;
|
||||
.v-input__slot {
|
||||
|
|
@ -139,9 +151,9 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.scroll-to-end {
|
||||
position:absolute;
|
||||
top:-64px;
|
||||
right:16px;
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.op-button {
|
||||
|
|
@ -158,7 +170,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.messageJoin {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15 * $chat-text-size;
|
||||
color: #1c242a;
|
||||
|
|
@ -215,7 +227,7 @@ $admin-fg: white;
|
|||
display: block;
|
||||
}
|
||||
.sender {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10 * $chat-text-size;
|
||||
|
|
@ -225,7 +237,7 @@ $admin-fg: white;
|
|||
display: inline-block;
|
||||
}
|
||||
.time {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10 * $chat-text-size;
|
||||
|
|
@ -268,7 +280,8 @@ $admin-fg: white;
|
|||
display: inline-block;
|
||||
width: 70%;
|
||||
max-width: 70%;
|
||||
.v-image, video {
|
||||
.v-image,
|
||||
video {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -290,7 +303,7 @@ $admin-fg: white;
|
|||
display: block;
|
||||
}
|
||||
.sender {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10 * $chat-text-size;
|
||||
|
|
@ -300,7 +313,7 @@ $admin-fg: white;
|
|||
margin-right: 8px;
|
||||
}
|
||||
.time {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 10 * $chat-text-size;
|
||||
|
|
@ -312,8 +325,9 @@ $admin-fg: white;
|
|||
}
|
||||
}
|
||||
|
||||
.sender, .status {
|
||||
font-family: 'Inter', sans-serif;
|
||||
.sender,
|
||||
.status {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15 * $chat-text-size;
|
||||
color: #1c242a;
|
||||
|
|
@ -321,7 +335,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.message {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16 * $chat-text-size;
|
||||
color: #000000;
|
||||
|
|
@ -349,7 +363,7 @@ $admin-fg: white;
|
|||
margin-bottom: 8px;
|
||||
user-select: text;
|
||||
.original-message-sender {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13 * $chat-text-size;
|
||||
color: #000000;
|
||||
|
|
@ -357,7 +371,7 @@ $admin-fg: white;
|
|||
white-space: pre;
|
||||
}
|
||||
.original-message-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: #000000;
|
||||
|
|
@ -368,7 +382,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.time {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-size: 15 * $chat-text-size;
|
||||
|
|
@ -377,7 +391,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.statusEvent {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15 * $chat-text-size;
|
||||
color: #1c242a;
|
||||
|
|
@ -405,7 +419,7 @@ $admin-fg: white;
|
|||
}
|
||||
}
|
||||
.play-time {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13 * $chat-text-size;
|
||||
}
|
||||
|
|
@ -420,7 +434,8 @@ $admin-fg: white;
|
|||
}
|
||||
}
|
||||
|
||||
.message-operations-strut, .avatar-operations-strut {
|
||||
.message-operations-strut,
|
||||
.avatar-operations-strut {
|
||||
position: relative;
|
||||
height: 0px;
|
||||
z-index: 1;
|
||||
|
|
@ -499,9 +514,9 @@ $admin-fg: white;
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.download-text {
|
||||
|
|
@ -510,8 +525,9 @@ $admin-fg: white;
|
|||
}
|
||||
}
|
||||
|
||||
.room-name, .room-name-inline {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
.room-name,
|
||||
.room-name-inline {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18 * $chat-text-size;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -523,6 +539,9 @@ $admin-fg: white;
|
|||
text-align: start;
|
||||
}
|
||||
|
||||
.room-name.no-upper {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.read-marker {
|
||||
margin-left: 20px;
|
||||
|
|
@ -546,7 +565,7 @@ $admin-fg: white;
|
|||
position: absolute;
|
||||
top: -4px;
|
||||
background: white;
|
||||
transform: translate(-50%,0);
|
||||
transform: translate(-50%, 0);
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
content: attr(title);
|
||||
|
|
@ -575,7 +594,7 @@ $admin-fg: white;
|
|||
position: absolute;
|
||||
top: -8px;
|
||||
background: white;
|
||||
transform: translate(-50%,0);
|
||||
transform: translate(-50%, 0);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
content: attr(title);
|
||||
|
|
@ -589,27 +608,60 @@ $admin-fg: white;
|
|||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.room-avatar {
|
||||
background-color: #ededed;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
margin-bottom: 20px;
|
||||
.headline {
|
||||
font-size: 70 * $chat-text-size !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.name {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.topic {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.created-by {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.avatar .headline {
|
||||
font-size: 16 * $chat-text-size !important;
|
||||
}
|
||||
|
||||
.qr {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: min(30vw, 30vh);
|
||||
height: min(30vw, 30vh);
|
||||
background-color: #e0e0e0;
|
||||
margin-top: 15px;
|
||||
.qr-container {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px !important;
|
||||
.qr {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.link {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 16px;
|
||||
text-decoration: underline;
|
||||
color: #3d6eff;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
.link-copied-in-place .v-btn__content {
|
||||
font-family: "Inter", sans-serif !important;
|
||||
font-size: 12px !important;
|
||||
text-transform: none !important;
|
||||
color: #3d6eff;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
|
|
@ -618,7 +670,7 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.member::after {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
display: block;
|
||||
margin: 10px 0px;
|
||||
bottom: 0px;
|
||||
|
|
@ -632,6 +684,7 @@ $admin-fg: white;
|
|||
font-size: 14 * $chat-text-size;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -677,20 +730,29 @@ $admin-fg: white;
|
|||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 4px 20px;
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
/* divider */
|
||||
content: ' ';
|
||||
display: block;
|
||||
margin: 10px 0px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
background-color: #e1e1e1;
|
||||
width: 100%;
|
||||
}
|
||||
.action-row {
|
||||
padding: 4px 20px;
|
||||
cursor: pointer;
|
||||
height: 55px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 19px;
|
||||
color: black;
|
||||
position: relative;
|
||||
.v-icon {
|
||||
color: black !important;
|
||||
}
|
||||
&:not(:last-of-type):after {
|
||||
/* divider */
|
||||
position: absolute;
|
||||
content: " ";
|
||||
display: block;
|
||||
margin: 0px 10px;
|
||||
bottom: 0px;
|
||||
height: 1px;
|
||||
background-color: #e1e1e1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -768,10 +830,10 @@ $admin-fg: white;
|
|||
|
||||
.room-info-sheet {
|
||||
background-color: white;
|
||||
|
||||
|
||||
.current-room {
|
||||
padding: 25px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F5F5F7;
|
||||
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #f5f5f7;
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
|
@ -805,7 +867,7 @@ $admin-fg: white;
|
|||
/* Remove text underline */
|
||||
border-style: none !important;
|
||||
}
|
||||
|
||||
|
||||
.created-room-welcome-header {
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 25px;
|
||||
|
|
@ -825,4 +887,14 @@ $admin-fg: white;
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.avatar-32 {
|
||||
font-size: 18 * $chat-text-size !important;
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -116,7 +116,16 @@
|
|||
"password_new": "New password",
|
||||
"password_repeat": "Repeat new password",
|
||||
"display_name": "Display name"
|
||||
|
||||
},
|
||||
"profile_info_popup": {
|
||||
"you_are": "You are",
|
||||
"identity": "{displayName}",
|
||||
"identity_temporary": "{displayName}",
|
||||
"edit_profile": "Edit profile",
|
||||
"logout": "Logout",
|
||||
"want_more": "Want more?",
|
||||
"powered_by": "This room is powered by {product}. Learn more at {productLink} or go ahead and create another room!",
|
||||
"new_room": "+ New room"
|
||||
},
|
||||
"join": {
|
||||
"title": "Welcome to {roomName}",
|
||||
|
|
@ -146,29 +155,25 @@
|
|||
"leave": "Leave"
|
||||
},
|
||||
"purge_room": {
|
||||
"title": "Purge room?",
|
||||
"info": "This operation will close the room for all members. It cannot be undone.",
|
||||
"button": "Purge room"
|
||||
"title": "Delete room?",
|
||||
"info": "This will close the room for all members. It cannot be undone.",
|
||||
"button": "Delete room"
|
||||
},
|
||||
"room_info": {
|
||||
"title": "Info",
|
||||
"title": "Room Details",
|
||||
"created_by": "Created by {user}",
|
||||
"permissions": "Permissions",
|
||||
"join_invite": "Room can be joined by invitation only",
|
||||
"join_public": "Anyone with the link can join",
|
||||
"permissions": "Join Permissions",
|
||||
"join_invite": "Only People Added",
|
||||
"join_public": "Anyone with a link",
|
||||
"copy_link": "Copy invite link",
|
||||
"link_copied": "Link copied!",
|
||||
"purge": "Purge room",
|
||||
"purge": "Delete room",
|
||||
"members": "Members",
|
||||
"user": "{user}",
|
||||
"user_you": "{user} (you)",
|
||||
"hide_all": "Hide",
|
||||
"show_all": "Show all",
|
||||
"my_profile": "My Profile",
|
||||
"identity": "You are logged in as {displayName}.",
|
||||
"identity_temporary": "Your identity {displayName} is temporary. You can change your name or set a password to keep it.",
|
||||
"view_profile": "View",
|
||||
"leave_room": "Leave group",
|
||||
"leave_room_info": "Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.",
|
||||
"show_all": "Show all >",
|
||||
"leave_room": "Leave",
|
||||
"version_info": "Powered by Guardian Project. Version: {version}"
|
||||
},
|
||||
"room_info_sheet": {
|
||||
|
|
|
|||
32
src/components/ActionRow.vue
Normal file
32
src/components/ActionRow.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<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-icon size="22">{{ icon }}</v-icon>
|
||||
</v-col>
|
||||
<v-col>{{ text }}</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ActionRow",
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: function () {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: function () {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
|
|
@ -18,26 +18,42 @@
|
|||
<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-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">
|
||||
<img v-if="userAvatar" :src="userAvatar" />
|
||||
<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" />
|
||||
|
||||
<!-- PROFILE INFO POPUP -->
|
||||
<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';
|
||||
|
||||
export default {
|
||||
name: "ChatHeader",
|
||||
mixins: [profileInfoMixin],
|
||||
components: {
|
||||
LeaveRoomDialog
|
||||
LeaveRoomDialog,
|
||||
ProfileInfoPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
memberCount: null,
|
||||
showLeaveConfirmation: false
|
||||
showLeaveConfirmation: false,
|
||||
showProfileInfo: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -35,8 +35,10 @@
|
|||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<div class="action" @click="showEditPasswordDialog = true"><v-icon>lock</v-icon><span>{{$t('profile.set_password')}}</span></div>
|
||||
<div class="action" @click="editValue = displayName;showEditDisplaynameDialog = true"><v-icon>edit</v-icon><span>{{$t('profile.change_name')}}</span></div>
|
||||
<v-container class="mt-2 pa-5">
|
||||
<ActionRow @click="showEditPasswordDialog = true" :icon="'lock'" :text="$t('profile.set_password')" />
|
||||
<ActionRow @click="editValue = displayName;showEditDisplaynameDialog = true" :icon="'edit'" :text="$t('profile.change_name')" />
|
||||
</v-container>
|
||||
|
||||
<!-- edit password dialog -->
|
||||
<v-dialog v-model="showEditPasswordDialog" class="ma-0 pa-0" width="50%">
|
||||
|
|
@ -92,8 +94,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ActionRow from "./ActionRow.vue";
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
components: {
|
||||
ActionRow
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showEditPasswordDialog: false,
|
||||
|
|
@ -142,14 +149,6 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
logout() {
|
||||
//TODO - For guest accounts, show warning about not being able to rejoin.
|
||||
this.$store.dispatch("logout");
|
||||
this.$nextTick(() => {
|
||||
this.$navigation.push({path: "/login"}, -1);
|
||||
})
|
||||
},
|
||||
|
||||
setDisplayName(name) {
|
||||
this.$matrix.matrixClient.setDisplayName(name);
|
||||
},
|
||||
|
|
|
|||
162
src/components/ProfileInfoPopup.vue
Normal file
162
src/components/ProfileInfoPopup.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
v-model="showDialog"
|
||||
content-class="profile-info-popup"
|
||||
class="ma-0 pa-0"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'"
|
||||
>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col class="username" cols="pa-2">
|
||||
<div v-if="$matrix.currentUser.is_guest">
|
||||
<i18n path="profile_info_popup.identity_temporary" tag="span">
|
||||
<template v-slot:displayName>
|
||||
<b>{{ displayName }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div v-else>
|
||||
<i18n path="profile_info_popup.identity" tag="span">
|
||||
<template v-slot:displayName>
|
||||
<b>{{ displayName }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="auto" class="pa-2">
|
||||
<v-avatar
|
||||
class="avatar-32"
|
||||
size="32"
|
||||
color="#e0e0e0"
|
||||
@click.stop="showProfileInfo = true"
|
||||
>
|
||||
<img v-if="userAvatar" :src="userAvatar" />
|
||||
<span v-else class="white--text">{{ userAvatarLetter }}</span>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</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')" />
|
||||
</v-container>
|
||||
|
||||
<div class="more-container">
|
||||
<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>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import profileInfoMixin from "./profileInfoMixin";
|
||||
import ActionRow from "./ActionRow.vue";
|
||||
import config from "../assets/config";
|
||||
|
||||
export default {
|
||||
name: "ProfileInfoPopup",
|
||||
mixins: [profileInfoMixin],
|
||||
components: {
|
||||
ActionRow
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDialog: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
product() {
|
||||
return config.product;
|
||||
},
|
||||
productLink() {
|
||||
return config.productLink;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal, ignoredOldVal) {
|
||||
this.showDialog = newVal;
|
||||
},
|
||||
},
|
||||
showDialog() {
|
||||
if (!this.showDialog) {
|
||||
this.$emit("close");
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
viewProfile() {
|
||||
this.showDialog = false;
|
||||
this.$navigation.push({ name: "Profile" }, 1);
|
||||
},
|
||||
createRoom() {
|
||||
this.showDialog = false;
|
||||
this.$navigation.push({ name: "CreateRoom" });
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
.profile-info-popup {
|
||||
font-family: "Inter", sans-serif !important;
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
top: 70px;
|
||||
right: 10px;
|
||||
border-radius: 40px;
|
||||
&::before {
|
||||
content: '▲';
|
||||
position: fixed;
|
||||
top: 57px;
|
||||
right: 22px;
|
||||
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;
|
||||
}
|
||||
.new_room .v-btn__content {
|
||||
font-family: "Poppins", sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 13 * $chat-text-size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
|
||||
<div class="dialog-content text-center">
|
||||
<template>
|
||||
<v-icon color="black" size="30">lock</v-icon>
|
||||
<h2 class="dialog-title">{{ $t("purge_room.title") }}</h2>
|
||||
<div class="dialog-text">
|
||||
{{ $t("purge_room.info") }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div v-if="room" class="room-info">
|
||||
<div class="chat-header">
|
||||
<v-container fluid>
|
||||
<div class="room-name">{{ $t("room_info.title") }}</div>
|
||||
<div class="room-name no-upper">{{ $t("room_info.title") }}</div>
|
||||
<v-btn
|
||||
text
|
||||
class="header-button-left"
|
||||
|
|
@ -12,67 +12,97 @@
|
|||
<v-icon>arrow_back</v-icon>
|
||||
<span>{{ $t("menu.back") }}</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="black"
|
||||
depressed
|
||||
class="header-button-right filled-button mr-3"
|
||||
@click.stop="showLeaveConfirmation = true"
|
||||
>👋 {{ $t("room_info.leave_room") }}</v-btn
|
||||
>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-card class="members ma-3 pa-3" flat>
|
||||
<div class="text-center">
|
||||
<v-avatar class="room-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="h1">{{ roomName }}</div>
|
||||
<div class="h3">{{ roomTopic }}</div>
|
||||
<div class="small">
|
||||
{{ $t("room_info.created_by", { user: creator }) }}
|
||||
</div>
|
||||
<v-expand-transition>
|
||||
<canvas
|
||||
v-show="publicRoomLink"
|
||||
ref="roomQr"
|
||||
class="qr"
|
||||
id="room-qr"
|
||||
></canvas>
|
||||
</v-expand-transition>
|
||||
<div class="members ma-3 pa-3 mt-0 pt-0 text-center">
|
||||
<v-avatar class="room-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="name">{{ roomName }}</div>
|
||||
<div class="topic">{{ roomTopic }}</div>
|
||||
<div class="created-by">
|
||||
{{ $t("room_info.created_by", { user: creator }) }}
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<v-expand-transition>
|
||||
<v-container fluid class="pa-0" v-show="publicRoomLink">
|
||||
<v-row cols="12" class="qr-container ma-3">
|
||||
<v-col cols="auto">
|
||||
<canvas ref="roomQr" class="qr" id="room-qr"></canvas>
|
||||
</v-col>
|
||||
<v-col align-self="center">
|
||||
<div class="link">{{ publicRoomLink }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" class="mt-0 pt-0">
|
||||
<v-col align="center" class="mt-0 pt-0">
|
||||
<v-btn
|
||||
v-if="publicRoomLinkCopied"
|
||||
color="#DEE6FF"
|
||||
depressed
|
||||
class="filled-button link-copied-in-place"
|
||||
style="min-width: 180px"
|
||||
>{{ $t("room_info.link_copied") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-else
|
||||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
style="min-width: 180px"
|
||||
@click.stop="copyRoomLink"
|
||||
>{{ $t("room_info.copy_link") }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-card class="account ma-3" flat>
|
||||
<v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
|
||||
<v-card-text>
|
||||
<v-radio-group
|
||||
v-model="roomJoinRule"
|
||||
<v-select
|
||||
color="grey"
|
||||
v-if="roomJoinRule"
|
||||
:disabled="!userCanChangeJoinRule || updatingJoinRule"
|
||||
:items="joinRules"
|
||||
class="mt-4"
|
||||
v-model="roomJoinRule"
|
||||
item-value="id"
|
||||
>
|
||||
<v-radio :label="$t('room_info.join_invite')" :value="'invite'" />
|
||||
<v-radio :label="$t('room_info.join_public')" :value="'public'">
|
||||
</v-radio>
|
||||
<v-text-field
|
||||
v-if="publicRoomLink"
|
||||
:value="publicRoomLink"
|
||||
readonly
|
||||
append-icon="content_copy"
|
||||
filled
|
||||
type="text"
|
||||
@click:append="copyRoomLink"
|
||||
></v-text-field>
|
||||
<div v-if="publicRoomLinkCopied" class="link-copied">
|
||||
{{ $t("room_info.link_copied") }}
|
||||
</div>
|
||||
</v-radio-group>
|
||||
<template v-slot:selection="{ item }">
|
||||
<v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</template>
|
||||
<template v-slot:item="{ item, attrs, on }">
|
||||
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
|
||||
<v-list-item-avatar>
|
||||
<v-icon color="black">{{ item.icon }}</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn icon v-if="active">
|
||||
<v-icon color="grey lighten-1">check</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<v-btn
|
||||
v-if="userCanPurgeRoom"
|
||||
color="red"
|
||||
depressed
|
||||
block
|
||||
class="filled-button"
|
||||
@click.stop="showPurgeConfirmation = true"
|
||||
>{{ $t("room_info.purge") }}</v-btn
|
||||
>
|
||||
<!-- <div v-if="anyoneCanJoin">
|
||||
<div>Anyone with a link can join.</div>
|
||||
<v-text-field
|
||||
|
|
@ -128,50 +158,21 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="account ma-3" flat>
|
||||
<v-card-title class="h2">{{ $t("room_info.my_profile") }}</v-card-title>
|
||||
<v-card-text>
|
||||
<div>
|
||||
<div v-if="$matrix.currentUser.is_guest">
|
||||
<i18n path="room_info.identity_temporary" tag="span">
|
||||
<template v-slot:displayName>
|
||||
<b>{{ displayName }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<div v-else>
|
||||
<i18n path="room_info.identity" tag="span">
|
||||
<template v-slot:displayName>
|
||||
<b>{{ displayName }}</b>
|
||||
</template>
|
||||
</i18n>
|
||||
</div>
|
||||
<v-btn
|
||||
depressed
|
||||
block
|
||||
class="outlined-button"
|
||||
@click.stop="viewProfile"
|
||||
>{{$t('room_info.view_profile')}}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<!-- PURGE ROOM -->
|
||||
<div class="members ma-3 pa-3 text-center">
|
||||
<v-btn
|
||||
v-if="userCanPurgeRoom"
|
||||
color="red"
|
||||
depressed
|
||||
class="filled-button"
|
||||
@click.stop="showPurgeConfirmation = true"
|
||||
>{{ $t("room_info.purge") }}</v-btn
|
||||
>
|
||||
</div>
|
||||
|
||||
<v-card class="account ma-3" flat>
|
||||
<v-card-text>
|
||||
<v-btn
|
||||
color="red"
|
||||
depressed
|
||||
block
|
||||
class="filled-button"
|
||||
@click.stop="showLeaveConfirmation = true"
|
||||
>{{$t('room_info.leave_room')}}</v-btn
|
||||
>
|
||||
<div>{{$t('room_info.leave_room_info')}}</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<div class="build-version">{{$t('room_info.version_info',{version: buildVersion})}}</div>
|
||||
<div class="build-version">
|
||||
{{ $t("room_info.version_info", { version: buildVersion }) }}
|
||||
</div>
|
||||
|
||||
<LeaveRoomDialog
|
||||
:show="showLeaveConfirmation"
|
||||
|
|
@ -214,6 +215,18 @@ export default {
|
|||
buildVersion: "",
|
||||
updatingJoinRule: false, // Flag if we are processing update curerntly
|
||||
publicRoomLinkCopied: false,
|
||||
joinRules: [
|
||||
{
|
||||
id: "public",
|
||||
text: this.$t("room_info.join_public"),
|
||||
icon: "link",
|
||||
},
|
||||
{
|
||||
id: "invite",
|
||||
text: this.$t("room_info.join_invite"),
|
||||
icon: "person_add",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -314,7 +327,7 @@ export default {
|
|||
{
|
||||
type: "image/png",
|
||||
margin: 1,
|
||||
width: canvas.clientWidth,
|
||||
width: 60,
|
||||
},
|
||||
function (error) {
|
||||
if (error) console.error(error);
|
||||
|
|
|
|||
44
src/components/profileInfoMixin.js
Normal file
44
src/components/profileInfoMixin.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
export default {
|
||||
computed: {
|
||||
user() {
|
||||
if (!this.$matrix.matrixClient) {
|
||||
return null;
|
||||
}
|
||||
return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
|
||||
},
|
||||
|
||||
displayName() {
|
||||
if (!this.user) {
|
||||
return null;
|
||||
}
|
||||
return (this.user.displayName || this.user.userId);
|
||||
},
|
||||
|
||||
userAvatar() {
|
||||
if (!this.user || !this.user.avatarUrl) {
|
||||
return null;
|
||||
}
|
||||
return this.$matrix.matrixClient.mxcUrlToHttp(this.user.avatarUrl, 80, 80, 'scale', true);
|
||||
},
|
||||
|
||||
userAvatarLetter() {
|
||||
if (!this.user) {
|
||||
return null;
|
||||
}
|
||||
return (this.user.displayName || this.user.userId.substring(1)).substring(0, 1).toUpperCase();
|
||||
},
|
||||
|
||||
passwordsMatch() {
|
||||
return this.newPassword1 && this.newPassword2 && this.newPassword1 == this.newPassword2;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
//TODO - For guest accounts, show warning about not being able to rejoin.
|
||||
this.$store.dispatch("logout");
|
||||
this.$nextTick(() => {
|
||||
this.$navigation.push({path: "/login"}, -1);
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue