Complex button

Wouter van der Post 3 года назад обновлен Aleksandr Romanov (CTO) 3 года назад 1


I'm examining a way to build a 'control' that can easily be copy-pasted multiple times.

We've created a small video that shows the functionality of this control:

Screencast timer control.mp4

In this scenario the user can set a timer, and stop the timer when it's running. So initially I was thinking about a button with 3 states, in the Off state it looks like this:

Image 39285

The user can press the button and ends up in the second state. But in this state the user can adjust the time using the up/down arrows:

Image 39286

When the user presses 'start' the button ends up in the third state where the user can optionally stop the timer:

Image 39287

The actual timer functionality will be coded in JS, but I'm looking for the least complex way to create a UI like this without JS.

Do you have a suggestion how to accomplish this?



You have a very "clear" interface. I like your idea!

I think, the best solution is JS code for this case. You can try using different popups, but over wise you will use JS for the timer...

Сервис поддержки клиентов работает на платформе UserEcho