FOMOD UI

[erri120]

Part 3 of #316. Follow-up on #532 and #541.

TODO:

• Add VMs (Window, Step, Group, and Option)
• Logic and wiring
  • Required options can't be un-checked
  • Pre-selected options are pre-selected in the UI
  • Disabled options can't be selected
  • Only one option can be highlighted across all groups
  • Use CheckBox or RadioButton depending on the group type
  • Show different icons depending whether the option has a description on an image
  • The window should close when the installer is finished
  • Closing the window before the installer is finished should cancel the installation
  • Show "Select at least one" for that group type only
  • Validation (blocked by Add FOMOD selection validation #560)
    • Groups that fail validation should turn red
    • View should scroll to first invalid group
    • View should remove red styling immediately if user selects option and makes the group valid
  • Make the window modal Panels are not going to be modal either
  • the thing works (blocked by FOMOD library prevents installation due to path issues #625)
• Option highlighting
  • Description shows on the right
  • Select option on user interacting with checkbox/radio button
  • Option Name shows on the preview header
  • Appropriate Icons show on the preview header
  • "No Additional details" shows when nothing is available.
  • Highlight the first option when the step changes
  • Images show on the right (blocked by Rework AssetUrl into a discriminated union for different types of assets #614):
    • Images from files
    • Remote images
• Add Footer stepper progress bar thingy
  • Progress bar
    • Update IGuidedInstaller to get the step count and current step number from UiDelegate.
  • Next Button
    • Sets the results of the TaskCompletionSource to UserChoice.GoToNextStep with all selected options.
    • Should turn into a "finish" button and hide the right arrow icon
  • Previous Button
    • Sets the results of the TaskCompletionSource to UserChoice.GoToPreviousStep
    • Should be disabled if there is no previous step
• Show "Installation complete" screen after the last options.
• Use translatable strings
  • Preview section needs translations
• Performance (time in user code is minimal, the FOMOD library is actually partly degrading performance)
  • Updates should be responsive
  • Layout changes shouldn't be noticeable
  • VMs and other instances shouldn't leak
  • InstructionsToModFiles in FomodXMLInstaller is very slow: 170 secs for 790 instructions while debugging, I reworked the methods, so it now only takes 74ms.
• Styling & Layout
  • StepView
    • Footer Stepper thingy
      • Progress Bar
      • Buttons (the disabled button doesn't have a border for some reason fixed)
    • Description/text section
      • Layouts
      • Borders
      • Fonts
      • Icons
      • No highlighted option case We always highlight first option
      • Option has no details case Scrapped dedicated style for this for simplicity.
    • Group
      • Layout
      • Colors
      • Padding
      • Fonts
      • Capitalization of text
      • Selection highlight style Sacrificed figma style to have something working
      • SelectionHover Style
      • Required Option style
      • Disabled Option style
      • Option
        • Colors
        • Layout and padding
        • CheckBoxes white background
          • Disabled style
          • Required style
        • Radio Buttons white background
          • Disabled style
          • Required style
        • Icons
        • Font

Differences from figma design:

Agreed changes:

• Validation is run immediately and invalid options are red from the start.
  This was easier to implement and allowed updating the view as soon as user changed options.
• File icon was changed to TextBox icon, which seems more fit for the use case
• Image and text icons can be shown at the same time instead of just showing Image. Should be clearer.
• The UI always highlights the first option, so that the preview on the right can't be empty.
  This eventuality was not covered in the design, so this bypasses that.

Compromises and additions:

• The UI is inside a window, not an overlay. This means that it isn't modal by default.
  This shouldn't matter too much since it will be ported over to Panels once those are ready.
• Checkboxes and radio button use BrandPrimary orange color instead of white colors.
  Didn't manage to find a good way to style only these ones and investigating more might have taken too much time.
• In case option has no preview, the "There are no further details" text is not centered and a bit grayed out like design.
  This was cut mostly due to the hassle required to have a special styling case for that.
• Option highlighting uses the same dark color of main background and same background color of :pointerover
  We attempted the lighter color, but we only managed to change the background, not the foreground elements to use a darker shade, making the Text and icons illegible when highlighted.
  Having proper white based highlight could be possible but it needs time and code to support it, so this version was implemented for now to avoid wasting too much time on it.

Additional changes:

• Added styling entries for all Font styles in Figma, with matching names to make things easier.
• Improved global CheckBox styling to resample figma as much as possible.
• Added global RadioButton styling to resample figma style as much as possible.

[github-actions]

This PR conflicts with main. You need to rebase the PR before it can be merged.

[codecov]

Codecov Report

Merging #600 (7bd72b0) into main (702ff3b) will decrease coverage by 3.29%.
Report is 3 commits behind head on main.
The diff coverage is 18.07%.

@@            Coverage Diff             @@
##             main     #600      +/-   ##
==========================================
- Coverage   68.05%   64.76%   -3.29%     
==========================================
  Files         597      620      +23     
  Lines       16420    17527    +1107     
  Branches     1091     1134      +43     
==========================================
+ Hits        11175    11352     +177     
- Misses       4969     5893     +924     
- Partials      276      282       +6     

Flag	Coverage Δ
Linux	64.09% <17.99%> (-3.24%)	⬇️
Windows	63.89% <17.99%> (-3.34%)	⬇️
clean_environment_tests	64.76% <17.99%> (-3.29%)	⬇️
network_tests	?
networking_tests	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage
src/Games/NexusMods.Games.FOMOD.UI/Extensions.cs	0.00%
...D.UI/FooterStepper/FooterStepperDesignViewModel.cs	0.00%
...mes.FOMOD.UI/FooterStepper/FooterStepperView.axaml	0.00%
....FOMOD.UI/FooterStepper/FooterStepperView.axaml.cs	0.00%
...s.FOMOD.UI/FooterStepper/FooterStepperViewModel.cs	0.00%
...OD.UI/Group/GuidedInstallerGroupDesignViewModel.cs	0.00%
...ames.FOMOD.UI/Group/GuidedInstallerGroupView.axaml	0.00%
...s.FOMOD.UI/Group/GuidedInstallerGroupView.axaml.cs	0.00%
...es.FOMOD.UI/Group/GuidedInstallerGroupViewModel.cs	0.00%
...UI/Options/GuidedInstallerOptionDesignViewModel.cs	0.00%
... and 38 more