diff --git a/components/views/chat/message/Message.less b/components/views/chat/message/Message.less
index 0102196318..1fbc232185 100644
--- a/components/views/chat/message/Message.less
+++ b/components/views/chat/message/Message.less
@@ -70,7 +70,7 @@
}
&:hover {
&:extend(.background-semitransparent-light);
- .message-actions {
+ .message-container > .message-actions {
display: flex;
}
}
diff --git a/components/views/chat/message/reply/Item/Item.html b/components/views/chat/message/reply/Item/Item.html
new file mode 100644
index 0000000000..e286707b35
--- /dev/null
+++ b/components/views/chat/message/reply/Item/Item.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/views/chat/message/reply/Item/Item.less b/components/views/chat/message/reply/Item/Item.less
new file mode 100644
index 0000000000..e7f387add0
--- /dev/null
+++ b/components/views/chat/message/reply/Item/Item.less
@@ -0,0 +1,47 @@
+.reply-container {
+ .emoji-reactions {
+ margin-top: 0;
+ margin-left: 3rem;
+ position: relative;
+ }
+ .is-reply {
+ .circle {
+ margin-top: 0.3rem;
+ cursor: pointer;
+ }
+
+ .reply-body {
+ .reply-heading {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+
+ .is-text {
+ margin-left: @light-spacing;
+ font-size: @micro-text-size;
+ &:extend(.font-muted);
+ display: flex;
+ align-items: flex-end;
+ height: 1.2rem;
+ }
+ }
+
+ .reply-content {
+ position: relative;
+ }
+ margin-left: 0.75rem;
+ &:extend(.full-width);
+ }
+ &:extend(.full-width);
+ padding: 0.5rem;
+ display: flex;
+ margin-bottom: 0.25rem;
+ }
+ display: flex;
+ flex-direction: column;
+ &:hover {
+ .message-actions {
+ display: flex;
+ }
+ }
+}
diff --git a/components/views/chat/message/reply/Item/Item.vue b/components/views/chat/message/reply/Item/Item.vue
new file mode 100644
index 0000000000..91b7b1d0f7
--- /dev/null
+++ b/components/views/chat/message/reply/Item/Item.vue
@@ -0,0 +1,84 @@
+
+
+
diff --git a/components/views/chat/message/reply/Reply.html b/components/views/chat/message/reply/Reply.html
index ecf811f00d..62d094e79d 100644
--- a/components/views/chat/message/reply/Reply.html
+++ b/components/views/chat/message/reply/Reply.html
@@ -8,68 +8,20 @@
{{ makeReplyText }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{$t('conversation.collapse')}}
-
-
-
-
- {{$t('conversation.collapse')}}
-
+
diff --git a/components/views/chat/message/reply/Reply.less b/components/views/chat/message/reply/Reply.less
index 33d1d61f2a..698b7bcdb6 100644
--- a/components/views/chat/message/reply/Reply.less
+++ b/components/views/chat/message/reply/Reply.less
@@ -19,48 +19,6 @@
&:extend(.font-secondary);
}
- .reply-container {
- .emoji-reactions {
- margin-top: 0;
- margin-left: 3rem;
- position: relative;
- }
- .is-reply {
- .circle {
- margin-top: 0.3rem;
- cursor: pointer;
- }
-
- .reply-body {
- .reply-heading {
- display: inline-flex;
- flex-direction: row;
- align-items: center;
-
- .is-text {
- margin-left: @light-spacing;
- font-size: @micro-text-size;
- &:extend(.font-muted);
- display: flex;
- align-items: flex-end;
- height: 1.2rem;
- }
- }
-
- .reply-content {
- position: relative;
- }
- margin-left: 0.75rem;
- &:extend(.full-width);
- }
- &:extend(.full-width);
- padding: 0.5rem;
- display: flex;
- margin-bottom: 0.25rem;
- }
- display: flex;
- flex-direction: column;
- }
&:extend(.bordered);
&:extend(.round-corners);
padding: (@light-spacing / 2) @light-spacing;
diff --git a/components/views/chat/message/reply/Reply.vue b/components/views/chat/message/reply/Reply.vue
index cef12954ad..65f9d7499b 100644
--- a/components/views/chat/message/reply/Reply.vue
+++ b/components/views/chat/message/reply/Reply.vue
@@ -4,11 +4,7 @@ import Vue, { PropType } from 'vue'
import { mapState } from 'vuex'
import { PlusSquareIcon, MinusSquareIcon } from 'satellite-lucide-icons'
import { UIMessage, Group } from '~/types/messaging'
-import {
- getUsernameFromState,
- convertTimestampToDate,
- getAddressFromState,
-} from '~/utilities/Messaging'
+import { getUsernameFromState } from '~/utilities/Messaging'
import { toHTML } from '~/libraries/ui/Markdown'
export default Vue.extend({
@@ -38,11 +34,10 @@ export default Vue.extend({
data() {
return {
showReplies: false,
- replyHover: '',
}
},
computed: {
- ...mapState(['chat']),
+ ...mapState(['ui', 'chat']),
setChatReply: {
set(state) {
this.$store.commit('chat/setChatReply', state)
@@ -100,18 +95,6 @@ export default Vue.extend({
markdownToHtml(text: string) {
return toHTML(text, { liveTyping: false })
},
- getUsernameFromReply(reply: any) {
- return getUsernameFromState(reply.from, this.$store.state)
- },
- /**
- * @method mouseOver DocsTODO
- * @description
- * @param replyId
- * @example
- */
- mouseOver(replyId: string) {
- this.$data.replyHover = replyId
- },
/**
* @method emojiReaction DocsTODO
* @description
@@ -130,10 +113,8 @@ export default Vue.extend({
: this.$props.message.to,
})
this.$store.commit('ui/toggleEnhancers', {
- show: true,
- floating: !!this.$device.isMobile,
- position: [e.clientX, e.clientY],
- containerWidth: this.$el.clientWidth,
+ show: !this.ui.enhancers.show,
+ floating: true,
})
},
/**
@@ -161,15 +142,6 @@ export default Vue.extend({
value: this.$data.showReplies,
}
},
- getTimestampFromReply(timestamp: number) {
- return convertTimestampToDate(this.$t('friends.details'), timestamp)
- },
- getAddress(replyFrom: string) {
- if (!replyFrom) {
- return
- }
- return getAddressFromState(replyFrom, this.$store.state)
- },
},
})