From 979e170bd6880d0ee85bf0dd8898cf53d91055b5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2019 22:33:15 +0300
Subject: created mergedConfig getter to avoid obnoxious checks for undefined
 everywhere

---
 src/components/status/status.js | 46 +++++++++++++++++------------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index d17ba318..976fd320 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -15,6 +15,7 @@ import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { filter, find, unescape, uniqBy } from 'lodash'
+import { mapGetters } from 'vuex'
 
 const Status = {
   name: 'Status',
@@ -42,20 +43,16 @@ const Status = {
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
-      expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
-        ? !this.$store.state.instance.collapseMessageWithSubject
-        : !this.$store.state.config.collapseMessageWithSubject,
+      expandingSubject: this.$store.getters.mergedConfig.collapseMessageWithSubject,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
     localCollapseSubjectDefault () {
-      return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
-        ? this.$store.state.instance.collapseMessageWithSubject
-        : this.$store.state.config.collapseMessageWithSubject
+      return this.mergedConfig.collapseMessageWithSubject
     },
     muteWords () {
-      return this.$store.state.config.muteWords
+      return this.mergedConfig.muteWords
     },
     repeaterClass () {
       const user = this.statusoid.user
@@ -70,18 +67,18 @@ const Status = {
     },
     repeaterStyle () {
       const user = this.statusoid.user
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
     userStyle () {
       if (this.noHeading) return
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
-      const highlight = this.$store.state.config.highlight
+      const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
     hideAttachments () {
-      return (this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
+      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
     },
     userProfileLink () {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
@@ -120,9 +117,7 @@ const Status = {
     },
     muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
     hideFilteredStatuses () {
-      return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
-        ? this.$store.state.instance.hideFilteredStatuses
-        : this.$store.state.config.hideFilteredStatuses
+      return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
       return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
@@ -163,7 +158,7 @@ const Status = {
       }
     },
     hideReply () {
-      if (this.$store.state.config.replyVisibility === 'all') {
+      if (this.mergedConfig.replyVisibility === 'all') {
         return false
       }
       if (this.inConversation || !this.isReply) {
@@ -175,7 +170,7 @@ const Status = {
       if (this.status.type === 'retweet') {
         return false
       }
-      const checkFollowing = this.$store.state.config.replyVisibility === 'following'
+      const checkFollowing = this.mergedConfig.replyVisibility === 'following'
       for (var i = 0; i < this.status.attentions.length; ++i) {
         if (this.status.user.id === this.status.attentions[i].id) {
           continue
@@ -220,9 +215,7 @@ const Status = {
     replySubject () {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
-      const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
-        ? this.$store.state.instance.subjectLineBehavior
-        : this.$store.state.config.subjectLineBehavior
+      const behavior = this.mergedConfig.subjectLineBehavior
       const startsWithRe = decodedSummary.match(/^re[: ]/i)
       if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
         return decodedSummary
@@ -233,8 +226,8 @@ const Status = {
       }
     },
     attachmentSize () {
-      if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
+      if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
         (this.status.attachments.length > this.maxThumbnails)) {
         return 'hide'
       } else if (this.compact) {
@@ -246,7 +239,7 @@ const Status = {
       if (this.attachmentSize === 'hide') {
         return []
       }
-      return this.$store.state.config.playVideosInModal
+      return this.mergedConfig.playVideosInModal
         ? ['image', 'video']
         : ['image']
     },
@@ -261,7 +254,7 @@ const Status = {
       )
     },
     maxThumbnails () {
-      return this.$store.state.config.maxThumbnails
+      return this.mergedConfig.maxThumbnails
     },
     contentHtml () {
       if (!this.status.summary_html) {
@@ -284,10 +277,9 @@ const Status = {
       return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
     },
     hidePostStats () {
-      return typeof this.$store.state.config.hidePostStats === 'undefined'
-        ? this.$store.state.instance.hidePostStats
-        : this.$store.state.config.hidePostStats
-    }
+      return this.mergedConfig.hidePostStats
+    },
+    ...mapGetters(['mergedConfig'])
   },
   components: {
     Attachment,
-- 
cgit v1.2.3-70-g09d2


From 792eaf5625a70dead992ed8c5b63a73453728ff7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2019 23:57:58 +0300
Subject: fix! i noticed it!!

---
 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 976fd320..fa46debf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -43,7 +43,7 @@ const Status = {
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
-      expandingSubject: this.$store.getters.mergedConfig.collapseMessageWithSubject,
+      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
-- 
cgit v1.2.3-70-g09d2


From 5faafdb428410800b7db9127adf7342894851407 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:46:09 -0400
Subject: use popper for status preview

---
 src/components/status/status.js  |   7 +-
 src/components/status/status.vue | 169 +++++++++++++++++++--------------------
 2 files changed, 85 insertions(+), 91 deletions(-)

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index d17ba318..ae3aacbd 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -38,7 +39,6 @@ const Status = {
       unmuted: false,
       userExpanded: false,
       preview: null,
-      showPreview: false,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -290,6 +290,7 @@ const Status = {
     }
   },
   components: {
+    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
@@ -377,7 +378,6 @@ const Status = {
       }
     },
     replyEnter (id, event) {
-      this.showPreview = true
       const targetId = id
       const statuses = this.$store.state.statuses.allStatuses
 
@@ -394,9 +394,6 @@ const Status = {
         this.preview = find(statuses, { 'id': targetId })
       }
     },
-    replyLeave () {
-      this.showPreview = false
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 912f77d2..d03fe143 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -170,24 +170,30 @@
             </div>
 
             <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
-              >
-                <a
-                  class="reply-to"
-                  href="#"
-                  :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
-                  @mouseleave.prevent.stop="replyLeave()"
-                >
-                  <i
-                    v-if="!isPreview"
-                    class="button-icon icon-reply"
-                  />
-                  <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
-                </a>
+              <div v-if="isReply" class="reply-to-and-accountname">
+                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                  <div class="popper-wrapper status-preview">
+                    <status
+                      v-if="preview"
+                      :isPreview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
+                    <div v-else class="status-preview-loading">
+                      <i class="icon-spin4 animate-spin"></i>
+                    </div>
+                  </div>
+
+                  <a
+                    slot="reference"
+                    class="reply-to"
+                    href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                    :aria-label="$t('tool_tip.reply')"
+                  >
+                    <i class="button-icon icon-reply" v-if="!isPreview"></i>
+                    <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                  </a>
+                </Popper>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -224,25 +230,6 @@
             </div>
           </div>
 
-          <div
-            v-if="showPreview"
-            class="status-preview-container"
-          >
-            <status
-              v-if="preview"
-              class="status-preview"
-              :is-preview="true"
-              :statusoid="preview"
-              :compact="true"
-            />
-            <div
-              v-else
-              class="status-preview status-preview-loading"
-            >
-              <i class="icon-spin4 animate-spin" />
-            </div>
-          </div>
-
           <div
             v-if="longSubject"
             class="status-content-wrapper"
@@ -439,18 +426,6 @@ $status-margin: 0.75em;
   min-width: 0;
 }
 
-.status-preview.status-el {
-  border-style: solid;
-  border-width: 1px;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.status-preview-container {
-  position: relative;
-  max-width: 100%;
-}
-
 .status-pin {
   padding: $status-margin $status-margin 0;
   display: flex;
@@ -458,43 +433,6 @@ $status-margin: 0.75em;
   justify-content: flex-end;
 }
 
-.status-preview {
-  position: absolute;
-  max-width: 95%;
-  display: flex;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
-  margin-top: 0.25em;
-  margin-left: 0.5em;
-  z-index: 50;
-
-  .status {
-    flex: 1;
-    border: 0;
-    min-width: 15em;
-  }
-}
-
-.status-preview-loading {
-  display: block;
-  min-width: 15em;
-  padding: 1em;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-
-  i {
-    font-size: 2em;
-  }
-}
 
 .media-left {
   margin-right: $status-margin;
@@ -600,6 +538,7 @@ $status-margin: 0.75em;
     }
 
     .heading-reply-row {
+      position: relative;
       align-content: baseline;
       font-size: 12px;
       line-height: 18px;
@@ -898,6 +837,64 @@ a.unmute {
   }
 }
 
+.popper-wrapper.status-preview {
+  font-size: 14px;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  > .status-el.status-el {
+    border: none;
+  }
+
+  > .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      top: -2px;
+      left: -7px;
+      border-width: 0 7px 7px 7px;
+      border-color: transparent transparent $fallback--border transparent;
+      border-color: transparent transparent var(--border, $fallback--border) transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    &:before {
+      position: absolute;
+      content: '';
+      bottom: -2px;
+      left: -7px;
+      border-width: 7px 7px 0 7px;
+      border-color: $fallback--border transparent transparent transparent;
+      border-color: var(--border, $fallback--border)  transparent transparent transparent;
+      border-style: solid;
+      z-index: -1;
+    }
+  }
+}
+
 .favs-repeated-users {
   margin-top: $status-margin;
 
-- 
cgit v1.2.3-70-g09d2


From 565d53812b394ed829bcd2e70e48efcc612e5d59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 13:47:55 -0400
Subject: reposition popper after fetching status

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

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index ae3aacbd..641702be 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,6 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
+            this.$nextTick(this.$refs.foo.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {
-- 
cgit v1.2.3-70-g09d2


From 498d7bcb5e029650c964ea241ffa3dc44ff6a79e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 1 Jul 2019 14:03:07 -0400
Subject: use better name

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

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 641702be..d24feccf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -388,7 +388,7 @@ const Status = {
         if (!this.preview) {
           this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
-            this.$nextTick(this.$refs.foo.updatePopper)
+            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
           })
         }
       } else if (this.preview.id !== targetId) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e0515b33..d59e661c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -171,7 +171,7 @@
 
             <div class="heading-reply-row">
               <div v-if="isReply" class="reply-to-and-accountname">
-                <Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
+                <Popper ref="statusPreviewPopper" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
                   <div class="popper-wrapper status-preview">
                     <status
                       v-if="preview"
-- 
cgit v1.2.3-70-g09d2


From 85c897403a0460c4932c70f783c1725d32cff6ac Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 17 Jul 2019 12:50:49 -0400
Subject: migrate Popper to v-popover

---
 src/components/popper/popper.scss |   9 ++-
 src/components/status/status.js   |   2 -
 src/components/status/status.vue  | 116 +++++++++++++++++++-------------------
 3 files changed, 61 insertions(+), 66 deletions(-)

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

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 279b01be..06daa871 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -20,7 +20,6 @@
     margin: 5px;
     border-color: $fallback--bg;
     border-color: var(--bg, $fallback--bg);
-    z-index: 1;
   }
 
   &[x-placement^="top"] {
@@ -31,7 +30,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      bottom: -5px;
+      bottom: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -46,7 +45,7 @@
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-top-color: transparent !important;
-      top: -5px;
+      top: -4px;
       left: calc(50% - 5px);
       margin-top: 0;
       margin-bottom: 0;
@@ -61,7 +60,7 @@
       border-left-color: transparent !important;
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
-      left: -5px;
+      left: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
@@ -76,7 +75,7 @@
       border-top-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      right: -5px;
+      right: -4px;
       top: calc(50% - 5px);
       margin-left: 0;
       margin-right: 0;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d24feccf..36455f2a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,4 +1,3 @@
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -290,7 +289,6 @@ const Status = {
     }
   },
   components: {
-    Popper,
     Attachment,
     FavoriteButton,
     RetweetButton,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 79fbe47d..fd1705a0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,51 +174,47 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <Popper
+                <v-popover
+                  v-if="!isPreview"
                   ref="statusPreviewPopper"
-                  :options="{
-                    placement: 'top-start',
-                    modifiers: {
-                      preventOverflow: { padding: 50, boundariesElement: 'viewport' },
-                    }
-                  }"
+                  popoverClass="status-popover"
+                  placement="top-start"
+                  trigger="hover"
+                  :offset="5"
+                  :container="false"
                   @show="replyEnter(status.in_reply_to_status_id)"
                 >
-                  <div class="popper-wrapper status-preview">
+                  <div slot="popover">
+                    <status
+                      v-if="preview"
+                      :is-preview="true"
+                      :statusoid="preview"
+                      :compact="true"
+                    />
                     <div
-                      class="popper-wrapper-inner"
-                      @mouseover.prevent.stop
-                      @focus.prevent.stop
+                      v-else
+                      class="status-preview-loading"
                     >
-                      <status
-                        v-if="preview"
-                        :is-preview="true"
-                        :statusoid="preview"
-                        :compact="true"
-                      />
-                      <div
-                        v-else
-                        class="status-preview-loading"
-                      >
-                        <i class="icon-spin4 animate-spin" />
-                      </div>
+                      <i class="icon-spin4 animate-spin" />
                     </div>
                   </div>
 
                   <a
-                    slot="reference"
                     class="reply-to"
                     href="#"
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i
-                      v-if="!isPreview"
-                      class="button-icon icon-reply"
-                    />
+                    <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </Popper>
+                </v-popover>
+                <span
+                  v-else
+                  class="reply-to"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -604,6 +600,8 @@ $status-margin: 0.75em;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0 0.4em 0 0.2em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
 
     .replies-separator {
@@ -863,36 +861,23 @@ a.unmute {
   }
 }
 
-.popper-wrapper.status-preview {
-  font-size: 1rem;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: var(--popupShadow);
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
-
-  .status-el.status-el {
-    border: none;
+.tooltip.popover.status-popover {
+  .popover-inner {
+    font-size: 1rem;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--popupShadow);
+    min-width: 15em;
+    max-width: 95%;
+    margin-left: 0.5em;
   }
 
-  .status-preview-loading {
-    padding: 1em;
-    text-align: center;
-
-    i {
-      font-size: 2em;
-    }
-  }
-
-  .popper__arrow::before {
+  .popover-arrow::before {
     position: absolute;
     content: '';
     left: -7px;
@@ -900,19 +885,32 @@ a.unmute {
     z-index: -1;
   }
 
-  &[x-placement^="bottom"] .popper__arrow::before {
+  &[x-placement^="bottom-start"] .popover-arrow::before {
     top: -2px;
     border-top-width: 0;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
   }
 
-  &[x-placement^="top"] .popper__arrow::before {
+  &[x-placement^="top-start"] .popover-arrow::before {
     bottom: -2px;
     border-bottom-width: 0;
     border-top-color: $fallback--border;
     border-top-color: var(--border, $fallback--border);
   }
+
+  .status-el.status-el {
+    border: none;
+  }
+
+  .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
 }
 
 .favs-repeated-users {
-- 
cgit v1.2.3-70-g09d2


From 62b2648a3e124ac34d960219b925a6c3569e2229 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 16:53:36 -0400
Subject: split status preview popover into a separate component

---
 src/components/status/status.js                  | 25 ++-----
 src/components/status/status.vue                 | 82 +---------------------
 src/components/status_popover/status_popover.js  | 43 ++++++++++++
 src/components/status_popover/status_popover.vue | 86 ++++++++++++++++++++++++
 4 files changed, 136 insertions(+), 100 deletions(-)
 create mode 100644 src/components/status_popover/status_popover.js
 create mode 100644 src/components/status_popover/status_popover.vue

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

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 36455f2a..d3b39175 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -10,11 +10,12 @@ import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
+import StatusPopover from '../status_popover/status_popover.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
-import { filter, find, unescape, uniqBy } from 'lodash'
+import { filter, unescape, uniqBy } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -37,7 +38,6 @@ const Status = {
       replying: false,
       unmuted: false,
       userExpanded: false,
-      preview: null,
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
@@ -300,7 +300,8 @@ const Status = {
     Gallery,
     LinkPreview,
     AvatarList,
-    Timeago
+    Timeago,
+    StatusPopover
   },
   methods: {
     visibilityIcon (visibility) {
@@ -375,24 +376,6 @@ const Status = {
         this.expandingSubject = true
       }
     },
-    replyEnter (id, event) {
-      const targetId = id
-      const statuses = this.$store.state.statuses.allStatuses
-
-      if (!this.preview) {
-        // if we have the status somewhere already
-        this.preview = find(statuses, { 'id': targetId })
-        // or if we have to fetch it
-        if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
-            this.preview = status
-            this.$nextTick(this.$refs.statusPreviewPopper.updatePopper)
-          })
-        }
-      } else if (this.preview.id !== targetId) {
-        this.preview = find(statuses, { 'id': targetId })
-      }
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3edee25a..e91dfd28 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -174,33 +174,10 @@
                 v-if="isReply"
                 class="reply-to-and-accountname"
               >
-                <v-popover
+                <StatusPopover
                   v-if="!isPreview"
-                  ref="statusPreviewPopper"
-                  popover-class="status-popover"
-                  placement="top-start"
-                  :popper-options="{
-                    modifiers: {
-                      preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' },
-                    }
-                  }"
-                  @show="replyEnter(status.in_reply_to_status_id)"
+                  :status-id="status.in_reply_to_status_id"
                 >
-                  <div slot="popover">
-                    <status
-                      v-if="preview"
-                      :is-preview="true"
-                      :statusoid="preview"
-                      :compact="true"
-                    />
-                    <div
-                      v-else
-                      class="status-preview-loading"
-                    >
-                      <i class="icon-spin4 animate-spin" />
-                    </div>
-                  </div>
-
                   <a
                     class="reply-to"
                     href="#"
@@ -210,7 +187,7 @@
                     <i class="button-icon icon-reply" />
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
-                </v-popover>
+                </StatusPopover>
                 <span
                   v-else
                   class="reply-to"
@@ -863,59 +840,6 @@ a.unmute {
   }
 }
 
-.tooltip.popover.status-popover {
-  font-size: 1rem;
-  min-width: 15em;
-  max-width: 95%;
-  margin-left: 0.5em;
-
-  .popover-inner {
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: var(--popupShadow);
-  }
-
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
-
-  .status-el.status-el {
-    border: none;
-  }
-
-  .status-preview-loading {
-    padding: 1em;
-    text-align: center;
-
-    i {
-      font-size: 2em;
-    }
-  }
-}
-
 .favs-repeated-users {
   margin-top: $status-margin;
 
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
new file mode 100644
index 00000000..91b64f72
--- /dev/null
+++ b/src/components/status_popover/status_popover.js
@@ -0,0 +1,43 @@
+import { find } from 'lodash'
+
+const StatusPopover = {
+  name: 'StatusPopover',
+  props: [
+    'statusId'
+  ],
+  data () {
+    return {
+      preview: null,
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  components: {
+    Status: () => import('../status/status.vue')
+  },
+  methods: {
+    enter () {
+      const id = this.statusId
+      const statuses = this.$store.state.statuses.allStatuses
+
+      if (!this.preview) {
+        // if we have the status somewhere already
+        this.preview = find(statuses, { id })
+        // or if we have to fetch it
+        if (!this.preview) {
+          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
+            this.preview = status
+            this.$nextTick(this.$refs.popper.updatePopper)
+          })
+        }
+      } else if (this.preview.id !== id) {
+        this.preview = find(statuses, 'id')
+      }
+    }
+  }
+}
+
+export default StatusPopover
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
new file mode 100644
index 00000000..b0975afb
--- /dev/null
+++ b/src/components/status_popover/status_popover.vue
@@ -0,0 +1,86 @@
+<template>
+  <v-popover
+    ref="popper"
+    popover-class="status-popover"
+    placement="top-start"
+    :popper-options="popperOptions"
+    @show="enter()"
+  >
+    <div slot="popover">
+      <Status
+        v-if="preview"
+        :is-preview="true"
+        :statusoid="preview"
+        :compact="true"
+      />
+      <div
+        v-else
+        class="status-preview-loading"
+      >
+        <i class="icon-spin4 animate-spin" />
+      </div>
+    </div>
+
+    <slot />
+  </v-popover>
+</template>
+
+<script src="./status_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.tooltip.popover.status-popover {
+  font-size: 1rem;
+  min-width: 15em;
+  max-width: 95%;
+  margin-left: 0.5em;
+
+  .popover-inner {
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    box-shadow: var(--popupShadow);
+  }
+
+  .popover-arrow::before {
+    position: absolute;
+    content: '';
+    left: -7px;
+    border: solid 7px transparent;
+    z-index: -1;
+  }
+
+  &[x-placement^="bottom-start"] .popover-arrow::before {
+    top: -2px;
+    border-top-width: 0;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &[x-placement^="top-start"] .popover-arrow::before {
+    bottom: -2px;
+    border-bottom-width: 0;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
+  }
+
+  .status-el.status-el {
+    border: none;
+  }
+
+  .status-preview-loading {
+    padding: 1em;
+    text-align: center;
+
+    i {
+      font-size: 2em;
+    }
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2