From 498364e6b2e32b1d8ad09c7a3656113797ec4bfe Mon Sep 17 00:00:00 2001 From: Mauro Molinari Date: Mon, 6 Dec 2021 09:57:59 +0100 Subject: [PATCH 1/3] fix(chatbar): replies style and focus on reply --- components/tailored/core/chatbar/Chatbar.html | 4 +- components/tailored/core/chatbar/Chatbar.vue | 51 +++++++++++++++---- layouts/chat.vue | 6 +-- plugins/thirdparty/persist.ts | 8 ++- 4 files changed, 49 insertions(+), 20 deletions(-) diff --git a/components/tailored/core/chatbar/Chatbar.html b/components/tailored/core/chatbar/Chatbar.html index 008d5cdeea..f2da199d42 100644 --- a/components/tailored/core/chatbar/Chatbar.html +++ b/components/tailored/core/chatbar/Chatbar.html @@ -1,4 +1,4 @@ -
+
@@ -10,7 +10,7 @@ >
-
, }, }, + directives: { + focus: { + update(el, { value, oldValue }) { + if (!oldValue.from && value.from) { + el.focus() + } + }, + }, + }, computed: { ...mapState(['ui', 'friends']), activeFriend() { @@ -122,16 +132,27 @@ export default Vue.extend({ }, }, methods: { + /** + * @method handleChatBorderRadius + * @description Sets the correct chatbar border radius while typing or when switching between friends + * @example + */ + handleChatBorderRadius() { + const wrap = this.$refs.wrap as HTMLElement + if (wrap.offsetHeight > 50 || this.ui.replyChatbarContent.id) + wrap.style.borderRadius = '4px' + else wrap.style.borderRadius = '41px' + }, /** * @method typingNotifHandler * @description Wraps the event handler for dispatching typing notifications * TODO: Right now this is hard coded to the WebRTC Data method, in the future this should be * agnostic and the method should be passed to chatbar so we can support group, and direct messages. */ - typingNotifHandler( - state: 'TYPING' | 'NOT_TYPING', - ) { - const activeFriend = this.$Hounddog.getActiveFriend(this.$store.state.friends) + typingNotifHandler(state: 'TYPING' | 'NOT_TYPING') { + const activeFriend = this.$Hounddog.getActiveFriend( + this.$store.state.friends, + ) if (activeFriend) { const activePeer = this.$WebRTC.getPeer(activeFriend.address) activePeer?.send('TYPING_STATE', { state }) @@ -164,7 +185,6 @@ export default Vue.extend({ */ handleInputChange() { const messageBox = this.$refs.messageuser as HTMLElement - const wrap = this.$refs.wrap as HTMLElement // Delete extra character when it exceeds the charlimit if ( messageBox.innerText && @@ -173,8 +193,7 @@ export default Vue.extend({ messageBox.innerText = messageBox.innerText.slice(0, -1) this.updateText() } - if (wrap.offsetHeight > 50) wrap.style.borderRadius = '4px' - if (wrap.offsetHeight < 50) wrap.style.borderRadius = '41px' + this.handleChatBorderRadius() this.value = messageBox.innerText }, /** @@ -298,17 +317,29 @@ export default Vue.extend({ }, }, watch: { - '$store.state.ui.chatbarContent': function () { + 'ui.chatbarContent': function () { this.updateText() }, '$store.state.friends.all': { - handler () { - const activeFriend = this.$Hounddog.getActiveFriend(this.$store.state.friends) + handler() { + const activeFriend = this.$Hounddog.getActiveFriend( + this.$store.state.friends, + ) if (activeFriend) this.$data.recipientTyping = activeFriend.typingState === 'TYPING' }, deep: true, }, + 'ui.replyChatbarContent': function () { + this.handleChatBorderRadius() + }, + recipient: function () { + this.$store.commit('ui/setReplyChatbarContent', { + id: '', + payload: '', + from: '', + }) + }, }, }) diff --git a/layouts/chat.vue b/layouts/chat.vue index b4fca3e54b..46c855e141 100644 --- a/layouts/chat.vue +++ b/layouts/chat.vue @@ -59,7 +59,7 @@ - +
diff --git a/plugins/thirdparty/persist.ts b/plugins/thirdparty/persist.ts index fc055fe45f..f7681c484a 100644 --- a/plugins/thirdparty/persist.ts +++ b/plugins/thirdparty/persist.ts @@ -14,6 +14,7 @@ const mutationsBlacklist = [ 'toggleIncomingCall', 'ui/setMessages', 'ui/sendMessage', + 'ui/setReplyChatbarContent', ] // State properties path to blacklist saving to store @@ -28,16 +29,13 @@ const propertiesBlacklist = [ 'prerequisites', ] -const propertiesBlacklistWhenStorePin = [ - 'friends.all', - 'prerequisites', -] +const propertiesBlacklistWhenStorePin = ['friends.all', 'prerequisites'] export default ({ store }: { store: any }) => { new VuexPersistence({ key: 'Satellite-Store', reducer: (state: any) => { - let blackList = propertiesBlacklist; + let blackList = propertiesBlacklist if (state.accounts.storePin && !state.accounts.locked) { blackList = propertiesBlacklistWhenStorePin } From ec875ee6efcde21891cffc14f6b9aeeea1773a51 Mon Sep 17 00:00:00 2001 From: Mauro Molinari Date: Mon, 6 Dec 2021 17:15:37 +0100 Subject: [PATCH 2/3] chore: focus directive updated --- components/tailored/core/chatbar/Chatbar.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/tailored/core/chatbar/Chatbar.vue b/components/tailored/core/chatbar/Chatbar.vue index 2db7a8208a..574a6c80a2 100644 --- a/components/tailored/core/chatbar/Chatbar.vue +++ b/components/tailored/core/chatbar/Chatbar.vue @@ -16,6 +16,7 @@ import { isArgsValid, } from '~/libraries/ui/Commands' import { Friend } from '~/types/ui/friends' +import { text } from 'stream/consumers' declare module 'vue/types/vue' { interface Vue { @@ -52,7 +53,7 @@ export default Vue.extend({ directives: { focus: { update(el, { value, oldValue }) { - if (!oldValue.from && value.from) { + if (Boolean(value.id)) { el.focus() } }, From 1e867470c2fbe80fd25432e4cde4bf6e4ed9babb Mon Sep 17 00:00:00 2001 From: Mauro Molinari Date: Tue, 7 Dec 2021 15:13:53 +0100 Subject: [PATCH 3/3] fix: empty chatbar content when switching recipient --- components/tailored/core/chatbar/Chatbar.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/tailored/core/chatbar/Chatbar.vue b/components/tailored/core/chatbar/Chatbar.vue index 574a6c80a2..37a3f62921 100644 --- a/components/tailored/core/chatbar/Chatbar.vue +++ b/components/tailored/core/chatbar/Chatbar.vue @@ -53,7 +53,7 @@ export default Vue.extend({ directives: { focus: { update(el, { value, oldValue }) { - if (Boolean(value.id)) { + if (value.id !== oldValue.id) { el.focus() } }, @@ -321,7 +321,7 @@ export default Vue.extend({ 'ui.chatbarContent': function () { this.updateText() }, - '$store.state.friends.all': { + 'friends.all': { handler() { const activeFriend = this.$Hounddog.getActiveFriend( this.$store.state.friends, @@ -335,6 +335,7 @@ export default Vue.extend({ this.handleChatBorderRadius() }, recipient: function () { + this.$store.commit('ui/chatbarContent', '') this.$store.commit('ui/setReplyChatbarContent', { id: '', payload: '',