Update the design of Special:Block
authorThalia <thalia.e.chan@googlemail.com>
Mon, 7 Jan 2019 14:04:54 +0000 (14:04 +0000)
committerThalia <thalia.e.chan@googlemail.com>
Mon, 7 Jan 2019 19:22:59 +0000 (19:22 +0000)
Update the design now we have the extra options for
partial blocks.

Bug: T202773
Bug: T212964
Change-Id: I569eb2a8b15b9ad7f9f0e99bce2cd9b818a82fb4

includes/specials/SpecialBlock.php
languages/i18n/en.json
languages/i18n/qqq.json
resources/Resources.php
resources/src/mediawiki.special.block.js
resources/src/mediawiki.special/block.less

index 6a21e85..47d61b8 100644 (file)
@@ -156,22 +156,31 @@ class SpecialBlock extends FormSpecialPage {
                        'type' => 'user',
                        'ipallowed' => true,
                        'iprange' => true,
-                       'label-message' => 'ipaddressorusername',
                        'id' => 'mw-bi-target',
                        'size' => '45',
                        'autofocus' => true,
                        'required' => true,
                        'validation-callback' => [ __CLASS__, 'validateTargetField' ],
+                       'section' => 'target',
+               ];
+
+               $a['Editing'] = [
+                       'type' => 'check',
+                       'label-message' => 'block-prevent-edit',
+                       'default' => true,
+                       'section' => 'actions',
+                       'disabled' => $enablePartialBlocks ? false : true,
                ];
 
                if ( $enablePartialBlocks ) {
                        $a['EditingRestriction'] = [
                                'type' => 'radio',
-                               'label' => $this->msg( 'ipb-type-label' )->text(),
+                               'cssclass' => 'mw-block-editing-restriction',
                                'options' => [
                                        $this->msg( 'ipb-sitewide' )->text() => 'sitewide',
                                        $this->msg( 'ipb-partial' )->text() => 'partial',
                                ],
+                               'section' => 'actions',
                        ];
                        $a['PageRestrictions'] = [
                                'type' => 'titlesmultiselect',
@@ -183,38 +192,22 @@ class SpecialBlock extends FormSpecialPage {
                                'input' => [
                                        'autocomplete' => false
                                ],
+                               'section' => 'actions',
                        ];
                }
 
-               $a['Expiry'] = [
-                       'type' => 'expiry',
-                       'label-message' => 'ipbexpiry',
-                       'required' => true,
-                       'options' => $suggestedDurations,
-                       'default' => $this->msg( 'ipb-default-expiry' )->inContentLanguage()->text(),
-               ];
-
-               $a['Reason'] = [
-                       'type' => 'selectandother',
-                       // HTML maxlength uses "UTF-16 code units", which means that characters outside BMP
-                       // (e.g. emojis) count for two each. This limit is overridden in JS to instead count
-                       // Unicode codepoints (or 255 UTF-8 bytes for old schema).
-                       'maxlength' => $oldCommentSchema ? 255 : CommentStore::COMMENT_CHARACTER_LIMIT,
-                       'maxlength-unit' => 'codepoints',
-                       'label-message' => 'ipbreason',
-                       'options-message' => 'ipbreason-dropdown',
-               ];
-
                $a['CreateAccount'] = [
                        'type' => 'check',
                        'label-message' => 'ipbcreateaccount',
                        'default' => true,
+                       'section' => 'actions',
                ];
 
                if ( self::canBlockEmail( $user ) ) {
                        $a['DisableEmail'] = [
                                'type' => 'check',
                                'label-message' => 'ipbemailban',
+                               'section' => 'actions',
                        ];
                }
 
@@ -223,13 +216,34 @@ class SpecialBlock extends FormSpecialPage {
                                'type' => 'check',
                                'label-message' => 'ipb-disableusertalk',
                                'default' => false,
+                               'section' => 'actions',
                        ];
                }
 
