Merged master in

2025-12-13 07:45:56 +00:00 · 2019-01-10 12:08:13 +01:00 · 2019-01-10 12:08:13 +01:00 · 89fb7e8e07
commit 89fb7e8e07
parent ac04e766f9 c124602c89
6 changed files with 217 additions and 169 deletions
--- a/components/Author.vue
+++ b/components/Author.vue
@ -1,138 +1,138 @@
 <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"
-      />
-      <ds-text
-        v-if="author.location"
-        align="center"
-        color="soft"
-        size="small"
-        style="margin-top: 5px"
-        bold
+      <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-icon name="map-marker" /> {{ author.location.name }}
-      </ds-text>
-      <ds-flex
-        style="margin-top: -10px"
-      >
-        <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"
+        <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"
+        />
+        <ds-text
+          v-if="author.location"
+          align="center"
+          color="soft"
+          size="small"
+          style="margin-top: 5px"
+          bold
+        >
+          <ds-icon name="map-marker" /> {{ author.location.name }}
+        </ds-text>
+        <ds-flex
+          style="margin-top: -10px"
+        >
+          <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 },
@ -141,7 +141,6 @@ export default {
  },
  data() {
    return {
-      isPopoverOpen: false,
      voted: false
    }
  },
@ -167,30 +166,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>
@ -202,4 +177,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>
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@ -3,10 +3,16 @@
    :open.sync="isPopoverOpen"
    :open-group="Math.random().toString()"
    :placement="placement"
+    :disabled="disabled"
    trigger="manual"
    :offset="offset"
  >
-    <slot :toggleMenu="toggleMenu" />
+    <slot
+      :toggleMenu="toggleMenu"
+      :openMenu="openMenu"
+      :closeMenu="closeMenu"
+      :isOpen="isOpen"
+    />
    <div
      slot="popover"
      @mouseover="popoverMouseEnter"
@ -15,6 +21,9 @@
      <slot
        name="popover"
        :toggleMenu="toggleMenu"
+        :openMenu="openMenu"
+        :closeMenu="closeMenu"
+        :isOpen="isOpen"
      />
    </div>
  </v-popover>
@ -29,6 +38,7 @@ let mouseLeaveTimer = null
 export default {
  props: {
    placement: { type: String, default: 'bottom-end' },
+    disabled: { type: Boolean, default: false },
    offset: { type: [String, Number], default: '16' }
  },
  data() {
@ -36,17 +46,24 @@ export default {
      isPopoverOpen: false
    }
  },
+  computed: {
+    isOpen() {
+      return this.isPopoverOpen
+    }
+  },
  watch: {
    isPopoverOpen: {
      immediate: true,
      handler(isOpen) {
        try {
          if (isOpen) {
-            setTimeout(() => {
-              document
-                .getElementsByTagName('body')[0]
-                .classList.add('dropdown-open')
-            }, 10)
+            this.$nextTick(() => {
+              setTimeout(() => {
+                document
+                  .getElementsByTagName('body')[0]
+                  .classList.add('dropdown-open')
+              }, 20)
+            })
          } else {
            document
              .getElementsByTagName('body')[0]
@ -62,11 +79,35 @@ export default {
  },
  methods: {
    toggleMenu() {
-      this.isPopoverOpen = !this.isPopoverOpen
+      this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false)
+    },
+    openMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoverMouseEnter()
+      } else {
+        this.isPopoverOpen = true
+      }
+    },
+    closeMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoveMouseLeave()
+      } else {
+        this.isPopoverOpen = false
+      }
    },
    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
      if (!this.isPopoverOpen) {
        mouseEnterTimer = setTimeout(() => {
          this.isPopoverOpen = true
@ -74,13 +115,19 @@ export default {
      }
    },
    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
      if (this.isPopoverOpen) {
        mouseLeaveTimer = setTimeout(() => {
          this.isPopoverOpen = false
        }, 300)
      }
+    },
+    clearTimeouts() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
    }
  }
 }
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -26,7 +26,7 @@
                  <a
                    class="avatar-menu-trigger"
                    :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                    @click.prevent="toggleMenu()"
