Skip to content

Commit

Permalink
[improvement] DropdownMenu: title ellipsis (#3847)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenjiahan
chenjiahan authored Jul 14, 2019
1 parent f50dc30 commit cedf590
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/dropdown-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default createComponent({
]}
style={{ color: item.showPopup ? this.activeColor : '' }}
>
{item.displayTitle}
<div class="van-ellipsis">{item.displayTitle}</div>
</span>
</div>
));
Expand Down
6 changes: 5 additions & 1 deletion src/dropdown-menu/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
flex: 1;
align-items: center;
justify-content: center;
min-width: 0; // hack for flex ellipsis

&:active {
opacity: .7;
Expand All @@ -29,12 +30,15 @@

&__title {
position: relative;
box-sizing: border-box;
max-width: 100%;
padding: 0 8px;
font-size: @dropdown-menu-title-font-size;

&::after {
position: absolute;
top: 3px;
right: -12px;
right: -4px;
border: 3px solid;
border-color: transparent transparent currentColor currentColor;
transform: rotate(-45deg);
Expand Down
16 changes: 8 additions & 8 deletions src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand All @@ -16,8 +16,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand All @@ -28,8 +28,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">全部商品</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
<!---->
</div>
Expand All @@ -40,8 +40,8 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand Down
40 changes: 20 additions & 20 deletions src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

exports[`click option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2011;">
<div class="van-cell van-cell--clickable">
Expand All @@ -24,8 +24,8 @@ exports[`click option 1`] = `

exports[`close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
Expand All @@ -47,7 +47,7 @@ exports[`close-on-click-outside 1`] = `

exports[`destroy one item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<!---->
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
Expand All @@ -57,8 +57,8 @@ exports[`destroy one item 1`] = `

exports[`didn\`t find matched option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand All @@ -70,8 +70,8 @@ exports[`didn\`t find matched option 1`] = `

exports[`direction up 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
<div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
Expand All @@ -93,8 +93,8 @@ exports[`direction up 1`] = `

exports[`disable close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
Expand All @@ -116,7 +116,7 @@ exports[`disable close-on-click-outside 1`] = `

exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand All @@ -125,8 +125,8 @@ exports[`disable dropdown item 1`] = `

exports[`show dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
Expand All @@ -148,8 +148,8 @@ exports[`show dropdown item 1`] = `

exports[`show dropdown item 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
<div class="van-cell van-cell--clickable">
Expand Down Expand Up @@ -180,8 +180,8 @@ exports[`show dropdown item 2`] = `

exports[`show dropdown item 3`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
<div class="van-cell van-cell--clickable">
Expand Down Expand Up @@ -212,8 +212,8 @@ exports[`show dropdown item 3`] = `

exports[`title prop 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
Expand Down

0 comments on commit cedf590

Please sign in to comment.