fkling / fkling/astexplorer

Feature request: Settings drawer

Open
#468 7 comments 6 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
6.5k
Forks
772
PR merge metrics
No merged PRs in 30d

Description

I think we should move the toolbar options into a settings drawer. I'd love some feedback on whether you like the idea and anything I've missed. Rough sketches of what I'm thinking below:
![IMG_0380](https://user-images.githubusercontent.com/9434500/70096697-8fc3ea00-161f-11ea-9117-50555c6ff958.jpg)
The drawer could be open by default on first visit to the page, but closed once you have selected settings (like after a reload).
![IMG_3728](https://user-images.githubusercontent.com/9434500/70096698-8fc3ea00-161f-11ea-90bc-894d42557cbb.jpg)

I've left the "save" and "help" menus in the toolbar. I'm not sure about the save menu yet, but think that's a separate concern for a different issue 😄

Better view of how the overlay/drawer might look here. Obviously there is loads of detail missing (close button, actual settings, nice spacing, etc) but you get the idea:
image

# Why?
1. Allows **more space to explain each setting** (easier for beginners). We would have more space to give details about the parser and transformer too.
1. Allows for **more extensive settings** - There are a bunch of issues for feature requests that seem like they require a more extensive settings area (eg. https://github.com/fkling/astexplorer/issues/135 https://github.com/fkling/astexplorer/issues/368 https://github.com/fkling/astexplorer/issues/55) but this would also give us the opportunity to add things like themes/dark mode, page layout etc.
1. **More streamlined UI** - My workflow usually only involves using the settings at the top of the page once per project, and then I leave them as is. Having them in the toolbar is a bit unnecessary since they don't change frequently. With the new design, you can set & forget your settings, leaving room to add important info into the toolbar.

# How?
We could build the components needed for the new design without changing the toolbar. Then, when we're ready to release, we'd make the change to remove the old settings from the toolbar and add the cog button to the top right.

I'm happy to continue building this, as I've already started a bit of a spike (which adds a basic drawer which opens and closes) 😄 let me know if you like the idea!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.