Browse page selected layers #521
Conversation
legend. This is just a rough start; the left sidebar gets broken as this is used.
boolean state only (no filters yet) in the URL.
…the very beginning
it from the active set. (Actually, can only control the active set from the left side, for this step)
… there, to make this style work sanely
| $activeLayers = $activeLayers; | ||
| } | ||
|
|
||
| // The controls for each layer are defined in a layer component's optional |
There was a problem hiding this comment.
This is a trick I've been using in many other projects. One Svelte component logically grouping some functionality can define some controls that wind up in different parts of the page. In this case, we're going a bit beyond that by centrally collecting all of the controls by name.
| <div bind:this={contents}> | ||
| <CheckboxGroup small> | ||
| <div | ||
| style="display: flex; justify-content: space-between; white-space: nowrap" |
There was a problem hiding this comment.
The nowrap thing is very weird and messes up vertical alignment. I can't make everything behave here, but we can iterate on it later
| </span> | ||
| </div> | ||
| </CheckboxGroup> | ||
| {#if show} |
There was a problem hiding this comment.
This is flexible. We might try using a collapsible card next. It should be easy to plug things in here and make them work for all layers
| @@ -41,26 +37,6 @@ | |||
| } | |||
| let state = customUrlState(name, defaultState, stringify, parse); | |||
|
|
|||
| // Mutually exclusive, like a radio button. We need these for checkboxes to work | |||
There was a problem hiding this comment.
Big change to this layer to use radio buttons. Probably should've been like this from the start
| @@ -34,22 +34,19 @@ | |||
| } | |||
| </script> | |||
|
|
|||
| <Checkbox bind:checked={$show}> | |||
There was a problem hiding this comment.
Lots of boilerplate disappears
|
Biggest ask here is running locally and helping test. I've skimmed through everything, but I might've made a mistake refactoring one of the layers |
|
barring a couple of font issues looks good to me |
|
Fixed and made hopefully reasonable decisions for the other things we discussed. I'll push and we can iterate further on the logged-in version. Thanks for helping test |
Demo: https://acteng.github.io/atip/browse_layout_layers/browse.html (you have to manually load scheme data for the first two layers)
This does most of #519's part two. Now the left sidebar is used for selecting layers, but no legends/controls/help are shown there. Selected layers move to a panel on the right and are shown in the order selected. They can be toggled on/off and then deselected (from either the left or right side).
Getting this to work forced a good refactor of all the layers, organizing the different bits of their functionality.