+               $a['Expiry'] = [
+                       'type' => 'expiry',
+                       'required' => true,
+                       'options' => $suggestedDurations,
+                       'default' => $this->msg( 'ipb-default-expiry' )->inContentLanguage()->text(),
+                       'section' => 'expiry',
+               ];
+
+               $a['Reason'] = [
+                       'type' => 'selectandother',
+                       // HTML maxlength uses "UTF-16 code units", which means that characters outside BMP
+                       // (e.g. emojis) count for two each. This limit is overridden in JS to instead count
+                       // Unicode codepoints (or 255 UTF-8 bytes for old schema).
+                       'maxlength' => $oldCommentSchema ? 255 : CommentStore::COMMENT_CHARACTER_LIMIT,
+                       'maxlength-unit' => 'codepoints',
+                       'options-message' => 'ipbreason-dropdown',
+                       'section' => 'reason',
+               ];
+
                $a['AutoBlock'] = [
                        'type' => 'check',
                        'label-message' => 'ipbenableautoblock',
                        'default' => true,
+                       'section' => 'options',
                ];
 
                # Allow some users to hide name from block log, blocklist and listusers
@@ -238,6 +252,7 @@ class SpecialBlock extends FormSpecialPage {
                                'type' => 'check',
                                'label-message' => 'ipbhidename',
                                'cssclass' => 'mw-block-hideuser',
+                               'section' => 'options',
                        ];
                }
 
@@ -246,6 +261,7 @@ class SpecialBlock extends FormSpecialPage {
                        $a['Watch'] = [
                                'type' => 'check',
                                'label-message' => 'ipbwatchuser',
+                               'section' => 'options',
                        ];
                }
 
@@ -253,6 +269,7 @@ class SpecialBlock extends FormSpecialPage {
                        'type' => 'check',
                        'label-message' => 'ipb-hardblock',
                        'default' => false,
+                       'section' => 'options',
                ];
 
                # This is basically a copy of the Target field, but the user can't change it, so we
index 3425056..b891401 100644 (file)
        "blockip": "Block {{GENDER:$1|user}}",
        "blockiptext": "Use the form below to block write access from a specific IP address or username.\nThis should be done only to prevent vandalism, and in accordance with [[{{MediaWiki:Policy-url}}|policy]].\nFill in a specific reason below (for example, citing particular pages that were vandalized).\nYou can block IP address ranges using the [https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing CIDR] syntax; the largest allowed range is /$1 for IPv4 and /$2 for IPv6.",
        "ipaddressorusername": "IP address or username:",
-       "ipbexpiry": "Expiration:",
        "ipbreason": "Reason:",
        "ipbreason-dropdown": "*Common block reasons\n** Inserting false information\n** Removing content from pages\n** Spamming links to external sites\n** Inserting nonsense/gibberish into pages\n** Intimidating behavior/harassment\n** Abusing multiple accounts\n** Unacceptable username",
        "ipb-hardblock": "Prevent logged-in users from editing from this IP address",
-       "ipbcreateaccount": "Prevent account creation",
-       "ipbemailban": "Prevent user from sending email",
+       "ipbcreateaccount": "Account creation",
+       "ipbemailban": "Sending email",
        "ipbenableautoblock": "Automatically block the last IP address used by this user, and any subsequent IP addresses they try to edit from",
        "ipbsubmit": "Block this user",
        "ipbother": "Other time:",
        "ipboptions": "2 hours:2 hours,1 day:1 day,3 days:3 days,1 week:1 week,2 weeks:2 weeks,1 month:1 month,3 months:3 months,6 months:6 months,1 year:1 year,indefinite:infinite",
        "ipbhidename": "Hide username from edits and lists",
        "ipbwatchuser": "Watch this user's user and talk pages",
-       "ipb-disableusertalk": "Prevent this user from editing their own talk page while blocked",
+       "ipb-disableusertalk": "Editing their own talk page",
        "ipb-change-block": "Re-block the user with these settings",
        "ipb-confirm": "Confirm block",
        "ipb-sitewide": "Sitewide",
        "ipb-partial": "Partial",
-       "ipb-type-label": "Type",
        "ipb-pages-label": "Pages",
        "badipaddress": "Invalid IP address",
        "blockipsuccesssub": "Block succeeded",
        "ipb-blocklist": "View existing blocks",
        "ipb-blocklist-contribs": "Contributions for {{GENDER:$1|$1}}",
        "ipb-blocklist-duration-left": "$1 left",
+       "block-actions": "Actions to block:",
+       "block-expiry": "Expiration:",
+       "block-options": "Additional options:",
+       "block-prevent-edit": "Editing",
+       "block-reason": "Reason:",
+       "block-target": "Username or IP address:",
        "unblockip": "Unblock user",
        "unblockiptext": "Use the form below to restore write access to a previously blocked IP address or username.",
        "ipusubmit": "Remove this block",
