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

Work on room info

Browse source 
Issue #115.
This commit is contained in:
N-Pex 2021-06-15 16:53:13 +02:00
parent d62dc3a250
commit 7c526d300c
3 changed files with 203 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,13 +16,13 @@ $admin-fg: white;
height: 100%; height: 100%;
} }
.num-members { .num-members {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 12 * $chat-text-size; font-size: 12 * $chat-text-size;
color: black; color: black;
} }
.v-btn.leave-button { .v-btn.leave-button {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 11 * $chat-text-size; font-size: 11 * $chat-text-size;
color: black; color: black;
@ -104,7 +104,7 @@ $admin-fg: white;
padding-right: 2 * $chat-standard-padding-s; padding-right: 2 * $chat-standard-padding-s;
padding-top: 0px; padding-top: 0px;
.typing { .typing {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 12 * $chat-text-size; font-size: 12 * $chat-text-size;
color: #1c242a; color: #1c242a;
@ -127,7 +127,7 @@ $admin-fg: white;
overflow-y: auto; overflow-y: auto;
padding: 0 0 0px 20px; padding: 0 0 0px 20px;
margin: 6px 0; margin: 6px 0;
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 18 * $chat-text-size; font-size: 18 * $chat-text-size;
.v-input__slot { .v-input__slot {
@ -139,9 +139,9 @@ $admin-fg: white;
} }
.scroll-to-end { .scroll-to-end {
position:absolute; position: absolute;
top:-64px; top: -64px;
right:16px; right: 16px;
} }
.op-button { .op-button {
@ -158,7 +158,7 @@ $admin-fg: white;
} }
.messageJoin { .messageJoin {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15 * $chat-text-size; font-size: 15 * $chat-text-size;
color: #1c242a; color: #1c242a;
@ -215,7 +215,7 @@ $admin-fg: white;
display: block; display: block;
} }
.sender { .sender {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 10 * $chat-text-size; font-size: 10 * $chat-text-size;
@ -225,7 +225,7 @@ $admin-fg: white;
display: inline-block; display: inline-block;
} }
.time { .time {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 10 * $chat-text-size; font-size: 10 * $chat-text-size;
@ -268,7 +268,8 @@ $admin-fg: white;
display: inline-block; display: inline-block;
width: 70%; width: 70%;
max-width: 70%; max-width: 70%;
.v-image, video { .v-image,
video {
border-radius: 10px 10px 0 10px; border-radius: 10px 10px 0 10px;
} }
} }
@ -290,7 +291,7 @@ $admin-fg: white;
display: block; display: block;
} }
.sender { .sender {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 10 * $chat-text-size; font-size: 10 * $chat-text-size;
@ -300,7 +301,7 @@ $admin-fg: white;
margin-right: 8px; margin-right: 8px;
} }
.time { .time {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 10 * $chat-text-size; font-size: 10 * $chat-text-size;
@ -312,8 +313,9 @@ $admin-fg: white;
} }
} }
.sender, .status { .sender,
font-family: 'Inter', sans-serif; .status {
font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15 * $chat-text-size; font-size: 15 * $chat-text-size;
color: #1c242a; color: #1c242a;
@ -321,7 +323,7 @@ $admin-fg: white;
} }
.message { .message {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16 * $chat-text-size; font-size: 16 * $chat-text-size;
color: #000000; color: #000000;
@ -349,7 +351,7 @@ $admin-fg: white;
margin-bottom: 8px; margin-bottom: 8px;
user-select: text; user-select: text;
.original-message-sender { .original-message-sender {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 13 * $chat-text-size; font-size: 13 * $chat-text-size;
color: #000000; color: #000000;
@ -357,7 +359,7 @@ $admin-fg: white;
white-space: pre; white-space: pre;
} }
.original-message-text { .original-message-text {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 11 * $chat-text-size; font-size: 11 * $chat-text-size;
color: #000000; color: #000000;
@ -368,7 +370,7 @@ $admin-fg: white;
} }
.time { .time {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-size: 15 * $chat-text-size; font-size: 15 * $chat-text-size;
@ -377,7 +379,7 @@ $admin-fg: white;
} }
.statusEvent { .statusEvent {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15 * $chat-text-size; font-size: 15 * $chat-text-size;
color: #1c242a; color: #1c242a;
@ -405,7 +407,7 @@ $admin-fg: white;
} }
} }
.play-time { .play-time {
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 13 * $chat-text-size; font-size: 13 * $chat-text-size;
} }
@ -420,7 +422,8 @@ $admin-fg: white;
} }
} }
.message-operations-strut, .avatar-operations-strut { .message-operations-strut,
.avatar-operations-strut {
position: relative; position: relative;
height: 0px; height: 0px;
z-index: 1; z-index: 1;
@ -499,9 +502,9 @@ $admin-fg: white;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width:100%; width: 100%;
height:100%; height: 100%;
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
align-items: center; align-items: center;
display: flex; display: flex;
.download-text { .download-text {
@ -510,8 +513,9 @@ $admin-fg: white;
} }
} }
.room-name, .room-name-inline { .room-name,
font-family: 'Poppins', sans-serif; .room-name-inline {
font-family: "Poppins", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 18 * $chat-text-size; font-size: 18 * $chat-text-size;
text-transform: uppercase; text-transform: uppercase;
@ -523,6 +527,9 @@ $admin-fg: white;
text-align: start; text-align: start;
} }
.room-name.no-upper {
text-transform: none;
}
.read-marker { .read-marker {
margin-left: 20px; margin-left: 20px;
@ -546,7 +553,7 @@ $admin-fg: white;
position: absolute; position: absolute;
top: -4px; top: -4px;
background: white; background: white;
transform: translate(-50%,0); transform: translate(-50%, 0);
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
content: attr(title); content: attr(title);
@ -575,7 +582,7 @@ $admin-fg: white;
position: absolute; position: absolute;
top: -8px; top: -8px;
background: white; background: white;
transform: translate(-50%,0); transform: translate(-50%, 0);
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
content: attr(title); content: attr(title);
@ -589,27 +596,60 @@ $admin-fg: white;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.room-avatar { .room-avatar {
background-color: #ededed; background-color: #ededed;
width: 100px !important; width: 64px !important;
height: 100px !important; height: 64px !important;
margin-bottom: 20px; margin-bottom: 20px;
.headline { .headline {
font-size: 70 * $chat-text-size !important; 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 { .avatar .headline {
font-size: 16 * $chat-text-size !important; font-size: 16 * $chat-text-size !important;
} }
.qr { .qr-container {
width: 120px; background-color: white;
height: 120px; border-radius: 8px;
width: min(30vw, 30vh); margin-top: 20px !important;
height: min(30vw, 30vh); .qr {
background-color: #e0e0e0; width: 60px;
margin-top: 15px; 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 { .v-card {
@ -618,7 +658,7 @@ $admin-fg: white;
} }
.member::after { .member::after {
content: ' '; content: " ";
display: block; display: block;
margin: 10px 0px; margin: 10px 0px;
bottom: 0px; bottom: 0px;
@ -632,6 +672,7 @@ $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;
text-decoration: underline;
} }
} }
@ -683,7 +724,7 @@ $admin-fg: white;
cursor: pointer; cursor: pointer;
&::after { &::after {
/* divider */ /* divider */
content: ' '; content: " ";
display: block; display: block;
margin: 10px 0px; margin: 10px 0px;
bottom: 0px; bottom: 0px;
@ -771,7 +812,7 @@ $admin-fg: white;
.current-room { .current-room {
padding: 25px; 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); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 18px; border-radius: 18px;
} }

16
src/assets/translations/en.json
View file

@ -151,24 +151,24 @@
"button": "Purge room" "button": "Purge room"
}, },
"room_info": { "room_info": {
"title": "Info", "title": "Room Details",
"created_by": "Created by {user}", "created_by": "Created by {user}",
"permissions": "Permissions", "permissions": "Join Permissions",
"join_invite": "Room can be joined by invitation only", "join_invite": "Only People Added",
"join_public": "Anyone with the link can join", "join_public": "Anyone with a link",
"copy_link": "Copy invite link",
"link_copied": "Link copied!", "link_copied": "Link copied!",
"purge": "Purge room", "purge": "Delete room",
"members": "Members", "members": "Members",
"user": "{user}", "user": "{user}",
"user_you": "{user} (you)", "user_you": "{user} (you)",
"hide_all": "Hide", "hide_all": "Hide",
"show_all": "Show all", "show_all": "Show all >",
"my_profile": "My Profile", "my_profile": "My Profile",
"identity": "You are logged in as {displayName}.", "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.", "identity_temporary": "Your identity {displayName} is temporary. You can change your name or set a password to keep it.",
"view_profile": "View", "view_profile": "View",
"leave_room": "Leave group", "leave_room": "Leave",
"leave_room_info": "Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.",
"version_info": "Powered by Guardian Project. Version: {version}" "version_info": "Powered by Guardian Project. Version: {version}"
}, },
"room_info_sheet": { "room_info_sheet": {

176
src/components/RoomInfo.vue
View file

@ -2,7 +2,7 @@
<div v-if="room" class="room-info"> <div v-if="room" class="room-info">
<div class="chat-header"> <div class="chat-header">
<v-container fluid> <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 <v-btn
text text
class="header-button-left" class="header-button-left"
@ -12,67 +12,97 @@
<v-icon>arrow_back</v-icon> <v-icon>arrow_back</v-icon>
<span>{{ $t("menu.back") }}</span> <span>{{ $t("menu.back") }}</span>
</v-btn> </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> </v-container>
</div> </div>
<v-card class="members ma-3 pa-3" flat> <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
<div class="text-center"> <v-avatar class="room-avatar">
<v-avatar class="room-avatar"> <v-img v-if="roomAvatar" :src="roomAvatar" />
<v-img v-if="roomAvatar" :src="roomAvatar" /> <span v-else class="white--text headline">{{
<span v-else class="white--text headline">{{ roomName.substring(0, 1).toUpperCase()
roomName.substring(0, 1).toUpperCase() }}</span>
}}</span> </v-avatar>
</v-avatar> <div class="name">{{ roomName }}</div>
<div class="h1">{{ roomName }}</div> <div class="topic">{{ roomTopic }}</div>
<div class="h3">{{ roomTopic }}</div> <div class="created-by">
<div class="small"> {{ $t("room_info.created_by", { user: creator }) }}
{{ $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> </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 class="account ma-3" flat>
<v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title> <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
<v-card-text> <v-card-text>
<v-radio-group <v-select
v-model="roomJoinRule" color="grey"
v-if="roomJoinRule" v-if="roomJoinRule"
:disabled="!userCanChangeJoinRule || updatingJoinRule" :disabled="!userCanChangeJoinRule || updatingJoinRule"
:items="joinRules"
class="mt-4"
v-model="roomJoinRule"
item-value="id"
> >
<v-radio :label="$t('room_info.join_invite')" :value="'invite'" /> <template v-slot:selection="{ item }">
<v-radio :label="$t('room_info.join_public')" :value="'public'"> <v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
</v-radio> {{ item.text }}
<v-text-field </template>
v-if="publicRoomLink" <template v-slot:item="{ item, attrs, on }">
:value="publicRoomLink" <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
readonly <v-list-item-avatar>
append-icon="content_copy" <v-icon color="black">{{ item.icon }}</v-icon>
filled </v-list-item-avatar>
type="text" <v-list-item-content>
@click:append="copyRoomLink" <v-list-item-title v-text="item.text"></v-list-item-title>
></v-text-field> </v-list-item-content>
<div v-if="publicRoomLinkCopied" class="link-copied"> <v-list-item-action>
{{ $t("room_info.link_copied") }} <v-btn icon v-if="active">
</div> <v-icon color="grey lighten-1">check</v-icon>
</v-radio-group> </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 v-if="anyoneCanJoin">
<div>Anyone with a link can join.</div> <div>Anyone with a link can join.</div>
<v-text-field <v-text-field
@ -128,6 +158,18 @@
</v-card-text> </v-card-text>
</v-card> </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 class="account ma-3" flat>
<v-card-title class="h2">{{ $t("room_info.my_profile") }}</v-card-title> <v-card-title class="h2">{{ $t("room_info.my_profile") }}</v-card-title>
<v-card-text> <v-card-text>
@ -151,27 +193,15 @@
block block
class="outlined-button" class="outlined-button"
@click.stop="viewProfile" @click.stop="viewProfile"
>{{$t('room_info.view_profile')}}</v-btn >{{ $t("room_info.view_profile") }}</v-btn
> >
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-card class="account ma-3" flat> <div class="build-version">
<v-card-text> {{ $t("room_info.version_info", { version: buildVersion }) }}
<v-btn </div>
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>
<LeaveRoomDialog <LeaveRoomDialog
:show="showLeaveConfirmation" :show="showLeaveConfirmation"
@ -214,6 +244,18 @@ export default {
buildVersion: "", buildVersion: "",
updatingJoinRule: false, // Flag if we are processing update curerntly updatingJoinRule: false, // Flag if we are processing update curerntly
publicRoomLinkCopied: false, 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() { mounted() {
@ -314,7 +356,7 @@ export default {
{ {
type: "image/png", type: "image/png",
margin: 1, margin: 1,
width: canvas.clientWidth, width: 60,
}, },
function (error) { function (error) {
if (error) console.error(error); if (error) console.error(error);