Skip to content

Add slim accent scrollbar styles and themes for improved UI consistency - #568

Closed
adnan-bhaldar wants to merge 2 commits into
KnifeLemon:mainfrom
adnan-bhaldar:feat/modern-soft-scrollbar
Closed

adnan-bhaldar wants to merge 2 commits into
KnifeLemon:mainfrom
adnan-bhaldar:feat/modern-soft-scrollbar

Conversation

@adnan-bhaldar

Copy link
Copy Markdown
Contributor

Tip

Start the title with a prefix so the PR is labeled automatically: feat: fix: docs: ci: build: i18n:
Example: fix(hwp): keep tables when converting to DOCX

What does this change?

Replaces the classic Fluent scrollbar (arrow buttons, grey track, widens on hover) with a slim, accent-colored one, and fixes two spots where row highlights spilled out of their container. Only src/Filee.App/Styles/Soft.axaml changes.

  • Scrollbar: rounded 6px pill with small chevron arrows. Both are faded at rest and turn the full accent color on hover or drag. It no longer widens on hover. It follows the accent color in light and dark mode, and works vertically and horizontally.
  • Lists (ListBox.soft, e.g. Presets): the scrollbar now has its own column instead of floating over the list, so the selected or hovered row ends before the scrollbar.
  • Dropdowns (ComboBox): rows are rounded and inset, so the selected or hovered row fits inside the rounded popup. The popup uses SoftRadius and the rows use SoftRadiusSmall, so both follow the Softness setting, down to sharp corners.
  • Reduced motion also turns off the scrollbar's fade.

Type of change

  • Bug fix
  • New feature or improvement
  • New format or engine
  • Translation
  • Documentation
  • Build, CI or dependencies

How was it tested?

  • dotnet format --verify-no-changes
  • dotnet test
  • Tried it in the app (what you converted or clicked, and on which OS): ran the dev build on Windows with dotnet run --project src/Filee.App. Checked the scrollbar on the Presets list and the main page, hover and drag, and the Resize and Rotate dropdowns in the Presets editor.

Not tested: macOS, Linux, the Windows installer (Filee.Setup links the same Soft.axaml, so it picks up the new scrollbar and dropdown styles too), and the Softness slider at every setting.

Screenshots (UI changes)

Before After
Scrollbar at rest image image
Scrollbar on hover or drag image image
Presets list: selected and hovered row next to the scrollbar image image
Dropdown (e.g. Resize or Rotate) image image
Dropdown with Softness set to sharp image image
Dark theme image image

Checklist

  • New UI strings are in all src/Filee.App/Assets/i18n/*.json files (no new strings)
  • New third-party code or binaries are listed in THIRD-PARTY-NOTICES.md (none added)
  • The PR does one thing (unrelated changes go in a separate PR)

@KnifeLemon

Copy link
Copy Markdown
Owner

Thanks @adnan-bhaldar for the work and the before/after screenshots. The change is tidy and stays inside Soft.axaml.

We've decided to keep the current scrollbar, though, so I'm closing this one. A 6 px thumb is harder to grab than today's (the Thumb itself is only 6 px wide, so the rest of the column pages instead of dragging), and at rest the faded accent is hard to see: about 1.7:1 on the light page, where controls should reach 3:1. Making it easy to grab and clearly visible would bring it close to what's there now, so the change wouldn't buy much.

The list and dropdown highlight fixes are worth having on their own. If you'd like, a small PR with just those (the selected row ending before the scrollbar, and rows inset inside the dropdown's rounded corners, keeping the Material You popup's shadow) is welcome.

@KnifeLemon KnifeLemon closed this Oct 25, 2026
@adnan-bhaldar

Copy link
Copy Markdown
Contributor Author

Thanks @adnan-bhaldar for the work and the before/after screenshots. The change is tidy and stays inside Soft.axaml.

We've decided to keep the current scrollbar, though, so I'm closing this one. A 6 px thumb is harder to grab than today's (the Thumb itself is only 6 px wide, so the rest of the column pages instead of dragging), and at rest the faded accent is hard to see: about 1.7:1 on the light page, where controls should reach 3:1. Making it easy to grab and clearly visible would bring it close to what's there now, so the change wouldn't buy much.

The list and dropdown highlight fixes are worth having on their own. If you'd like, a small PR with just those (the selected row ending before the scrollbar, and rows inset inside the dropdown's rounded corners, keeping the Material You popup's shadow) is welcome.

Then how about making the scroll bar thumb 8px or 10 px

@KnifeLemon

Copy link
Copy Markdown
Owner

Thanks for following up! Width alone wouldn't change our decision, though: the current Fluent scrollbar already works well, and a wider pill that's also easy to grab and clearly visible ends up close to what's there now, so we'd rather not spend more time on the scrollbar. We'll keep it as it is. The list and dropdown fixes are still welcome as a separate small PR.

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.

2 participants