index 2349b20..a5f44c8 100644 (file)
        "blockip": "Used as the text of a link in the sidebar toolbox. Clicking this link takes you to [[Special:Block]], with a relevant username or IP address (e.g. \"Username\" on [[User talk:Username]], [[Special:Contributions/Username]], etc.) already filled in.\n\nParameters:\n* $1 - username, for GENDER support\n{{Identical|Block user}}",
        "blockiptext": "Used in the {{msg-mw|Blockip}} form in [[Special:Block]].\n\nRefers to {{msg-mw|Policy-url}}.\n\nThis message may follow the message {{msg-mw|Ipb-otherblocks-header}} and other block messages.\n\nParameters:\n* $1 - CIDR suffix of the largest allowed IPv4 block (as an integer)\n* $2 - CIDR suffix of the largest allowed IPv6 block (as an integer)\n\nSee also:\n* {{msg-mw|Unblockiptext}}",
        "ipaddressorusername": "{{Identical|IP address or username}}",
-       "ipbexpiry": "{{Identical|Expiry}}",
        "ipbreason": "Label of the block reason dropdown in [[Special:BlockIP]] and the unblock reason textfield in [{{fullurl:Special:IPBlockList|action=unblock}} Special:IPBlockList?action=unblock].\n\n{{Identical|Reason}}",
        "ipbreason-dropdown": "Used as item list for dropdown on [[Special:Block]].\n\nThe label for this dropdown is {{msg-mw|Ipbreason}}.",
        "ipb-hardblock": "This is the label for a checkbox in the user block form on [[Special:Block]].\n\nSee also:\n* {{msg-mw|ipbemailban}}\n* {{msg-mw|ipb-disableusertalk}}\n* {{msg-mw|ipbenableautoblock}}\n* {{msg-mw|ipbhidename}}\n* {{msg-mw|ipbwatchuser}}",
        "ipb-confirm": "Used as hidden field in the form on [[Special:Block]].",
        "ipb-sitewide": "A type of block the user can select from on [[Special:Block]].",
        "ipb-partial": "A type of block the user can select from on [[Special:Block]].",
-       "ipb-type-label": "The label of the type of editing restriction the admin would like to impose on [[Special:Block]].",
        "ipb-pages-label": "The label for an autocomplete text field to specify pages to block a user from editing on [[Special:Block]].",
        "badipaddress": "An error message shown when one entered an invalid IP address in blocking page.",
        "blockipsuccesssub": "Used as page title in [[Special:Block]].\n\nThis message is the subject for the following message:\n* {{msg-mw|Blockipsuccesstext}}",
        "ipb-blocklist": "Used as link text in [[Special:Block]].\n\nThe link points to Specil:BlockList.",
        "ipb-blocklist-contribs": "Used in [[Special:Block]].\n* $1 - target username",
        "ipb-blocklist-duration-left": "Used on [[Special:BlockList]] to show the remaining time (years, months, days, hours, minutes) until the block expires.\n$1 - The duration left",
+       "block-actions": "Label for the checkboxes for specifying the actions that a block affects on [[Special:Block]]",
+       "block-expiry": "Label for the input for specifying the expiry time of a block on [[Special:Block]]",
+       "block-options": "Label for the checkboxes for specifying additional options for a block on [[Special:Block]]",
+       "block-prevent-edit": "Label for the checkbox for specifying an editing block in [[Special:Block]].",
+       "block-reason": "Label for the input for specifying the reason for a block on [[Special:Block]]",
+       "block-target": "Label for the input for specifying the target of a block on [[Special:Block]]",
        "unblockip": "Used as title and legend for the form in [[Special:Unblock]].",
        "unblockiptext": "Used in the {{msg-mw|Unblockip}} form on [[Special:Unblock]].",
        "ipusubmit": "Used as button text on [{{canonicalurl:Special:BlockList|action=unblock}} Special:BlockList?action=unblock]. To see the message:\n* Go to [[Special:BlockList]]\n* Click \"unblock\" for any block (but you can only see \"unblock\" if you have administrator rights)\n* It is now the button below the form",
index 767f6de..6589e75 100644 (file)
@@ -1987,7 +1987,7 @@ return [
                        'resources/src/mediawiki.special/upload.css',
                        'resources/src/mediawiki.special/userrights.css',
                        'resources/src/mediawiki.special/watchlist.css',
-                       'resources/src/mediawiki.special/block.less'
+                       'resources/src/mediawiki.special/block.less',
                ],
                'targets' => [ 'desktop', 'mobile' ],
        ],
