From f915ae174d3454ade20b9f6c827ce84b04ad7089 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 7 Jun 2017 17:58:24 +0300 Subject: [PATCH 1/3] Add floating status-previews on reply-link mouseover in conversations and make them optional in the settings, fix a small visual inconsistency in muted statuses while editing the file already.. --- src/components/conversation/conversation.js | 17 ++++++++- src/components/conversation/conversation.vue | 38 +++++++++++++++++++- src/components/settings/settings.js | 4 +++ src/components/settings/settings.vue | 4 +++ src/components/status/status.js | 9 +++++ src/components/status/status.vue | 16 ++++----- src/main.js | 1 + src/modules/config.js | 1 + 8 files changed, 80 insertions(+), 10 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 3e601c3d..c91e4fde 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -10,7 +10,12 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null + highlight: null, + preview: { + x: 0, + y: 0, + status + } } }, props: [ @@ -76,6 +81,16 @@ 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 = filter(this.conversation, { id: id })[0] + console.log(this.preview.status) + } else { + this.preview.status = null + } } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 96e8a5d7..e8d97f99 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 cfceedde..998aa354 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 3fab1c1c..af0242c4 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 9448b64b..99dc1b95 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 a921c9a6..e582a80d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -19,7 +19,7 @@
    {{status.user.screen_name}} {{muteWordHits.join(', ')}} - +