Skip to content
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

Enhancement/2468 svg replacing images #2834

Merged
merged 49 commits into from
Mar 5, 2021

Conversation

ivankruchkoff
Copy link
Contributor

@ivankruchkoff ivankruchkoff commented Feb 21, 2021

Summary

Addresses issue #2468

Relevant technical choices

Checklist

  • My code is tested and passes existing unit tests.
  • My code has an appropriate set of unit tests which all pass.
  • My code is backward-compatible with WordPress 4.7 and PHP 5.6.
  • My code follows the WordPress coding standards.
  • My code has proper inline documentation.
  • I have added a QA Brief on the issue linked above.
  • I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

Sorry, something went wrong.

@google-cla google-cla bot added the cla: yes label Feb 21, 2021
@ivankruchkoff ivankruchkoff marked this pull request as ready for review February 23, 2021 03:21
tofumatt
tofumatt previously approved these changes Feb 23, 2021
Copy link
Collaborator

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

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

This looks good, just one little tweak from me but it's minor enough I'll just commit it before merge review rather than do another round of code review 🙂

@tofumatt
Copy link
Collaborator

@googlebot I consent.

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

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

Thanks @ivankruchkoff, this is looking good, just a few things to address. Most importantly is that there shouldn't be any substantial visual changes. Our VRT threshold for failure is zero so it's okay if there are microscopic changes in the image due to differences between img/svg but they should be visually equivalent.

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

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

@ivankruchkoff this is looking really close, just a few tweaks left I think.

One comment about the added dynamic screen-based fill and added css rule. I still have a question here about the big change in lock file size as well.

I noticed the VRT images look nearly identical now for small and large sizes, however there was a substantial difference still with the medium size:

Onion skin
image
Side-by-side
image

Comment on lines 88 to 90
svg {
width: 200px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Looks like we might need to add some responsive styles here or make it relative so that it naturally fills the grid cell width? I'm guessing the previous images would have scaled as well.

Copy link
Contributor Author

@ivankruchkoff ivankruchkoff Feb 26, 2021

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@aaemnnosttv updated the rule in 6f76bed

Updated the image in cbeb8a1

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

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

This is super close. The main thing left to address is a discrepancy in the size of the icon which is now slightly larger due to being an svg background image rather than an image.

image

We need to preserve the 16x16 dimensions of the icon. I found this was possible by applying a background-size: 16px 16px rule to it with CSS but maybe there's a better way?

@ivankruchkoff
Copy link
Contributor Author

ivankruchkoff commented Mar 4, 2021

This is super close. The main thing left to address is a discrepancy in the size of the icon which is now slightly larger due to being an svg background image rather than an image.

image

We need to preserve the 16x16 dimensions of the icon. I found this was possible by applying a background-size: 16px 16px rule to it with CSS but maybe there's a better way?

So I think WP icons are made to trigger people with OCD. I added some padding to the svg itself, updated it in 574bb2d and then took a screenshot and cropped it to see if the dimensions fit.

  • It aligns with the widest icon, the media library.
  • It's about 2px larger than the dashboard image above it.
  • It's about 1px larger than the posts pin.
  • Pages is smaller and off centre.
  • Comments icon is smaller and off centre.

Screen Shot 2021-03-04 at 12 32 54 PM

For comparison, the old svg icon approach:
Screen Shot 2021-03-04 at 12 43 44 PM

  • The G icon is touching the border on left, and 1px shy on right.
  • The pin is larger than the dashboard icon
  • The media icon is 2px larger

Comparing the before/after, the before aligns almost with the dashboard icon, the after aligns with the media library, if we want the sizes to be identically, let me know and I'll update it again.

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

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

Thanks @ivankruchkoff. I'm less worried about the icon matching other WP icons and that the size matches the image we had before.

It looks like it's just a tiny bit larger that it was before:
image
image
image

I tried fiddling with it a little and found that it seems to line up exactly when the svg dimensions match the viewbox using the original svg on the issue.
image

I'll push this up so we can put this one to rest 😄

@google-cla
Copy link

google-cla bot commented Mar 5, 2021

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

@google-cla google-cla bot added cla: no and removed cla: yes labels Mar 5, 2021
@aaemnnosttv
Copy link
Collaborator

@googlebot I consent.

@google-cla google-cla bot added cla: yes and removed cla: no labels Mar 5, 2021
Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

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

Awesome! Thanks @ivankruchkoff 👍

@aaemnnosttv aaemnnosttv merged commit 3b339e3 into develop Mar 5, 2021
@aaemnnosttv aaemnnosttv deleted the enhancement/2468-svg-replacing-images branch March 5, 2021 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants