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
This commit is contained in:
David Barratt
parent
4d0474e90a
commit
f51cf7db7b
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
{{#collapseIcon}}{{>icon}}{{/collapseIcon}}
|
||||
<div class="block-message">
|
||||
<div class="block-message-icon">
|
||||
{{#stopHandIcon}}{{>icon}}{{/stopHandIcon}}
|
||||
</div>
|
||||
<div class="block-message-info">
|
||||
<div class="block-message-item block-message-title">
|
||||
<h5>{{ title }}</h5>
|
||||
</div>
|
||||
<div class="block-message-data">
|
||||
{{#reason}}
|
||||
<div class="block-message-item">
|
||||
<h6>{{ reasonHeader }}</h6>
|
||||
<div><strong>{{{ reason }}}</strong></div>
|
||||
</div>
|
||||
{{/reason}}
|
||||
<div class="block-message-item block-message-creator">
|
||||
<h6>{{ creatorHeader }}</h6>
|
||||
<div><strong><a href="{{ creator.url }}">{{#userIcon}}{{>icon}}{{/userIcon}}{{ creator.name }}</a></strong></div>
|
||||
</div>
|
||||
{{#expiry}}
|
||||
<div class="block-message-item">
|
||||
<h6>{{ expiryHeader }}</h6>
|
||||
<div><strong>{{#duration}}{{ duration }} / {{/duration}}{{ expiry }}</strong></div>
|
||||
</div>
|
||||
{{/expiry}}
|
||||
</div>
|
||||
{{#okButton}}
|
||||
<div class="block-message-item block-message-buttons">
|
||||
{{>button}}
|
||||
</div>
|
||||
{{/okButton}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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 ) );
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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.
|
||||
$( '<div />' ).html( blockInfo.blockReason ).text(),
|
||||
blockInfo.blockedBy
|
||||
),
|
||||
{
|
||||
autoHide: false
|
||||
}
|
||||
);
|
||||
message.toggle();
|
||||
ev.preventDefault();
|
||||
} );
|
||||
$( '.edit-page' ).detach();
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>stop hand</title><path fill="#e03b3b" d="M13.2 11.8c0-.2-.4-.6-.7-.8V1.9c0-.5-.5-.9-1-.9s-.9.4-.9.9v8c-.3 0-.6-.1-.9-.1V1c0-.5-.4-.9-.9-.9s-.9.4-.9.9v8.8H7V1.7c0-.5-.4-.9-.9-.9s-.9.4-.9.9V10c-.3 0-.7.1-.9.1V4.7c0-.5-.3-.9-.7-.9-.4 0-.7.4-.7.9v7.5c0 8.9 5.8 7.7 5.8 7.7 5 0 6.2-6.2 6.2-6.2.2-1.1 2.4-4.2 2.4-4.2-1.9-2.3-4.1 2.3-4.1 2.3"/></svg>
|
||||
|
After Width: | Height: | Size: 448 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>user avatar</title><path d="M10 12.5c-5.92 0-9 3.5-9 5.5v1h18v-1c0-2-3.08-5.5-9-5.5z"/><circle cx="10" cy="6" r="5"/></svg>
|
||||
|
After Width: | Height: | Size: 251 B |
34
skin.json
34
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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue