Page MenuHomePhabricator

Codex transition styling refinement
Open, Needs TriagePublicBUG REPORT

Assigned To
None
Authored By
TheDJ
May 16 2024, 7:15 PM
Referenced Files
F55879284: Screenshot 2024-06-25 at 22.28.46.jpeg
Tue, Jun 25, 8:32 PM
F55879285: Screenshot 2024-06-25 at 22.28.26.jpeg
Tue, Jun 25, 8:32 PM
F55879286: Screenshot 2024-06-25 at 22.28.18.jpeg
Tue, Jun 25, 8:32 PM
F55879287: Screenshot 2024-06-25 at 22.29.11.jpeg
Tue, Jun 25, 8:32 PM
F55879288: Screenshot 2024-06-25 at 22.28.40.jpeg
Tue, Jun 25, 8:32 PM
F55752024: Screenshot 2024-06-23 at 22.18.52.jpeg
Sun, Jun 23, 8:19 PM
F55752025: Screenshot 2024-06-23 at 22.19.04.jpeg
Sun, Jun 23, 8:19 PM
F55750874: Screenshot 2024-06-23 at 22.07.24.jpeg
Sun, Jun 23, 8:10 PM
Tokens
"Love" token, awarded by CCiufo-WMF."Love" token, awarded by Jdlrobson.

Description

