mw.util.addPortletLink should have an easy way to add elements with icons
Closed, ResolvedPublicFeature
Actions

Assigned To

Authored By

	Agabi10
	Sep 24 2021, 1:18 PM

Description

Feature summary (what you would like to be able to do and where):
Now that the entries of the new vector toolbar have icons (only icon in p-personal-more and icon + text in p-personal) mw.addPortletLink (or an equivalent function) should have a way to specify which icon we want to the new link that just works.

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
I want to be able to add elements to new vector's toolbar that doesn't look out of place from the already existing elements through gadgets and personal JavaScript.

Benefits (why should this be implemented?):
Because not having this makes it too hard adding elements in a visually consistent way in the existing toolbar and it's better if getting that visual consistency is worked on in the mw function instead of in each and every gadget that want to add something to those toolbars.

Event Timeline

Agabi10 created this task.Sep 24 2021, 1:18 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 24 2021, 1:18 PM

The icon is tied to the id property that you pass mw.util.addPortletLink. This will generate a unique class that can be used to generate an icon. it is the responsibility of the gadget to define the appropriate svg icon.

Let me know if you need any code samples to get this working.

@Jdlrobson: But adding an id would force me to define the SVG icon myself, and what I want is adding an icon from this list. IIUC to make that work as expected without having to declare the icons myself to add the clock icon to the UTC Live Clock gadget I should change this:

var node = mw.util.addPortletLink(
    'p-personal',
    mw.util.getUrl( null, { action: 'purge' } ),
    '',
    'utcdate'
);
if ( !node ) {
    return;
}

to this:

var node = mw.util.addPortletLink(
    'p-personal',
    mw.util.getUrl( null, { action: 'purge' } ),
    '',
    'utcdate'
);
if ( !node ) {
    return;
}
var linkNode = node.getElementsByTagName('a')[0];
if (linkNode) {
    linkNode.classList.add('mw-ui-icon-clock');
}

Am I right?

But adding an id would force me to define the SVG icon myself, and what I want is adding an icon from this list.

You can't use one of those icons directly correct. This is by design, so it's easier for engineers to discover gadgets making use of the icon. Your code snippet above will give you a class mw-ui-icon-vector-gadget-utcdate. YOu should use that to style your icon.

<style>.mw-ui-icon-vector-gadget-utcdate:before { background-image:url(/w/resources/lib/ooui/themes/wikimediaui/images/icons/clock.svg); }</style>

There is an open question about whether we should use icons for gadgets they weren't intended for might cause some confusion around what they mean. For example, the clock is traditionally used for article modified time.

mw.util.addPortletLink should have an easy way to add elements with iconsClosed, ResolvedPublicFeatureActions

Description

Event Timeline

mw.util.addPortletLink should have an easy way to add elements with icons
Closed, ResolvedPublicFeature
Actions