tweak: ensure that all the dropdown's style are consistent (#156)

vuejs · Apr 20, 2018 · 81f360f · 81f360f
1 parent 7d8c08a
commit 81f360f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 50 deletions.
diff --git a/lib/default-theme/DropdownLink.vue b/lib/default-theme/DropdownLink.vue
@@ -2,34 +2,37 @@
   <div class="dropdown-wrapper" :class="{ open }">
     <a class="dropdown-title" @click="toggle">
       <span class="title">{{ item.text }}</span>
-      <span class="arrow"></span>
+      <span class="arrow" :class="open ? 'down' : 'right'"></span>
     </a>
-    <ul class="nav-dropdown">
-      <li
+    <DropdownTransition>
+      <ul class="nav-dropdown" v-show="open">
+        <li
         class="dropdown-item"
         v-for="subItem in item.items"
         :key="subItem.link">
-        <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-        <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
-          <li
+          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+          <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
+            <li
             class="dropdown-subitem"
             v-for="childSubItem in subItem.items"
             :key="childSubItem.link">
-            <NavLink :item="childSubItem"/>
-          </li>
-        </ul>
-        <NavLink v-else :item="subItem"/>
-      </li>
-    </ul>
+              <NavLink :item="childSubItem"/>
+            </li>
+          </ul>
+          <NavLink v-else :item="subItem"/>
+        </li>
+      </ul>
+    </DropdownTransition>
   </div>
 </template>
 
 <script>
 import { isExternal, ensureExt } from './util'
 import NavLink from './NavLink.vue'
+import DropdownTransition from './DropdownTransition.vue'
 
 export default {
-  components: { NavLink },
+  components: { NavLink, DropdownTransition },
   data() {
     return {
       open: false
@@ -54,16 +57,12 @@ export default {
 .dropdown-wrapper
   .dropdown-title
     display block
+    &:hover
+      border-color transparent
     .arrow
-      display inline-block
       vertical-align middle
       margin-top -1px
       margin-left 0.4rem
-      width 0
-      height 0
-      border-left 4px solid transparent
-      border-right 4px solid transparent
-      border-top 5px solid #ccc
   .nav-dropdown
     .dropdown-item
       color inherit
@@ -109,14 +108,9 @@ export default {
   .dropdown-wrapper
     &.open .dropdown-title
       margin-bottom 0.5rem
-    &:not(.open)
-      .dropdown-title .arrow
-        border-top 4px solid transparent
-        border-bottom 4px solid transparent
-        border-left 5px solid #ccc
-      .nav-dropdown
-        display none
     .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
       .dropdown-item
         h4
           border-top 0
@@ -134,9 +128,18 @@ export default {
   .dropdown-wrapper
     height 1.8rem
     &:hover .nav-dropdown
-      display block
+      // override the inline style.
+      display block !important
+    .dropdown-title .arrow
+      // make the arrow always down at desktop
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 6px solid $arrowBgColor
+      border-bottom 0
     .nav-dropdown
       display none
+      // Avoid height shaked by clicking
+      height auto !important
       box-sizing border-box;
       max-height calc(100vh - 2.7rem)
       overflow-y auto

diff --git a/lib/default-theme/DropdownTransition.vue b/lib/default-theme/DropdownTransition.vue
@@ -0,0 +1,29 @@
+<template>
+  <transition name="dropdown"
+              @enter="setHeight"
+              @after-enter="unsetHeight"
+              @before-leave="setHeight">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'SidebarGroup',
+  methods: {
+    setHeight (items) {
+      // explicitly set height so that it can be transitioned
+      items.style.height = items.scrollHeight + 'px'
+    },
+    unsetHeight (items) {
+      items.style.height = ''
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-enter, .dropdown-leave-to
+  height 0 !important
+
+</style>
diff --git a/lib/default-theme/SidebarGroup.vue b/lib/default-theme/SidebarGroup.vue
@@ -4,37 +4,26 @@
       <span>{{ item.title }}</span>
       <span class="arrow"
         v-if="collapsable"
-        :class="open ? 'up' : 'down'"></span>
+        :class="open ? 'down' : 'right'"></span>
     </p>
-    <transition name="sidebar-group"
-      @enter="setHeight"
-      @after-enter="unsetHeight"
-      @before-leave="setHeight">
+    <DropdownTransition>
       <ul class="sidebar-group-items" ref="items" v-if="open || !collapsable">
         <li v-for="child in item.children">
           <SidebarLink :item="child"/>
         </li>
       </ul>
-    </transition>
+    </DropdownTransition>
   </div>
 </template>
 
 <script>
 import SidebarLink from './SidebarLink.vue'
+import DropdownTransition from './DropdownTransition.vue'
 
 export default {
   name: 'SidebarGroup',
   props: ['item', 'first', 'open', 'collapsable'],
-  components: { SidebarLink },
-  methods: {
-    setHeight (items) {
-      // explicitly set height so that it can be transitioned
-      items.style.height = items.scrollHeight + 'px'
-    },
-    unsetHeight (items) {
-      items.style.height = ''
-    }
-  }
+  components: { SidebarLink, DropdownTransition }
 }
 </script>
 
@@ -71,7 +60,4 @@ export default {
 .sidebar-group-items
   transition height .1s ease-out
   overflow hidden
-
-.sidebar-group-enter, .sidebar-group-leave-to
-  height 0 !important
 </style>
diff --git a/lib/default-theme/styles/arrow.styl b/lib/default-theme/styles/arrow.styl
@@ -7,16 +7,16 @@
   &.up
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-bottom 6px solid $textColor
+    border-bottom 6px solid $arrowBgColor
   &.down
     border-left 4px solid transparent
     border-right 4px solid transparent
-    border-top 6px solid $textColor
+    border-top 6px solid $arrowBgColor
   &.right
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-left 6px solid $textColor
+    border-left 6px solid $arrowBgColor
   &.left
     border-top 4px solid transparent
     border-bottom 4px solid transparent
-    border-right 6px solid $textColor
+    border-right 6px solid $arrowBgColor
diff --git a/lib/default-theme/styles/config.styl b/lib/default-theme/styles/config.styl
@@ -3,6 +3,7 @@ $accentColor = #3eaf7c
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
+$arrowBgColor = #ccc
 
 // layout
 $navbarHeight = 3.6rem