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_popover/status_popover.vue | 86 ++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/status_popover/status_popover.vue

(limited to 'src/components/status_popover/status_popover.vue')

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


From e00cf288f54936fc563d2baebf2a694cc3619f61 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:14:53 -0400
Subject: refactor status loading logic

---
 src/components/status_popover/status_popover.js  | 24 +++++++++---------------
 src/components/status_popover/status_popover.vue |  4 ++--
 2 files changed, 11 insertions(+), 17 deletions(-)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 91b64f72..b96ae642 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -7,7 +7,6 @@ const StatusPopover = {
   ],
   data () {
     return {
-      preview: null,
       popperOptions: {
         modifiers: {
           preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
@@ -15,26 +14,21 @@ const StatusPopover = {
       }
     }
   },
+  computed: {
+    status () {
+      return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
+    }
+  },
   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)
+      if (!this.status) {
+        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+          .then((status) => {
+            this.$store.dispatch('addNewStatuses', { statuses: [status] })
           })
-        }
-      } else if (this.preview.id !== id) {
-        this.preview = find(statuses, 'id')
       }
     }
   }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b0975afb..62afadca 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -8,9 +8,9 @@
   >
     <div slot="popover">
       <Status
-        v-if="preview"
+        v-if="status"
         :is-preview="true"
-        :statusoid="preview"
+        :statusoid="status"
         :compact="true"
       />
       <div
-- 
cgit v1.2.3-70-g09d2


From 644343ccdad905cff4a632f7154457ab7a158cb8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 22:27:23 -0400
Subject: do not make too many nested div

---
 src/components/status_popover/status_popover.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 62afadca..f570ea7a 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -6,7 +6,7 @@
     :popper-options="popperOptions"
     @show="enter()"
   >
-    <div slot="popover">
+    <template slot="popover">
       <Status
         v-if="status"
         :is-preview="true"
@@ -19,7 +19,7 @@
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </div>
+    </template>
 
     <slot />
   </v-popover>
-- 
cgit v1.2.3-70-g09d2


From 237d95b0f73d9d20df0b8c4668110ce09a5527de Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 24 Oct 2019 23:50:50 -0400
Subject: remove needless ref

---
 src/components/status_popover/status_popover.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/status_popover/status_popover.vue')

diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f570ea7a..eacf4c06 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,6 +1,5 @@
 <template>
   <v-popover
-    ref="popper"
     popover-class="status-popover"
     placement="top-start"
     :popper-options="popperOptions"
-- 
cgit v1.2.3-70-g09d2