Add a button to show dropdown in manual input mode

phoenixwong / vue2-timepicker

A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

https://phoenixwong.github.io/vue2-timepicker/

MIT License

432 stars 193 forks source link

Add a button to show dropdown in manual input mode #119

Closed jost-s closed 4 years ago

jost-s commented 4 years ago

Hi @phoenixwong, this is another suggestion I want to make. When using manual input you can add a button to the input field to show the dropdown only on click. Please have a look at the sample page, I've added a section with an example.

The icon for the button is a placeholder, this should be configurable. But I first want to get your opinion if you consider to include this and then I'd add an option to configure the icon 🙂

phoenixwong commented 4 years ago

Hi @jost-s,

Sounds good to me. What I'm considering is -- shall we make it an enhancement of the existing "hide-dropdown" feature, instead of adding a new prop for it?

Which means the hide-dropdown feature will become:

Hide the dropdown menu in "manual-input" mode by default
Users can open the dropdown by clicking the "*" (placeholder) button anytime

So people using

<vue-timepicker manual-input hide-dropdown></vue-timepicker>

Can obtain the new feature automatically in the next release.

What do you think?

jost-s commented 4 years ago

Regarding enhancing "hide-dropdown", I agree, let's do that. I'll make the changes and get back to you. Do you have anything in mind as icon for the button to show dropdown?

phoenixwong commented 4 years ago

Candidates for the show dropdown icon:

A: &dtrif; (▾) and &utrif; (▴): Solid triangles. I'm a little bit concern about their size. It's a bit tiny compared to the other HTML entities.
B: &xdtri; (▽) and &xutri; (△): Hollow triangles, with bigger size than the above.
C: &ctdot; (⋯) or &vellip; (⋮): horizontal or vertical ellipsis
D: &equiv; (≡): hamburger bars

Just thinking aloud: I'm more into the triangle shapes since they are common UI language for dropdowns. We can also make a triangle with pure CSS if group A and B don't look good enough.

jost-s commented 4 years ago

Even though in your list the first down triangle looks tiny, in practice it's perfect I find! I'd go for that, option A. Personally I wouldn't add an icon to close the dropdown. Let me know what you think.

Ah and I've refactored to include it all in manual-input + hide-dropdown.

phoenixwong commented 4 years ago

Looks good to me. Thanks, @jost-s!

Allow me some time before putting up the next release.

jost-s commented 4 years ago

Sure, no hurry. Sorry, I forgot that alpha is the correct branch.

phoenixwong commented 4 years ago

It's okay to set "master" as the base. No worries :)

phoenixwong commented 4 years ago

Hi @jost-s, these enhancements are released in v1.1.3 now.

I found the focus and blur events are broken after this PR, so I did some fixes.

Moreover, to make the UI more consistent with the other modes, I changed the "▾" button visible only when the user is focusing on the <input> box in hide-dropdown mode.