Skip to content

Commit 81f360f

Browse files
ulivzyyx990803
ulivz
authored and
yyx990803
committed
tweak: ensure that all the dropdown's style are consistent (#156)
1 parent 7d8c08a commit 81f360f

File tree

5 files changed

+69
-50
lines changed

5 files changed

+69
-50
lines changed

‎lib/default-theme/DropdownLink.vue

+30-27
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,37 @@
22
<div class="dropdown-wrapper" :class="{ open }">
33
<a class="dropdown-title" @click="toggle">
44
<span class="title">{{ item.text }}</span>
5-
<span class="arrow"></span>
5+
<span class="arrow" :class="open ? 'down' : 'right'"></span>
66
</a>
7-
<ul class="nav-dropdown">
8-
<li
7+
<DropdownTransition>
8+
<ul class="nav-dropdown" v-show="open">
9+
<li
910
class="dropdown-item"
1011
v-for="subItem in item.items"
1112
:key="subItem.link">
12-
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
13-
<ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
14-
<li
13+
<h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
14+
<ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
15+
<li
1516
class="dropdown-subitem"
1617
v-for="childSubItem in subItem.items"
1718
:key="childSubItem.link">
18-
<NavLink :item="childSubItem"/>
19-
</li>
20-
</ul>
21-
<NavLink v-else :item="subItem"/>
22-
</li>
23-
</ul>
19+
<NavLink :item="childSubItem"/>
20+
</li>
21+
</ul>
22+
<NavLink v-else :item="subItem"/>
23+
</li>
24+
</ul>
25+
</DropdownTransition>
2426
</div>
2527
</template>
2628

2729
<script>
2830
import { isExternal, ensureExt } from './util'
2931
import NavLink from './NavLink.vue'
32+
import DropdownTransition from './DropdownTransition.vue'
3033
3134
export default {
32-
components: { NavLink },
35+
components: { NavLink, DropdownTransition },
3336
data() {
3437
return {
3538
open: false
@@ -54,16 +57,12 @@ export default {
5457
.dropdown-wrapper
5558
.dropdown-title
5659
display block
60+
&:hover
61+
border-color transparent
5762
.arrow
58-
display inline-block
5963
vertical-align middle
6064
margin-top -1px
6165
margin-left 0.4rem
62-
width 0
63-
height 0
64-
border-left 4px solid transparent
65-
border-right 4px solid transparent
66-
border-top 5px solid #ccc
6766
.nav-dropdown
6867
.dropdown-item
6968
color inherit
@@ -109,14 +108,9 @@ export default {
109108
.dropdown-wrapper
110109
&.open .dropdown-title
111110
margin-bottom 0.5rem
112-
&:not(.open)
113-
.dropdown-title .arrow
114-
border-top 4px solid transparent
115-
border-bottom 4px solid transparent
116-
border-left 5px solid #ccc
117-
.nav-dropdown
118-
display none
119111
.nav-dropdown
112+
transition height .1s ease-out
113+
overflow hidden
120114
.dropdown-item
121115
h4
122116
border-top 0
@@ -134,9 +128,18 @@ export default {
134128
.dropdown-wrapper
135129
height 1.8rem
136130
&:hover .nav-dropdown
137-
display block
131+
// override the inline style.
132+
display block !important
133+
.dropdown-title .arrow
134+
// make the arrow always down at desktop
135+
border-left 4px solid transparent
136+
border-right 4px solid transparent
137+
border-top 6px solid $arrowBgColor
138+
border-bottom 0
138139
.nav-dropdown
139140
display none
141+
// Avoid height shaked by clicking
142+
height auto !important
140143
box-sizing border-box;
141144
max-height calc(100vh - 2.7rem)
142145
overflow-y auto

‎lib/default-theme/DropdownTransition.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<transition name="dropdown"
3+
@enter="setHeight"
4+
@after-enter="unsetHeight"
5+
@before-leave="setHeight">
6+
<slot></slot>
7+
</transition>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'SidebarGroup',
13+
methods: {
14+
setHeight (items) {
15+
// explicitly set height so that it can be transitioned
16+
items.style.height = items.scrollHeight + 'px'
17+
},
18+
unsetHeight (items) {
19+
items.style.height = ''
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<style lang="stylus">
26+
.dropdown-enter, .dropdown-leave-to
27+
height 0 !important
28+
29+
</style>

‎lib/default-theme/SidebarGroup.vue

+5-19
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,26 @@
44
<span>{{ item.title }}</span>
55
<span class="arrow"
66
v-if="collapsable"
7-
:class="open ? 'up' : 'down'"></span>
7+
:class="open ? 'down' : 'right'"></span>
88
</p>
9-
<transition name="sidebar-group"
10-
@enter="setHeight"
11-
@after-enter="unsetHeight"
12-
@before-leave="setHeight">
9+
<DropdownTransition>
1310
<ul class="sidebar-group-items" ref="items" v-if="open || !collapsable">
1411
<li v-for="child in item.children">
1512
<SidebarLink :item="child"/>
1613
</li>
1714
</ul>
18-
</transition>
15+
</DropdownTransition>
1916
</div>
2017
</template>
2118

2219
<script>
2320
import SidebarLink from './SidebarLink.vue'
21+
import DropdownTransition from './DropdownTransition.vue'
2422
2523
export default {
2624
name: 'SidebarGroup',
2725
props: ['item', 'first', 'open', 'collapsable'],
28-
components: { SidebarLink },
29-
methods: {
30-
setHeight (items) {
31-
// explicitly set height so that it can be transitioned
32-
items.style.height = items.scrollHeight + 'px'
33-
},
34-
unsetHeight (items) {
35-
items.style.height = ''
36-
}
37-
}
26+
components: { SidebarLink, DropdownTransition }
3827
}
3928
</script>
4029

@@ -71,7 +60,4 @@ export default {
7160
.sidebar-group-items
7261
transition height .1s ease-out
7362
overflow hidden
74-
75-
.sidebar-group-enter, .sidebar-group-leave-to
76-
height 0 !important
7763
</style>

‎lib/default-theme/styles/arrow.styl

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
&.up
88
border-left 4px solid transparent
99
border-right 4px solid transparent
10-
border-bottom 6px solid $textColor
10+
border-bottom 6px solid $arrowBgColor
1111
&.down
1212
border-left 4px solid transparent
1313
border-right 4px solid transparent
14-
border-top 6px solid $textColor
14+
border-top 6px solid $arrowBgColor
1515
&.right
1616
border-top 4px solid transparent
1717
border-bottom 4px solid transparent
18-
border-left 6px solid $textColor
18+
border-left 6px solid $arrowBgColor
1919
&.left
2020
border-top 4px solid transparent
2121
border-bottom 4px solid transparent
22-
border-right 6px solid $textColor
22+
border-right 6px solid $arrowBgColor

‎lib/default-theme/styles/config.styl

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $accentColor = #3eaf7c
33
$textColor = #2c3e50
44
$borderColor = #eaecef
55
$codeBgColor = #282c34
6+
$arrowBgColor = #ccc
67

78
// layout
89
$navbarHeight = 3.6rem

0 commit comments

Comments
 (0)