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.

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

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

@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?

In T365192#9890539, @mwilliams wrote:

@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

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

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

Hey @mwilliams could you please take a look at https://patchdemo.wmflabs.org/wikis/62250dbbc8/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy before I merge the patch?

@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...

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

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

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)

The active state would be the blue outline

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 ?

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/

Test wiki created on Patch demo by TheDJ using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7aa6b5b38d/wiki/The Hitchhiker's Guide to the Galaxy

Looks good to me!

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!

BTW. tooltips landed, but they are JS only components, so in order to use them, we would need T249431: [EPIC] Adopt Vue.js as the framework for MediaViewer, create a performant and modern user experience

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

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

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