Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/275881
Change subject: WIP: Add an alternative language switcher button to the top of
the page
......................................................................
WIP: Add an alternative language switcher button to the top of the page
TODO: Jeff to add tests.
Bug: T128350
Change-Id: I4d09c645c02a0d137595c6f6124696913b763c44
---
M extension.json
M includes/skins/MinervaTemplate.php
M includes/skins/SkinMinerva.php
M resources/skins.minerva.base.styles/pageactions.less
A resources/skins.minerva.icons.images/languageSwitcher.svg
M resources/skins.minerva.scripts/init.js
6 files changed, 199 insertions(+), 28 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/81/275881/1
diff --git a/extension.json b/extension.json
index 7d611ae..a50d36a 100644
--- a/extension.json
+++ b/extension.json
@@ -189,7 +189,8 @@
"notifications":
"resources/skins.minerva.icons.images/bell.svg",
"mainmenu":
"resources/skins.minerva.icons.images/hamburger.svg",
"edit":
"resources/skins.minerva.icons.images/editLocked.svg",
- "edit-enabled":
"resources/skins.minerva.icons.images/edit.svg"
+ "edit-enabled":
"resources/skins.minerva.icons.images/edit.svg",
+ "language-switcher":
"resources/skins.minerva.icons.images/languageSwitcher.svg"
}
},
"mobile.overlay.images": {
@@ -1974,6 +1975,28 @@
"A": 0
}
},
+ "@languageSwitcherButton": "controls which language
switcher button shows in stable",
+ "languageSwitcherButton": {
+ "name": "languageSwitcherButton",
+ "enabled": false,
+ "buckets": {
+ "@control": "the ratio of users that
see the language switcher button at the bottom of the article",
+ "control": 1,
+ "@A": "the ratio of users that see the
language switcher button at the top of the article",
+ "A": 0
+ }
+ },
+ "@languageSwitcherButtonBeta": "controls which language
switcher button shows in beta",
+ "languageSwitcherButtonBeta": {
+ "name": "languageSwitcherButtonBeta",
+ "enabled": false,
+ "buckets": {
+ "@control": "the ratio of users that
see the language switcher button at the bottom of the article",
+ "control": 1,
+ "@A": "the ratio of users that see the
language switcher button at the top of the article",
+ "A": 0
+ }
+ },
"_merge_strategy": "array_plus_2d"
},
"MFEnableMinervaBetaFeature": false,
diff --git a/includes/skins/MinervaTemplate.php
b/includes/skins/MinervaTemplate.php
index d24b78b..703cb97 100644
--- a/includes/skins/MinervaTemplate.php
+++ b/includes/skins/MinervaTemplate.php
@@ -169,27 +169,7 @@
return array();
}
- $result = $this->data['secondary_actions'];
- $hasLanguages = $this->data['content_navigation']['variants'] ||
- $this->data['language_urls'];
-
- // If languages are available, add a languages link
- if ( $hasLanguages ) {
- $languageUrl = SpecialPage::getTitleFor(
- 'MobileLanguages',
- $this->getSkin()->getTitle()
- )->getLocalURL();
-
- $result['language'] = array(
- 'attributes' => array(
- 'class' => 'languageSelector',
- 'href' => $languageUrl,
- ),
- 'label' => $this->getMsg(
'mobile-frontend-language-article-heading' )->text()
- );
- }
-
- return $result;
+ return $this->data['secondary_actions'];
}
/**
@@ -255,10 +235,10 @@
if ( $internalBanner || $preBodyHtml || isset(
$data['page_actions'] ) ) {
$html .= $preBodyHtml
. Html::openElement( 'div', array( 'class' =>
'pre-content heading-holder' ) );
+ $html .= $headingHtml;
if ( !$this->isSpecialPage ){
$html .= $this->getPageActionsHtml(
$data );
}
- $html .= $headingHtml;
$html .= $postHeadingHtml;
$html .= $data['subtitle'];
// FIXME: Temporary solution until we have
design
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 715c8f7..dbb5e68 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -735,6 +735,25 @@
}
/**
+ * Returns an array with details for a language button.
+ * @return array
+ */
+ protected function getLanguageButton() {
+ $languageUrl = SpecialPage::getTitleFor(
+ 'MobileLanguages',
+ $this->getSkin()->getTitle()
+ )->getLocalURL();
+
+ return array(
+ 'attributes' => array(
+ 'class' => 'languageSelector',
+ 'href' => $languageUrl,
+ ),
+ 'label' => $this->msg(
'mobile-frontend-language-article-heading' )->text()
+ );
+ }
+
+ /**
* Returns an array with details for a talk button.
* @param Title $talkTitle Title object of the talk page
* @param array $talkButton Array with data of desktop talk button
@@ -775,6 +794,14 @@
$talkTitle = $title->getTalkPage();
$buttons['talk'] = $this->getTalkButton( $talkTitle,
$talkButton );
}
+
+ $hasLanguages = $tpl->data['content_navigation']['variants'] ||
+ $tpl->data['language_urls'];
+ if ( $hasLanguages ) {
+ if ( !$this->shouldUseNewLanguageSwitcherButton(
$this->getMode() != 'stable' ) ) {
+ $buttons['language'] =
$this->getLanguageButton();
+ }
+ }
return $buttons;
}
@@ -793,6 +820,22 @@
if ( !$this->getTitle()->exists() ) {
$tpl->set( 'page_actions', $menu );
return;
+ }
+ }
+
+ $hasLanguages = $tpl->data['content_navigation']['variants'] ||
+ $tpl->data['language_urls'];
+ if ( $hasLanguages ) {
+ if ( $this->shouldUseNewLanguageSwitcherButton(
$this->getMode() != 'stable' ) ) {
+ $menu['language-switcher'] = array( 'id' =>
'ca-language-switcher', 'text' => '',
+ 'itemtitle' => $this->msg(
'mobile-frontend-language-article-heading' ),
+ 'class' => MobileUI::iconClass(
'language-switcher', 'element' ),
+ 'links' => array(
+ 'language' => array(
+ 'href' =>
SpecialPage::getTitleFor( 'MobileLanguages', $this->getTitle() )->getLocalURL()
+ )
+ )
+ );
}
}
@@ -1044,4 +1087,25 @@
// Add Minerva-specific ResourceLoader modules to the page
output
$out->addModuleStyles( $this->getSkinStyles() );
}
+
+ /**
+ * Decide whether the skin should use the new language switcher button.
+ *
+ * @param bool|false $beta Are we talking about the minerva beta skin?
+ * @return bool
+ */
+ protected function shouldUseNewLanguageSwitcherButton( $beta = false ) {
+ $config = $this->getMFConfig();
+ $experiments = $config->get( 'MFExperiments' );
+ $experimentName = 'languageSwitcherButton';
+ if ( $beta ) {
+ $experimentName .= 'Beta';
+ }
+ if ( isset( $experiments[$experimentName] ) ) {
+ return $experiments[$experimentName]['buckets']['A'] >=
+ // generate a random number that belongs to [0,
1]
+ mt_rand() / mt_getrandmax();
+ }
+ return false;
+ }
}
diff --git a/resources/skins.minerva.base.styles/pageactions.less
b/resources/skins.minerva.base.styles/pageactions.less
index 0b53e89..e13bf6e 100644
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@@ -43,7 +43,7 @@
#page-actions {
font-size: 1.1em; // Icons are 24px square.
- float: right;
+ float: right; // FIXME: remove when cache clears
border: none;
overflow: hidden;
@@ -54,7 +54,7 @@
cursor: pointer;
// Override .hlist rule.
margin-right: 0;
- margin-bottom: 20px;
+ margin-bottom: 20px; // FIXME: remove when cache clears
// FIXME: use .cloaked class
// file inputs are notoriously difficult to style
@@ -81,8 +81,36 @@
}
&:first-child {
- margin-top: 3px;
+ margin-top: 3px; // FIXME: remove when cache clears
}
+ }
+}
+
+// FIXME: merge with the above rule when cache clears
+// Separate rule so that the new styling doesn't mess up the cached pages
+// Page actions have moved below the heading in the new HTML
+.heading-holder {
+ > #page-actions:last-child {
+ float: none; // FIXME: remove when cache clears
+ border-top: 1px solid @colorGray14;
+ border-bottom: 1px solid @colorGray12;
+ margin: 1em 0;
+ padding: 0.5em 0;
+
+ li {
+ display: inline-block;
+ margin-bottom: 0; // FIXME: remove when cache clears
+ float: right;
+
+ &#ca-language-switcher {
+ float: left;
+ }
+
+ &:first-child {
+ margin-top: 0; // FIXME: remove when cache
clears
+ }
+ }
+
}
}
@@ -98,3 +126,17 @@
}
}
}
+
+@media all and (min-width: @deviceWidthTablet) {
+ .heading-holder {
+ position: relative;
+
+ > #page-actions:last-child {
+ border: none;
+ bottom: @titleSectionSpacingBottom;
+ margin: 0;
+ position: absolute;
+ right: 0;
+ }
+ }
+}
diff --git a/resources/skins.minerva.icons.images/languageSwitcher.svg
b/resources/skins.minerva.icons.images/languageSwitcher.svg
new file mode 100644
index 0000000..1a5204f
--- /dev/null
+++ b/resources/skins.minerva.icons.images/languageSwitcher.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="-293 385 24 24"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="languageSwitcher.svg"
+ style="enable-background:new -293 385 24 24;"><metadata
+ id="metadata17"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs15" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="640"
+ inkscape:window-height="480"
+ id="namedview13"
+ showgrid="false"
+ inkscape:zoom="9.8333333"
+ inkscape:cx="14.371186"
+ inkscape:cy="10.067797"
+ inkscape:window-x="20"
+ inkscape:window-y="43"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Layer_1" /><style
+ type="text/css"
+ id="style3">
+
.st0{fill:none;stroke:#000000;stroke-width:1.6;stroke-linecap:square;stroke-miterlimit:10;}
+</style><path
+ d="M-273,402.4l1.3,3.6h1.8l-4.2-13h-2.5l-4.4,13h1.8l1.2-3.6H-273z
M-275.5,394.5l2.1,6.2h-4.2L-275.5,394.5z"
+ id="path5" /><path
+ d="M-284.9,392h0.9l-1-2h-2l0.5,1C-286.2,391.6-285.6,392-284.9,392z"
+ id="path7" /><path
+ class="st0"
+ d="M-278.6,392.9"
+ id="path9" /><path
+
d="M-281.1,394.5h2l0.5-1.5H-291v1.5h1.9c0.6,1.8,1.5,3.3,2.8,4.7c-1.4,1.1-3.1,1.7-4.8,2.3l0.5,1.5c2-0.6,3.8-1.4,5.5-2.7
c0.9,0.7,2.1,1.4,3.5,1.8l0.5-1.5c-1.1-0.3-2-0.8-2.8-1.4c1.9-1.9,2.5-3.8,2.6-4L-281.1,394.5z
M-285.1,398.2c-1-1-1.9-2.3-2.3-3.7
h4.7C-283.2,395.9-284.1,397.1-285.1,398.2C-286.7,396.5-285.1,398.2-285.1,398.2z"
+ id="path11" /></svg>
\ No newline at end of file
diff --git a/resources/skins.minerva.scripts/init.js
b/resources/skins.minerva.scripts/init.js
index bafb1d4..61b6cfc 100644
--- a/resources/skins.minerva.scripts/init.js
+++ b/resources/skins.minerva.scripts/init.js
@@ -52,7 +52,13 @@
* @ignore
*/
function initButton() {
- var $languageSelector = $( '#page-secondary-actions' ).find(
'.languageSelector' );
+ var $languageSelector = $( '#page-secondary-actions' ).find(
'.languageSelector' ),
+ languageButtonVersion = 'bottom-of-article';
+
+ if ( !$languageSelector.length ) {
+ $languageSelector = $( '#ca-language-switcher' );
+ languageButtonVersion = 'top-of-article';
+ }
/**
* Log impression when the language button is seen by the user
@@ -128,7 +134,7 @@
settings.save(
'mobile-language-button-tap-count', previousTapCount + 1 );
schemaMobileWebLanguageSwitcher.log( {
event: 'languageButtonTap',
- languageButtonVersion:
'bottom-of-article',
+ languageButtonVersion:
languageButtonVersion,
languageButtonTappedBucket:
tapCountBucket,
primaryLanguageOfUser:
getDeviceLanguage() || 'unknown'
} );
--
To view, visit https://gerrit.wikimedia.org/r/275881
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4d09c645c02a0d137595c6f6124696913b763c44
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
