From f51cf7db7b01b3fa14abb397e6b48ce32c15a40f Mon Sep 17 00:00:00 2001 From: David Barratt Date: Sat, 14 Apr 2018 13:54:25 -0400 Subject: [PATCH] Use a Drawer for Block Notices When a user is blocked, the toast message provides insufficent information to the user. To provide more information, as well as a better design, the block message will be moved into a drawer. Bug: T165535 Change-Id: Ib025db3a8a4d1fd7bd05b69f9b5326943288372f Depends-On: I926918d0bd7f2176f188a2154dc5e99f6a8a7ad1 --- i18n/en.json | 6 ++- i18n/qqq.json | 6 ++- includes/skins/SkinMinerva.php | 32 ++++++++++-- .../skins.minerva.editor/BlockMessage.hogan | 34 ++++++++++++ .../skins.minerva.editor/BlockMessage.js | 50 ++++++++++++++++++ .../skins.minerva.editor/BlockMessage.less | 52 +++++++++++++++++++ resources/skins.minerva.editor/init.js | 16 ++---- .../stop-hand.svg | 1 + .../user-avatar.svg | 1 + skin.json | 34 ++++++++++-- 10 files changed, 213 insertions(+), 19 deletions(-) create mode 100644 resources/skins.minerva.editor/BlockMessage.hogan create mode 100644 resources/skins.minerva.editor/BlockMessage.js create mode 100644 resources/skins.minerva.editor/BlockMessage.less create mode 100644 resources/skins.minerva.icons.images.scripts/stop-hand.svg create mode 100644 resources/skins.minerva.icons.images.scripts/user-avatar.svg diff --git a/i18n/en.json b/i18n/en.json index c5899f7..724cdf8 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -59,5 +59,9 @@ "skin-minerva-mobile-option-MinervaShowCategoriesButton": "Categories", "skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "View categories of pages", "skin-minerva-mobile-option-MinervaEnableBackToTop": "Jump to top", - "skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Jump to top of the current page using a floating button" + "skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Jump to top of the current page using a floating button", + "skin-minerva-blocked-drawer-title": "Your account has been blocked from editing {{SITENAME}}", + "skin-minerva-blocked-drawer-reason-header": "Reason for the block", + "skin-minerva-blocked-drawer-creator-header": "Blocked by", + "skin-minerva-blocked-drawer-expiry-header": "Block will expire in" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 12a1534..feb166c 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -68,5 +68,9 @@ "skin-minerva-mobile-option-MinervaShowCategoriesButton": "Label for categories mobile web beta feature.\n{{Identical|Category}}", "skin-minerva-mobile-option-MinervaShowCategoriesButton-description": "Description label for categories mobile web beta feature.", "skin-minerva-mobile-option-MinervaEnableBackToTop": "Label for jump to top mobile web beta feature", - "skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Description label for jump to top mobile web beta feature" + "skin-minerva-mobile-option-MinervaEnableBackToTop-description": "Description label for jump to top mobile web beta feature", + "skin-minerva-blocked-drawer-title": "Title for the drawer that appears when a blocked user attempts to edit.", + "skin-minerva-blocked-drawer-reason-header": "Header for the block reason message that appears when a blocked user attempts to edit.", + "skin-minerva-blocked-drawer-creator-header": "Header for the block creator that appears when a blocked user attempts to edit.", + "skin-minerva-blocked-drawer-expiry-header": "Header for the block expiry that appears when a blocked user attempts to edit." } diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index 6de3b88..1e9eb83 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -1277,12 +1277,38 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin { $blockInfo = false; if ( $user->isBlockedFrom( $title, true ) ) { $block = $user->getBlock(); + $blockReason = $block->mReason ? - $out->parseinline( $block->mReason ) : $this->msg( 'blockednoreason' )->text(); + Linker::formatComment( $block->mReason ) : + false; + + $blockCreator = User::newFromName( $block->getByName() ); + + $blockExpiry = null; + $blockDuration = null; + if ( !wfIsInfinity( $block->getExpiry() ) ) { + $blockExpiry = $this->getLanguage()->translateBlockExpiry( + $block->getExpiry(), + $this->getUser(), + time() + ); + // Use the largest unit returned from Language::formatDuraiton() since + // we do not need to display the level of percision that the method + // returns. + list( $blockDuration ) = explode( + ', ', + $this->getLanguage()->formatDuration( wfTimestamp( TS_UNIX, $block->getExpiry() ) - time() ) + ); + } $blockInfo = [ - 'blockedBy' => $block->getByName(), + 'creator' => [ + 'name' => $blockCreator->getName(), + 'url' => $blockCreator->getUserPage()->getLinkURL() + ], + 'expiry' => $blockExpiry, + 'duration' => $blockDuration, // check, if a reason for this block is saved, otherwise use "no reason given" msg - 'blockReason' => $blockReason, + 'reason' => $blockReason, ]; } $vars['wgMinervaUserBlockInfo'] = $blockInfo; diff --git a/resources/skins.minerva.editor/BlockMessage.hogan b/resources/skins.minerva.editor/BlockMessage.hogan new file mode 100644 index 0000000..ff52548 --- /dev/null +++ b/resources/skins.minerva.editor/BlockMessage.hogan @@ -0,0 +1,34 @@ +{{#collapseIcon}}{{>icon}}{{/collapseIcon}} +
+
+ {{#stopHandIcon}}{{>icon}}{{/stopHandIcon}} +
+
+
+
{{ title }}
+
+
+ {{#reason}} +
+
{{ reasonHeader }}
+
{{{ reason }}}
+
+ {{/reason}} +
+
{{ creatorHeader }}
+ +
+ {{#expiry}} +
+
{{ expiryHeader }}
+
{{#duration}}{{ duration }} / {{/duration}}{{ expiry }}
+
+ {{/expiry}} +
+ {{#okButton}} +
+ {{>button}} +
+ {{/okButton}} +
+
diff --git a/resources/skins.minerva.editor/BlockMessage.js b/resources/skins.minerva.editor/BlockMessage.js new file mode 100644 index 0000000..5216a1d --- /dev/null +++ b/resources/skins.minerva.editor/BlockMessage.js @@ -0,0 +1,50 @@ +( function ( M ) { + 'use strict'; + + var Drawer = M.require( 'mobile.startup/Drawer' ), + Button = M.require( 'mobile.startup/Button' ), + Icon = M.require( 'mobile.startup/Icon' ), + util = M.require( 'mobile.startup/util' ); + + /** + * This creates the drawer at the bottom of the screen that appears when a + * blocked user tries to edit. + * @class BlockReason + * @extends Drawer + */ + function BlockMessage() { + Drawer.apply( this, arguments ); + } + + OO.mfExtend( BlockMessage, Drawer, { + defaults: util.extend( {}, Drawer.prototype.defaults, { + stopHandIcon: new Icon( { + glyphPrefix: 'minerva', + name: 'stop-hand' + } ).options, + userIcon: new Icon( { + tagName: 'span', + glyphPrefix: 'minerva', + name: 'user-avatar' + } ).options, + okButton: new Button( { + label: mw.msg( 'ok' ), + tagName: 'button', + progressive: true, + additionalClassNames: 'cancel' + } ).options, + title: mw.msg( 'skin-minerva-blocked-drawer-title' ), + reasonHeader: mw.msg( 'skin-minerva-blocked-drawer-reason-header' ), + creatorHeader: mw.msg( 'skin-minerva-blocked-drawer-creator-header' ), + expiryHeader: mw.msg( 'skin-minerva-blocked-drawer-expiry-header' ) + } ), + templatePartials: util.extend( {}, Drawer.prototype.templatePartials, { + button: Button.prototype.template, + icon: Icon.prototype.template + } ), + template: mw.template.get( 'skins.minerva.editor.blockMessage', 'BlockMessage.hogan' ) + } ); + + M.define( 'skins.minerva.editor/BlockMessage', BlockMessage ); + +}( mw.mobileFrontend ) ); diff --git a/resources/skins.minerva.editor/BlockMessage.less b/resources/skins.minerva.editor/BlockMessage.less new file mode 100644 index 0000000..d6b56fb --- /dev/null +++ b/resources/skins.minerva.editor/BlockMessage.less @@ -0,0 +1,52 @@ +@import 'mediawiki.ui/variables'; + +.block-message { + h5 { + font-weight: bold; + } + h6 { + margin-bottom: 0.187em; + } +} + +.block-message-icon { + float: left; + width: 20%; + margin-top: 0.3em; +} + +.block-message-info { + float: left; + width: 80%; + text-align: left; +} + +.block-message-item { + margin-bottom: 1em; +} + +.block-message-data { + margin-bottom: 1.875em; +} + +.block-message-buttons button.cancel { + margin: 0; +} + +.block-message-creator { + a { + color: inherit; + &:hover { + text-decoration: none; + } + } + .mw-ui-icon { + display: inline-block; + vertical-align: top; + margin: 0 -@iconGutterWidth; + } +} + +.block-message-title { + color: @colorDestructive; +} diff --git a/resources/skins.minerva.editor/init.js b/resources/skins.minerva.editor/init.js index 8ce945e..bbf095d 100644 --- a/resources/skins.minerva.editor/init.js +++ b/resources/skins.minerva.editor/init.js @@ -10,6 +10,7 @@ Icon = M.require( 'mobile.startup/Icon' ), Button = M.require( 'mobile.startup/Button' ), Anchor = M.require( 'mobile.startup/Anchor' ), + BlockMessage = M.require( 'skins.minerva.editor/BlockMessage' ), skin = M.require( 'skins.minerva.scripts/skin' ), currentPage = M.getCurrentPage(), // TODO: create a utility method to generate class names instead of @@ -309,24 +310,17 @@ * @ignore */ function init() { + var message; + if ( isEditable ) { // Edit button updated in setupEditor. setupEditor( currentPage ); } else { updateEditPageButton( false ); if ( blockInfo ) { + message = new BlockMessage( blockInfo ); $( '#ca-edit' ).on( 'click', function ( ev ) { - popup.show( - mw.msg( - 'mobile-frontend-editor-blocked-info-loggedin', - // Strip any html in the blockReason. - $( '
' ).html( blockInfo.blockReason ).text(), - blockInfo.blockedBy - ), - { - autoHide: false - } - ); + message.toggle(); ev.preventDefault(); } ); $( '.edit-page' ).detach(); diff --git a/resources/skins.minerva.icons.images.scripts/stop-hand.svg b/resources/skins.minerva.icons.images.scripts/stop-hand.svg new file mode 100644 index 0000000..1a9be0d --- /dev/null +++ b/resources/skins.minerva.icons.images.scripts/stop-hand.svg @@ -0,0 +1 @@ +stop hand \ No newline at end of file diff --git a/resources/skins.minerva.icons.images.scripts/user-avatar.svg b/resources/skins.minerva.icons.images.scripts/user-avatar.svg new file mode 100644 index 0000000..fa5c136 --- /dev/null +++ b/resources/skins.minerva.icons.images.scripts/user-avatar.svg @@ -0,0 +1 @@ +user avatar \ No newline at end of file diff --git a/skin.json b/skin.json index 0224a00..ce3befd 100644 --- a/skin.json +++ b/skin.json @@ -224,7 +224,9 @@ "issue-style": "resources/skins.minerva.icons.images.scripts/issue-style.svg", "issue-content": "resources/skins.minerva.icons.images.scripts/issue-content.svg", "issue-move": "resources/skins.minerva.icons.images.scripts/issue-move.svg", - "download": "resources/skins.minerva.icons.images.scripts/download.svg" + "download": "resources/skins.minerva.icons.images.scripts/download.svg", + "stop-hand": "resources/skins.minerva.icons.images.scripts/stop-hand.svg", + "user-avatar": "resources/skins.minerva.icons.images.scripts/user-avatar.svg" } }, "skins.minerva.mainPage.styles": { @@ -426,6 +428,31 @@ "desktop" ] }, + "skins.minerva.editor.blockMessage": { + "dependencies": [ + "skins.minerva.scripts" + ], + "messages": [ + "ok", + "skin-minerva-blocked-drawer-title", + "skin-minerva-blocked-drawer-reason-header", + "skin-minerva-blocked-drawer-creator-header", + "skin-minerva-blocked-drawer-expiry-header" + ], + "templates": { + "BlockMessage.hogan": "resources/skins.minerva.editor/BlockMessage.hogan" + }, + "scripts": [ + "resources/skins.minerva.editor/BlockMessage.js" + ], + "styles": [ + "resources/skins.minerva.editor/BlockMessage.less" + ], + "targets": [ + "mobile", + "desktop" + ] + }, "skins.minerva.editor": { "class": "MinervaResourceLoaderParsedMessageModule", "dependencies": [ @@ -436,7 +463,8 @@ "mediawiki.ui.input", "mobile.startup", "skins.minerva.toggling", - "mediawiki.jqueryMsg" + "mediawiki.jqueryMsg", + "skins.minerva.editor.blockMessage" ], "messages": { "0": "mobile-frontend-editor-disabled", @@ -546,4 +574,4 @@ } }, "manifest_version": 1 -} \ No newline at end of file +}