After T340258 several smaller follow-up tasks and refinements were brought up that we should consider

  • improved icon button sizing, blocked on T364935
  • improve icon alignment as mentioned in T340258#9788200
  • improve icon spacing of the file details below the fold (its a bit tight now)
  • Issue with gray background of the share/download panel (can't remember if this was dark or light mode)
  • tooltips, blocked on T340456
  • make the dialog more distinct when over white images
  • make the buttons more distinct when over white backgrounds
  • add black background to body to facilitate iOS landscape (we have this in TMH) T368659
  • make tapping the metadata bar on mobile, open/close the metadata drawer

Event Timeline

Change #1032557 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] Use heavier box shadow for the dialog

https://gerrit.wikimedia.org/r/1032557

Change #1032557 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use heavier box shadow for the dialog

https://gerrit.wikimedia.org/r/1032557

The icon alignment issue is because of the difference between the <a> and the <button> elements. For <a> the min-width is ignored for empty content, but for button it is adhered to. Not sure why there is this difference yet, as both are used as block elements with mostly the same css styles.

Screenshot 2024-06-12 at 00.37.13.png (2×3 px, 2 MB)

Screenshot 2024-06-12 at 00.40.00.png (2×1 px, 2 MB)

I'm working on updating the buttons and replacing all their fade stuff with css animations as well as fixing up the CSS for it in general. It's still a work in progress, but here is a sneak preview.

Change #1042410 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] [WIP] Improve buttons for MMV

https://gerrit.wikimedia.org/r/1042410

TheDJ added a subscriber: mwilliams.

@mwilliams Would love to hear what you think of my improvised design

@TheDJ Just to make sure I'm catching everything that is changing before giving feedback, I'm seeing...

  • Larger icon sizes
  • New background color circle behind the icons
  • New hover and focused states (white border around the background circle)
  • New pressed states

I miss anything?

@TheDJ Just to make sure I'm catching everything that is changing before giving feedback, I'm seeing...

  • Larger icon sizes

for Next/Prev, the other icons are the standard medium size, but inside bigger buttons (40x40px)

  • New background color circle behind the icons

Yes and this is also the button hit area now.

  • New hover and focused states (white border around the background circle)

correct

  • New pressed states

correct, scaled up.

I didn't have time yet to make vars and pick any tokens yet (if there even are any suitable ones).

Change #1042410 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] [WIP] Improve buttons for MMV

https://gerrit.wikimedia.org/r/1042410

Change #1048087 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] [WIP] Add background and outline to MMV buttons

https://gerrit.wikimedia.org/r/1048087

I separated the background change and outline of the button into a separate follow up patch.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/62250dbbc8/w

@TheDJ Thanks for your patience awaiting my feedback on this.

My suggestion would be that we match the behavior and style as close as possible to the Codex Button and MenuButton.

This would adjust...

  • The shape of the background hover/focus state from a circle to a square
  • Remove the scale enlargement animation on hover
  • Updating the color of the background square's hover/focus state. Since the media viewer is on a black background, using the dark mode equivalents should do the trick

I also seem to be seeing a z-index issue where the focus state is on top of the download and share icons but should probably be below...

Screenshot 2024-06-21 at 1.32.18 PM.png (648×1 px, 71 KB)
Screenshot 2024-06-21 at 1.32.26 PM.png (842×1 px, 100 KB)

Since the media viewer is on a black background, using the dark mode equivalents should do the trick

The whole point here was that the icons are not ALWAYS on a black background. At times they are above the image which can be any color possible.

Hmm, yeah I might be missing something or I explained myself poorly, let me try again!

If the icons were on an image, the bg box of the base hover gray with a lowered transparency (45%) would make them still visible

Icons_On_Image.jpg (881×1 px, 915 KB)

If the icons were on the black background, the bg base hover gray would barely be visible and a non-issue

Icons_On_Black.jpg (881×1 px, 957 KB)

The hover state would be the base hover gray at 100% which would be noticeable on top of the image or the black bg. (Hovering on the X in the screenshots)

Icons_On_Image_Hover.jpg (881×1 px, 915 KB)

Icons_On_Black_hover.jpg (881×1 px, 957 KB)

The active state would be the blue outline

Icons_On_Black_Focus State.jpg (881×1 px, 900 KB)

Does that make more sense? Happy to explore more options or to stress test this more!

Change #1048859 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] MMV square buttons

https://gerrit.wikimedia.org/r/1048859

Nice! The bg box behind the icons is a bit big - mapping it to the icon only button's in Codex would have it at 32px x 32px. The arrow buttons are bit unique, but making the box a bit smaller makes sense as well, 44px x 44px.

The last little detail would be adding a 2px border radius to the bg boxes, again to map to the icon only buttons.

Other than that, seems reasonable to me!

Looks good to me!

Is the focus state still a blue border? I can't tell from screenshots, just noticed the "toggled on" state of the buttons didn't have the blue border anymore.

Now with the blue focus. I also added the border as it is with the dark mode version of the icon button, but i think it stands out too much and we should probably keep it the same as the background ?

Screenshot 2024-06-25 at 22.28.40.jpeg (1×1 px, 881 KB)

Screenshot 2024-06-25 at 22.29.11.jpeg (1×2 px, 815 KB)

Screenshot 2024-06-25 at 22.28.18.jpeg (1×1 px, 883 KB)

Screenshot 2024-06-25 at 22.28.26.jpeg (1×1 px, 756 KB)

Screenshot 2024-06-25 at 22.28.46.jpeg (1×2 px, 930 KB)

Yup, I think you are right, stands out too much. Lets leave the blue focus border, remove the other border, thanks!

Change #1048087 abandoned by TheDJ:

[mediawiki/extensions/MultimediaViewer@master] [WIP] Add background and outline to MMV buttons

Reason:

We are going with square buttons

https://gerrit.wikimedia.org/r/1048087

Change #1042410 abandoned by TheDJ:

[mediawiki/extensions/MultimediaViewer@master] Improve buttons for MMV

Reason:

Merged into Idbc2a30

https://gerrit.wikimedia.org/r/1042410

Test wiki on Patch demo by TheDJ using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/7ecbbe96a4/w/

Test wiki on Patch demo by TheDJ using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/419d4f14d4/w/

Change #1048859 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] MMV square buttons

https://gerrit.wikimedia.org/r/1048859

Change #1050448 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] Metadatapanel: Improve spacing between license links

https://gerrit.wikimedia.org/r/1050448

Change #1050448 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Metadatapanel: Improve spacing between license links

https://gerrit.wikimedia.org/r/1050448

The square icons look awesome. Thank you for your great work, @mwilliams and @TheDJ!

This change https://github.com/wikimedia/mediawiki-extensions-MultimediaViewer/commit/2a8b140ed363255e4d56a39cf5a658bf2e98d4f1 associated with this issue has caused multimediaviewer icons to have https://commons.wikimedia.org/wiki/File:Screenshot_Icons.png incorrect direction in RTL wikis,

To reproduce the issue open https://fa.wikipedia.org/wiki/حافظیه?uselang=fa#/media/پرونده:حافظیه،_مقبره_خواجه_شمس_الدین_محمد_شیرازی_در_شهر_شیراز_16.jpg and note next and previous icons

I wanted to fix it myself and what I concluded is that flip mechanism apparently don't work when it's applied to ::after but worked without ::after so beware if you have applied such a change elsewhere also or maybe I'm wrong.

On any case this is reported at T369659 also