HaloSPV3/Gemini

Redesign Settings Panel

Opened this issue · 1 comments

BinToss commented

related issues

Skip to Layout C

The Problem and Considered Solutions

The Settings panel worked well when we could fit all settings and their categories into three columns.
Adding HXE's Settings required adding an "Advanced" button.
Later on, we may add additional settings for generic plugins (DSOAL, XIDI, DXVK/dgVoodoo2, ReShade, et cetera) and Halo plugins (OpenSauce, Chimera 1.0, Vulpes, CEnshine, et cetera).

Fitting all of these into a relatively small canvas is impossible without making it nearly unusable.

  • Introducing scrollbars into the existing layout is a solution, but doing so does not reduce clutter.

Settings Redesign Proposal

  • The Settings panel needs to be divided into Gameplay, Video, Graphics, Audio, Input, Network, and Misc pages.
  • These pages will have a Vertical scrollbar and line wrapping where necessary.
  • Scale will need to be taken into account for readability on low- and high-DPI displays. Resolution can be considered, but DPI is a better metric for scaling content.
  • WebView for HTML/CSS design may accelerate cross-platform development. Markdown-to-HTML codegen may help with basic design. Advanced design will require a visual designer and/or HTML/CSS programming.
  • A Settings Category is granted one page. Sub-categories sorted lexographically-ascending as Sections with hyperlinked Headers.

Visual Studio Code's Settings UI is the greatest influence on the proposed layouts

SettingsDemo.webm
rejected layouts

❌ Layout A

Similar to Visual Studio Code's Settings UI, but root categories are placed in a navbar at the top of the canvas.

  • Search bar at top of canvas, below root-Category Nav buttons. Filters current Settings page for keyword using "Contains" match.
  • Gameplay, Video, Graphics, Audio, Input, Network, and Misc navigation buttons will be place in a row anchored to the top of the canvas
  • Sub-categories will be made visible per Category in the left-side Navigation pane

LayoutA

❌ Layout B

Identical to VSCode's layout

Changes from Layout A

  • No top NavBar. Root Settings categories are placed in the left NavPane.
  • Sub-categories are nested under their root Category.
  • All Settings are on one long page just like VSCode's Settings UI.

LayoutB png

✔️Layout C

Layout B with the addition of a top-bar for buttons moved from the main menu.

  • Start's dropdown allows for starting into different modes.
  • Updates button
  • Placeholder buttons can be changed to open URLs in an embedded or external browser i.e. Twitter, Discord, ModDB, NexusMods (inactive for now), GitHub.

LayoutC

XCF project file
SPV3_SettingsRedesign_(2022-08-02_05.21.08).zip
SPV3_SettingsRedesign_(2022-08-02_17.10.13).zip

BinToss commented

I spent too much time on those layout designs.