From e9ac233d6c97b63da4bd9fa7e20f618b1dddf424 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 10 Jan 2019 10:29:21 +0100
Subject: [PATCH] Use Dropdown in Author Component

---
 components/Author.vue | 248 ++++++++++++++++++++----------------------
 1 file changed, 117 insertions(+), 131 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 4ad1e6583..377b74b7f 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -1,127 +1,127 @@
 <template>
-  <v-popover
-    :open.sync="isPopoverOpen"
+  <dropdown
     :disabled="!hasAuthor || !showAuthorPopover"
-    :open-group="Math.random().toString()"
     placement="top-start"
-    trigger="manual"
     offset="0"
   >
-    <a
-      v-router-link
-      :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
-      style="white-space: nowrap; display: flex; align-items: center;"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
+    <template
+      slot="default"
+      slot-scope="{openMenu, closeMenu, isOpen}"
     >
-      <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
-        <ds-avatar
-          :image="author.avatar"
-          :name="author.name"
-          style="display: inline-block; vertical-align: middle;"
-          size="32px"
-        />
-      </div>
-      <div style="display: inline-block; height: 100%; vertical-align: middle;">
-        <b
-          class="username"
-          style="vertical-align: middle;"
-        >
-          {{ author.name | truncate(trunc, 18) }}
-        </b>
-        <template v-if="post.createdAt">
-          <br>
-          <ds-text
-            size="small"
-            color="soft"
-          >
-            {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-          </ds-text>
-        </template>
-      </div>
-    </a>
-    <div
-      slot="popover"
-      style="min-width: 250px;"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
-    >
-      <!--<ds-avatar
-        :image="author.avatar"
-        :name="author.name || 'Anonymus'"
-        class="profile-avatar"
-        size="90px" />-->
-      <hc-badges
-        v-if="author.badges && author.badges.length"
-        :badges="author.badges"
-        style="margin-bottom: -10px"
-      />
-      <ds-flex>
-        <ds-flex-item class="ds-tab-nav-item">
-          <ds-space margin="small">
-            <ds-number
-              :count="fanCount"
-              :label="$t('profile.followers')"
-              size="x-large"
-            />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
-          <ds-space margin="small">
-            <ds-number
-              :count="author.contributionsCount"
-              :label="$t('common.post', null, author.contributionsCount)"
-            />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item class="ds-tab-nav-item">
-          <ds-space margin="small">
-            <ds-number
-              :count="author.commentsCount"
-              :label="$t('common.comment', null, author.commentsCount)"
-            />
-          </ds-space>
-        </ds-flex-item>
-      </ds-flex>
-      <!--<ds-text
-        color="soft"
-        size="small">
-        <ds-icon name="map-marker" /> Hamburg, Deutschland
-      </ds-text>-->
-      <ds-flex
-        v-if="!itsMe"
-        gutter="x-small"
-        style="margin-bottom: 0;"
+      <a
+        v-router-link
+        :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
+        :class="['author', isOpen && 'active']"
+        @mouseover="openMenu(true)"
+        @mouseleave="closeMenu(true)"
       >
-        <ds-flex-item :width="{base: 3}">
-          <hc-follow-button
-            :follow-id="author.id"
-            @update="voted = true"
+        <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
+          <ds-avatar
+            :image="author.avatar"
+            :name="author.name"
+            style="display: inline-block; vertical-align: middle;"
+            size="32px"
           />
-        </ds-flex-item>
-        <ds-flex-item :width="{base: 1}">
-          <ds-button full-width>
-            <ds-icon name="user-times" />
-          </ds-button>
-        </ds-flex-item>
-      </ds-flex>
-      <!--<ds-space margin-bottom="x-small" />-->
-    </div>
-  </v-popover>
+        </div>
+        <div style="display: inline-block; height: 100%; vertical-align: middle;">
+          <b
+            class="username"
+            style="vertical-align: middle;"
+          >
+            {{ author.name | truncate(trunc, 18) }}
+          </b>
+          <template v-if="post.createdAt">
+            <br>
+            <ds-text
+              size="small"
+              color="soft"
+            >
+              {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
+            </ds-text>
+          </template>
+        </div>
+      </a>
+    </template>
+    <template
+      slot="popover"
+    >
+      <div style="min-width: 250px">
+        <!--<ds-avatar
+          :image="author.avatar"
+          :name="author.name || 'Anonymus'"
+          class="profile-avatar"
+          size="90px" />-->
+        <hc-badges
+          v-if="author.badges && author.badges.length"
+          :badges="author.badges"
+          style="margin-bottom: -10px"
+        />
+        <ds-flex>
+          <ds-flex-item class="ds-tab-nav-item">
+            <ds-space margin="small">
+              <ds-number
+                :count="fanCount"
+                :label="$t('profile.followers')"
+                size="x-large"
+              />
+            </ds-space>
+          </ds-flex-item>
+          <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
+            <ds-space margin="small">
+              <ds-number
+                :count="author.contributionsCount"
+                :label="$t('common.post', null, author.contributionsCount)"
+              />
+            </ds-space>
+          </ds-flex-item>
+          <ds-flex-item class="ds-tab-nav-item">
+            <ds-space margin="small">
+              <ds-number
+                :count="author.commentsCount"
+                :label="$t('common.comment', null, author.commentsCount)"
+              />
+            </ds-space>
+          </ds-flex-item>
+        </ds-flex>
+        <!--<ds-text
+          color="soft"
+          size="small">
+          <ds-icon name="map-marker" /> Hamburg, Deutschland
+        </ds-text>-->
+        <ds-flex
+          v-if="!itsMe"
+          gutter="x-small"
+          style="margin-bottom: 0;"
+        >
+          <ds-flex-item :width="{base: 3}">
+            <hc-follow-button
+              :follow-id="author.id"
+              @update="voted = true"
+            />
+          </ds-flex-item>
+          <ds-flex-item :width="{base: 1}">
+            <ds-button full-width>
+              <ds-icon name="user-times" />
+            </ds-button>
+          </ds-flex-item>
+        </ds-flex>
+        <!--<ds-space margin-bottom="x-small" />-->
+      </div>
+    </template>
+  </dropdown>
 </template>
 
 <script>
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
-
-let mouseEnterTimer = null
-let mouseLeaveTimer = null
+import Dropdown from '~/components/Dropdown'
 
 export default {
   name: 'HcAuthor',
   components: {
     HcFollowButton,
-    HcBadges
+    HcBadges,
+    Dropdown
   },
   props: {
     post: { type: Object, default: null },
@@ -130,7 +130,6 @@ export default {
   },
   data() {
     return {
-      isPopoverOpen: false,
       voted: false
     }
   },
@@ -156,30 +155,6 @@ export default {
     hasAuthor() {
       return Boolean(this.post && this.post.author)
     }
-  },
-  beforeDestroy() {
-    clearTimeout(mouseEnterTimer)
-    clearTimeout(mouseLeaveTimer)
-  },
-  methods: {
-    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (!this.isPopoverOpen) {
-        mouseEnterTimer = setTimeout(() => {
-          this.isPopoverOpen = true
-        }, 500)
-      }
-    },
-    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (this.isPopoverOpen) {
-        mouseLeaveTimer = setTimeout(() => {
-          this.isPopoverOpen = false
-        }, 300)
-      }
-    }
   }
 }
 </script>
@@ -191,4 +166,15 @@ export default {
   margin-top: -45px;
   border: #fff 5px solid;
 }
+.author {
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &.active {
+    z-index: 999;
+  }
+}
 </style>