Toolbar placement alteration

[orangemug]

I'd like to suggest moving the toolbar from the top, to the left of the editor, and changing from modals to using 'panels' in the main UI.

Here are some mockups of my proposed changes (ignore the contents of the 'Layers' & 'Layer' panels).

Rather than opening modals for each action, we would instead swap out the 'panels'. So for example if I want to add a source I would

1. Click the menu item for 'sources'
2. The 'layers & layer' panels would be replaced by a 'sources' panel
3. Add my source to the style via the panel. If you were in inspect mode you'd see the source load on the map instantly
4. Click 'layers' from the menu to continue editing the style

Reasons for this change are as follows

• We have tickets that require more non-modal UI elements, where modals are not a good fit. These include

  • 155 to display git/undo history

  • 202 a general debug panel to turn on debugging info. #82 could also go in this debug panel

  • https://github.com/maputnik/editor/issues/109#issuecomment-288072812 a JSON editor for the entire style.
• I think all the current modals, except 'open' don't need to block interaction within the UI
• We can gain more menu space by stacking the menu items vertically while still allowing for text descriptions by pressing the hamburger menu (at the top)

Issues

• Where would the inspect/map mode toggle live in the UI? The menu seems like an odd place with this new design. Maybe on the map directly?

Any thoughts/feedback would be much appreciated.

[wxqqq]

i think the mode toggle can include in Layers Panel. you can make a checkbox to control it .

[justenPalmer]

I like the idea of a UI redesign. I've also been thinking along the same lines with regards to making the interface more flexible and modular. I think it will be necessary to incorporate functionality like the new expressions syntax.

A few thoughts:

• The vertical toolbar is a cool idea. Freeing up the space taken up by the top bar gives the map preview more room to breathe.
• Sources should be its own section as opposed to being hidden inside the settings panel. I like how you did that.
• I do think we need a way to see what stylesheet you are currently editing as well as a way to get to other stylesheets. Perhaps that could be done with the hamburger menu option in your design (The nav items could show labels when they are hovered)
• Map options like inspect should be detached from the stylesheet controller as it is a different intention. I think a control on the map level would make sense. Maybe bottom left?
• A JSON editor for the whole style would be awesome. That seems to be a common work flow for more advanced cartographers.

I'm currently working on comping up some UI/UX ideas as well. Look forward to contributing more to this discussion. Thanks for getting the ball rolling, @orangemug.

[kateler]

As a frequent user of Maputnik, a feature I'd really like is two additional zoom buttons. Right now, the zoom buttons go up or down exactly one zoom level (e.g. from 15.43 to 16.43). I'd like the new buttons to go up or down to the next even zoom (e.g. from 15.43 to 16). Settings are usually made for the even zoom numbers, so I often want to get back to those after freely zooming with my scroll wheel.

Not sure if this is the place for a smaller feature request, so let me know if I should move it.

[orangemug]

I've moved https://github.com/maputnik/editor/issues/252#issuecomment-364537381 to it's own ticket #256

[justenPalmer]

Here's a quick UX comp I've been working on. I took some of the ideas from @orangemug and expanded on them. My goal is to make the layer editor more modular and incorporate the expressions syntax into layer properties.

Expressions UI ideas:

• use color to separate types of expressions into categories
• use of lines and nodes to demonstrate relationships between expressions and their children
• values returned by expressions float right to make them stand out
• expressions are expandable and collapsable (click arrow to left of expression)
• use icons on values to define their type (" in example for strings)

It's still a work in progress, but I'd like to get some feedback from the community on the direction of this UX.

[orangemug]

Hey @justenPalmer lets break down your ideas a little, so we can discuss them. Plan of action, move the expression syntax discussion to issue #223. It was probably my fault this is an overly broad issue title. Here lets just discuss one topic that is getting room for more panels. Changes are better discussed piece by piece so we can implement them and track separately.

It looks like the the basic approach is the same moving the toolbar vertically and to the left of the UI.

[justenPalmer]

@orangemug will do. With that in mind, I think this comp does demonstrate a slight alteration to the toolbar you made which is to place the title of the style currently being edited in the top bar. This gives the user greater context and also gives them a way to potentially go up a level and select another style to edit or create a new one.

[orangemug]

Thanks @justenPalmer

This gives the user greater context and also gives them a way to potentially go up a level and select another style to edit or create a new one.

I'd assume that most people don't name there styles something useful until it's time to publish them. So the name probably doesn't give much context at the moment. When we finish GitHub integration we could put the repo name up top. With GitHub you're kind of forced into naming the repository at start of the journey.

[justenPalmer]

@orangemug, yeah it would be interesting to see how many users would find the name useful. When a new stylesheet gets created, we could use a default name of "Style 1" and give the user the ability to change the name. If a stylesheet gets uploaded, we could use the filename prefix as the style name. I think it's important to have a name associated with the style to help the user track that style, especially if the user has multiple styles they are concurrently modifying.

[orangemug]

I've created a prototype here https://276-84182601-gh.circle-artifacts.com/0/tmp/circle-artifacts.TtN6Pxj/build/index.html Updated: https://281-84182601-gh.circle-artifacts.com/0/tmp/circle-artifacts.YPaobNs/build/index.html

Looking for feedback. Here are some details

• Added title as per @justenPalmer suggestion. This would be the repo url in GitHub mode or the filename if opened from a local file on disk. Note it's just a static string at the moment.
• Although not yet implemented, the modals for Export/Source/Style settings would be turned into panels replacing the Layers panel in the UI on selection.
• Inspect mode still needs moving. I suggest next to 'zoom level' in the UI

[oterral]

The new UI is a very nice improvment.

I like the preview/inspect button from @justenPalmer and close to the 'zoom level' makes sense.