split status preview popover into a separate component

2 files changed, 129 insertions, 0 deletions

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>