Refactor Share & Download UI for better usability #1454

jschleic · 2023-12-07T20:25:58Z

Is your feature request related to a problem? Please describe.

Users of our map often complain they didn't find the gpx download option. We embed a umap on our club website. But having to click the share button to download, then scroll down and find the geojson dropdown to select gpx seems to be not really intuitive.

Describe the solution you'd like
We'd like to have an intuitive, easy-to-use download option of gpx files.

Describe alternatives you've considered

Splitting the gpx / kml download option into a "download" dialog with download-icon would probably be most intuitive. But further increasing the number of buttons on the left hand side and an essentially empty dialog seems not the way to go.
Add gpx output to the new server API could be an option, so that we could place a link to the gpx-download in a more prominent place inside custom maps (e.g. sidebar text or node popup). May be still desirable for special use-cases but imho a cleaner share-dialog is useful for everyone.

While working at the PR I've further unified the different other dialogs.

This PR proposes:

Tooltips for all the buttons now match the headline on top of the dialogs (with Replace "Ctrl" by "Cmd" under macOS and style the "kbd" tag in keyboard shortcuts labels #1449 the headings should probably also be filled from the new constants)
Re-order the share and download formats from simple use cases (share link to friends) to complex ones (embed iframe into custom website)
directly show available formats as buttons instead of hiding them in a dropdown
Add a label explaining the actions a bit more
Finetuned CSS to fix dark-theme hangovers

davidbgk · 2023-12-07T20:35:33Z

@jschleic this is something we should better document but the source of svg icons are in umap/static/umap/img/source/*.svg which are editable with inkscape and then make icons will generate the final optimized ones 😉

It would (hopefully) avoid such a big diff.

davidbgk · 2023-12-07T20:41:52Z

Thanks for your PR!

We'd like to have an intuitive, easy-to-use download option of gpx files.

I wonder if a dedicated URL, like we did for the full (umap) backup and as you suggested, would be pertinent for your use-case to be able to make your own custom buttons. In the meantime, I appreciate that 4-buttons version! Both are possible though and could be part of a two-step PRocess.

yohanboniface · 2023-12-08T05:53:03Z

cc @Aurelie-Jallut could you have a look ?

👍 @jschleic Thanks a lot for this :) Indeed, this dialog needs a refactor. Would you mind doing a first separate PR with the technical part and things unrelated to the new UI proposal ? So we can merge it quickly and concentrate then on the UI/UX part.

Also, what do you think of moving this panel to a dedicated class as we did recently for browser and importer ?

I really like your proposal, but I'd like Aurélie (the UX of the team) to have a look to! So I'd say lets first focus on non UI/UX changes, so we can then focus on a smaller diff. What do you think ?

jschleic · 2023-12-09T19:36:35Z

Thanks for the quick response! I've separated out the headline / title / svg stuff which is about consistency of all dialogs (also UI).
Waiting for feedback from @Aurelie-Jallut here; I will rebase here after #1455 is merged.

jschleic · 2023-12-15T09:19:52Z

Also, what do you think of moving this panel to a dedicated class as we did recently for browser and importer ?

Good suggestion. I moved the renderShareBox code into a separate file together with helpers I think are related.

yohanboniface · 2023-12-15T09:44:59Z

Thanks!

One related issue I've been reported recently: when no SHORT_URL is set, then there is not "simple" share link: only the iframe and the link that includes all the query string.

I'll mention this pull to @Aurelie-Jallut. We need her review to proceed, I'd say.

Aurelie-Jallut · 2023-12-15T14:21:41Z

Hi @jschleic
Thank you very much for this !
I completely agree on the usefulness of using the same headings on the buttons and in the title.

In relation to your proposal, I think we should still group Share a link and integrate an iframe with the card settings functions. But if we add a tab system, we'll be able to see the download links in different formats more directly.
I've added a screenshot of a low-definition model to illustrate my idea.
What do you think?

For the Download section, we can directly add the links with the Download title, which still directs the user to the area.

(At a later stage, we could also look at the contents of the setting box ;) )

yohanboniface · 2023-12-15T14:28:52Z

I've added a screenshot of a low-definition model to illustrate my idea.

Like it!
Two points:

we need to keep a message on the download part saying "Only active layers will be downloaded" (or something like this)
I'd keep the "settings" only in the "Embed" part, so to have:
- in the "share" part: only the base link of the map, shortened if there is a short domain, otherwise normal link
- in the "embed" part: both the iframe code and the direct link of the iframe (so including the query string resulting from the settings), and of course the settings form

Thoughts ?

Aurelie-Jallut · 2023-12-15T14:44:12Z

Only active layers will be downloaded => doesn't this concern Full backup?

If the parameters also concern the basic map link, it seems important to me to display it, doesn't it?

yohanboniface · 2023-12-15T14:53:28Z

Only active layers will be downloaded => doesn't this concern Full backup?

Nope. Full backup means everything. While download will only download what's actually on the map (i.e. visible layers).

If the parameters also concern the basic map link, it seems important to me to display it, doesn't it?

That would indeed make sense, but the basic/short link is without parameters. Like currently in OSM fr server (URL courte VS lien):

Aurelie-Jallut · 2023-12-15T15:22:52Z

Aurelie-Jallut · 2023-12-15T15:28:09Z

if it doesn't make sense to use export / download, we can just keep one of the two :

yohanboniface · 2023-12-15T15:40:05Z

if it doesn't make sense to use export / download, we can just keep one of the two

Even better! :)

davidbgk · 2023-12-16T02:03:51Z

This new interface might be a good candidate to pursue the experimentation of #1461 😇

* ordering is now short URL - download - backup - embed ordered by easier use cases for everyone to complex iframe code for web experts * show available formats as buttons instead of hiding them in a dropdown * add explaining labels * change the dark options fieldset to light gray

download() and format() functions as well as dialog itself and IFrameExporter helper moved into new file umap.share.js

file icon CC0 from https://www.iconfinder.com/icons/9110902/file_download_icon arrow down drawn in inkscape

@Aurelie-Jallut

according to suggestion by @Aurelie-Jallut in umap-project#1454 (comment)

jschleic · 2023-12-19T16:30:34Z

I restyled the download part - embed / tab switcher still open...

yohanboniface · 2023-12-19T17:11:27Z

Very nice!

If you don't want to deal with the tabs, you can just put one box below the other as a first step. And we'll see later, if you have more time/energy, or one of us.

Anyway thanks already for this work :)

yohanboniface · 2023-12-19T17:12:39Z

One small suggestion: instead of repeating "data" for each format, add it in the help label "Only visible layers' data" or something like this ?

* "data" moved to helptext * drop css introduced in previous draft * prettier.js

jschleic · 2023-12-29T20:30:45Z

If you don't want to deal with the tabs, you can just put one box below the other as a first step. And we'll see later, if you have more time/energy, or one of us.

Great! So let's leave it as single page without tabs for the moment.

yohanboniface · 2023-12-31T10:55:57Z

I'm about to merge but one question/suggestion: what about putting the copy button in the same line of the related input here ?

I think using flex should work, and allow translations of the word "copy" to be longer/shorter without troubles. Otherwise an icon may do the trick.

I can also merge like this and do this enhancement in a later step!

yohanboniface · 2024-01-02T20:42:38Z

I'll take it! Thanks for your work @jschleic :)

cf #1454

jschleic mentioned this pull request Dec 8, 2023

Unify tooltip and headline and add the corresponding icon #1455

Merged

jschleic changed the title ~~Refactor Share & Download UI for better usability -- and unify other dialogs~~ Refactor Share & Download UI for better usability Dec 15, 2023

jschleic force-pushed the download-ui branch 2 times, most recently from 06ce5b4 to 63c14fe Compare December 15, 2023 09:17

jschleic added 4 commits December 18, 2023 19:25

refactor shareBox into separate class

d19cc60

download() and format() functions as well as dialog itself and IFrameExporter helper moved into new file umap.share.js

add download icons

aec4330

file icon CC0 from https://www.iconfinder.com/icons/9110902/file_download_icon arrow down drawn in inkscape

re-style download panel

3f6c705

according to suggestion by @Aurelie-Jallut in umap-project#1454 (comment)

jschleic force-pushed the download-ui branch from 63c14fe to 3f6c705 Compare December 19, 2023 16:28

jschleic marked this pull request as draft December 19, 2023 16:30

cleanup sharebox changes

dbf0179

* "data" moved to helptext * drop css introduced in previous draft * prettier.js

jschleic force-pushed the download-ui branch from 9fd23c4 to dbf0179 Compare December 29, 2023 20:23

jschleic marked this pull request as ready for review December 29, 2023 20:30

yohanboniface merged commit 05401af into umap-project:master Jan 2, 2024
12 checks passed

yohanboniface added a commit that referenced this pull request Jan 2, 2024

Align copy button to input in share box

4b0bde5

cf #1454

yohanboniface mentioned this pull request Jan 2, 2024

Align copy button to input in share box #1498

Merged

yohanboniface mentioned this pull request Jan 18, 2024

"Only visible features will be downloaded" ambiguous #559

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Share & Download UI for better usability #1454

Refactor Share & Download UI for better usability #1454

jschleic commented Dec 7, 2023

davidbgk commented Dec 7, 2023

davidbgk commented Dec 7, 2023

yohanboniface commented Dec 8, 2023

jschleic commented Dec 9, 2023 •

edited

jschleic commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

davidbgk commented Dec 16, 2023

jschleic commented Dec 19, 2023

yohanboniface commented Dec 19, 2023

yohanboniface commented Dec 19, 2023

jschleic commented Dec 29, 2023

yohanboniface commented Dec 31, 2023

yohanboniface commented Jan 2, 2024

Refactor Share & Download UI for better usability #1454

Refactor Share & Download UI for better usability #1454

Conversation

jschleic commented Dec 7, 2023

davidbgk commented Dec 7, 2023

davidbgk commented Dec 7, 2023

yohanboniface commented Dec 8, 2023

jschleic commented Dec 9, 2023 • edited

jschleic commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

Aurelie-Jallut commented Dec 15, 2023

yohanboniface commented Dec 15, 2023

davidbgk commented Dec 16, 2023

jschleic commented Dec 19, 2023

yohanboniface commented Dec 19, 2023

yohanboniface commented Dec 19, 2023

jschleic commented Dec 29, 2023

yohanboniface commented Dec 31, 2023

yohanboniface commented Jan 2, 2024

jschleic commented Dec 9, 2023 •

edited