Skip to content

Fix updater file integrity dialog layout #20999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 12, 2023
Merged

Conversation

bx80
Copy link
Contributor

@bx80 bx80 commented Jul 11, 2023

Description:

Fixes #20961

This PR adds missing CSS classes to the file integrity dialog shown on the updater screen and tweaks the style to better match the rest of the UI. Includes a new UI test to prevent future regression.

Before:
image

After:
image

Review

@bx80 bx80 added Bug For errors / faults / flaws / inconsistencies etc. not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org. c: Design / UI For issues that impact Matomo's user interface or the design overall. Regression Indicates a feature used to work in a certain way but it no longer does even though it should. labels Jul 11, 2023
@bx80 bx80 added this to the 5.0.0 milestone Jul 11, 2023
@bx80 bx80 self-assigned this Jul 11, 2023
@@ -95,7 +97,7 @@ public function getUpdaterJs()

$files = array(
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-ui-dist/jquery-ui.min.js",
"node_modules/jquery-ui-dist/jquery-ui.js",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason for switching to the unminified version?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I must have edited getUpdaterJs() instead of getUpdaterCss() at some point. 🤦 I've reverted it.

@michalkleiner
Copy link
Contributor

Nice! One thing to note from the 'after' screenshot — the colour of the close button in modals is usually red.

@bx80
Copy link
Contributor Author

bx80 commented Jul 11, 2023

I overrode the model close button color to green so it matched the color of the other buttons on the page, maybe I should have left it red?

We seem to using a few different variations for modals and I though the red was a bit jarring. Not sure if we have a defined UI standard for modals.

@michalkleiner
Copy link
Contributor

michalkleiner commented Jul 11, 2023

Yeah.. the close icon probably should be neutral colour like grey, because it's not a primary action (shouldn't be green) and it's also not an erro/deny action (shouldn't be red), so neither green nor red might be the right one.

I'm happy for you or @sgiehl to make the call.

@sgiehl
Copy link
Member

sgiehl commented Jul 11, 2023

Personally I would simply remove the close button. The modal also closes when clicking OK, so that's fine. Guess it would also close when pressing ESC. So from a UX perspective the close button is imho not needed at all.

@bx80
Copy link
Contributor Author

bx80 commented Jul 11, 2023

Sounds good, I've removed the red [X] close icon entirely and the 'Ok' button is still green.
image

@bx80 bx80 added the Needs Review PRs that need a code review label Jul 11, 2023
@sgiehl
Copy link
Member

sgiehl commented Jul 11, 2023

@bx80 The padding/margin of the headline could maybe be improved so it is align with the text below.

@bx80
Copy link
Contributor Author

bx80 commented Jul 12, 2023

@sgiehl I've fixed the title alignment

@bx80 bx80 requested a review from sgiehl July 12, 2023 01:37
Copy link
Member

@sgiehl sgiehl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now 🎉

@sgiehl sgiehl merged commit 3ff9c24 into 5.x-dev Jul 12, 2023
@sgiehl sgiehl deleted the m20961-updater-integrity-css branch July 12, 2023 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug For errors / faults / flaws / inconsistencies etc. c: Design / UI For issues that impact Matomo's user interface or the design overall. Needs Review PRs that need a code review not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org. Regression Indicates a feature used to work in a certain way but it no longer does even though it should.
Development

Successfully merging this pull request may close these issues.

File integrity overlay looks ugly on update screen
3 participants