Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include a timepicker into server #6348

Closed
raimund-schluessler opened this issue Sep 3, 2017 · 23 comments
Closed

Include a timepicker into server #6348

raimund-schluessler opened this issue Sep 3, 2017 · 23 comments
Labels
design Design, UI, UX, etc. enhancement

Comments

@raimund-schluessler
Copy link
Member

I think it would be reasonable to also have a timepicker similar to the datepicker directly in server. A timepicker is used in multiple apps, such as @nextcloud/calendar, @nextcloud/deck and @nextcloud/tasks and currently looks different in all three apps. Also, the timepicker https://github.com/fgelinas/timepicker currently used in these apps has not been updated for nearly 4 years and should therefore be replaced.

Calendar:
screenshot-2017-9-3 kalender - nextcloud

Tasks:
screenshot-2017-9-3 aufgaben - nextcloud

Hence, I think it would be a good idea to have a timepicker in server in order to have a maintained one that looks equal in all apps, especially with the redesigned datepicker #5713.

What do you think @nextcloud/designers ?

@juliusknorr
Copy link
Member

It would absolutely make sense to have components like that in the server. @raimund-schluessler Do you have any suggestion of an alternative timepicker library? I searched a bit when integrating it into deck, but did not came up with something nice, so i ended up using the outdated one as well.

@dartcafe
Copy link
Contributor

dartcafe commented Sep 3, 2017

And there ist another one in the polls app. Having a server wide default option would be a good idea.

grafik

@tcitworld
Copy link
Member

At some point it would be nice to detect if the browser offers a native datetime picker : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

@georgehrke
Copy link
Member

Eventually we should definitely use the HTML5 inputs, but right now the implementation is still very rudimentary. Speaking about Chromium 61 on macOS, it offers a really bad UX.

  • It doesn't actually offer a time selector although its datetime
  • If I use the cursor keys to go from 12h to 1h it doesn't toggle AM/PM
  • etc ...

ead5e2d0-f331-421e-aa11-632cb446abfb

@dartcafe
Copy link
Contributor

dartcafe commented Sep 3, 2017

Seems to be quite flexible.
http://amsul.ca/pickadate.js/

@tcitworld
Copy link
Member

tcitworld commented Sep 3, 2017

Android build-in support is just fine though.

@juliusknorr
Copy link
Member

Seems to be quite flexible.
http://amsul.ca/pickadate.js/

That also seems to be unmaintained at the moment.

@pixelipo
Copy link
Contributor

pixelipo commented Sep 4, 2017

Support for datetime-local is very bad at the moment:
http://caniuse.com/#search=datetime-local

@raimund-schluessler
Copy link
Member Author

I also don't have a good replacement to propose at the moment.

The one that shows up when you look for jquery-timepicker on NPM (https://github.com/wvega/timepicker) seems to be maintained still, but not very flexible (it seems that it can only show a list of times, but not a table for selection).

@jancborchardt
Copy link
Member

Oh yes – holy hell the current timepicker is bad. Should I make a mockup akin to the datepicker or does some other @nextcloud/designers want to take a stab at it? :)

@raimund-schluessler
Copy link
Member Author

I think a mockup for a new design would be nice.

But before implementing this in CSS we need to decide on the underlying javascript library.

@pixelipo
Copy link
Contributor

Maybe something more Material-istic?

https://github.com/material-pickers/time

Doesn't seem to be super-active, but it's not dead either.

It is missing some interesting/important features, such as - use the already set time, start from current time, follow cursor, drag-and-release, animated marker, automatically move to minutes-selector after selecting hours. Perhaps the author would be interested in accepting contributions...

On the other hand, IMO this design is much more natural and faster compared to all the others mentioned ⬆️ Plus it is the only one that allows selecting any of the 60 minutes included in the hour - this is a killer feature for me 🥇

@raimund-schluessler
Copy link
Member Author

On the other hand, IMO this design is much more natural and faster compared to all the others mentioned ⬆️ Plus it is the only one that allows selecting any of the 60 minutes included in the hour - this is a killer feature for me 🥇

The demo on this page gives me a timepicker where I can only select full hours?! Am I missing something?

screenshot-2017-9-17 material pickers - time

@tcitworld
Copy link
Member

The minutes picker shows up after clicking « ok ».

@dartcafe
Copy link
Contributor

dartcafe commented Nov 2, 2017

Any progression in chosing a default time picker?

@jancborchardt
Copy link
Member

Slight visual design improvement to the timepicker at #7054, please review! :)

I would absolutely not go for an Android-style clock-face time picker for several reasons:

  • Barely anyone is used to circular clocks anymore
  • The distinction between AM and PM is super confusing
  • Check out how iOS does it, much better – for Nextcloud 14 we should do it more like that

And that two times next to each other for Start time and End time. cc @raimund-schluessler @georgehrke

@MorrisJobke
Copy link
Member

macOS:

especially a nice feature for the ending time:

bildschirmfoto 2017-11-03 um 15 21 45

@pixelipo
Copy link
Contributor

pixelipo commented Nov 3, 2017

@jancborchardt isn't the iOS solution very touchscreen-oriented?

@jancborchardt
Copy link
Member

@pixelipo yes, forgot to add some details:

  • The display of the current time should be an input field, for hour as well as minute.
  • The minute picker could do jumps of 5 minutes instead of 1.

But yeah, on macOS there’s not even any kind of time picker, except that one for the ending time …

@raimund-schluessler
Copy link
Member Author

I guess this is done now with https://github.com/nextcloud/vue-components?

@nextcloud-bot nextcloud-bot removed the stale Ticket or PR with no recent activity label Nov 16, 2018
@MorrisJobke
Copy link
Member

@skjnldsv
Copy link
Member

Yes! :)
But it's not really into server. Though we should recommend using vue?

@jancborchardt
Copy link
Member

We can consider this done and closed because the Vue component is available and real nice! :) And yes, we should recommend using Vue since it makes it much easier for app developers to provide a great UX.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design, UI, UX, etc. enhancement
Projects
None yet
Development

No branches or pull requests

10 participants