Skip to content

Improve UI layout, item management, and socket editing - #10360

Open
AdamZ-8113 wants to merge 2 commits into
PathOfBuildingCommunity:devfrom
AdamZ-8113:feature/ui-overhaul
Open

AdamZ-8113 wants to merge 2 commits into
PathOfBuildingCommunity:devfrom
AdamZ-8113:feature/ui-overhaul

Conversation

@AdamZ-8113

Copy link
Copy Markdown
Contributor

Description of the problem being solved:

This PR adds dozens of minor UI/UX enhancements without meaningfully disrupting any of the UIs. Here's the detailed list of changes.

Tree

  • Removes the pixel gap across the bottom navigation bar in the Tree view.

Skills

  • Quality column now shows an item-specific breakdown of all quality sources for a gem, similar to the tables on the Calcs page
  • Adds actions from the Optimise (sockets) button action into undo/redo history.
  • The Label field now dynamically updates based on the inferred label or user input
  • Shows disabled skills in the gem list.
    • Rather than <No active skills>, we show the name of the disabled skill gem in grey text first, with "no active skills" as a fallback.
    • This is useful for guard skills attached to a trigger/automation, where the guard skill is disabled for calc purposes.
  • Updates button sizing, spacing, and layout.
  • Labels Imbued Support as (Legacy), makes it grey, moves it below the gem selector, and stops it from highlighting other supports on hover.
  • Item socket colors/links can now be updated from the Skills tab, beyond the 'Optimise' button.
  • Dialla's Malefaction no longer applies quality bonus to gems that exceed the socket limit (Bug Fix).
  • The column header Count: now appears even if the first gem in a group is not a skill gem (Bug Fix).

Items

  • Adds search, sorting, and loadout filtering to the full inventory/item list.
  • Cleans up the way loadouts are displayed in the item list.
    • Removes the Used by prefix before every loadout name, and now multiple loadouts are listed instead of only the first.
  • Item type options in the unique/rare DBs are now filtered based on the slot selected.
    • For example, if the slot is filtered to Weapon 1, we no longer display Amulet in the type drop down, and the type resets if the slot filter is changed.
  • Updates item calc tooltip placement and viewport handling.
    • When hovering over an item with many stat comparisons, like a DPS jewel in a build with a dozen jewels, the tooltips are pushed to the right instead of covering the whole screen.
    • When double-clicking the item to add it to the build, the viewport focuses closer to the Add/Save/Cancel buttons, instead of on the far right side. This fixes users having to scroll left constantly.
  • Updates socket color and link selectors.
    • They now use smaller arrows so that the W character doesn't clip, and the link selectors use an = style design, instead of checkboxes. This more closely emulates how we display sockets on items.
  • Adds support to change socket colors and links in bulk.
  • Combines ordinary and catalyst quality editing into one field with an adjacent catalyst selector.
  • Expands the width of the influence boxes to avoid clipping influence names.
  • Makes minor adjustments to spacing, alignment, and layout.
  • Reworks modifier, implicit, corruption, and enchantment dialogs to be more consistent.
    • Fixes issues with spacing, labels clipping, etc.
    • Adds (Legacy) to the labels for Labyrinth enchants on Belts/Gloves/Boots.
  • Moves Add Crucible Modifier... into the Add Modifier button with a (Legacy) tag.
  • Renames Trade for these items to Item Finder (Weighted Mod Search)....
    • The button explicitly looks for new rares (and a few uniques) with a weighted mod search.
    • The Buy Similar... button is a much better representation of "Trade for these items".

Calcs

  • Makes Calcs less cramped, with wider labels and tables and an extra miscellaneous-defence column when space permits.
    • Falls back to the existing layout if the viewport doesn't support it.
  • Opens Rage, Charges, Other Avoidance, and Other Ailment Defences expanded by default.

Configuration

  • Widens Configuration sections slightly and updates spacing/size/alignment for Set selector, search, and show all configs buttons.
  • Gives Custom Modifiers a larger dedicated editing area on the right.
    • Position and size are reverted/adjusted in narrower viewports.
  • Increases drop down font size for easier readability without making the boxes taller.

Import/Export

  • Updates all 3 panels with more uniform spacing, size, and alignment.
  • Updates delete labels to use 'overwrite' for clarity.
  • Fixes authentication error message handling.
    • Front end only, no actual changes to any auth code.
  • Adds All (Overwrite) to both import routes to import the tree, jewels, equipment, and skills together in fewer clicks.
  • Moves Export Support to fit better and renames it Include Support Data

Main UI / View

  • Allows starting a new build directly from the build screen with the New button.
    • The button is to the right of Save As so that years of muscle memory aren't disrupted
  • Top and Bottom Horizontal Info Bars:
    • Improves spacing/balance, adds some labels, and improves tooltips and narrow viewport layout handling.
  • Left Stats Panel/Nav:
    • Increases width a few units to support longer labels like Movement Speed Modifier.
    • Fixes font size, alignment, and spacing in the Main Skill: drop downs, especially for things like minion or channeling skills.
    • Boxes still accommodate the longest known minion attack strings.

This PR should supersede #10292 (items page width)

Steps taken to verify a working solution:

  • Full testing suite run many times throughout this iterative process
  • Many hours of manual testing for each tab being changed
  • Astra-6 Ultra review to look for issues related to code pattern consistency, state management issues, unintended global changes, etc.

Link to a build that showcases this PR:

Before & After Screenshots

This is a non comprehensive set, but showcases the overall intent

image image
image image
image image
image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant