Template talk:Clickable button 2/Archive 1

Archive 1

Editprotected

Could a friendly admin please sync from the sandbox? I have added code that differentiates buttons that link back to the page they are on - at the moment, there is no visual distinction between the buttons that navigate and the self-linking buttons that do nothing, which is confusing. — This, that and the other (talk) 04:07, 6 October 2013 (UTC)

Looks good.  Done — Martin (MSGJ · talk) 11:03, 7 October 2013 (UTC)

Broken

The last change broke these buttons., for example see the header in WP:Tools.

• The button enclosure is gone and only the text remains
• The selected button is unreadable

Dpleibovitz (talk) 18:36, 11 November 2013 (UTC)

Painful blue

Not sure if the source is this template, although it's as far back as I can chase it, but: the buttons on the community portal using this style have an incredibly obnoxious shade of blue used when the button refers to the page you're on. Not only does it render the text un-readable, it's giving me a headache :/. Could we try using a lighter shade, or something that actually contrasts with the default silver on a colour wheel? Ironholds (talk) 02:50, 17 January 2014 (UTC)

Are you talking about the buttons in Template:Header navbar community? Jackmcbarn (talk) 03:40, 17 January 2014 (UTC)

Indeed; I assume the 'class' call is setting the colouration, but I'm not sure where to find that definition. I...cannot imagine a situation in which we want that colour as the contrast. Ironholds (talk) 06:00, 17 January 2014 (UTC)

I now see it's a switch in this template; can we look at paler shades that don't drown out the text so much? Ironholds (talk) 06:01, 17 January 2014 (UTC)

I believe that it's not just the styling in this template, but also some Javascript elsewhere that munges the styling that this template thinks that it's generating, the object being to change both foreground and background colours so that there is good contrast between them. More at these archived discussions from WP:VPT: jQuery UI CSS may no longer load by default; Dark blue over the word "wikicode" to the point where I can hardly see it; and Template:Clickable button is broken. --Redrose64 (talk) 10:25, 17 January 2014 (UTC)

Nope, it's just the switch. I toned down the colors a bit. — Edokter (talk) — 10:50, 17 January 2014 (UTC)

Links

Hi, I don't know why but some type of links don't work. Is it possible to make it compatible? Thanks :)

Examples: {{Clickable button 2|<span class="plainlinks">[{{fullurl:{{PAGENAME}}|action=watch}} |Watch]</span>}}

{{Clickable button 2|<span class="plainlinks">[{{fullurl:{{TALKPAGENAME}}|action=edit&section=new}}| Talk]</span>}}

{{Clickable button 2|{{fullurl:{{PAGENAME}}}}</span> |Watch}}

Dominikmatus (talk) 01:46, 23 January 2014 (UTC)

If you're not using the |url= parameter, the first positional parameter is intended for a page name, nothing else; this is used to build a normal wikilink, and so the syntax {{clickable button 2|Template talk:Clickable button 2}} is valid, as is {{clickable button 2|{{PAGENAME}}}}. If you want to want to use a full URL, you need to use the |url= parameter, but don't attempt to apply any additional styling via <span>...</span> tags or the like. So, your first and second examples should be coded like this:

{{clickable button 2|url={{fullurl:{{PAGENAME}}|action=watch}}|Watch}}

• Watch

{{clickable button 2|url={{fullurl:{{TALKPAGENAME}}|action=edit&section=new}}|New section}}

• New section

I don't know what you're trying to do with the third. --Redrose64 (talk) 12:39, 23 January 2014 (UTC)

Thanks a lot. Thir one is nothing, only my mistake. Dominikmatus (talk) 14:38, 23 January 2014 (UTC)

Converted to Lua

I've just converted this template to use Module:Clickable button 2. I updated the test cases, and everything looks to be functioning correctly, but if you notice any behaviour that is different from the previous template, or if you spot any bugs, please let me know. There are two things that I purposely made different from the old template: now all |class= inputs are converted to lower case (rather than just some of them), and now if no |url= and no |1= parameter is provided, the template will be blank, whereas it would previously output the text [[|]]. — Mr. Stradivarius ^{♪ talk ♪} 04:50, 11 June 2014 (UTC)

I think this change has broken the {{User sandbox}} template; it is displaying "script error". -- John of Reading (talk) 07:40, 11 June 2014 (UTC)

Thanks for pointing this out - I had missed an error check that meant any transclusion specifying the first positional parameter caused a script error if that parameter wasn't a valid MediaWiki page name. I've fixed it now, and I've also made the {{user sandbox}} code a little saner. It was using the {{spaces}} template inside the display field to add spacing around the outside of the display text, which I have instead done with CSS padding. — Mr. Stradivarius ^{♪ talk ♪} 09:14, 11 June 2014 (UTC)

Button modifications

Hi. I was wondering if any Lua programmers could modify this at all, so you can have a full range of colors selectable, and perhaps an option to select another font?

Perhaps to have backward compatibility a new module would have to be started. Please ping me. --Mrjulesd (talk) 09:15, 3 November 2014 (UTC)

This template is designed to create MediaWiki UI-style buttons. MediaWiki UI only uses the four colors of buttons that this already supports, so I think supporting more would be out of scope for this template. Jackmcbarn (talk) 15:11, 3 November 2014 (UTC)

@Mrjulesd: ping. Jackmcbarn (talk) 15:11, 3 November 2014 (UTC)

@Jackmcbarn: OK thanks for your answer. If it's not possible then thats that. Unless I get the MediaWiki people to support it I guess, or use a workaround. --Mrjulesd (talk) 16:11, 3 November 2014 (UTC)

@Mrjulesd: It's possible for this template to do it. I just don't think it should. Jackmcbarn (talk) 16:12, 3 November 2014 (UTC)

@Jackmcbarn: what about a fresh template? But only if you had the time obviously. I'm not a Lua programmer :-( --Mrjulesd (talk) 16:18, 3 November 2014 (UTC)

@Mrjulesd: I suppose I could do it. What use case did you have in mind? Jackmcbarn (talk) 16:24, 3 November 2014 (UTC)

@Jackmcbarn: Well its a fairly small thing really, but I dislike the colours on the contents portal: Portal:Contents/TOC navbar. I would like a softer colour and nicer font. I changed the color so it's a little better. So it's not that important, but having said that someone with knowledge you could probably copy and hack the code slightly from the present template. It might come in useful in the future as well. But I know how things are, you may well have current projects. But perhaps something to bare in mind. --Mrjulesd (talk) 16:47, 3 November 2014 (UTC)

@Mrjulesd: Jackmcbarn is correct. A big part of the purpose of the MediaWiki UI is to develop and stick to conventions on how to use specific controls for specific purposes. See https://tools.wmflabs.org/styleguide/desktop/index.html . Each class has a specific meaning. For example, mw-ui-constructive (rendered as green in current skins), means, "Use constructive buttons for actions which result in a final action in the process that results in a change of state. e.g. save changes button". Encouraging arbitrary colors and fonts would go against the purpose of the module.

I would actually recommend either not using mw-ui-button at all for that TOC, or at least not using a color; maybe a lightly formatted link will work. mw-ui-constructive is not a correct class there, since clicking it does not result in a change of state. Even if you use another more correct class/color, the TOC will still be far too busy. It is not recommended for that many colored buttons to be next to each other (in fact, it is generally just one per group). Mattflaschen (WMF) (talk) 19:13, 3 November 2014 (UTC)

@Mattflaschen (WMF): well thats all fair enough. But I wasn't suggesting that the mw-ui-constructive class be modified. I was instead suggesting that a new button class be developed, based on mw-ui-constructive, but more suited to a TOC header, although TOC header is a misnomer as it is not a page TOC, but instead an overview of the root classes of portals.

While I didn't originate Portal:Contents/TOC navbar, I think that the use of Template:Clickable button 2 is actually quite effective, at least to my aethetics; although as you say it was not the purpose it was designed for. The root classes of portals only occurs once, so I don't think it distracts from UI standardisation. The main problem is the colors available, and font used are not appropriate. If there was a button class available that could overcome these limitations it would be at the least an improvement.

"mw-ui-constructive is not a correct class there, since clicking it does not result in a change of state"? I don't think that is correct. If you look at Portal:Contents the buttons do change shade to indicate the correct page.

Lightly formatted links would decrease impact I think, which would be a shame. Template:Page tabs comes to mind, but I think it is not suitable. I feel "Clickable button 3" would be a good solution. --Mrjulesd (talk) 20:18, 3 November 2014 (UTC)

"Change of state" here basically means adding something to the database, which these buttons don't do. Jackmcbarn (talk) 21:02, 3 November 2014 (UTC)

Jackmcbarn: Oh I see. Still the fact they change shade depending on the page suggests to me that whoever programmed them also had them in mind for this purpose. --Mrjulesd (talk) 21:29, 3 November 2014 (UTC)

@Mrjulesd: @Jackmcbarn: mw-ui-constructive is not intended for this use case (a TOC). The reason it changes shade for self-links is that there is code in Module:Clickable button 2 to do that. The code that does that is not part of MediaWiki UI. Mattflaschen (WMF) (talk) 01:52, 6 November 2014 (UTC)

@Mattflaschen (WMF): OK. Anyway I've decided not to progress with this due to lack of consensus. Thanks for your input. --Mrjulesd (talk) 15:20, 14 November 2014 (UTC)

• I think you would be better off just using the existing Template:Page tabs that allows you to change your colors and fonts and whatnot and is designed for what you are trying to do, create a page header TOC for the pages of that portal... — {{U|Technical 13}} ^{(e • t • c)} 21:07, 3 November 2014 (UTC)
  • Thanks for the suggestion. But I think the main problem would be you would need two rows, there are two many. And I don't think two rows would look that pleasing. --Mrjulesd (talk) 21:29, 3 November 2014 (UTC)

Using buttons for section tabs like this is non-standard, I can't find a guidelines in our mw:Living style guide(s) :-). If you do use a set of buttons like that on Portal:Contents/Categories, a button group, mw-ui-button-group, would give better appearance. -- SPage (WMF) (talk) 22:04, 15 June 2015 (UTC)

OOjs UI

Could this button be rewritten into OOjs UI style, which is supposed to replace old and unmaintained MediaWiki UI? E.g. cswiki already made the change. There is a nice conversation between me and mediawiki dev MatmaRex, where I found out MWUI is deprecated and there is a new OOUI (classes oo-ui-*) instead, which is intended to replace that old MWUI (classes mw-ui-*) and oldest UI (classes ui-*). --Dvorapa (talk) 09:13, 21 November 2015 (UTC)

Background color inline style override on `.mw-ui-constructive` misfits after consolidation

Background color inline style override on `.mw-ui-constructive` misfits after consolidation of “blue” and “green“ buttons in phab:T110555. User CabbagePotato has come up with a demo and the issue can also be found for example at Portal:Contents/Outlines.

In his words:

“After the mw-ui-constructive (green) buttons had been turned to mw-ui-progressive (blue), I noticed that, when a button created with w:en:Template:Clickable button 2 (which uses the mw-ui classes) links to the page it is on, the mw-ui-progressive buttons are a darker shade of blue (which is normal); however, the mw-ui-constructive buttons are a darker shade of green with a blue border.”

We should remove the misfitting inline background-color. --VEckl (WMF) (talk) 19:50, 24 March 2016 (UTC)

I think the actual fix to be made is in Module:Clickable button 2 – the code should set the same data.backgroundColor for 'mw-ui-constructive' as it does for 'mw-ui-progressive'. Matma Rex talk 20:20, 24 March 2016 (UTC)

I kind of like the way it works (darker shade of green with a blue border), but no big deal for me; either way is fine. This looks like the relevant code:

if class == 'ui-button-blue'
	or class == 'mw-ui-progressive'
then
	data.backgroundColor = '#2962CB'
elseif class == 'ui-button-green'
	or class == 'mw-ui-constructive'
then
	data.backgroundColor = '#008B6D'
elseif class == 'ui-button-red'
	or class == 'mw-ui-destructive'
then
	data.backgroundColor = '#A6170F'
else
	data.backgroundColor = '#CCC'
	data.color = '#666'
end

I think what is requested is to move one line of code:

if class == 'ui-button-blue'
	or class == 'mw-ui-progressive'
	or class == 'mw-ui-constructive'
then
	data.backgroundColor = '#2962CB'
elseif class == 'ui-button-green'
then
	data.backgroundColor = '#008B6D'
elseif class == 'ui-button-red'
	or class == 'mw-ui-destructive'
then
	data.backgroundColor = '#A6170F'
else
	data.backgroundColor = '#CCC'
	data.color = '#666'
end

What about the "red" "destructive" class bottons? Not sure I get the distinction between progressive, constructive and destructive buttons.

We should check with @Mr. Stradivarius: your opinion? wbm1058 (talk) 22:21, 25 March 2016 (UTC)

Carried from the demo for centralized comparison:

Class	Button links to current page (Template talk:Clickable button 2/Archive 1)	Button links to other page (Main Page)
mw-ui-constructive	{{Clickable button 2|{{FULLPAGENAME}}|Button|class=mw-ui-constructive}} produces Button	{{Clickable button 2|Main Page|Button|class=mw-ui-constructive}} produces Button
mw-ui-progressive	{{Clickable button 2|{{FULLPAGENAME}}|Button|class=mw-ui-progressive}} produces Button	{{Clickable button 2|Main Page|Button|class=mw-ui-progressive}} produces Button
ui-button-green	{{Clickable button 2|{{FULLPAGENAME}}|Button|class=ui-button-green}} produces Button	{{Clickable button 2|Main Page|Button|class=ui-button-green}} produces Button
ui-button-blue	{{Clickable button 2|{{FULLPAGENAME}}|Button|class=ui-button-blue}} produces Button	{{Clickable button 2|Main Page|Button|class=ui-button-blue}} produces Button
Sandboxed
mw-ui-constructive	{{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=mw-ui-constructive}} produces {{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=mw-ui-constructive}}	{{Clickable button 2/sandbox|Main Page|Button|class=mw-ui-constructive}} produces {{Clickable button 2/sandbox|Main Page|Button|class=mw-ui-constructive}}
mw-ui-progressive	{{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=mw-ui-progressive}} produces {{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=mw-ui-progressive}}	{{Clickable button 2/sandbox|Main Page|Button|class=mw-ui-progressive}} produces {{Clickable button 2/sandbox|Main Page|Button|class=mw-ui-progressive}}
ui-button-green	{{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=ui-button-green}} produces {{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=ui-button-green}}	{{Clickable button 2/sandbox|Main Page|Button|class=ui-button-green}} produces {{Clickable button 2/sandbox|Main Page|Button|class=ui-button-green}}
ui-button-blue	{{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=ui-button-blue}} produces {{Clickable button 2/sandbox|{{FULLPAGENAME}}|Button|class=ui-button-blue}}	{{Clickable button 2/sandbox|Main Page|Button|class=ui-button-blue}} produces {{Clickable button 2/sandbox|Main Page|Button|class=ui-button-blue}}

Agreeable? fredgandt 04:40, 26 March 2016 (UTC)

Module:Clickable button 2 and Module:Clickable button 2/sandbox: Difference between pages

No objection from me, though I stop short of full endorsement simply because of my still sketchy knowledge of CSS. What is the purpose of Category:Pages using old style ui-button-color? Unfortunately we can't ask the creator about it, as he been blocked. From there I find this old discussion about button colors and constructive, progressive and destructive buttons.

The {{clickable button}} documentation gives us this bit of confusing advice:

After the changes outlined in Phabricator task T110555 were implemented, {{Clickable button|color=green}} produces the same output as {{Clickable button|color=blue}}.

Why the heck would a "green" button produce the same output as a blue button??

If the consensus is, per that phabricator, to consolidate constructive/progressive/green/blue into a generic 'important/main button' class, then maybe we should deprecate green and replace all green buttons with blue buttons? wbm1058 (talk) 14:30, 26 March 2016 (UTC)

{{Clickable button|color=green}} → !??! – wbm1058 (talk) 14:47, 26 March 2016 (UTC)

I would support changing {{Clickable button|color=green}} to generate an {{error}} message, such as . Similar behavior for {{Clickable button 2}}. Error messages are better than creating category clutter with things like Category:Pages using old style ui-button-color. – wbm1058 (talk) 14:57, 26 March 2016 (UTC)

Personally (putting aside my liking the mw-ui-constructive being green, not blue) I would force calls for ui-button-green and ui-button-blue to render the same as calls for the mw-ui-* classes; get rid of the categories and no need for error messages (if we can deliver errors, we can deliver the fix). fredgandt 15:08, 26 March 2016 (UTC)

Done I've made the suggested fix. It would be better to remove the inline colour styles altogether in my opinion, but until we have the code for that a quick fix is better than no fix. As for {{Clickable button|color=green}}, an error message plus an error category is usually the best way to go, and when all of the instances are cleaned up we can just remove support for it from the module altogether. — Mr. Stradivarius ^{♪ talk ♪} 01:24, 28 March 2016 (UTC)