From f82639970a8a7a2670e1347a6edefab21f4bd6f0 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Wed, 1 Mar 2023 08:49:20 +0530
Subject: [PATCH 001/136] room settings trash icon
---
src/assets/css/main.scss | 6 ++++++
src/components/RoomInfo.vue | 17 +++++++++--------
2 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index e675f45..a83e0aa 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -122,6 +122,12 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
min-height: $chat-standard-padding !important;
margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-xs;
+
+ .v-icon {
+ height: 14px;
+ width: 14px;
+ margin-right: 8px;
+ }
}
.v-dialog {
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index def4419..41591f4 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -254,11 +254,12 @@
id="btn-purge-room"
v-if="userCanPurgeRoom"
color="red"
- depressed
+ fab
class="filled-button"
@click.stop="showPurgeConfirmation = true"
- >{{ $t("room_info.purge") }}
+ >
+ $vuetify.icons.ic_moderator-delete {{ $t("room_info.purge") }}
+
@@ -599,7 +600,7 @@ export default {
},
/**
* Return true if WE can make the member an admin
- * @param member
+ * @param member
*/
canMakeAdmin(ignoredmember) {
if (this.room) {
@@ -612,7 +613,7 @@ export default {
/**
* Return true if WE can make the member a moderator
- * @param member
+ * @param member
*/
canMakeModerator(ignoredmember) {
if (this.room) {
@@ -620,11 +621,11 @@ export default {
const me = this.room.getMember(myUserId);
return me && this.isAdmin(me);
}
- return false;
+ return false;
},
/**
* Return true if WE can "unmake" the member a moderator
- * @param member
+ * @param member
*/
canRevokeModerator(member) {
if (this.room) {
@@ -632,7 +633,7 @@ export default {
const me = this.room.getMember(myUserId);
return me && this.isAdmin(me) && me.powerLevel > member.powerLevel;
}
- return false;
+ return false;
},
makeAdmin(member) {
if (this.room) {
From baf0120eeeee2d177e3a1655420d408df1140ed3 Mon Sep 17 00:00:00 2001
From: N Pex
Date: Fri, 3 Mar 2023 14:43:53 +0000
Subject: [PATCH 002/136] New room list and chat header design
---
src/assets/css/chat.scss | 174 +++++++++++++++------
src/assets/icons/ic_circle.vue | 5 +
src/assets/icons/ic_circle_filled.vue | 6 +
src/assets/icons/ic_download.vue | 15 ++
src/assets/icons/ic_info.vue | 12 ++
src/assets/icons/ic_link.vue | 7 +
src/assets/icons/ic_member-leave.vue | 4 +-
src/assets/icons/ic_more.vue | 7 +
src/assets/icons/ic_new_room.vue | 7 +
src/assets/icons/ic_public.vue | 7 +
src/assets/translations/en.json | 7 +-
src/components/ActionRow.vue | 8 +-
src/components/BottomSheet.vue | 5 +
src/components/Chat.vue | 15 +-
src/components/ChatHeader.vue | 208 ++++++++++++++++---------
src/components/Home.vue | 2 -
src/components/MoreMenuPopup.vue | 169 ++++++++++++++++++++
src/components/ProfileInfoPopup.vue | 117 ++++++--------
src/components/RoomExport.vue | 6 -
src/components/RoomInfoBottomSheet.vue | 41 +----
src/components/RoomList.vue | 97 +++++++-----
src/services/matrix.service.js | 14 ++
src/store/index.js | 5 +
23 files changed, 651 insertions(+), 287 deletions(-)
create mode 100644 src/assets/icons/ic_circle.vue
create mode 100644 src/assets/icons/ic_circle_filled.vue
create mode 100644 src/assets/icons/ic_download.vue
create mode 100644 src/assets/icons/ic_info.vue
create mode 100644 src/assets/icons/ic_link.vue
create mode 100644 src/assets/icons/ic_more.vue
create mode 100644 src/assets/icons/ic_new_room.vue
create mode 100644 src/assets/icons/ic_public.vue
create mode 100644 src/components/MoreMenuPopup.vue
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index bb1df52..4e53a0d 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -45,15 +45,28 @@ body {
border-bottom: 1px solid var(--v-divider-color);
.chat-header-row {
margin: 0;
- padding: 4px 10px;
+ padding: 4px 10px 4px 28px;
align-items: center;
height: 100%;
+ button {
+ width: 26px;
+ height: 26px;
+ .v-icon {
+ width: 14px;
+ height: 14px;
+ }
+ }
+ }
+ .room-title-row {
+ display: flex;
+ align-items: center;
}
- .chat-header-members,
.chat-header-name {
- overflow: hidden;
cursor: pointer;
}
+ .chat-header-members {
+ overflow: hidden;
+ }
.num-members {
font-family: "Inter", sans-serif;
font-weight: 400;
@@ -73,44 +86,72 @@ body {
margin-bottom: $chat-standard-padding-xs;
}
- @media #{map-get($display-breakpoints, 'sm-and-down')} {
- position: fixed;
- z-index: 10;
- }
-
.icon-dropdown {
margin: 0px 8px;
}
.notification-alert {
display: inline-block;
- background-color: #ff3300;
+ background-color: $alert-bg-color;
width: 8px;
height: 8px;
border-radius: 4px;
margin-bottom: 2px;
- }
+ position: relative;
+ overflow: visible;
+ &.popup-open::after {
+ top: 5px;
+ color: #246bfd;
+ }
+ .missed-items-popup {
+ position: absolute;
+ bottom: -17px;
+ left: -20px;
+ transform: translateY(100%);
+ background: #246bfd;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ padding: 22px 18px 23px 18px;
+ z-index: 300;
+ user-select: none;
+ .text {
+ white-space: nowrap;
+ font-family: "Inter", sans-serif;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ color: #ffffff;
+ }
+ .button {
+ margin-left: 50px;
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 11.5411px;
+ line-height: 140%;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.34px;
+ text-transform: uppercase;
+ color: #ffffff;
+ }
+ }
+ .missed-items-popup-background {
+ content: " ";
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: block;
+ z-index: 250;
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(2px);
+ }
}
-
-.room-list-notification-count {
- position: absolute;
- top: 10px;
- left: 40px;
- right: initial;
- color: white;
- background-color: black;
- font-size: 10px;
- min-width: 20px;
- height: 20px;
- border-radius: 10px;
- border: 2px solid white;
- text-align: center;
- padding-left: 4px;
- padding-right: 4px;
- [dir="rtl"] & {
- right: 40px;
- left: initial;
- }
}
.chat-root {
@@ -128,11 +169,6 @@ body {
background-color: $chat-background;
overflow: hidden;
- .chat-room-invitations {
- padding: 10px;
- background-color: #f2f2f2;
- }
-
.chat-content {
margin: 0;
padding-top: $chat-standard-padding-s;
@@ -224,7 +260,7 @@ body {
padding: 0;
min-width: 48px;
- &.input-more-icon {
+ &.input-more-icon {
svg {
fill: black;
}
@@ -709,7 +745,7 @@ body {
.room-name-inline {
font-family: "Poppins", sans-serif;
font-weight: 700;
- font-size: 18 * $chat-text-size;
+ font-size: 16 * $chat-text-size;
text-transform: uppercase;
color: var(--v-foreground-color);
text-align: center;
@@ -787,6 +823,50 @@ body {
}
}
+.room-list {
+ .room-list-room {
+ color: white; // Used as selected item background
+ .v-avatar:not(.round) {
+ // Make avatars rounded squares!
+ border-radius: 8px;
+ }
+ .room-list-name,
+ .room-list-new-room {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 117%;
+ letter-spacing: 0.4px;
+ color: #0e252d;
+ }
+ .room-list-new-room {
+ font-weight: 400;
+ }
+ .room-list-new-messages {
+ font-family: "Inter", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 117%;
+ letter-spacing: 0.4px;
+ color: #1d1d1d;
+ padding-left: 13px;
+ position: relative;
+ &::before {
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ left: 0;
+ top: 5px;
+ background: $alert-bg-color;
+ border-radius: 3px;
+ content: " ";
+ }
+ }
+ }
+}
+
.room-info {
background-color: #e8e8e8;
height: 100%;
@@ -1275,11 +1355,11 @@ body {
background-color: var(--v-background-color);
color: var(--v-foreground-color);
overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
.load-earlier {
flex: 1 0 auto;
padding: 20px;
@@ -1297,7 +1377,8 @@ body {
height: 32px !important;
margin-left: -8px !important;
}
- .list-enter-active, .list-leave-active {
+ .list-enter-active,
+ .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
@@ -1310,7 +1391,7 @@ body {
padding: 20px;
display: flex;
flex-direction: column;
- align-items:center;
+ align-items: center;
justify-content: flex-end;
width: 100%;
}
@@ -1372,7 +1453,8 @@ body {
height: 103px !important;
margin: 0 !important;
}
- #btn-play, #btn-pause {
+ #btn-play,
+ #btn-pause {
margin: 26px;
}
.mic-button {
@@ -1385,4 +1467,4 @@ body {
right: 20px;
bottom: 20px;
position: absolute;
-}
\ No newline at end of file
+}
diff --git a/src/assets/icons/ic_circle.vue b/src/assets/icons/ic_circle.vue
new file mode 100644
index 0000000..b496d7b
--- /dev/null
+++ b/src/assets/icons/ic_circle.vue
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_circle_filled.vue b/src/assets/icons/ic_circle_filled.vue
new file mode 100644
index 0000000..71b55f9
--- /dev/null
+++ b/src/assets/icons/ic_circle_filled.vue
@@ -0,0 +1,6 @@
+
+
+
diff --git a/src/assets/icons/ic_download.vue b/src/assets/icons/ic_download.vue
new file mode 100644
index 0000000..6f60666
--- /dev/null
+++ b/src/assets/icons/ic_download.vue
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_info.vue b/src/assets/icons/ic_info.vue
new file mode 100644
index 0000000..8faf129
--- /dev/null
+++ b/src/assets/icons/ic_info.vue
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_link.vue b/src/assets/icons/ic_link.vue
new file mode 100644
index 0000000..525d35f
--- /dev/null
+++ b/src/assets/icons/ic_link.vue
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_member-leave.vue b/src/assets/icons/ic_member-leave.vue
index 766e7fe..4df7a3e 100644
--- a/src/assets/icons/ic_member-leave.vue
+++ b/src/assets/icons/ic_member-leave.vue
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/src/assets/icons/ic_more.vue b/src/assets/icons/ic_more.vue
new file mode 100644
index 0000000..8790d41
--- /dev/null
+++ b/src/assets/icons/ic_more.vue
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_new_room.vue b/src/assets/icons/ic_new_room.vue
new file mode 100644
index 0000000..b52e917
--- /dev/null
+++ b/src/assets/icons/ic_new_room.vue
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/assets/icons/ic_public.vue b/src/assets/icons/ic_public.vue
new file mode 100644
index 0000000..489907b
--- /dev/null
+++ b/src/assets/icons/ic_public.vue
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 77f4bc4..369cc32 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -86,6 +86,7 @@
},
"room": {
"invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",
+ "unseen_messages": "You have no unseen messages | You have 1 unseen message | You have {count} unseen messages",
"members": "no members | 1 member | {count} members",
"leave": "Leave",
"purge_set_room_state": "Setting room state",
@@ -93,6 +94,7 @@
"purge_removing_members": "Removing members ({count} of {total})",
"purge_failed": "Failed to purge room!",
"room_list_invites": "Invites",
+ "room_list_new_messages": "{count} new messages",
"room_list_rooms": "Rooms",
"room_name_required": "Room name is required",
"room_topic_required": "Room description is required"
@@ -172,7 +174,7 @@
"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"
+ "new_room": "New room"
},
"join": {
"title": "Welcome you have been invited to join",
@@ -246,7 +248,8 @@
"user_moderator": "Moderator",
"experimental_features": "Experimental Features",
"voice_mode": "Voice mode",
- "voice_mode_info": "Switches the chat interface to a 'listen and record' mode"
+ "voice_mode_info": "Switches the chat interface to a 'listen and record' mode",
+ "download_chat": "Download chat"
},
"room_info_sheet": {
"this_room": "This room",
diff --git a/src/components/ActionRow.vue b/src/components/ActionRow.vue
index 8ba0907..6382f1e 100644
--- a/src/components/ActionRow.vue
+++ b/src/components/ActionRow.vue
@@ -6,7 +6,7 @@
v-on="$listeners"
>
- {{ icon }}
+ {{ icon }}
{{ text }}
@@ -22,6 +22,12 @@ export default {
return null;
},
},
+ iconSize: {
+ type: Number,
+ default: function() {
+ return 22;
+ }
+ },
text: {
type: String,
default: function () {
diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index f622116..aa43dba 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -24,6 +24,7 @@
color="black"
@click.stop="onBackgroundClick"
class="bottom-sheet-close"
+ v-if="showCloseButton"
>
cancel
@@ -40,6 +41,10 @@ import Hammer from "hammerjs";
export default {
props: {
+ showCloseButton: {
+ type: Boolean,
+ default: true,
+ },
openY: {
type: Number,
default: 0.1,
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 1b7472b..e670675 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -1,9 +1,6 @@
-
- {{ $tc("room.invitations", invitationCount) }}
-
-
+