amelioro/ameliorate

Separate Details pane if screen width is large enough

Closed this issue · 2 comments

keyserj commented

Is your feature request related to a problem? Please describe.
Right now, the Topic Pane consists of Details and Views tabs:
image
But it's slightly annoying to have to click between these two tabs if I have enough screen real estate to show both.

Describe the solution you'd like
If I have a high enough resolution (mine is 1920px width), there's more than ample space to see both panes at once (similar to Figma):
image

Notes:

  • We currently put the Topic Pane on the bottom of the screen for portrait screens (e.g. mobile); we should still keep one pane in this situation (even if we have a large portrait screen)

Describe alternatives you've considered

Additional context

  • naming: Topic Pane with Details tab and Views tab if combined, Views Pane and Details Pane if separate

Technical ideas

  • How to make Primary vs Secondary Pane, depending on screen size, become open after clicking Details indicator? Right now, is controlled by isTopicPaneOpen via pane store
    • need a variable for each toggle action - so still need isPaneOpen for the expand/collapse button, but that could be localized to the Pane; then we just need isDetailsPaneOpen for the Details Indicator click. Whether Topic Pane or Details Pane uses this would be based on screen size
  • MUI breakpoints should be helpful
    • we're already using them here too (probably show double panes if above MUI's xl width, i.e. 1536 pixels)
alextilot commented

It might be nice to have 2 configuration options.

  1. Force split/combine, allow user to change preference
  2. Allow the user to swap the 2 pane's information with each other details <-> views.

Thoughts?

keyserj commented

It might be nice to have 2 configuration options.

  1. Force split/combine, allow user to change preference
  2. Allow the user to swap the 2 pane's information with each other details <-> views.

Thoughts?

Hmm. I agree that these two would probably be nice, but I don't think are necessary. I think it's likely that most users will prefer double pane with > 1500px monitor, and probably won't have much preference which side details/views are on.

I suppose you could probably get away with a simple config for both (like alwaysOnePane: boolean and detailsOnLeftPane: boolean. That might also create some awkwardness with the situation when one pane is true and detailsOnLeftPane is false. Potentially we could go with a flexible tab-docking setup, but that seems like way more effort than it's worth (and complexity might be too much as well if the abstraction isn't well-organized).

  • 👍1