+                    @click.prevent="toggleMenu"
                  >
                    <ds-avatar
                      :image="user.avatar"
@ -37,7 +37,7 @@
                </template>
                <template
                  slot="popover"
-                  slot-scope="{toggleMenu}"
+                  slot-scope="{closeMenu}"
                >
                  <div class="avatar-menu-popover">
                    {{ $t('login.hello') }} <b>{{ user.name }}</b>
@ -59,13 +59,16 @@
                        slot-scope="item"
                        :route="item.route"
                        :parents="item.parents"
-                        @click.native="toggleMenu"
+                        @click.native="closeMenu(false)"
                      >
                        <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                      </ds-menu-item>
                    </ds-menu>
                    <ds-space margin="xx-small" />
-                    <nuxt-link :to="{ name: 'logout'}">
+                    <nuxt-link
+                      :to="{ name: 'logout'}"
+                      style="margin-left: 0"
+                    >
                      <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                    </nuxt-link>
                  </div>
@ -131,6 +134,10 @@ export default {
  },
  methods: {
    isExact(url) {
+      if (url.indexOf('/profile') === 0) {
+        // do only match own profile
+        this.$route.path === url
+      }
      return this.$route.path.indexOf(url) === 0
    }
  }
@ -157,10 +164,14 @@ export default {
  padding-bottom: 0.5rem;

  nav {
-    margin-left: -15px;
-    margin-right: -15px;
+    margin-left: -16px;
+    margin-right: -10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
+
+    a {
+      padding-left: 12px;
+    }
  }
 }
 </style>
--- a/package.json
+++ b/package.json
@ -42,7 +42,7 @@
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.3.0",
    "accounting": "^0.4.1",
-    "cookie-universal-nuxt": "^2.0.12",
+    "cookie-universal-nuxt": "^2.0.14",
    "cross-env": "^5.2.0",
    "date-fns": "^2.0.0-alpha.26",
    "express": "^4.16.3",
--- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue
+++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue
@ -14,6 +14,10 @@
    <component
      v-if="route"
      class="ds-menu-item-link"
+      :class="[
+        isExact && 'router-active-link',
+        isExact && 'router-link-exact-active'
+      ]"
      v-bind="bindings"
      :exact="isExact"
      :is="linkTag"
--- a/yarn.lock
+++ b/yarn.lock
@ -3793,18 +3793,18 @@ cookie-signature@1.0.6:
  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=

-cookie-universal-nuxt@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.12.tgz#061bb1864d2dd010fad1c484ae982da42954bfd9"
-  integrity sha512-qZu3rOgsDjWqgq9dU+zCQl3RpsZeevI/c6fN+wgTRsQdSe8MSwYWpl+6Pitu0mXgZKVJ8e+JA3s3jDVoXV5szg==
+cookie-universal-nuxt@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.14.tgz#6fdf8e928eadd7611c04a57614fe2e29b60eb971"
+  integrity sha512-ih9Z0Z2K6eLaugTttGCVN85nogKseIFF/dqup3klvYC4mQS3+1IloqBqzTL/N7degBBAols2oppwYNDmaRtVig==
  dependencies:
    "@types/cookie" "^0.3.1"
-    cookie-universal "^2.0.12"
+    cookie-universal "^2.0.14"

-cookie-universal@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.12.tgz#3627a56045a84c1c53618d38bd30b278db5633f4"
-  integrity sha512-/3ch/W145NHVmX2Oenykb3U/Knmu/78JJZxGY2qw28mIr/Ueve6D+A3BySAncvqIgNUy7lIgmAUjf1hV4D4d/A==
+cookie-universal@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.14.tgz#1b4f27cffccfc2e47703fa235c1f67f931213041"
+  integrity sha512-m6J0DQa4/RQvXhzUG37EY1ynK3Uq1BKzp5hotST9olrzjrRx+B0vNPx7azg0/X0XrYQvL7MMbPXwou8m0BNDwg==
  dependencies:
    "@types/cookie" "^0.3.1"
    cookie "^0.3.1"