JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/98743
Change subject: Story 1401: Language Selector Overlay UI Redesign
......................................................................
Story 1401: Language Selector Overlay UI Redesign
Also make some overlay styles more uniform, fix a -1px margin hack so
that the border of the last element in an overlay list (.page-list)
doesn't disappear.
Change-Id: Ib700b810c1d1e10fdac1ae43f25c8e043227e02c
---
M MobileFrontend.i18n.php
M includes/Resources.php
M includes/skins/SkinMinerva.php
M includes/skins/SkinMobileBeta.php
R javascripts/modules/languages/LanguageOverlay.js
A javascripts/modules/languagesNew/LanguageOverlay.js
A javascripts/modules/languagesNew/languages.js
R javascripts/modules/languagesNew/preferred.js
M less/common/OverlayNew.less
M less/common/pagelist.less
M less/variables.less
A templates/modules/languagesNew/LanguageOverlay.html
A tests/javascripts/modules/languagesNew/test_languages.js
13 files changed, 239 insertions(+), 20 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/43/98743/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 7c3dc5e..026f583 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -68,7 +68,7 @@
'mobile-frontend-on' => 'ON',
'mobile-frontend-featured-article' => 'Today\'s featured content',
'mobile-frontend-news-items' => 'In The News',
- 'mobile-frontend-language' => 'Language:',
+ 'mobile-frontend-language-heading' => "'''Languages'''",
'mobile-frontend-language-article-heading' => 'Read in another
language',
'mobile-frontend-current-language' => '{{#language:{{CONTENTLANG}}}}',
'mobile-frontend-language-header' => 'This page is available in $1
{{PLURAL:$1|language|languages}}',
@@ -477,7 +477,7 @@
{{Identical|On}}',
'mobile-frontend-featured-article' => 'The title that will appear
before the element with the mf-tfa selector.',
'mobile-frontend-news-items' => 'The title that will appear before the
element with the mf-itn selector.',
- 'mobile-frontend-language' => '{{Identical|Language}}',
+ 'mobile-frontend-language-heading' => 'The title for the list of
languages for a page.',
'mobile-frontend-language-article-heading' => 'A heading within the
page the content of which lists the other languages available for this page:
translate the message considering the list to have an undetermined number of
items.',
'mobile-frontend-current-language' => '{{optional}}',
'mobile-frontend-language-header' => 'Header at top of language
selection overlay describing number of languages that it is possible to read
the page in
diff --git a/includes/Resources.php b/includes/Resources.php
index 3c08653..b8a1738 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -505,7 +505,6 @@
'javascripts/modules/mf-toggle-dynamic.js',
'javascripts/modules/talk/talk.js',
'javascripts/modules/mediaViewer.js',
- 'javascripts/modules/languages/preferred.js',
'javascripts/modules/keepgoing/keepgoing.js',
),
'templates' => array(
@@ -619,7 +618,6 @@
'mobile.stable.styles' => $wgMFMobileResourceBoilerplate + array(
'styles' => array(
'less/common/common-js.less',
- 'less/modules/languages.less',
'less/modules/watchstar.less',
'less/modules/tutorials.less',
),
@@ -676,8 +674,6 @@
'templates' => array(
'section',
'wikitext/commons-upload',
- // LanguageOverlay.js
- 'overlays/languages',
'overlays/cleanup',
// search.js and Nearby.js
'articleList',
@@ -701,8 +697,6 @@
'javascripts/common/notification.js',
'javascripts/common/Page.js',
'javascripts/modules/uploads/PhotoUploaderButton.js',
- // Language specific code
- 'javascripts/common/languages/LanguageOverlay.js',
),
'messages' => array(
// mf-navigation.js
@@ -712,11 +706,6 @@
// LearnMoreOverlay.js, newbie.js
'cancel',
-
- // LanguageOverlay.js
- 'mobile-frontend-language-header',
- 'mobile-frontend-language-site-choose',
- 'mobile-frontend-language-footer',
// page.js
'mobile-frontend-talk-overlay-header',
@@ -773,7 +762,6 @@
'scripts' => array(
'javascripts/externals/micro.autosize.js',
'javascripts/modules/mf-toggle.js',
- 'javascripts/modules/languages/languages.js',
'javascripts/modules/uploads/lead-photo-init.js',
'javascripts/modules/mainmenutweaks.js',
'javascripts/modules/mf-watchstar.js',
@@ -838,6 +826,48 @@
),
),
+ // FIXME: remove when new overlays in stable
+ 'mobile.languages' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.overlays',
+ ),
+ 'styles' => array(
+ 'less/modules/languages.less',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/languages/LanguageOverlay.js',
+ 'javascripts/modules/languages/languages.js',
+ ),
+ 'templates' => array(
+ 'overlays/languages',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-language-header',
+ 'mobile-frontend-language-site-choose',
+ 'mobile-frontend-language-footer',
+ ),
+ ),
+
+ 'mobile.languages.beta' => $wgMFMobileResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.overlays.beta',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/languagesNew/LanguageOverlay.js',
+ 'javascripts/modules/languagesNew/languages.js',
+ 'javascripts/modules/languagesNew/preferred.js',
+ ),
+ 'templates' => array(
+ 'modules/languagesNew/LanguageOverlay',
+ ),
+ 'messages' => array(
+ 'mobile-frontend-language-heading' => array( 'parse' ),
+ 'mobile-frontend-language-header',
+ 'mobile-frontend-language-variant-header' => array(
'parse' ),
+ 'mobile-frontend-language-site-choose',
+ ),
+ ),
+
'mobile.issues' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mobile.overlays',
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 55e0901..7ebb25c 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -566,6 +566,7 @@
$modules['stableonly'] = array( 'mobile.lastEdited.stable' );
$modules['issues'] = array( 'mobile.issues' );
$modules['editor'] = array( 'mobile.editor' );
+ $modules['languages'] = array( 'mobile.languages' );
$title = $this->getTitle();
diff --git a/includes/skins/SkinMobileBeta.php
b/includes/skins/SkinMobileBeta.php
index 9345155..5760180 100644
--- a/includes/skins/SkinMobileBeta.php
+++ b/includes/skins/SkinMobileBeta.php
@@ -61,6 +61,7 @@
$modules['search'] = array( 'mobile.search.beta' );
$modules['issues'] = array( 'mobile.issues.beta' );
$modules['editor'] = array( 'mobile.editor.beta' );
+ $modules['languages'] = array( 'mobile.languages.beta' );
// turn off stable only modules
$modules['stableonly'] = array();
return $modules;
diff --git a/javascripts/common/languages/LanguageOverlay.js
b/javascripts/modules/languages/LanguageOverlay.js
similarity index 100%
rename from javascripts/common/languages/LanguageOverlay.js
rename to javascripts/modules/languages/LanguageOverlay.js
diff --git a/javascripts/modules/languagesNew/LanguageOverlay.js
b/javascripts/modules/languagesNew/LanguageOverlay.js
new file mode 100644
index 0000000..ba19ab8
--- /dev/null
+++ b/javascripts/modules/languagesNew/LanguageOverlay.js
@@ -0,0 +1,61 @@
+( function( M, $ ) {
+
+ var OverlayNew = M.require( 'OverlayNew' ),
+ LanguageOverlay;
+
+ LanguageOverlay = OverlayNew.extend( {
+ defaults: {
+ heading: mw.msg( 'mobile-frontend-language-heading' ),
+ placeholder: mw.msg(
'mobile-frontend-language-site-choose' )
+ },
+ className: 'language-overlay overlay',
+ templatePartials: {
+ content: M.template.get(
'modules/languagesNew/LanguageOverlay' )
+ },
+
+ initialize: function( options ) {
+ if ( options.languages && options.languages.length ) {
+ options.header = mw.msg(
'mobile-frontend-language-header', options.languages.length );
+ }
+ if ( options.variants && options.variants.length ) {
+ options.variantHeader = mw.msg(
'mobile-frontend-language-variant-header' );
+ }
+ M.emit( 'language-overlay-initialize', options );
+ this._super( options );
+ },
+
+ filterLists: function( val ) {
+ var $items = this.$( '.page-list li' ), $subheaders =
this.$( 'h3' );
+
+ if ( val ) {
+ $subheaders.hide();
+ $items.each( function() {
+ var $item = $( this );
+ if ( $item.find( 'span'
).text().toLowerCase().indexOf( val ) > -1 ) {
+ $item.show();
+ } else {
+ $item.hide();
+ }
+ } );
+ } else {
+ $subheaders.show();
+ $items.show();
+ }
+ },
+
+ postRender: function( options ) {
+ var self = this;
+ this._super( options );
+
+ this.$( 'ul' ).find( 'a' ).on( 'click', function() {
+ M.emit( 'language-select', $( this ).attr(
'lang' ) );
+ } );
+ this.$( '.search' ).on( 'input', function() {
+ self.filterLists( $( this ).val().toLowerCase()
);
+ } );
+ }
+ } );
+
+ M.define( 'languagesNew/LanguageOverlay', LanguageOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/languagesNew/languages.js
b/javascripts/modules/languagesNew/languages.js
new file mode 100644
index 0000000..965e82c
--- /dev/null
+++ b/javascripts/modules/languagesNew/languages.js
@@ -0,0 +1,50 @@
+( function( M, $ ) {
+
+ var LanguageOverlay = M.require( 'languagesNew/LanguageOverlay' );
+
+ /**
+ * Takes a list of languages and transforms them into an array for use
in a LanguageOverlay
+ *
+ * @returns {Array}
+ */
+ function parseList( $list ) {
+ var list = [];
+ $list.find( 'li' ).each( function() {
+ var $a = $( this ).find( 'a' ), lang, pageName =
$a.attr( 'title' );
+
+ lang = { lang: $a.attr( 'lang' ), langName: $a.text(),
url: $a.attr( 'href' ) };
+ if ( pageName ) {
+ lang.pageName = pageName;
+ }
+ list.push( lang );
+ } );
+ return list;
+ }
+
+ function initButton() {
+ var $section = $( '#mw-mf-language-section' ),
+ $h2 = $section.find( 'h2' ),
+ languages = parseList( $section.find(
'#mw-mf-language-selection' ) ),
+ variants = parseList( $section.find(
'#mw-mf-language-variant-selection' ) );
+
+ // assume the current language is not present
+ if ( languages.length > 0 || variants.length > 1 ) {
+ $( '<button>' ).text( $h2.text() ).
+ addClass( 'languageSelector' ).
+ on( 'click', function() {
+ new LanguageOverlay( {
+ variants: variants,
+ languages: languages
+ } ).show();
+ } ).insertBefore( $section );
+ }
+ $section.remove();
+ }
+
+ $( initButton );
+ M.on( 'languages-loaded', initButton );
+ M.define( 'modules/languagesNew/languages', {
+ _parseList: parseList
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/languages/preferred.js
b/javascripts/modules/languagesNew/preferred.js
similarity index 100%
rename from javascripts/modules/languages/preferred.js
rename to javascripts/modules/languagesNew/preferred.js
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 19b85da..48f7518 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -76,11 +76,11 @@
}
.v-border:first-child {
- border-right: 1px solid #cacaca;
+ border-right: 1px solid @grayLight;
}
.v-border:last-child li:last-child {
- border-left: 1px solid #cacaca;
+ border-left: 1px solid @grayLight;
}
&.with-margins {
@@ -139,9 +139,13 @@
}
}
+ input, textarea {
+ padding: .5em;
+ }
+
.panel {
- padding: @contentMargin;
- border-bottom: 1px solid @grayLight;
+ padding: 12px @contentMargin;
+ border-bottom: 1px solid @grayVeryLight;
}
.license {
@@ -156,6 +160,14 @@
line-height: 1.4;
}
+ h3 {
+ font-weight: normal;
+ font-size: .9em;
+ padding: .3em @contentMargin;
+ background-color: @grayVeryLight;
+ color: @grayMedium;
+ }
+
// AbuseFilterOverlay
.content {
.cancel {
diff --git a/less/common/pagelist.less b/less/common/pagelist.less
index b43425e..725d575 100644
--- a/less/common/pagelist.less
+++ b/less/common/pagelist.less
@@ -32,10 +32,10 @@
li {
color: #666;
position: relative;
- border-bottom: solid 1px #eee;
+ border-bottom: solid 1px @grayVeryLight;
padding: 18px @contentMargin;
// avoid the gap between thumbnails
- margin: 0 0 -1px;
+ margin: -1px 0 0;
line-height: 1;
> a {
diff --git a/less/variables.less b/less/variables.less
index dec1284..1bc220e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -19,6 +19,7 @@
@grayMedium: #777;
@grayMediumLight: #aaa;
@grayLight: #cacaca;
+@grayVeryLight: #eee;
// page actions
@watchStarSize: 22px;
diff --git a/templates/modules/languagesNew/LanguageOverlay.html
b/templates/modules/languagesNew/LanguageOverlay.html
new file mode 100644
index 0000000..53d6017
--- /dev/null
+++ b/templates/modules/languagesNew/LanguageOverlay.html
@@ -0,0 +1,25 @@
+<div class="panel">
+ <input type="search" class="search" placeholder="{{placeholder}}">
+</div>
+{{#variantHeader}}
+<h3 class="mw-mf-overlay-header">{{{variantHeader}}}</h3>
+<ul class="page-list">
+ {{#variants}}
+ <li>
+ <a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
+ </li>
+ {{/variants}}
+</ul>
+{{/variantHeader}}
+{{#header}}
+{{#variantHeader}}
+<h3 class="mw-mf-overlay-header">{{{header}}}</h3>
+{{/variantHeader}}
+<ul class="page-list">
+ {{#languages}}
+ <li {{#preferred}}class="preferred"{{/preferred}}>
+ <a href="{{url}}" hreflang="{{lang}}"
lang="{{lang}}"><span>{{langName}}</span>{{#pageName}}
({{pageName}}){{/pageName}}</a>
+ </li>
+ {{/languages}}
+</ul>
+{{/header}}
diff --git a/tests/javascripts/modules/languagesNew/test_languages.js
b/tests/javascripts/modules/languagesNew/test_languages.js
new file mode 100644
index 0000000..86535ef
--- /dev/null
+++ b/tests/javascripts/modules/languagesNew/test_languages.js
@@ -0,0 +1,38 @@
+( function ( M, $ ) {
+
+var module = M.require( 'modules/languagesNew/languages' );
+
+QUnit.module( 'MobileFrontend: languages.js' );
+
+QUnit.test( 'no results', function() {
+ var i, list,
+ examples = [
+ [
+ '<ul></ul>',
+ 0
+ ],
+ [
+ '<ul><li class="interwiki-de"><a
href="//de.m.wikipedia.org/wiki/Unicorn" title="Unicorn" lang="de"
hreflang="de">Deutsch</a></li><li class="interwiki-es"><a
href="//es.m.wikipedia.org/wiki/Unicornio_(desambiguaci%C3%B3n)"
title="Unicornio (desambiguación)" lang="es" hreflang="es">Español</a></li><li
class="interwiki-fa"><a
href="//fa.m.wikipedia.org/wiki/%D8%AA%DA%A9%E2%80%8C%D8%B4%D8%A7%D8%AE_(%D8%A7%D8%A8%D9%87%D8%A7%D9%85%E2%80%8C%D8%B2%D8%AF%D8%A7%DB%8C%DB%8C)"
title="" lang="fa" hreflang="fa">فارسی</a></li><li class="interwiki-fr"><a
href="//fr.m.wikipedia.org/wiki/Unicorn" title="Unicorn" lang="fr"
hreflang="fr">Français</a></li><li class="interwiki-ko"><a
href="//ko.m.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%98_(%EB%8F%99%EC%9D%8C%EC%9D%B4%EC%9D%98)"
title="유니콘 (동음이의)" lang="ko" hreflang="ko">한국어</a></li><li
class="interwiki-it"><a href="//it.m.wikipedia.org/wiki/Unicorn"
title="Unicorn" lang="it" hreflang="it">Italiano</a></li><li
class="interwiki-he"><a
href="//he.m.wikipedia.org/wiki/%D7%97%D7%93-%D7%A7%D7%A8%D7%9F_(%D7%A4%D7%99%D7%A8%D7%95%D7%A9%D7%95%D7%A0%D7%99%D7%9D)"
title="חד-קרן (פירושונים)" lang="he" hreflang="he">עברית</a></li><li
class="interwiki-la"><a href="//la.m.wikipedia.org/wiki/Monoceros"
title="Monoceros" lang="la" hreflang="la">Latina</a></li><li
class="interwiki-lt"><a
href="//lt.m.wikipedia.org/wiki/Vienaragis_(reik%C5%A1m%C4%97s)"
title="Vienaragis (reikšmės)" lang="lt" hreflang="lt">Lietuvių</a></li><li
class="interwiki-nl"><a href="//nl.m.wikipedia.org/wiki/Eenhoorn"
title="Eenhoorn" lang="nl" hreflang="nl">Nederlands</a></li><li
class="interwiki-ja"><a
href="//ja.m.wikipedia.org/wiki/%E3%83%A6%E3%83%8B%E3%82%B3%E3%83%BC%E3%83%B3_(%E6%9B%96%E6%98%A7%E3%81%95%E5%9B%9E%E9%81%BF)"
title="ユニコーン (曖昧さ回避)" lang="ja" hreflang="ja">日本語</a></li><li
class="interwiki-pl"><a
href="//pl.m.wikipedia.org/wiki/Jednoro%C5%BCec_(ujednoznacznienie)"
title="Jednorożec (ujednoznacznienie)" lang="pl"
hreflang="pl">Polski</a></li><li class="interwiki-pt"><a
href="//pt.m.wikipedia.org/wiki/Unic%C3%B3rnio_(desambigua%C3%A7%C3%A3o)"
title="Unicórnio (desambiguação)" lang="pt" hreflang="pt">Português</a></li><li
class="interwiki-ru"><a
href="//ru.m.wikipedia.org/wiki/%D0%95%D0%B4%D0%B8%D0%BD%D0%BE%D1%80%D0%BE%D0%B3_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)"
title="Единорог (значения)" lang="ru" hreflang="ru">Русский</a></li><li
class="interwiki-fi"><a href="//fi.m.wikipedia.org/wiki/Unicorn"
title="Unicorn" lang="fi" hreflang="fi">Suomi</a></li><li
class="interwiki-uk"><a
href="//uk.m.wikipedia.org/wiki/%D0%84%D0%B4%D0%B8%D0%BD%D0%BE%D1%80%D1%96%D0%B3_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%BD%D1%8F)"
title="Єдиноріг (значення)" lang="uk" hreflang="uk">Українська</a></li></ul>',
+ 16,
+ { url: '//de.m.wikipedia.org/wiki/Unicorn',
lang: 'de', langName: 'Deutsch', pageName: 'Unicorn' }
+ ],
+ [
+ '<ul><li><a
href="//fr.m.wikipedia.org/wiki/Bonjour" lang="fr"
title="Bonjour">French</a></li></ul>',
+ 1,
+ { url: '//fr.m.wikipedia.org/wiki/Bonjour',
lang: 'fr', langName: 'French', pageName: 'Bonjour' }
+ ],
+ [
+ '<ul><li><a
href="//klingon.m.wikipedia.org/wiki/MainPage"
lang="klz">Klingon</a></li></ul>',
+ 1,
+ { url:
'//klingon.m.wikipedia.org/wiki/MainPage', lang: 'klz', langName: 'Klingon' }
+ ]
+ ];
+ QUnit.expect( examples.length * 2 );
+ for( i = 0; i < examples.length; i++ ) {
+ list = module._parseList( $( examples[i][0] ) );
+ strictEqual( list.length, examples[i][1], 'check the length was
as expected' );
+ deepEqual( list[0], examples[i][2], 'Check the first result' );
+ }
+} );
+
+}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/98743
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib700b810c1d1e10fdac1ae43f25c8e043227e02c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
