From b2a0e3aac8f70802a5f45cc7e7fbb0f9c517fb82 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 3 Oct 2017 15:44:30 +0200 Subject: [PATCH] SpecialBlock: Tweaks for OOUI HTMLForm * Expand both the dropdown and textfield of "Reason" field to the usual maximum width and display them on separate lines. * Fix autohiding of form fields where applicable (checkboxes that only apply when blocking a user or an IP address). * Fix bolding of the "Confirm block" label when blocking yourself. Follow-up to d56758e134358fdac3f8dda16417bfd30f78bab9. Bug: T107036 Change-Id: Ia5c54e518de99a79f5319c42ccf1a9a0e31ad471 --- includes/specials/SpecialBlock.php | 1 + resources/Resources.php | 2 + .../mediawiki.special.block.js | 67 ++++++++++--------- .../mediawiki.special/mediawiki.special.css | 13 +++- 4 files changed, 48 insertions(+), 35 deletions(-) diff --git a/includes/specials/SpecialBlock.php b/includes/specials/SpecialBlock.php index c1a1f78e17..42e7040d0e 100644 --- a/includes/specials/SpecialBlock.php +++ b/includes/specials/SpecialBlock.php @@ -224,6 +224,7 @@ class SpecialBlock extends FormSpecialPage { 'type' => 'hidden', 'default' => '', 'label-message' => 'ipb-confirm', + 'cssclass' => 'mw-block-confirm', ]; $this->maybeAlterFormDefaults( $a ); diff --git a/resources/Resources.php b/resources/Resources.php index 235bb59ca5..9f10210477 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -2012,6 +2012,8 @@ return [ 'mediawiki.special.block' => [ 'scripts' => 'resources/src/mediawiki.special/mediawiki.special.block.js', 'dependencies' => [ + 'oojs-ui-core', + 'mediawiki.widgets.SelectWithInputWidget', 'mediawiki.util', 'mediawiki.htmlform', ], diff --git a/resources/src/mediawiki.special/mediawiki.special.block.js b/resources/src/mediawiki.special/mediawiki.special.block.js index 8d8841099b..491a1ff6c9 100644 --- a/resources/src/mediawiki.special/mediawiki.special.block.js +++ b/resources/src/mediawiki.special/mediawiki.special.block.js @@ -2,57 +2,60 @@ * JavaScript for Special:Block */ ( function ( mw, $ ) { + // Like OO.ui.infuse(), but if the element doesn't exist, return null instead of throwing an exception. + function infuseOrNull( elem ) { + try { + return OO.ui.infuse( elem ); + } catch ( er ) { + return null; + } + } + $( function () { - var $blockTarget = $( '#mw-bi-target' ), - $anonOnlyRow = $( '#mw-input-wpHardBlock' ).closest( 'tr' ), - $enableAutoblockRow = $( '#mw-input-wpAutoBlock' ).closest( 'tr' ), - $hideUser = $( '#mw-input-wpHideUser' ).closest( 'tr' ), - $watchUser = $( '#mw-input-wpWatch' ).closest( 'tr' ), - $expiry = $( '#mw-input-wpExpiry' ), - $otherExpiry = $( '#mw-input-wpExpiry-other' ); + // This code is also loaded on the "block succeeded" page where there is no form, + // so username and expiry fields might also be missing. + var blockTargetWidget = infuseOrNull( 'mw-bi-target' ), + anonOnlyField = infuseOrNull( $( '#mw-input-wpHardBlock' ).closest( '.oo-ui-fieldLayout' ) ), + enableAutoblockField = infuseOrNull( $( '#mw-input-wpAutoBlock' ).closest( '.oo-ui-fieldLayout' ) ), + hideUserField = infuseOrNull( $( '#mw-input-wpHideUser' ).closest( '.oo-ui-fieldLayout' ) ), + watchUserField = infuseOrNull( $( '#mw-input-wpWatch' ).closest( '.oo-ui-fieldLayout' ) ), + // mw.widgets.SelectWithInputWidget + expiryWidget = infuseOrNull( 'mw-input-wpExpiry' ); - function updateBlockOptions( instant ) { - var blocktarget = $.trim( $blockTarget.val() ), + function updateBlockOptions() { + var blocktarget = $.trim( blockTargetWidget.getValue() ), isEmpty = blocktarget === '', isIp = mw.util.isIPAddress( blocktarget, true ), isIpRange = isIp && blocktarget.match( /\/\d+$/ ), isNonEmptyIp = isIp && !isEmpty, - expiryValue = $expiry.val(), + expiryValue = expiryWidget.dropdowninput.getValue(), // infinityValues are the values the SpecialBlock class accepts as infinity (sf. wfIsInfinity) infinityValues = [ 'infinite', 'indefinite', 'infinity', 'never' ], isIndefinite = $.inArray( expiryValue, infinityValues ) !== -1 || - ( expiryValue === 'other' && $.inArray( $otherExpiry.val(), infinityValues ) !== -1 ); + ( expiryValue === 'other' && $.inArray( expiryWidget.textinput.getValue(), infinityValues ) !== -1 ); - if ( isNonEmptyIp ) { - $enableAutoblockRow.goOut( instant ); - } else { - $enableAutoblockRow.goIn( instant ); + if ( enableAutoblockField ) { + enableAutoblockField.toggle( !( isNonEmptyIp ) ); } - if ( isNonEmptyIp || !isIndefinite ) { - $hideUser.goOut( instant ); - } else { - $hideUser.goIn( instant ); + if ( hideUserField ) { + hideUserField.toggle( !( isNonEmptyIp || !isIndefinite ) ); } - if ( !isIp && !isEmpty ) { - $anonOnlyRow.goOut( instant ); - } else { - $anonOnlyRow.goIn( instant ); + if ( anonOnlyField ) { + anonOnlyField.toggle( !( !isIp && !isEmpty ) ); } - if ( isIpRange && !isEmpty ) { - $watchUser.goOut( instant ); - } else { - $watchUser.goIn( instant ); + if ( watchUserField ) { + watchUserField.toggle( !( isIpRange && !isEmpty ) ); } } - if ( $blockTarget.length ) { + if ( blockTargetWidget ) { // Bind functions so they're checked whenever stuff changes - $blockTarget.keyup( updateBlockOptions ); - $expiry.change( updateBlockOptions ); - $otherExpiry.keyup( updateBlockOptions ); + blockTargetWidget.on( 'change', updateBlockOptions ); + expiryWidget.dropdowninput.on( 'change', updateBlockOptions ); + expiryWidget.textinput.on( 'change', updateBlockOptions ); // Call them now to set initial state (ie. Special:Block/Foobar?wpBlockExpiry=2+hours) - updateBlockOptions( /* instant= */ true ); + updateBlockOptions(); } } ); }( mediaWiki, jQuery ) ); diff --git a/resources/src/mediawiki.special/mediawiki.special.css b/resources/src/mediawiki.special/mediawiki.special.css index 9ea8019969..7f3b09a69a 100644 --- a/resources/src/mediawiki.special/mediawiki.special.css +++ b/resources/src/mediawiki.special/mediawiki.special.css @@ -35,12 +35,19 @@ text-align: right; } -label[for='mw-input-wpConfirm'] { +.mw-block-hideuser, +.mw-block-confirm { font-weight: bold; } -.mw-block-hideuser { - font-weight: bold; +#mw-input-wpReason .oo-ui-dropdownInputWidget, +#mw-input-wpReason .oo-ui-textInputWidget { + display: block; + max-width: 50em; +} + +#mw-input-wpReason .oo-ui-textInputWidget { + margin-top: 0.5em; } /* Special:BlockList */ -- 2.20.1