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