Upload vs Download vs View code icons and windows (UI/UX Suggestions)

[candideu]

Hi Stefan! I found your excellent project on Mastodon, and couldn't wait to check it out!

I wanted to share some UI observations/suggestions as first-time user in regards to the icons and windows in the top toolbar:

Import Button

This icons resembles a download icon, which made me think that the button would allow me to download the code. Perhaps something like this could represent this action?

Additionally, some kind of prompt of what to import / how to do so would be awesome. Having the existing code in this window as well would also help users understand what they're overwriting (like in the "Code" window). I presume it only takes in HTML code, but perhaps a note about that would make it more clear. Also, I'm not sure if this is possible to do in GrapeJS, but being able to paste in CSS would be dope, or even being able to upload a previous zip export.

Code Button

It took me a few minutes to figure out that this button was the one to click on to download my project.

I initially thought that I could edit the code from here as well, but it doesn't appear to be the case (though, it would be nice to merge this window with the import one, as a sort of way to view the existing structure, edit it, AND/OR overwrite it, you know?)

If editing isn't possible within the confines of GrapeJS, I would recommend:

• Adding a "Copy" button, so that it's clear that it's a View-only mode of the code, and meant to be copy-pasted elsewhere
• Adding some helper text on what to do from here ("Copy the following code into the text editor of your choice for further editing, or click on the Export button below to get a readymade zip folder that you can upload to the web host of your choice.")
• Rename this window and icon to "View code / Export"

Missing Tooltips

Some icons appear to be missing their tooltip. Not sure if this is a Firefox thing?

[stefanbohacek]

Thank you @candideu for sharing your thoughts!

I went ahead and changed the icon for the import button (I've clicked it a few times myself by accident), but you are also right about the way the import itself works, so I opened #4 to look into improving that.

As for the missing tooltips on hover, I opened a ticket for that here: GrapesJS/preset-webpage#87

I'm also not sure how to add/change this text programmatically, so I asked about that as well.