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 @@
+
+
+
@@ -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 @@
@@ -56,7 +56,7 @@
-
+
-
@@ -70,7 +70,7 @@
@@ -178,10 +178,6 @@
margin-right: -0.3em;
}
- .greentext {
- color: green;
- }
-
a {
display: inline-block;
word-break: break-all;
@@ -222,6 +218,10 @@
}
}
+ .greentext {
+ color: green;
+ }
+
.status-conversation {
border-left-style: solid;
}
@@ -278,7 +278,7 @@
}
.muted {
- padding: 0.1em 0.7em 0.1em 0.8em;
+ padding: 0.1em 0.4em 0.1em 0.8em;
button {
margin-left: auto;
}
diff --git a/src/main.js b/src/main.js
index 351149f1..e5ecf228 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,6 +34,7 @@ const persistedStateOptions = {
'config.hideAttachmentsInConv',
'config.hideNsfw',
'config.autoLoad',
+ 'config.hoverPreview',
'config.muteWords',
'statuses.notifications',
'users.users'
diff --git a/src/modules/config.js b/src/modules/config.js
index c9152ecc..f7d6e9c8 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -8,6 +8,7 @@ const defaultState = {
hideAttachmentsInConv: false,
hideNsfw: true,
autoLoad: true,
+ hoverPreview: true,
muteWords: []
}