index 89bbbc8..cd50369 100644 (file)
@@ -19,6 +19,7 @@
                        hideUserField = infuseIfExists( $( '#mw-input-wpHideUser' ).closest( '.oo-ui-fieldLayout' ) ),
                        watchUserField = infuseIfExists( $( '#mw-input-wpWatch' ).closest( '.oo-ui-fieldLayout' ) ),
                        expiryWidget = infuseIfExists( $( '#mw-input-wpExpiry' ) ),
+                       editingWidget = infuseIfExists( $( '#mw-input-wpEditing' ) ),
                        editingRestrictionWidget = infuseIfExists( $( '#mw-input-wpEditingRestriction' ) ),
                        preventTalkPageEdit = infuseIfExists( $( '#mw-input-wpDisableUTEdit' ) ),
                        pageRestrictionsWidget = infuseIfExists( $( '#mw-input-wpPageRestrictions' ) );
@@ -33,7 +34,8 @@
                                // infinityValues  are the values the SpecialBlock class accepts as infinity (sf. wfIsInfinity)
                                infinityValues = [ 'infinite', 'indefinite', 'infinity', 'never' ],
                                isIndefinite = infinityValues.indexOf( expiryValue ) !== -1,
-                               editingRestrictionValue = editingRestrictionWidget ? editingRestrictionWidget.getValue() : undefined;
+                               editingRestrictionValue = editingRestrictionWidget ? editingRestrictionWidget.getValue() : undefined,
+                               editingIsSelected = editingWidget ? editingWidget.isSelected() : undefined;
 
                        if ( enableAutoblockField ) {
                                enableAutoblockField.toggle( !( isNonEmptyIp ) );
                                watchUserField.toggle( !( isIpRange && !isEmpty ) );
                        }
                        if ( pageRestrictionsWidget ) {
-                               pageRestrictionsWidget.setDisabled( editingRestrictionValue === 'sitewide' );
+                               editingRestrictionWidget.setDisabled( !editingIsSelected );
+                               pageRestrictionsWidget.setDisabled( !editingIsSelected || editingRestrictionValue === 'sitewide' );
                        }
                        if ( preventTalkPageEdit ) {
                                // TODO: (T210475) this option is disabled for partial blocks unless
                                // a namespace restriction for User_talk namespace is in place.
                                // This needs to be updated once Namespace restrictions is available
-                               if ( editingRestrictionValue === 'partial' ) {
+                               if ( editingRestrictionValue === 'partial' && editingIsSelected ) {
                                        preventTalkPageEdit.setDisabled( true );
                                } else {
                                        preventTalkPageEdit.setDisabled( false );
@@ -70,6 +73,9 @@
                        if ( editingRestrictionWidget ) {
                                editingRestrictionWidget.on( 'change', updateBlockOptions );
                        }
+                       if ( editingWidget ) {
+                               editingWidget.on( 'change', updateBlockOptions );
+                       }
 
                        // Call them now to set initial state (ie. Special:Block/Foobar?wpBlockExpiry=2+hours)
                        updateBlockOptions();
index c4f0a5e..30cafe5 100644 (file)
@@ -6,11 +6,24 @@
 
 @ooui-spacing-radio-label: 26 / @ooui-font-size-browser / @ooui-font-size-base; // Equals `1.85714286em`≈`26px`
 
-.mw-block-page-restrictions.oo-ui-fieldLayout {
-       margin-top: 0;
-       margin-left: @ooui-spacing-radio-label;
+body.mw-special-Block {
+       .mw-block-editing-restriction.oo-ui-fieldLayout {
+               margin-left: @ooui-spacing-radio-label;
+       }
+
+       .mw-block-page-restrictions.oo-ui-fieldLayout {
+               margin-left: 2 * @ooui-spacing-radio-label;
+
+               .oo-ui-widget {
+                       max-width: 50em - 2 * @ooui-spacing-radio-label;
+               }
+       }
+
+       .oo-ui-panelLayout-framed {
+               border: 0;
+       }
 
-       .oo-ui-widget {
-               max-width: 50em - @ooui-spacing-radio-label;
+       .oo-ui-panelLayout-padded {
+               padding: 0;
        }
 }