jbenet / depviz

dependency visualizer for the web
https://jbenet.github.io/depviz
MIT License
49 stars 10 forks source link

Config: Add a configuration page #66

Closed wking closed 7 years ago

wking commented 7 years ago

We're storing app state in query parameters, which means we need to preserve those query parameters across links. The form currently only allows users to toggle expanded-ness, which was already available via keybindings. But the new UI is more usable via touch, and it sets the stage for more complicated configuration (e.g. setting GitHub credentials).

The ?back=… handling lets users keep their place as they toggle in and out of the config view. When you leave the config view by toggling the config link, we use the back parameter to send you back to the view you came from. When you leave the config view via another link (e.g. the depviz icon or the jump bar), we need to clear the back parameter. We handle the clearing in changeView, bound to the /-wide onChange. I couldn't find any hooks more tightly bound to the config view, because:

The config form uses controlled components.

The config icon is U+2699 (GEAR).

This commit uses Object.assign frequently for copying objects so we can edit the copy without changing the original. The method is in ECMAScript 2015 (6th Edition, ECMA-262) and is supported on all major browsers except Internet Explorer. If anybody complains about missing support, we can always add the polyfill (assuming react-scripts / babel don't already do that for us).

Fixes #34.

wking commented 7 years ago

Screenshots of the header-bar addition:

settings-inactive

And inside the config view:

settings-active

wking commented 7 years ago

Merged my own PR (over a week without negative reviews).