Feature/show dropdown button

[jost-s]

Hi @phoenixwong, I've added a slot for a custom icon for the dropdown button and updated the samples page. Let me know what you think 🙂

[phoenixwong]

Hi @jost-s,

Sorry for the late reply. I'm a little bit busy recently.

That's an interesting feature, and it reminds me of the input icon (placeholder) in some UI designs (screenshot below) --

The ETA of the next release (v.1.1.3) is by next Monday. I'd suggest we come back to this feature after that.

[jost-s]

Hi @phoenixwong,

no worries at all, now it's my turn to reply late.

Yes, that's the idea, a familiar icon that indicates what to expect of this input field.

Great, thanks!

[phoenixwong]

Hi @jost-s,

Your PR give me some inspiration -- come to think about it, there are three suitable places for icon "slots" (image below) --

Icon No.1 and 2 are already there, No.3 doesn't exist yet, but we can make some room for it if necessary. 🤔

[jost-s]

Yeah, of course we can. 1 + 2 are obvious, should 3 be an additional icon/action or an alternative position for the dropdown button?

-------- Mensaje original -------- On 18 jun. 2020 17:30, Phoenix Wong escribió:

Hi @jost-s,

Your PR give me some inspiration -- come to think about it, there are three suitable places for icon "slots" (image below) --

Vue2Timepicker-slots-ph

Icon No.1 and 2 are already there, No.3 doesn't exist yet, but we can make some room for it if necessary. 🤔

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[phoenixwong]

No.3 is more like a decoration or hint. I imagine users can put any icon/image they want to represent the purpose of the input.

E.g., a clock, a bell, a stopwatch, or even a unicorn if they wish. 🦄

[jost-s]

Okay, now I'm convinced, everyone needs a unicorn in their app! 😄

I'll push an update for you to review in the next couple of days. I was ill during the last week and will be back to work on Monday.

-------- Mensaje original -------- On 20 jun. 2020 12:08, Phoenix Wong escribió:

No.3 is more like a decoration or hint. I imagine users can put any icon/image they want to represent the purpose of the input.

E.g., a clock, a bell, a stopwatch, or even a unicorn if they wish. 🦄

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[phoenixwong]

No hurries. Wishing you a speedy recovery! (The magical powers of this unicorn will ensure you feel better soon! LOL)

[jost-s]

Hi @phoenixwong, I've added the slot for a custom close button. The prepend icon is not trivial, in order for it to be solid and flexible I need to change the main span to display: inline-flex, and it entails quite a lot of changes in styles and I need to cater for a disabled input field etc.

I prefer to do that in another version, alright?

[phoenixwong]

Hi @jost-s, thanks for the update and glad to see you back!

The alpha branch got updated along with the last version (1.1.3), so this PR some code conflicts against it. Can you pull the latest code and resolve the conflicts? Thanks!

The "Merge pull request" button on my end is disabled due to the conflicts. I cannot merge it until it got resolved.

[jost-s]

Hi @phoenixwong, thank you, I'm glad to be back 🙂

I've resolved conflicts for this PR. It took me some time to find the CSS to align custom icon and default characters. I think it works fine now.

Regarding the dropdown button, I prefer to show it even when the input is not active, as an indicator of the type of input (as long as we don't have a unicorn icon slot 😉). What do you think?

[phoenixwong]

About the dropdown button visibility -- Yup, I'll consider it. Need to do some tests to find the balance for the icon(s) display.

Thanks for the hard work! :clap:

[jost-s]

You're welcome! Sure, try it out, thanks for considering it.

[phoenixwong]

Hi @jost-s,

Just letting you know that I added a new fixed-dropdown-button property in v.1.1.4 for always show the dropdown button (default to false).

[jost-s]

Hi @phoenixwong,

I just saw it - brilliant! Super flexible and configurable and looks great, thanks a bunch 😀