A small tweak may be needed for the "X" icon to not compete in size with the notification actions too much. The proposal is to reduce the size a bit (to 1.7em) while keeping the "X" noticeable enough (avoiding the issues from T112217).
Current (size: 1.875em):
Proposed (size: 1.7em):
| Project | Branch | Lines +/- | Subject | |
|---|---|---|---|---|
| mediawiki/extensions/Echo | master | +7 -0 | Adjust mark as read icon size |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T119713 Update Help:Notifications | |||
| Open | None | T114351 Better organisation for the Notification System | |||
| Open | None | T100528 Improve organization and control for Flow notifications (tracking + ideas) | |||
| Open | None | T113228 Better organization for the Notification panel | |||
| Resolved | Esanders | T119374 Styling adjustments for the Notification Panel | |||
| Resolved | MtDu | T124025 Adjust the mark as read "X" icon size |
This refers to the action of marking an individual item as read, which is presented as an "X" icon. The size I was referring to is for the html element (the element with the "oo-ui-iconElement-icon" and "oo-ui-icon-close" classes). Reducing the dimensions of the SVG asset will have no effect since the html element using the image defines it's background size as "cover" which will scale the image to fit the size of the element anyway.
Change 264995 had a related patch set uploaded (by MtDu):
Adjust mark as read icon size
Checked in betalabs
.mw-echo-ui-notificationItemWidget-markAsReadButton .oo-ui-iconElement-icon {
width: 1.7em !important; height: 1.7em !important;
}
@Pginer-WMF @jmatazzoni
Vertical positioning is ok? I believe it's reported somewhere.
Also, please review T71915: x "Mark as read" in Flow messages in Echo flyout UX (too small, lacks tooltip, etc.) - shouldn't it be closed as Resolved?
It looks good. Thanks!
The result seems to fit quite well the reference dimensions (F3363922):
