From 800568002eca40c3fc86bd7a3a491bc144bee750 Mon Sep 17 00:00:00 2001 From: "tenzin.samten" Date: Sat, 3 Jul 2021 11:57:01 +0530 Subject: [PATCH 1/9] 1. replace word group with room --- package-lock.json | 1 - src/assets/translations/en.json | 12 ++++++------ src/components/RoomInfoBottomSheet.vue | 4 ++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index d8e3601..1bdb07d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "requires": true, "packages": { "": { - "name": "keanuapp-weblite", "version": "0.1.13", "dependencies": { "aes-js": "^3.1.2", diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 81074f8..8887c1e 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -76,11 +76,11 @@ "new_room": "New Room", "create": "Create", "next": "Next", - "name_room": "Name group", + "name_room": "Name room", "room_topic": "Add a description if you like", "join_permissions": "Join permissions", "set_join_permissions": "Set Join Permissions", - "join_permissions_info": "These permissions determine how people can join the group and how easily others can be invited. They can be changed anytime.", + "join_permissions_info": "These permissions determine how people can join the room and how easily others can be invited. They can be changed anytime.", "get_link": "Get link", "add_people": "Add people", "link_copied": "Link copied!", @@ -147,9 +147,9 @@ "leave": { "title_public": "Goodbye, {user}", "text_public": "You can always join this room again if you know the link.", - "text_public_lastroom": "If you want to join this group again, you can join under a new identity. To keep {user}, {action}.", + "text_public_lastroom": "If you want to join this room again, you can join under a new identity. To keep {user}, {action}.", "title_invite": "Are you sure you want to leave?", - "text_invite": "This group is locked. You cannot rejoin without a special permission.", + "text_invite": "This room is locked. You cannot rejoin without a special permission.", "create_account": "create an account", "go_back": "Go back", "leave": "Leave" @@ -177,7 +177,7 @@ "version_info": "Powered by Guardian Project. Version: {version}" }, "room_info_sheet": { - "this_room": "This group", + "this_room": "This room", "view_details": "View details" }, "voice_recorder": { @@ -200,4 +200,4 @@ "original_text": "", "download_name": "Download" } -} \ No newline at end of file +} diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue index d6bbec0..29184e8 100644 --- a/src/components/RoomInfoBottomSheet.vue +++ b/src/components/RoomInfoBottomSheet.vue @@ -21,7 +21,7 @@ >{{$t('room_info_sheet.view_details')}} - + @@ -63,4 +63,4 @@ export default { \ No newline at end of file + From fe2543128433fb4ada8ffce7b2fe1c117ef6aa7a Mon Sep 17 00:00:00 2001 From: N-Pex Date: Sun, 18 Jul 2021 22:57:31 +0200 Subject: [PATCH 2/9] Styling of login and profile views. Work on issue #128. --- src/App.vue | 6 +- src/assets/icons/edit.vue | 14 +++++ src/assets/icons/globe.vue | 14 +++++ src/assets/icons/password.vue | 45 ++++++++++++++ src/assets/icons/user.vue | 15 +++++ src/assets/translations/en.json | 6 +- src/components/Login.vue | 101 ++++++++++++++++++++------------ src/components/Profile.vue | 12 ++-- src/plugins/vuetify.js | 19 ++++++ 9 files changed, 183 insertions(+), 49 deletions(-) create mode 100644 src/assets/icons/edit.vue create mode 100644 src/assets/icons/globe.vue create mode 100644 src/assets/icons/password.vue create mode 100644 src/assets/icons/user.vue diff --git a/src/App.vue b/src/App.vue index 6fe1f74..80efa91 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,11 @@ fluid fill-height style=" - position: absolute; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: 20; background-color: rgba(255, 255, 255, 1); " diff --git a/src/assets/icons/edit.vue b/src/assets/icons/edit.vue new file mode 100644 index 0000000..29e25fe --- /dev/null +++ b/src/assets/icons/edit.vue @@ -0,0 +1,14 @@ + diff --git a/src/assets/icons/globe.vue b/src/assets/icons/globe.vue new file mode 100644 index 0000000..94cdc07 --- /dev/null +++ b/src/assets/icons/globe.vue @@ -0,0 +1,14 @@ + diff --git a/src/assets/icons/password.vue b/src/assets/icons/password.vue new file mode 100644 index 0000000..a223221 --- /dev/null +++ b/src/assets/icons/password.vue @@ -0,0 +1,45 @@ + diff --git a/src/assets/icons/user.vue b/src/assets/icons/user.vue new file mode 100644 index 0000000..0b249bb --- /dev/null +++ b/src/assets/icons/user.vue @@ -0,0 +1,15 @@ + diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 93512d8..94fa0a8 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -103,8 +103,8 @@ }, "login": { "title": "Login", - "username": "Username", - "password": "Password", + "username": "Username (ex: marta)", + "password": "Enter Password", "username_required": "Username is required", "password_required": "Password is required", "login": "Login" @@ -134,7 +134,7 @@ "join": { "title": "Welcome to {roomName}", "user_name_label": "User name", - "shared_computer": "Using a shared computer", + "shared_computer": "This is a shared device", "joining_as": "You are joining as:", "join": "Join room", "join_guest": "Join as guest", diff --git a/src/components/Login.vue b/src/components/Login.vue index a63ddec..698413f 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -4,34 +4,34 @@ - + -
{{ $t("login.title") }}
+
{{ $t("login.title") }}
 - - close - + + close + - -
- {{$t('login.login')}} + + {{ $t("login.login") }}
@@ -92,11 +100,25 @@ export default { }, showCloseButton() { return this.$navigation && this.$navigation.canPop(); - } + }, + sharedComputer: { + get: function () { + return !this.$store.state.useLocalStorage; + }, + set: function (sharedComputer) { + this.$store.commit("setUseLocalStorage", !sharedComputer); + }, + }, }, created() { if (this.loggedIn) { - this.$navigation.push({name: "Chat", params: { roomId: util.sanitizeRoomId(this.$matrix.currentRoomId) }}, -1); + this.$navigation.push( + { + name: "Chat", + params: { roomId: util.sanitizeRoomId(this.$matrix.currentRoomId) }, + }, + -1 + ); } }, watch: { @@ -109,18 +131,12 @@ export default { deep: true, }, message() { - if ( - this.message && - this.message.toLowerCase().includes("user") - ) { + if (this.message && this.message.toLowerCase().includes("user")) { this.userErrorMessage = this.message; } else { this.userErrorMessage = null; } - if ( - this.message && - this.message.toLowerCase().includes("pass") - ) { + if (this.message && this.message.toLowerCase().includes("pass")) { this.passErrorMessage = this.message; } else { this.passErrorMessage = null; @@ -130,9 +146,8 @@ export default { methods: { handleLogin() { if (this.user.user_id && this.user.password) { - - // Reset errors - this.message = null; + // Reset errors + this.message = null; // Is it a full matrix user id? Modify a copy, so that the UI will still show the full ID. var user = Object.assign({}, this.user); @@ -142,9 +157,17 @@ export default { this.$store.dispatch("login", user).then( () => { if (this.$matrix.currentRoomId) { - this.$navigation.push({name: "Chat", params: { roomId: util.sanitizeRoomId(this.$matrix.currentRoomId) }}, -1); + this.$navigation.push( + { + name: "Chat", + params: { + roomId: util.sanitizeRoomId(this.$matrix.currentRoomId), + }, + }, + -1 + ); } else { - this.$navigation.push({name: "Home"}, -1); + this.$navigation.push({ name: "Home" }, -1); } }, (error) => { diff --git a/src/components/Profile.vue b/src/components/Profile.vue index 3d7fe06..b0887f3 100644 --- a/src/components/Profile.vue +++ b/src/components/Profile.vue @@ -2,7 +2,7 @@
-
{{ $t("profile.title") }}
+
{{ $t("profile.title") }}
{{ displayName }}
{{ $matrix.currentUser.user_id }}
-
+ {{ $t("menu.logout") }} @@ -51,7 +51,7 @@ diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index ec41343..96f47f7 100644 --- a/src/plugins/vuetify.js +++ b/src/plugins/vuetify.js @@ -1,10 +1,29 @@ import Vue from 'vue'; import Vuetify from 'vuetify/lib'; +import icUser from '@/assets/icons/user.vue'; +import icPassword from '@/assets/icons/password.vue'; +import icEdit from '@/assets/icons/edit.vue'; +import icGlobe from '@/assets/icons/globe.vue'; Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: 'md', + values: { + user: { + component: icUser + }, + password: { + component: icPassword + }, + edit: { + component: icEdit + }, + globe: { + component: icGlobe + }, + }, + user: icUser }, }); From 17637930fa1072395f6fa558b5a82884e13e1070 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Sun, 18 Jul 2021 23:00:13 +0200 Subject: [PATCH 3/9] Fix login view margins --- src/components/Login.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Login.vue b/src/components/Login.vue index 698413f..48681f9 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -59,7 +59,7 @@ } " > - + {{ $t("login.login") }} From d0f929a03ccca902dc599c8bb7d6ed58bd249bf6 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 19 Jul 2021 09:21:40 +0200 Subject: [PATCH 4/9] Make "shared computer" a checkbox instead of switch --- src/components/CreateRoom.vue | 7 ++----- src/components/Join.vue | 5 +---- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue index 97edf25..9d5d2dd 100644 --- a/src/components/CreateRoom.vue +++ b/src/components/CreateRoom.vue @@ -2,7 +2,7 @@
-
{{ $t("new_room.new_room") }}
+
{{ $t("new_room.new_room") }}
{{ data.item.name }}
- + diff --git a/src/components/Join.vue b/src/components/Join.vue index e11557f..f79a590 100644 --- a/src/components/Join.vue +++ b/src/components/Join.vue @@ -62,10 +62,7 @@
{{ data.item.name }}
- + From 87a80966945bbe9f4867c9e2883d1cd5fc90efce Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 19 Jul 2021 09:45:34 +0200 Subject: [PATCH 5/9] Show invites in room list Also, sort lists on name. --- src/assets/translations/en.json | 2 + src/components/Login.vue | 6 +-- src/components/RoomList.vue | 92 +++++++++++++++++++-------------- 3 files changed, 57 insertions(+), 43 deletions(-) diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json index 94fa0a8..ffadd65 100644 --- a/src/assets/translations/en.json +++ b/src/assets/translations/en.json @@ -15,6 +15,8 @@ "logout": "Logout", "new_room": "New Room", "undo": "Undo", + "join": "Join", + "ignore": "Ignore", "loading": "Loading {appName}" }, "message": { diff --git a/src/components/Login.vue b/src/components/Login.vue index 48681f9..36cdcfd 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -62,12 +62,12 @@ {{ $t("login.login") }} diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue index 4db9152..53bd481 100644 --- a/src/components/RoomList.vue +++ b/src/components/RoomList.vue @@ -1,40 +1,5 @@ From 3d3970b2eeedea37b062d8f3d7c1482510a410d1 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 19 Jul 2021 09:57:26 +0200 Subject: [PATCH 8/9] Update package-lock.json --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 1bdb07d..d8e3601 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "keanuapp-weblite", "version": "0.1.13", "dependencies": { "aes-js": "^3.1.2", From 93ae0728d5b8dfa731bbcc00d8814fae1c70b44f Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 19 Jul 2021 10:33:25 +0200 Subject: [PATCH 9/9] Fix message operations popup styling Issue #65. --- src/assets/css/chat.scss | 8 +++--- src/components/Chat.vue | 54 +++++++++++++++++++++++++--------------- 2 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 44ed99b..8af58d5 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -525,9 +525,9 @@ $admin-fg: white; position: absolute; width: fit-content; background-color: white; - height: 45px; - border-radius: 20px; - box-shadow: 4px 4px 8px #888888; + height: 44px; + border-radius: 22px; + box-shadow: 4px 4px 8px rgba(0,0,0,0.15); // &.incoming { // right: 30%; // } @@ -544,7 +544,7 @@ $admin-fg: white; height: 40px; border-radius: 20px; padding: 0px 20px; - box-shadow: 4px 4px 8px #888888; + box-shadow: 4px 4px 8px rgba(0,0,0,0.15); } .message-operations-picker { diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 4d21986..b429527 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -20,7 +20,7 @@ showContextMenu = false; showContextMenuAnchor = null; " - v-if="selectedEvent && showContextMenu" + v-if="showMessageOperations" v-on:addreaction="addReaction" v-on:addquickreaction="addQuickReaction" v-on:addreply="addReply(selectedEvent)" @@ -609,6 +609,9 @@ export default { /** An array of recent emojis. Used in the "message operations" popup. */ recentEmojis: [], + + /** Calculated style for message operations. We position the "popup" at the selected message. */ + opStyle: "", }; }, @@ -690,25 +693,8 @@ export default { return ""; } }, - opStyle() { - // Calculate where to show the context menu. - // - const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()]; - var top = 0; - var left = 0; - if (ref && ref[0]) { - if (this.showContextMenuAnchor) { - var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect(); - var rectChat = - this.$refs.messageOperationsStrut.getBoundingClientRect(); - top = rectAnchor.top - rectChat.top; - left = rectAnchor.left - rectChat.left; - if (left + 250 > rectChat.right) { - left = rectChat.right - 250; // Pretty ugly, but we want to make sure it does not escape the screen, and we don't have the exakt width of it (yet)! - } - } - } - return "top:" + top + "px;left:" + left + "px"; + showMessageOperations() { + return this.selectedEvent && this.showContextMenu; }, avatarOpStyle() { // Calculate where to show the context menu. @@ -783,6 +769,34 @@ export default { } }, }, + showMessageOperations() { + if (this.showMessageOperations) { + this.$nextTick(() => { + // Calculate where to show the context menu. + // + const ref = + this.selectedEvent && this.$refs[this.selectedEvent.getId()]; + var top = 0; + var left = 0; + if (ref && ref[0]) { + if (this.showContextMenuAnchor) { + var rectAnchor = + this.showContextMenuAnchor.getBoundingClientRect(); + var rectChat = + this.$refs.messageOperationsStrut.getBoundingClientRect(); + var rectOps = + this.$refs.messageOperations.$el.getBoundingClientRect(); + top = rectAnchor.top - rectChat.top; + left = rectAnchor.left - rectChat.left; + if (left + rectOps.width >= rectChat.right) { + left = rectChat.right - rectOps.width - 10; // No overflow + } + } + } + this.opStyle = "top:" + top + "px;left:" + left + "px"; + }); + } + }, }, methods: {