age slider

[michaelchin]

Could be similar to the GPlates Age and age slider design but make it look more contemporary​.

There should be a button to show/hide the age slider

[michaelchin]

This UI control is a bit too long. I think it should be broken into two smaller controls. One is the slider and the other is a set of play buttons. Who would like to take this one? Any volunteer? @matthewmerkas @yiyanw

[matthew-merkas]

I can take it

[matthew-merkas]

Hey @michaelchin. I just finished mocking this up (commit efe7b97). It's not functional yet, but the design is done (see the video below). Let me know what you think. Thanks

https://user-images.githubusercontent.com/101497645/168479838-133f1780-52c8-454c-bc92-7d30bc4c417f.mp4

[michaelchin]

Hey @michaelchin. I just finished mocking this up (commit efe7b97). It's not functional yet, but the design is done (see the video below). Let me know what you think. Thanks

Thanks Matthew. This looks nice.

@mariaseton @nickywright @jcannon-gplates @yiyanw hi team, what do you think?

[nickywright]

For the little arrow button to make the time slider appear: I think that will need to be changed, since it's not obvious it's for the time. Also looks like if the time-menu is closed, you won't be able to see time at all? In which case, maybe change the arrow symbol to be the current time + arrow drop down?

Not sure how this looks on a tablet/phone, perhaps fonts etc will need to be a little larger?

[michaelchin]

Also looks like if the time-menu is closed, you won't be able to see time at all? In which case, maybe change the arrow symbol to be the current time + arrow drop down?

The time will be displayed at top left corner. see https://github.com/GPlates/gplates-app/issues/3

[nickywright]

Should the time slider be a dropdown from the top then? It seems strange to me to have the slider at the bottom and time at the top left. Though maybe it will be more obvious when fully mocked up?

[matthew-merkas]

I'll move the slider to the top then and change the open button to a clock/stopwatch. The button will look more at home with the others in the top right anyway. And, yep, I'll also add the time to the top left

[nickywright]

How hard is it to change? Not sure what @mariaseton etc thinks. Top might also look more at home to those familiar with the GPlates desktop app (and agree that grouping buttons together will better).

[mariaseton]

I agree that the top is better. But it looks good. and thanks for the little video demo. That's really useful for us.

[matthew-merkas]

I moved the slider to the top and made the age inputs functional in the last few commits. Let me know what you think

https://user-images.githubusercontent.com/101497645/168635697-c5a6586e-4483-4ca2-8b6d-f5e4a9522f6b.mp4

[michaelchin]

I moved the slider to the top and made the age inputs functional in the last few commits. Let me know what you think

Looks great, thanks.

By the way, when you work on issues, could you please make changes on a branch and create a pull request when the changes are done? It will make the code review easier and I can squash the commits to make the commit history cleaner. Thanks.

[nickywright]

Looks great to me! Not sure how it looks on a device but might need to make the icons/text all a little larger (I'm sure it can be figured out later though).

If there is extra space (e.g. next to the icons on the top right) and doesn't make the UI messy, would it be worth considering adding some of the 'animation' settings I mentioned in #8 here too? E.g. a 'flip' button for reversing the animation, or a way to set min/max times at either end of the slider (this might look a bit messy but not sure)?

Or could go further and have all animation settings all controlled from something that opens up when you've got the time slider open - e.g. button with the three dots/lines (on top right, next to the playback buttons), and that then goes directly to changing other options such as time increment (if possible), playback speed, etc.

No clue how it would look or if it would be too messy on a phone, but maybe it would be more intuitive for students to change some of the animation parameters here than going into a separate settings menu. Something to think about at least.

[michaelchin]

The slider and play buttons have been added. This issue has been resolved. Other related requirements will be handled in other new issues. Close this issue.