[go: nahoru, domu]
Page MenuHomePhabricator
Create Task
Maniphest T364935

[REQUEST] icon sizing for fullscreen mediaviewer
Closed, DeclinedPublic
Actions

Description

What teams or group is this for?
volunteers

Who is your main point of contact and contact preference?
eh.. me, @Jdlrobson, @simon04

What are the details of your request? Include relevant timelines or deadlines
So when simon and jon were converting MediaViewer to use Codex, one of the issues they ran into was the sizing of the icons in the fullscreen lightbox for the image. In the ooui version, these were larger than the maximum size that seems available in Codex, which seems to be 20x20px. But for non-bordered buttons on top op a black fullscreen interface, that seems too small, especially if you consider that Codex advises a minimum size of 40x40px for buttons. The next and previous arrows specifically seem rather small (when present).

Screenshot 2024-05-14 at 23.23.23.jpg (1×2 px, 1 MB)

I tried to get the icons to size bigger, but this seemed near impossible as .cdx-mixin-css-icon() doesn't allow for anything but the predefined sizes ?

I have to override both the mask-size of the icon and the width and height of the wrapping 'fakebutton' class
This makes it very difficult to use the icons outside of 'normal' interfaces, but the Fullscreen lightbox UI seems like a typical example of requiring the icons to be used differently than our standard buttons.

Am i overlooking anything ? is there a better way to do arbitrary sizing of an icon ? Do we need additional sizes ? Can i use the icons easily with some sort of other mixin that gives me more control ?

How does the request fit within departmental or foundation priorities?
Getting rid of ooui and replacing it with codex is a foundation priority if i'm not mistaken. But not sure, i don't have the TPS report with me :)

Is this request urgent or time-sensitive?
Depends on how fast the community gets annoyed by the small buttons we have in mediaviewer now :)

Related Objects
Search...

Event Timeline

TheDJ created this task.May 14 2024, 9:31 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 14 2024, 9:31 PM
TheDJ renamed this task from [REQUEST] icon sizing to [REQUEST] icon sizing for fullscreen mediaviewer.May 14 2024, 9:31 PM
TheDJ mentioned this in T340258: MMV should use Codex instead of mediawiki ui.May 15 2024, 7:34 PM
stjn awarded a token.May 15 2024, 8:09 PM
TheDJ mentioned this in T365192: Codex transition styling refinement.May 16 2024, 7:15 PM
Catrope subscribed.May 24 2024, 5:28 AM

I was confused about this at first, because I thought you could just pass a non-standard icon size into the icon mixin. But when I try that, I get:

load.php?lang=en&mod…22&version=1bu2z:31 Less_Exception_Compiler: variable @calculated-min-size-icon is undefined in file /var/www/html/w/resources/lib/codex/mixins/css-icon.less in css-icon.less on line 44, column 26
42| 		// This ensures that the icon will never appear smaller than @calculated-min-size-icon.
43| 		// Escape the max() call to prevent older Less versions from trying to do the max() calculation at compile time.
44| 		background-size: calc( ~'max( @{param-size-icon}, @{calculated-min-size-icon} )' );

Now that we use rems, I wonder if we can remove the size-icon -> min-size-icon mapping, and instead just derive the min-size from the size by multiplying the size token by 16 and changing the unit from rem to px. Or alternatively, we could keep the mapping for known values, and do the math for custom values, or use the smallest min-size for custom values, or something like that.

CCiufo-WMF moved this task from Inbox to Triaging on the Design-System-Team board.May 24 2024, 2:07 PM
TheDJ added a comment.EditedMay 27 2024, 11:13 AM

Taking this slightly wider than just the icons btw. there is also the issue that we don't really have a design for icon buttons in such contexts (fullscreen) to begin with.

Specifically, we lack a contrasting background or edge to contrast the icon with its background. Because these buttons can be shown on backgrounds which can be either full black, or full white, depending on the content being displayed

My personal design is a faint round transparent backdrop in opposing color of the icon color. Additionally I'm planning to use a bit of zoom for the hover and active states using css animations.

This is similar to the play button of the video player. If someone already has another design laying around somewhere they could share, I might consider that instead of course, but I haven't seen such designs, nor am I expecting anyone to plan to work on them any time soon.

Catrope mentioned this in T367098: Prevent css-icon mixin from breaking when nonstandard sizes are used.Jun 10 2024, 5:27 PM

T367098 is for the specific issue of a non-standard size throwing a Less error. Keeping this task for the larger issue of how to handle these icon buttons

TheDJ added a comment.Jun 12 2024, 11:18 PM

I made a new design in T365192#9882554

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

TheDJ attached a referenced file: F55248816: Screenshot 2024-06-12 at 00.37.13.png. (Show Details)Jun 12 2024, 11:18 PM
egardner closed subtask T367098: Prevent css-icon mixin from breaking when nonstandard sizes are used as Resolved.Jun 26 2024, 4:58 PM
CCiufo-WMF closed this task as Declined.Jul 3 2024, 10:09 PM
CCiufo-WMF subscribed.

Checking the progress of media viewer in T365192, I see that this task is no longer marked as a blocker because the design expectations have changed, so I'm going to close it.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits