jenkins-bot has submitted this change and it was merged.
Change subject: Quick popover menu when hovering the contributions link
......................................................................
Quick popover menu when hovering the contributions link
Communicate that users can create new contributions (especially translations)
in a quick way.
When users hover the contributions link, show a popover with access
to different contribution areas:
- "User contributions" links to the contributions page
- "Uploaded media" links to "My Uploads" from Commons.
- "Translations" links to the Content Translation Dashboard
The popover menu will be shown open initially right after the user
enabled the content translation beta feature
(to help announce where to translate from).
This will be auto-open exactly once.
Bug: T92938
Change-Id: I47ec9d602c1af918b26522f35d716f98ea3fe432
---
M ContentTranslation.hooks.php
M ContentTranslation.php
M Resources.php
M i18n/en.json
M i18n/qqq.json
A modules/campaigns/ext.cx.betafeature.init.js
A modules/campaigns/ext.cx.campaigns.contributionsmenu.js
A modules/campaigns/images/blue-beta.png
A modules/campaigns/images/blue-beta.svg
R modules/campaigns/images/cx-announcement-icon.gif
A modules/campaigns/images/translation.png
A modules/campaigns/images/translation.svg
A modules/campaigns/images/userAvatar.png
A modules/campaigns/images/userAvatar.svg
A modules/campaigns/images/wikimediaCommons.png
A modules/campaigns/images/wikimediaCommons.svg
A modules/campaigns/styles/ext.cx.campaigns.contributionsmenu.less
M modules/campaigns/styles/ext.cx.campaigns.newarticle.less
18 files changed, 216 insertions(+), 1 deletion(-)
Approvals:
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/ContentTranslation.hooks.php b/ContentTranslation.hooks.php
index ac18b64..6563f41 100644
--- a/ContentTranslation.hooks.php
+++ b/ContentTranslation.hooks.php
@@ -63,6 +63,9 @@
$out->addModules( 'ext.cx.redlink' );
}
+ // Add a hover menu for contributions link in personal tool bar
+ $out->addModules( 'ext.cx.campaigns.contributionsmenu' );
+
// The current guided tours are only for the user namespace,
// so load the module only there.
// In the future there may be guided tours in other namespaces,
@@ -190,6 +193,28 @@
}
/**
+ * Hook: User::UserSaveOptions
+ */
+ public static function onSaveOptions( $user, &$saveOptions ) {
+ $out = RequestContext::getMain()->getOutput();
+
+ if (
+ $saveOptions['cx'] &&
+ !isset( $saveOptions['cx-know'] ) &&
+ !$out->getTitle()->isSpecial( 'ContentTranslation' )
+ ) {
+ $out->addModules(
+ array( 'ext.cx.betafeature.init',
'ext.cx.campaigns.contributionsmenu' )
+ );
+ // This make sure the auto-open contribution menu shown
exactly once.
+ // and it is not in Special:CX
+ $saveOptions['cx-know'] = true;
+ }
+
+ return true;
+ }
+
+ /**
* Hook: ResourceLoaderTestModules
*/
public static function onResourceLoaderTestModules( array &$modules ) {
diff --git a/ContentTranslation.php b/ContentTranslation.php
index 72644ae..c39e77d 100644
--- a/ContentTranslation.php
+++ b/ContentTranslation.php
@@ -71,6 +71,7 @@
'ContentTranslationHooks::addNewContributionButton';
$GLOBALS['wgHooks']['ListDefinedTags'][] =
'ContentTranslationHooks::registerTags';
$GLOBALS['wgHooks']['ChangeTagsListActive'][] =
'ContentTranslationHooks::registerTags';
+$GLOBALS['wgHooks']['UserSaveOptions'][] =
'ContentTranslationHooks::onSaveOptions';
$GLOBALS['wgHooks']['EditPage::showEditForm:initial'][] =
'ContentTranslationHooks::newArticleCampign';
$GLOBALS['wgHooks']['ResourceLoaderTestModules'][] =
diff --git a/Resources.php b/Resources.php
index 1e1e0d9..61b2af2 100644
--- a/Resources.php
+++ b/Resources.php
@@ -729,6 +729,32 @@
)
) + $resourcePaths;
+$wgResourceModules['ext.cx.betafeature.init'] = array(
+ 'scripts' => array(
+ 'campaigns/ext.cx.betafeature.init.js',
+ ),
+) + $resourcePaths;
+
+$wgResourceModules['ext.cx.campaigns.contributionsmenu'] = array(
+ 'scripts' => array(
+ 'campaigns/ext.cx.campaigns.contributionsmenu.js',
+ ),
+ 'styles' => array(
+ 'campaigns/styles/ext.cx.campaigns.contributionsmenu.less',
+ ),
+ 'dependencies' => array(
+ 'mediawiki.ui.button',
+ 'jquery.client',
+ 'mediawiki.util',
+ 'ext.cx.widgets.callout',
+ ),
+ 'messages' => array(
+ 'cx-campaign-contributionsmenu-mycontributions',
+ 'cx-campaign-contributionsmenu-mytranslations',
+ 'cx-campaign-contributionsmenu-myuploads',
+ )
+) + $resourcePaths;
+
$wgResourceModules['ext.cx.widgets.overlay'] = array(
'scripts' => array(
'widgets/overlay/ext.cx.overlay.js',
diff --git a/i18n/en.json b/i18n/en.json
index b0206d9..c4ac923 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -169,6 +169,9 @@
"cx-campaign-newarticle-notice": "Now you can also create new content
by <b>translating</b>! Do you want to try the Content Translation beta tool?",
"cx-campaign-no-thanks": "No, thanks",
"cx-campaign-try": "Try Content Translation",
+ "cx-campaign-contributionsmenu-mycontributions": "Contributions",
+ "cx-campaign-contributionsmenu-mytranslations": "Translations",
+ "cx-campaign-contributionsmenu-myuploads": "Uploaded media",
"cx-trend-all-translations": "All translations",
"cx-trend-translations-to": "Translations to $1 language"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 1e5e64c..2c9ce2d 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -173,6 +173,9 @@
"cx-campaign-newarticle-notice": "Text shown in the dialog inviting
editors to try the Content Translation beta feature",
"cx-campaign-no-thanks": "Button label to cancel Content Translation
invite\n{{Identical|No thanks}}",
"cx-campaign-try": "Button label to try Content Translation beta
feature",
+ "cx-campaign-contributionsmenu-myuploads": "Menu item for menu shown
while hovering the contributions link in personal toolbar. Points to the
Special:MyUploads in commons",
+ "cx-campaign-contributionsmenu-mycontributions": "Menu item for menu
shown while hovering the contributions link in personal toolbar. Points to
[[Special:MyContributions]]",
+ "cx-campaign-contributionsmenu-mytranslations": "Menu item for menu
shown while hovering the contributions link in personal toolbar. Points to the
Content Translation dashboard",
"cx-trend-all-translations": "Label shown in the legend section Content
translation trends(graph visualization)",
"cx-trend-translations-to": "Label shown in the legend section Content
translation trends(graph visualization)\n$1 - language name"
}
diff --git a/modules/campaigns/ext.cx.betafeature.init.js
b/modules/campaigns/ext.cx.betafeature.init.js
new file mode 100644
index 0000000..c898571
--- /dev/null
+++ b/modules/campaigns/ext.cx.betafeature.init.js
@@ -0,0 +1,8 @@
+( function ( $, mw ) {
+ 'use strict';
+
+ // This module get loaded when CX beta feature is enabled.
+ $( function () {
+ mw.hook( 'mw.cx.betafeature.enabled' ).fire();
+ } );
+}( jQuery, mediaWiki ) );
diff --git a/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
b/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
new file mode 100644
index 0000000..4a0d189
--- /dev/null
+++ b/modules/campaigns/ext.cx.campaigns.contributionsmenu.js
@@ -0,0 +1,81 @@
+/**
+ * Content Translation invitation from the 'contributions' link in pages.
+ *
+ * @file
+ * @copyright See AUTHORS.txt
+ * @license GPL-2.0+
+ */
+( function ( $, mw ) {
+ 'use strict';
+
+ var campaign = 'contributionsmenu';
+
+ function showInvitation() {
+ var callout, $menu, $trigger, cxLink, $myContributions,
$myTranslations, $myUploads;
+
+ $trigger = $( '#pt-mycontris a' );
+ cxLink = mw.util.getUrl( 'Special:ContentTranslation', {
+ campaign: campaign,
+ to: mw.config.get( 'wgContentLanguage' )
+ } );
+
+ $myContributions = $( '<li>' )
+ .addClass( 'cx-campaign-contributions' )
+ .append(
+ $( '<a>' )
+ .text( mw.msg(
'cx-campaign-contributionsmenu-mycontributions' ) )
+ .attr( 'href', $trigger.attr( 'href' ) )
+ );
+ $myTranslations = $( '<li>' )
+ .addClass( 'cx-campaign-translations' )
+ .append(
+ $( '<a>' )
+ .text( mw.msg(
'cx-campaign-contributionsmenu-mytranslations' ) )
+ .attr( 'href', cxLink )
+ );
+ if ( $( '.mw-special-Preferences' ).length ) {
+ $myTranslations.addClass(
'cx-campaign-new-beta-feature' );
+ }
+ $myUploads = $( '<li>' )
+ .addClass( 'cx-campaign-uploads' )
+ .append(
+ $( '<a>' )
+ .text( mw.msg(
'cx-campaign-contributionsmenu-myuploads' ) )
+ .attr( 'href',
'//commons.wikimedia.org/wiki/Special:MyUploads' )
+ );
+ $menu = $( '<ul>' )
+ .append( $myContributions, $myTranslations, $myUploads
);
+ $trigger.callout( {
+ trigger: 'manual',
+ classes: 'cx-campaign-contributionsmenu',
+ gravity: $.fn.callout.autoNEW,
+ content: $menu
+ } );
+
+ callout = $trigger.data( 'callout' );
+
+ function show() {
+ callout.show();
+ callout.$dialog.on( 'mouseleave', function () {
+ callout.hide();
+ } );
+ // Not measuring the shown menu events since there will
be a lot-since the
+ // trigger is 'hover'. But can be easily track if
somebody use it to
+ // reach CX
+ }
+ $trigger.on( 'mouseover', show );
+ mw.hook( 'mw.cx.betafeature.enabled' ).add( function () {
+ // Show after a few milliseconds to get all position
calculation correct
+ setTimeout( show, 500 );
+ mw.hook( 'mw.cx.cta.shown' ).fire( campaign );
+ } );
+ }
+
+ $( function () {
+ var blacklist = mw.config.get(
'wgContentTranslationBrowserBlacklist' );
+ if ( !$.client.test( blacklist, null, true ) ) {
+ showInvitation();
+ }
+ } );
+
+}( jQuery, mediaWiki ) );
diff --git a/modules/campaigns/images/blue-beta.png
b/modules/campaigns/images/blue-beta.png
new file mode 100644
index 0000000..4338638
--- /dev/null
+++ b/modules/campaigns/images/blue-beta.png
Binary files differ
diff --git a/modules/campaigns/images/blue-beta.svg
b/modules/campaigns/images/blue-beta.svg
new file mode 100644
index 0000000..86a5790
--- /dev/null
+++ b/modules/campaigns/images/blue-beta.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 612 792"
enable-background="new 0 0 612 792">
+ <path fill="#3F9EFF" d="M306 192c-112.2 0-204 91.8-204 204s91.8 204 204
204 204-91.8 204-204-91.8-204-204-204zm102 306l-76.5-51-25.5 102-25.5-102-76.5
51 51-76.5-102-25.5 102-25.5-51-76.5 76.5 51 25.5-102 25.5 102 76.5-51-51 76.5
102 25.5-102 25.5 51 76.5z" />
+</svg>
diff --git a/modules/campaigns/styles/images/cx-announcement-icon.gif
b/modules/campaigns/images/cx-announcement-icon.gif
similarity index 100%
rename from modules/campaigns/styles/images/cx-announcement-icon.gif
rename to modules/campaigns/images/cx-announcement-icon.gif
Binary files differ
diff --git a/modules/campaigns/images/translation.png
b/modules/campaigns/images/translation.png
new file mode 100644
index 0000000..c6a7642
--- /dev/null
+++ b/modules/campaigns/images/translation.png
Binary files differ
diff --git a/modules/campaigns/images/translation.svg
b/modules/campaigns/images/translation.svg
new file mode 100644
index 0000000..c660fbd
--- /dev/null
+++ b/modules/campaigns/images/translation.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"
enable-background="new 0 0 24 24">
+ <path d="M11.1
13.1c-1.8-2.1-2.7-4.3-3-5.1h4.7l.7-2h-5.5v-3h-2v3h-5v2h5c-.2.9-1.3 4.8-5.1
7.6l1.2 1.6c2.7-2 4.3-4.5 5.1-6.4.7 1.3 1.7 3 3.2 4.5l.7-2.2zM12.5
20l1.3-4h5.3l1.3 4h2.2l-4.6-14h-3l-4.7 14h2.2zm4-12l2 6h-4l2-6z" />
+</svg>
diff --git a/modules/campaigns/images/userAvatar.png
b/modules/campaigns/images/userAvatar.png
new file mode 100644
index 0000000..bcbdd2c
--- /dev/null
+++ b/modules/campaigns/images/userAvatar.png
Binary files differ
diff --git a/modules/campaigns/images/userAvatar.svg
b/modules/campaigns/images/userAvatar.svg
new file mode 100644
index 0000000..123601e
--- /dev/null
+++ b/modules/campaigns/images/userAvatar.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"
enable-background="new 0 0 24 24">
+ <path d="M19.5 18.5c-1.2-.4-4-1.5-4-1.5-.9-.3-.9-1.1-1-2v-.1c1.4-1.2
2.5-3.2 2.5-5.4 0-4.7-2-6.5-5-6.5-2.1 0-5 1.2-5 6.5 0 2.1 1.1 4.1 2.5 5.4v.1c0
.9-.1 1.7-1 2 0 0-2.9 1.1-4 1.5-1.3.4-2.5 1-2.5
2.5v1h20v-1c0-1.2-.8-2-2.5-2.5z" />
+</svg>
diff --git a/modules/campaigns/images/wikimediaCommons.png
b/modules/campaigns/images/wikimediaCommons.png
new file mode 100644
index 0000000..40f500c
--- /dev/null
+++ b/modules/campaigns/images/wikimediaCommons.png
Binary files differ
diff --git a/modules/campaigns/images/wikimediaCommons.svg
b/modules/campaigns/images/wikimediaCommons.svg
new file mode 100644
index 0000000..fd50836
--- /dev/null
+++ b/modules/campaigns/images/wikimediaCommons.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24"
enable-background="new 0 0 24 24">
+ <path d="M15.4 7.8c-2-.9-2.3-2.5-2.4-2.8.1.1 2 1 2 1l-3-5-3 5 2-1s0 .8.6
2.1c.8 1.5 2.2 2.2 2.2 2.2s1.6.7 2.2 1.3l-.7.7-.5-.5-.4 1.8
1.8-.4-.5-.5.7-.7c.9 1 1.5 2.3 1.6 3.8h-1v-.8l-1.5 1 1.5 1v-.8h1c-.1 1.5-.6
2.8-1.6 3.8l-.7-.7.5-.5-1.8-.4.4 1.8.5-.5.7.7c-1 .9-2.3 1.5-3.8
1.6v-1h.8l-1-1.5-1
1.5h.8v1c-1.5-.1-2.8-.6-3.8-1.6l.7-.7.5.5.4-1.8-1.8.4.5.5-.7.7c-.9-1-1.5-2.3-1.6-3.8h1v.8l1.5-1-1.5-1v.8h-1c.1-1.5.6-2.8
1.6-3.8l.7.7-.5.5 1.8.4-.4-1.8-.5.5-.7-.7-1.5-1.4c-1.5 1.4-2.5 3.5-2.5 5.8 0
4.4 3.6 8 8 8s8-3.6 8-8c0-3.2-1.9-5.9-4.6-7.2z" />
+ <circle cx="12" cy="15" r="3" />
+</svg>
diff --git a/modules/campaigns/styles/ext.cx.campaigns.contributionsmenu.less
b/modules/campaigns/styles/ext.cx.campaigns.contributionsmenu.less
new file mode 100644
index 0000000..a1a8a2b
--- /dev/null
+++ b/modules/campaigns/styles/ext.cx.campaigns.contributionsmenu.less
@@ -0,0 +1,51 @@
+@import "mediawiki.mixins";
+
+.cx-campaign-contributionsmenu {
+ padding: 0;
+
+ ul {
+ padding: 0;
+ margin: 0;
+ }
+
+ li {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ border-bottom: 1px solid #ccc;
+ min-width: 250px;
+ background-size: 24px;
+ background-position: 10px center;
+ background-repeat: no-repeat;
+
+ a {
+ text-decoration: none;
+ color: #565656;
+ padding: 5px 10px 5px 40px;
+ display: block;
+ }
+
+ &:hover {
+ background-color: #eee;
+ }
+
+ &.cx-campaign-contributions {
+ .background-image-svg('../images/userAvatar.svg',
'../images/userAvatar.png');
+ }
+
+ &.cx-campaign-uploads {
+ .background-image-svg('../images/wikimediaCommons.svg',
'../images/wikimediaCommons.png');
+ }
+
+ &.cx-campaign-translations {
+ .background-image-svg('../images/translation.svg',
'../images/translation.png');
+ }
+
+ &.cx-campaign-new-beta-feature a {
+ .background-image-svg('../images/blue-beta.svg',
'../images/blue-beta.png');
+ background-position: right center;
+ background-repeat: no-repeat;
+ background-size: 24px;
+ }
+ }
+}
diff --git a/modules/campaigns/styles/ext.cx.campaigns.newarticle.less
b/modules/campaigns/styles/ext.cx.campaigns.newarticle.less
index 0c26694..ee7628c 100644
--- a/modules/campaigns/styles/ext.cx.campaigns.newarticle.less
+++ b/modules/campaigns/styles/ext.cx.campaigns.newarticle.less
@@ -6,7 +6,7 @@
font-size: 16px;
&__logo {
- .background-image('images/cx-announcement-icon.gif');
+ .background-image('../images/cx-announcement-icon.gif');
background-position: top center;
background-repeat: no-repeat;
height: 100px;
--
To view, visit https://gerrit.wikimedia.org/r/200842
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I47ec9d602c1af918b26522f35d716f98ea3fe432
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il>
Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com>
Gerrit-Reviewer: Pginer <pgi...@wikimedia.org>
Gerrit-Reviewer: Santhosh <santhosh.thottin...@gmail.com>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
