diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 3e601c3d92..059028f9ec 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,4 @@ -import { filter, sortBy } from 'lodash' +import { find, filter, sortBy } from 'lodash' import { statusType } from '../../modules/statuses.js' import Status from '../status/status.vue' @@ -10,7 +10,12 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null + highlight: null, + preview: { + x: 0, + y: 0, + status: null + } } }, props: [ @@ -76,6 +81,15 @@ const conversation = { }, setHighlight (id) { this.highlight = Number(id) + }, + setPreview (id, x, y) { + if (id) { + this.preview.x = x + this.preview.y = y + this.preview.status = find(this.conversation, { id: id }) + } else { + this.preview.status = null + } } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 96e8a5d781..e8d97f9901 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -8,7 +8,17 @@
- + +
+
+
+ +
+

+ {{ preview.status.user.name }} + {{ preview.status.user.screen_name}} +

+
@@ -21,4 +31,30 @@ border-bottom-style: solid; border-bottom-width: 1px; } + + .status-preview { + position: absolute; + max-width: 35em; + padding: 0.5em; + display: flex; + border-color: inherit; + border-style: solid; + border-width: 1px; + border-radius: 4px; + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); + .avatar { + width: 32px; + height: 32px; + border-radius: 50%; + } + .text { + h4 { + margin-bottom: 0.4em; + small { + font-weight: lighter; + } + } + padding: 0 0.5em 0.5em 0.5em; + } + } diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index cfceedde31..998aa354b6 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -8,6 +8,7 @@ const settings = { hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideNsfwLocal: this.$store.state.config.hideNsfw, autoLoadLocal: this.$store.state.config.autoLoad, + hoverPreviewLocal: this.$store.state.config.hoverPreview, muteWordsString: this.$store.state.config.muteWords.join('\n') } }, @@ -27,6 +28,9 @@ const settings = { autoLoadLocal (value) { this.$store.dispatch('setOption', { name: 'autoLoad', value }) }, + hoverPreviewLocal (value) { + this.$store.dispatch('setOption', { name: 'hoverPreview', value }) + }, muteWordsString (value) { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 3fab1c1ce6..af0242c4a8 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -32,6 +32,10 @@ +
  • + + +
  • diff --git a/src/components/status/status.js b/src/components/status/status.js index 9448b64b10..4f5093e11d 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -100,6 +100,15 @@ const Status = { }, toggleUserExpanded () { this.userExpanded = !this.userExpanded + }, + replyEnter (id, event) { + if (this.$store.state.config.hoverPreview) { + let rect = event.target.getBoundingClientRect() + this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset) + } + }, + replyLeave () { + this.$emit('preview', 0, 0, 0) } }, watch: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index a921c9a6d9..e582a80dc8 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -19,7 +19,7 @@
    {{status.user.screen_name}} {{muteWordHits.join(', ')}} - +