From a53555254a711654399836e0f5f052d629bf4380 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sun, 9 Apr 2017 15:53:23 +0200
Subject: Add word-based muting to settings / statuses.

---
 src/components/status/status.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 87fff879..bb026fe1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { filter } from 'lodash'
 
 const Status = {
   props: [
@@ -19,6 +20,9 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    muteWords () {
+      return this.$store.state.config.muteWords
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@@ -35,7 +39,15 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted },
+    muteWordHits () {
+      const statusText = this.status.text.toLowerCase()
+      const hits = filter(this.muteWords, (muteWord) => {
+        return statusText.includes(muteWord.toLowerCase())
+      })
+
+      return hits
+    },
+    muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
     isReply () { return !!this.status.in_reply_to_status_id },
     borderColor () {
       return {
-- 
cgit v1.2.3-70-g09d2


From a675cfbb3ebd9c4c093a4535cc5cd0e672a45500 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 12 Apr 2017 18:25:19 +0300
Subject: Goto-original-arrow button now sets conversation highlight/focus even
 when inline, setting focus now scrolls you to the focused post smoothly. Hide
 the arrow button when not expanded.

---
 src/components/conversation/conversation.js  |  8 +++++++
 src/components/conversation/conversation.vue |  2 +-
 src/components/status/status.js              | 36 +++++++++++++++++++++++++++-
 src/components/status/status.vue             | 12 ++++------
 4 files changed, 49 insertions(+), 9 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 281b0183..fa042d23 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  data() {
+    return {
+      highlight: this.statusoid.id
+    }
+  },
   props: [
     'statusoid',
     'collapsable'
@@ -54,6 +59,9 @@ const conversation = {
       } else {
         return (id === this.statusoid.id)
       }
+    },
+    setHighlight(id) {
+      this.highlight = id
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 726cfb65..8b1e00ac 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
       </div>
     </div>
   </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bb026fe1..b06bc08d 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -11,7 +11,8 @@ const Status = {
     'statusoid',
     'expandable',
     'inConversation',
-    'focused'
+    'focused',
+    'highlight'
   ],
   data: () => ({
     replying: false,
@@ -53,6 +54,15 @@ const Status = {
       return {
         borderBottomColor: this.$store.state.config.colors['base02']
       }
+    },
+    isFocused () {
+      // retweet or root of an expanded conversation
+      if(this.focused)
+        return true
+      // use conversation highlight only when in conversation
+      else if(!this.inConversation)
+        return false
+      return this.highlight == this.status.id
     }
   },
   components: {
@@ -75,6 +85,10 @@ const Status = {
     toggleReplying () {
       this.replying = !this.replying
     },
+    gotoOriginal () {
+      // only handled by conversation, not status_or_conversation
+      this.$emit('goto', this.status.in_reply_to_status_id)
+    },
     toggleExpanded () {
       this.$emit('toggleExpanded')
     },
@@ -84,6 +98,26 @@ const Status = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     }
+  },
+  watch: {
+    'highlight': function (newfocus) {
+      if(this.status.id == newfocus) {
+        let rect = this.$el.getBoundingClientRect()
+        if(rect.top < 100)
+          window.scrollBy({
+            left: 0,
+            top: rect.top - 200,
+            behavior: 'smooth'
+          })
+        // will be useful when scrolling down to replies or root posts is in
+        else if(rect.bottom > window.innerHeight - 100)
+          window.scrollBy({
+            left: 0,
+            top: rect.bottom + 200,
+            behavior: 'smooth'
+          })
+      }
+    }
   }
 }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b471888a..db33a200 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': focused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -35,12 +35,10 @@
                   {{status.in_reply_to_screen_name}}
                 </router-link>
               </small>
-              <template v-if="isReply">
-                  <small>
-                      <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
-                          <i class="icon-reply"></i>
-                      </router-link>
-                  </small>
+              <template v-if="isReply && !expandable">
+                <small>
+                  <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                </small>
               </template>
               -
               <small>
-- 
cgit v1.2.3-70-g09d2


From 3f477986cfe3dcf0077f45c263b152d0b96cb0f0 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 12 Apr 2017 18:47:47 +0300
Subject: Removed smooth scrolling, does not work in other browsers than FF

---
 src/components/status/status.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index b06bc08d..11e4430f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -104,18 +104,10 @@ const Status = {
       if(this.status.id == newfocus) {
         let rect = this.$el.getBoundingClientRect()
         if(rect.top < 100)
-          window.scrollBy({
-            left: 0,
-            top: rect.top - 200,
-            behavior: 'smooth'
-          })
+          window.scrollBy(0, rect.top - 200)
         // will be useful when scrolling down to replies or root posts is in
         else if(rect.bottom > window.innerHeight - 100)
-          window.scrollBy({
-            left: 0,
-            top: rect.bottom + 200,
-            behavior: 'smooth'
-          })
+          window.scrollBy(0, rect.bottom + 200)
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From c9891703219607c19069ff26a4956a7636e5ab3a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 12 Apr 2017 19:07:55 +0300
Subject: lint fixes

---
 src/components/conversation/conversation.js |  6 +++---
 src/components/status/status.js             | 21 ++++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index fa042d23..f3aeb216 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -8,7 +8,7 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
-  data() {
+  data () {
     return {
       highlight: this.statusoid.id
     }
@@ -60,8 +60,8 @@ const conversation = {
         return (id === this.statusoid.id)
       }
     },
-    setHighlight(id) {
-      this.highlight = id
+    setHighlight (id) {
+      this.highlight = Number(id)
     }
   }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 11e4430f..82de0fd2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -57,12 +57,13 @@ const Status = {
     },
     isFocused () {
       // retweet or root of an expanded conversation
-      if(this.focused)
+      if (this.focused) {
         return true
-      // use conversation highlight only when in conversation
-      else if(!this.inConversation)
+      } else if (!this.inConversation) {
         return false
-      return this.highlight == this.status.id
+      }
+      // use conversation highlight only when in conversation
+      return this.status.id === this.highlight
     }
   },
   components: {
@@ -100,14 +101,16 @@ const Status = {
     }
   },
   watch: {
-    'highlight': function (newfocus) {
-      if(this.status.id == newfocus) {
+    'highlight': function (id) {
+      id = Number(id)
+      if (this.status.id === id) {
         let rect = this.$el.getBoundingClientRect()
-        if(rect.top < 100)
+        if (rect.top < 100) {
           window.scrollBy(0, rect.top - 200)
-        // will be useful when scrolling down to replies or root posts is in
-        else if(rect.bottom > window.innerHeight - 100)
+        } else if(rect.bottom > window.innerHeight - 100) {
+          // will be useful when scrolling down to replies or root posts is in
           window.scrollBy(0, rect.bottom + 200)
+        }
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From d8a01454dc4c0613fc2310beea6c9a82da8e679f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 12 Apr 2017 19:10:38 +0300
Subject: another lint fix

---
 src/components/status/status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 82de0fd2..5e7bde53 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -107,7 +107,7 @@ const Status = {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           window.scrollBy(0, rect.top - 200)
-        } else if(rect.bottom > window.innerHeight - 100) {
+        } else if (rect.bottom > window.innerHeight - 100) {
           // will be useful when scrolling down to replies or root posts is in
           window.scrollBy(0, rect.bottom + 200)
         }
-- 
cgit v1.2.3-70-g09d2


From 5ad4d043e7514a26a395cf72215a74362c4ca2e0 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 31 May 2017 11:47:18 +0300
Subject: Enable reply/rt/fav for mention notifications by using a barebones
 status in place of plain notification content.

---
 src/components/notifications/notifications.js   |  5 +++++
 src/components/notifications/notifications.scss |  4 ++--
 src/components/notifications/notifications.vue  | 20 ++++++++++----------
 src/components/status/status.js                 |  3 ++-
 src/components/status/status.vue                | 17 ++++++++++++++++-
 5 files changed, 35 insertions(+), 14 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8d5e212..c0c86c68 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,3 +1,5 @@
+import Status from '../status/status.vue'
+
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
@@ -23,6 +25,9 @@ const Notifications = {
       return this.unseenNotifications.length
     }
   },
+  components: {
+    Status
+  },
   watch: {
     unseenCount (count) {
       if (count > 0) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5619c2d8..f02ced8d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -45,11 +45,11 @@
       word-wrap: break-word;
       line-height:18px;
 
-      .icon-retweet {
+      .icon-retweet.lit {
         color: $green;
       }
 
-      .icon-reply {
+      .icon-reply.lit {
         color: $blue;
       }
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 9d9028ad..256d6f7a 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -11,30 +11,30 @@
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>
-          <div class='text'>
+          <div class='text' style="width: 100%;">
             <div v-if="notification.type === 'favorite'">
               <h1>
                 {{ notification.action.user.name }}
                 <i class="fa icon-star"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <p>{{ notification.status.text }}</p>
+            <div v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'repeat'">
               <h1>
                 {{ notification.action.user.name }}
-                <i class="fa icon-retweet"></i>
+                <i class="fa icon-retweet lit"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <p>{{ notification.status.text }}</p>
+            <div v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'mention'">
-                <h1>
-                  {{ notification.action.user.name }}
-                  <i class="fa icon-reply"></i>
-                  <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-                </h1>
-              <p>{{ notification.status.text }}</p>
+              <h1>
+                {{ notification.action.user.name }}
+                <i class="fa icon-reply lit"></i>
+                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+              </h1>
+              <status :compact="true" :statusoid="notification.status"></status>
             </div>
           </div>
         </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5e7bde53..183838a8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -12,7 +12,8 @@ const Status = {
     'expandable',
     'inConversation',
     'focused',
-    'highlight'
+    'highlight',
+    'compact'
   ],
   data: () => ({
     replying: false,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index db33a200..e06fc29a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,20 @@
 <template>
-  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background" v-if="compact">
+    <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
+    <div v-if="loggedIn">
+      <div class='status-actions'>
+        <div>
+          <a href="#" v-on:click.prevent="toggleReplying">
+            <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+          </a>
+        </div>
+        <retweet-button :status=status></retweet-button>
+        <favorite-button :status=status></favorite-button>
+      </div>
+    </div>
+    <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
+  </div>
+  <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
-- 
cgit v1.2.3-70-g09d2


From 4fabeda3ecbd0f194f3951a2394849de504b1a89 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Sun, 4 Jun 2017 23:58:15 +0300
Subject: Add list of replies under the name/links in conversation statuses,
 clicking them will highlight the statuses and scroll you to them, expanding a
 status will scroll you to that status once the conversation has opened.

---
 src/components/conversation/conversation.js  | 24 ++++++++++++++++++++----
 src/components/conversation/conversation.vue |  2 +-
 src/components/status/status.js              | 14 ++++++++------
 src/components/status/status.vue             | 11 ++++++++++-
 4 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index e89fa84f..b4bd6296 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -10,7 +10,8 @@ const sortAndFilterConversation = (conversation) => {
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      statuses: []
     }
   },
   props: [
@@ -27,8 +28,8 @@ const conversation = {
       const conversationId = this.status.statusnet_conversation_id
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
-
-      return sortAndFilterConversation(conversation)
+      this.statuses = sortAndFilterConversation(conversation)
+      return this.statuses
     }
   },
   components: {
@@ -46,6 +47,7 @@ const conversation = {
         const conversationId = this.status.statusnet_conversation_id
         this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+          .then(() => this.setHighlight(this.statusoid.id))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -53,7 +55,21 @@ const conversation = {
           .then(() => this.fetchConversation())
       }
     },
-    focused: function (id) {
+    getReplies (id) {
+      let res = []
+      id = Number(id)
+      let i
+      for (i = 0; i < this.statuses.length; i++) {
+        if (Number(this.statuses[i].in_reply_to_status_id) === id) {
+          res.push({
+            name: `#${i}`,
+            id: this.statuses[i].id
+          })
+        }
+      }
+      return res
+    },
+    focused (id) {
       if (this.statusoid.retweeted_status) {
         return (id === this.statusoid.retweeted_status.id)
       } else {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8b1e00ac..96e8a5d7 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
       </div>
     </div>
   </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 183838a8..7b8f304b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -13,7 +13,8 @@ const Status = {
     'inConversation',
     'focused',
     'highlight',
-    'compact'
+    'compact',
+    'replies'
   ],
   data: () => ({
     replying: false,
@@ -87,12 +88,14 @@ const Status = {
     toggleReplying () {
       this.replying = !this.replying
     },
-    gotoOriginal () {
+    gotoOriginal (id) {
       // only handled by conversation, not status_or_conversation
-      this.$emit('goto', this.status.in_reply_to_status_id)
+      //this.$emit('goto', this.status.in_reply_to_status_id)
+      this.$emit('goto', id)
     },
     toggleExpanded () {
       this.$emit('toggleExpanded')
+      //console.log(this.replies)
     },
     toggleMute () {
       this.unmuted = !this.unmuted
@@ -108,9 +111,8 @@ const Status = {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           window.scrollBy(0, rect.top - 200)
-        } else if (rect.bottom > window.innerHeight - 100) {
-          // will be useful when scrolling down to replies or root posts is in
-          window.scrollBy(0, rect.bottom + 200)
+        } else if (rect.bottom > window.innerHeight - 50) {
+          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
     }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cf84d177..5d2c0c30 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -56,7 +56,7 @@
                   </small>
                   <template v-if="isReply && !expandable">
                     <small>
-                      <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
                     </small>
                   </template>
                   -
@@ -67,6 +67,12 @@
                   </small>
                   </h4>
                 </div>
+                <h4 class="replies" v-if="inConversation">
+                  <small v-if="replies.length">Replies:</small>
+                  <small v-for="reply in replies">
+                    <a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
+                  </small>
+                </h4>
               </div>
               <div class="heading-icons">
                 <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
@@ -159,6 +165,9 @@
          display: flex;
          flex-wrap: wrap;
        }
+       .replies {
+         flex-basis: 80%;
+       }
      }
 
      .source_url {
-- 
cgit v1.2.3-70-g09d2


From 12000536aaf1d0139affff24a232860bd4a149d2 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 5 Jun 2017 00:02:14 +0300
Subject: remove commented lines, make linter happy

---
 src/components/status/status.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 7b8f304b..9448b64b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -90,12 +90,10 @@ const Status = {
     },
     gotoOriginal (id) {
       // only handled by conversation, not status_or_conversation
-      //this.$emit('goto', this.status.in_reply_to_status_id)
       this.$emit('goto', id)
     },
     toggleExpanded () {
       this.$emit('toggleExpanded')
-      //console.log(this.replies)
     },
     toggleMute () {
       this.unmuted = !this.unmuted
-- 
cgit v1.2.3-70-g09d2


From f915ae174d3454ade20b9f6c827ce84b04ad7089 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 7 Jun 2017 17:58:24 +0300
Subject: 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(-)

(limited to 'src/components/status/status.js')

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 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" @preview="setPreview"  :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+      </div>
+    </div>
+    <div class="status-preview base00-background base03-border" :style="{ left: preview.x + 'px', top: preview.y + 'px'}" v-if="preview.status">
+      <img class="avatar" :src="preview.status.user.profile_image_url_original">
+      <div class="text">
+        <h4>
+          {{ preview.status.user.name }}
+          <small><a>{{ preview.status.user.screen_name}}</a></small>
+        </h4>
+        <div @click.prevent="linkClicked" class="status-content" v-html="preview.status.statusnet_html"></div>
       </div>
     </div>
   </div>
@@ -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;
+    }
+  }
 </style>
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 @@
                 <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
                 <label for="autoLoad">Enable automatic loading when scrolled to the bottom</label>
             </li>
+            <li>
+                <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+                <label for="hoverPreview">Enable reply-link preview on mouse hover</label>
+            </li>
         </ul>
       </div>
     </div>
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 @@
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a>
       </div>
     </template>
     <template v-if="!muted">
@@ -56,7 +56,7 @@
                   </small>
                   <template v-if="isReply && !expandable">
                     <small>
-                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
+                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"><i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i></a>
                     </small>
                   </template>
                   -
@@ -70,7 +70,7 @@
                 <h4 class="replies" v-if="inConversation">
                   <small v-if="replies.length">Replies:</small>
                   <small v-for="reply in replies">
-                    <a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
+                    <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}&nbsp;</a>
                   </small>
                 </h4>
               </div>
@@ -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: []
 }
 
-- 
cgit v1.2.3-70-g09d2


From dcd7d52eb57e52474fa579b5338e2a4ca3e52784 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 7 Jun 2017 18:13:24 +0300
Subject: lint fix

---
 src/components/conversation/conversation.js | 2 +-
 src/components/status/status.js             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/status/status.js')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index c91e4fde..b781e40c 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -14,7 +14,7 @@ const conversation = {
       preview: {
         x: 0,
         y: 0,
-        status
+        status: null
       }
     }
   },
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 99dc1b95..4f5093e1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -104,7 +104,7 @@ const Status = {
     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);
+        this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset)
       }
     },
     replyLeave () {
-- 
cgit v1.2.3-70-g09d2