Repository navigation
feat(ui): spin the arrow on "Check now" and "Check again" - #982
adnan-bhaldar wants to merge 3 commits into
Conversation
The Check now button on the About page only disabled itself while an update check ran, so a quick click looked like nothing happened. It now has a refresh arrow in front of the label that turns for as long as the check runs. It looks more professional and shows the app is working. The arrow is the drawn Icon.Refresh, not a text character, so it turns around its own center. A check can finish in a blink, so the result is held back for 900 ms to let the arrow make about one full turn. The turning is done in code by a new attached property, Spin.IsActive (Controls/Spin.cs), not by a XAML animation in Soft.axaml. A Style.Animations rule for the arrow in Soft.axaml stopped the ComboBox dropdown chevron from flipping, even though the rule only matched the check arrow. Spin.cs is in Controls because that folder holds Filee's own controls and helpers, while Soft.axaml is for Avalonia's own controls and is shared with the installer. With Reduce animations on (or the system asking for reduced motion) the arrow does not spin and the result is not held back.
Same as Check now on the About page: Check again on the Engines page gets the refresh arrow, which turns while the recheck runs. It looks more professional and shows the app is working. Recheck is now async so the button knows when it is running, and it keeps the arrow turning for at least 900 ms. It uses Spin.IsActive from Controls/Spin.cs, so no style was added to Soft.axaml. With Reduce animations on there is no spin and no 900 ms hold.
In the Material You theme the whole ToggleSwitch scaled up by 2% on hover. The switch's text label is part of the same control, so the label grew along with the track and knob, which looked like the text jumping. The hover scale (ToggleSwitch:pointerover with scale(1.02)) is removed. The track and knob keep their colour change on hover and the springy transition on the switch is unchanged. Only Soft.axaml changes, and only the Material You ToggleSwitch block.
|
CI failed on one unrelated test: BrowserDropTests.Other_text_does_not_offer_files_to_the_donut |
KnifeLemon
left a comment
There was a problem hiding this comment.
Thanks, @adnan-bhaldar. The turning arrow is a nice touch, and the details are right:
- it doesn't turn with Reduce animations on, and then the result isn't held back either;
- the minimum turn of 900 ms keeps a quick check from looking like nothing happened.
Keeping it out of Soft.axaml after the ComboBox chevron problem is the safe choice, and the comment says why.
Two small changes before merging:
1. One DetachedFromVisualTree handler per start
Spin.Start adds control.DetachedFromVisualTree += (_, _) => Stop(control); every time the arrow starts, and nothing removes it. Each click of Check now or Check again leaves one more handler on the icon. Stop is safe to call twice, so nothing breaks, but the handlers pile up for as long as the page lives.
Keep the handler in State and add it once (or remove it in Stop). For example: subscribe when the State is created, and only start or stop the timer after that.
2. The ToggleSwitch change isn't part of this PR
Soft.axaml also removes the scale(1.02) hover on Material You's ToggleSwitch. The reason in the comment makes sense: the label is part of the control, so the text grew with it. But it's a separate change from the arrow, and the PR body doesn't mention it. Please either:
- move it to its own small PR, or
- add a line about it to this PR's description,
so it shows up in the history for what it is.
CI
The Linux jobs failed in BrowserDropTests ("AppHost not built"), which this PR doesn't touch. I've re-run them.
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 DOCXWhat does this change?
Adds a refresh arrow to the "Check now" button (About) and the "Check again" button (Engines). The arrow turns while the check runs, which looks more professional and shows the app is working. With Reduce animations on (or the system asking for reduced motion) it does not spin and the result is not held back.
The turning is done in code (
src/Filee.App/Controls/Spin.cs, an attached propertySpin.IsActive), not with a XAML style inSoft.axaml. I first wrote it as aStyle.Animationsrule forPathIcon.check-arrow.spinninginSoft.axaml. With that rule present, the dropdown chevron on every ComboBox stopped flipping when opened, even though the rule only matches the check arrow. Removing the rule fixed the chevron, and simplifying its selector did not. I don't know the exact reason, so the animation is kept out of the shared styles.Spin.cssits inControlsbecause that folder holds Filee's own controls and helpers, andSoft.axamlis for Avalonia's own controls and is shared with the installer.Type of change
How was it tested?
dotnet format --verify-no-changesdotnet testScreenshots (UI changes)
None: the change is an animation, which a still image can't show.
Checklist
src/Filee.App/Assets/i18n/*.jsonfiles (no new strings)THIRD-PARTY-NOTICES.md(none added)