Add feature flagged DownloadIcon

Shortcut for print. Disabled by default and controlled by
wgMinervaDownloadIcon

Note that with lazy images enabled, images will not appear
in the printed article. This can be easily addressed inside
the onClick function in a later patchset with a few modifications
to the Skin class.

Currently the flag when enabled will show on all browsers. There
are some open questions on the ticket about how we want to limit
the feature. This shouldn't block review or merging.

Bug: T177215
Change-Id: I49f1736870c743990b3fb9916247e07a597b2f59
This commit is contained in:
jdlrobson 2017-10-18 14:03:51 -07:00 committed by Jdlrobson
parent f3a89e7fa1
commit 45a1b3b423
8 changed files with 52 additions and 0 deletions

View File

@ -10,6 +10,7 @@
"mobile-frontend-editor-cta": "Help improve this page!",
"mobile-frontend-editor-disabled": "This page is protected to prevent vandalism.",
"mobile-frontend-editor-edit": "Edit",
"minerva-download": "Download",
"mobile-frontend-editor-redlink-create": "Create page",
"mobile-frontend-editor-redlink-explain": "This page has not yet been created.",
"mobile-frontend-editor-redlink-leave": "No, thanks.",

View File

@ -19,6 +19,7 @@
"mobile-frontend-editor-cta": "Caption for call to action when an anonymous user clicks on edit icon. (Note the mobile site currently doesn't allow anonymous editing.)\n{{Identical|Help improve this page}}",
"mobile-frontend-editor-disabled": "Toast message that appears when a user is unable to edit a page and clicks edit icon.",
"mobile-frontend-editor-edit": "Caption for the link showing edit form. (In the imperative mood)\n{{Identical|Edit}}",
"minerva-download": "Caption for the download button (in the imperative mood).",
"mobile-frontend-editor-redlink-create": "Label for a create page button.\n{{Identical|Create page}}",
"mobile-frontend-editor-redlink-explain": "Question for the user, if he want to edit a page, which link he clicked and that does not exist yet, or not.",
"mobile-frontend-editor-redlink-leave": "Used as a label for a button which the user can click to avoid editing a page which does not exist yet (red link): the question/alternative button is {{msg-mw|mobile-frontend-editor-redlink-create}}\n----\n{{Identical|No thanks}}",

View File

@ -1250,6 +1250,7 @@ class SkinMinerva extends SkinTemplate implements ICustomizableSkin {
$out = $this->getOutput();
$vars = [
'wgMinervaDownloadIcon' => $this->getConfig()->get( 'MinervaDownloadIcon' ),
'wgMinervaMenuData' => $this->getMenuData(),
// Expose for skins.minerva.tablet.scripts
'wgMinervaTocEnabled' => $out->getProperty( 'MFTOC' ),

View File

@ -16,6 +16,7 @@
"Page",
"File",
"Router",
"Icon",
"MainMenu",
"mw.user",
"mw.Api",

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="download" fill="#54595D"><path d="M19.778 14.222H22v5.556A2.223 2.223 0 0 1 19.778 22H4.222A2.223 2.223 0 0 1 2 19.778v-5.556h2V20h16v-5.436l-.222-.342zM12 18l-5.611-7h11.11L12 18zm1-16v9h-2V2h2z" id="Combined-Shape"/></g></g></svg>

After

Width:  |  Height:  |  Size: 384 B

View File

@ -0,0 +1,31 @@
( function ( M ) {
var msg = mw.msg,
Icon = M.require( 'mobile.startup/Icon' );
/**
* A download icon for triggering print functionality
* @class DownloadIcon
* @extends Icon
*
* @constructor
*/
function DownloadIcon() {
var options = {};
options.tagName = 'li';
options.title = msg( 'minerva-download' );
options.name = 'download';
Icon.call( this, options );
}
OO.mfExtend( DownloadIcon, Icon, {
onClick: function () {
window.print();
},
events: {
click: 'onClick'
}
} );
M.define( 'skins.minerva.scripts/DownloadIcon', DownloadIcon );
}( mw.mobileFrontend ) );

View File

@ -1,7 +1,10 @@
( function ( M, $ ) {
var inSample, inStable, experiment,
config = mw.config,
toast = M.require( 'mobile.startup/toast' ),
time = M.require( 'mobile.startup/time' ),
skin = M.require( 'mobile.init/skin' ),
DownloadIcon = M.require( 'skins.minerva.scripts/DownloadIcon' ),
browser = M.require( 'mobile.startup/Browser' ).getSingleton(),
token = mw.storage.get( 'mobile-betaoptin-token' ),
BetaOptinPanel = M.require( 'mobile.betaoptin/BetaOptinPanel' ),
@ -258,6 +261,14 @@
initHistoryLink( $( '.last-modifier-tagline a' ) );
M.on( 'resize', loadTabletModules );
loadTabletModules();
if ( config.get( 'wgMinervaDownloadIcon' ) && !page.isMainPage() ) {
// Because the page actions are floated to the right, their order in the
// DOM is reversed in the display. The watchstar is last in the DOM and
// left-most in the display. Since we want the download button to be to
// the left of the watchstar, we put it after it in the DOM.
new DownloadIcon( skin ).$el.insertAfter( '#ca-watch' );
}
} );
M.define( 'skins.minerva.scripts/overlayManager', overlayManager );

View File

@ -170,6 +170,7 @@
"selector": ".mw-ui-icon-{name}:before",
"position": "bottom",
"images": {
"download": "resources/skins.minerva.icons.images.scripts/download.svg",
"watch": "resources/skins.minerva.icons.images.scripts/watch.svg",
"watched": "resources/skins.minerva.icons.images.scripts/watched.svg",
"user": "resources/skins.minerva.icons.images.scripts/userNormal.svg",
@ -253,6 +254,7 @@
],
"dependencies": [
"mobile.init",
"skins.minerva.icons.images.scripts",
"skins.minerva.scripts.top",
"mediawiki.util",
"mediawiki.router",
@ -276,10 +278,12 @@
"mobile-frontend-languages-not-available",
"mobile-frontend-cookies-required",
"mobile-frontend-console-recruit",
"minerva-download",
"mobile-frontend-redirected-from"
],
"scripts": [
"resources/skins.minerva.scripts/preInit.js",
"resources/skins.minerva.scripts/DownloadIcon.js",
"resources/skins.minerva.scripts/init.js",
"resources/skins.minerva.scripts/initLogging.js",
"resources/skins.minerva.scripts/mobileRedirect.js",
@ -481,6 +485,7 @@
},
"author": [],
"config": {
"MinervaDownloadIcon": false,
"MinervaEnableSiteNotice": false,
"MinervaCustomLogos": [],
"MinervaApplyKnownTemplateHacks": false,