Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/54140
Change subject: Alpha: Surface talk pages on article
......................................................................
Alpha: Surface talk pages on article
Adds a talk speech bubble to right of article title
When clicked opens an overlay showing current discussions
For non-js users points to talk page
Suggested next steps:
Iterate on design
Show intermediate menus for smaller subheadings e.g. h3s
Allow contributions via overlay (I'd suggest a + icon in the
top right corner)
Currently doesn't work with dynamic page loads (we should refactor that
code to use page.js)
Change-Id: I6e206267b754e1851c1223efb249a3830ba963d2
---
M MobileFrontend.i18n.php
M MobileFrontend.php
M includes/skins/SkinMobile.php
A javascripts/modules/talk.js
M less/modules/mf-search.less
M stylesheets/modules/mf-search.css
A templates/talkList.html
A templates/talkSection.html
8 files changed, 115 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/40/54140/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index f4acade..d099775 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -252,6 +252,11 @@
// navigation drawer
'mobile-frontend-drawer-cancel' => 'Cancel',
+
+ // talk page overlay
+ 'mobile-frontend-talk-explained' => 'The following conversations are
currently active',
+ 'mobile-frontend-talk-explained-empty' => 'There are no conversations
about this page.',
+ 'mobile-frontend-talk-overlay-header' => 'Talk',
);
/** Message documentation (Message documentation)
@@ -604,6 +609,9 @@
'tag-mobile_edit-description' => 'Change tag description e.g. in
[[Special:Tags]], see also {{msg-mw|tag-mobile_edit}}',
'mobile-frontend-drawer-cancel' => 'Not visible but the text label for
the cancel button inside a navigation overlay
{{Identical|Cancel}}',
+'mobile-frontend-talk-explained' => 'Explains that the user is seeing talk
page headings',
+'mobile-frontend-talk-explained-empty' => 'Explains why the list is empty.',
+'mobile-frontend-talk-overlay-header' => 'Heading for talk overlay',
);
/** Achinese (Acèh)
diff --git a/MobileFrontend.php b/MobileFrontend.php
index 9eeaaa1..7941d5c 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -178,6 +178,7 @@
'stylesheets/modules/mf-banner.css',
'stylesheets/modules/mf-toggle.css',
'stylesheets/common/mf-hacks.css',
+ 'stylesheets/modules/talk.css',
'stylesheets/common/mf-enwp.css'
),
'position' => 'top',
@@ -293,8 +294,22 @@
'group' => 'mobile.action',
);
+$wgResourceModules['mobile.alpha.plumbing'] = array(
+ 'localBasePath' => $localBasePath,
+ 'localTemplateBasePath' => $localBasePath . '/templates',
+ 'templates' => array(
+ 'talkList',
+ 'talkSection',
+ ),
+ 'class' => 'MFResourceLoaderModule',
+ 'mobileTargets' => array( 'alpha' ),
+);
+
$wgResourceModules['mobile.alpha'] = $wgMFMobileResourceBoilerplate + array(
- 'dependencies' => array( 'mobile.startup' ),
+ 'dependencies' => array(
+ 'mobile.alpha.plumbing',
+ 'mobile.stable',
+ ),
'messages' => array(
// for mf-random.js
'mobile-frontend-ajax-random-heading',
@@ -307,6 +322,11 @@
// for mf-table.js
'mobile-frontend-table',
+
+ // for talk.js
+ 'mobile-frontend-talk-explained',
+ 'mobile-frontend-talk-explained-empty',
+ 'mobile-frontend-talk-overlay-header',
),
'styles' => array(
'stylesheets/modules/mf-random.css',
@@ -320,6 +340,7 @@
'javascripts/modules/mf-tables.js',
'javascripts/modules/mf-translator.js',
'javascripts/modules/mf-toggle-dynamic.js',
+ 'javascripts/modules/talk.js',
),
'mobileTargets' => array( 'alpha' ),
);
diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php
index 0a43a51..f0b8f86 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -175,6 +175,7 @@
$userLogin = $title->isSpecial( 'Userlogin' );
$out = $this->getOutput();
$inBeta = MobileContext::singleton()->isBetaGroupMember();
+ $inAlpha = MobileContext::singleton()->isAlphaGroupMember();
if ( $userLogin ) {
$pageHeading = $this->getLoginPageHeading();
@@ -195,6 +196,13 @@
// prepend heading to articles
if ( $pageHeading ) {
$preBodyText = Html::rawElement( 'h1',
$headingOptions, $pageHeading );
+ // talk page link for logged in alpha users
+ if ( $inAlpha && $user->isLoggedIn() ) {
+ $talkLabel = wfMessage(
'mobile-frontend-talk-overlay-header' ); // FIXME: make this the number of
sections on the talk page
+ $preBodyText .= Html::element( 'a',
+ array( 'href' =>
$title->getTalkPage()->getFullUrl(), 'id' => 'talk' ),
+ $talkLabel );
+ }
}
$timestamp = Revision::getTimestampFromId(
$this->getTitle(), $this->getRevisionId() );
diff --git a/javascripts/modules/talk.js b/javascripts/modules/talk.js
new file mode 100644
index 0000000..41d1926
--- /dev/null
+++ b/javascripts/modules/talk.js
@@ -0,0 +1,57 @@
+( function( M, $ ) {
+
+ var nav = M.require( 'navigation' ),
+ talkPage = 'Talk:' + mw.config.get( 'wgTitle' ),
+ Page = M.require( 'page'),
+ $talk = $( '#talk' ),
+ req,
+ api = M.require( 'api' );
+
+ $talk.click( function( ev ) {
+ $talk.css( 'opacity', 0.2 );
+ ev.preventDefault();
+ req = req || api.get( {
+ action: 'mobileview', page: talkPage,
+ variant: mw.config.get( 'wgPreferredVariant' ),
+ prop: 'sections|text', noheadings: 'yes',
+ noimages: mw.config.get( 'wgImagesDisabled', false ) ?
1 : undefined,
+ sectionprop: 'level|line|anchor', sections: 'all'
+ } );
+ req.done( function( resp ) {
+ var overlay, sections, page,
+ explanation;
+
+ if ( resp.error ) {
+ // page doesn't exist
+ page = new Page( { sections: {} } );
+ } else {
+ page = new Page( { sections:
resp.mobileview.sections } );
+ }
+
+ $talk.css( 'opacity', '' );
+ sections = page.getSubSections();
+ explanation = sections.length > 0 ? mw.msg(
'mobile-frontend-talk-explained' ) :
+ mw.msg( 'mobile-frontend-talk-explained-empty'
);
+ overlay = new nav.Overlay( {
+ el: $( '<div class="mw-mf-overlay">'
).appendTo( document.body )[ 0 ],
+ heading: '<h2>' + mw.msg(
'mobile-frontend-talk-overlay-header' ) + '</h2>',
+ content: M.template.get( 'talkList' ).render( {
+ explanation: explanation,
+ sections: sections
+ } )
+ } );
+ overlay.show();
+ overlay.$( 'a' ).click( function() {
+ var section = page.getSubSection( parseInt( $(
this ).data( 'id' ), 10 ) );
+ overlay = new nav.Overlay( {
+ el: $( '<div class="mw-mf-overlay">'
).appendTo( document.body )[ 0 ],
+ content: M.template.get( 'talkSection'
).render( section )
+ } );
+ overlay.show();
+ } );
+ } ).error( function() {
+ $talk.css( 'opacity', '' );
+ } );
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index 4ce51bd..a52fb93 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -135,6 +135,7 @@
background-color: white;
list-style: none;
+ li,
li.suggestions-result {
.overlayListItem();
}
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index 4837c89..334651b 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -127,6 +127,7 @@
background-color: white;
list-style: none;
}
+ul.suggestions-results li,
ul.suggestions-results li.suggestions-result {
color: #666;
border: none;
@@ -136,17 +137,22 @@
padding: 12px 40px;
font-size: 0.9em;
}
+ul.suggestions-results li a,
ul.suggestions-results li.suggestions-result a {
display: block;
text-decoration: none;
color: #666;
}
+ul.suggestions-results li a:active,
ul.suggestions-results li.suggestions-result a:active,
+ul.suggestions-results li a:hover,
ul.suggestions-results li.suggestions-result a:hover,
+ul.suggestions-results li a:visited,
ul.suggestions-results li.suggestions-result a:visited {
text-decoration: none;
color: #666;
}
+ul.suggestions-results li:hover,
ul.suggestions-results li.suggestions-result:hover {
background-color: #ACD1E9;
}
diff --git a/templates/talkList.html b/templates/talkList.html
new file mode 100644
index 0000000..ccc9565
--- /dev/null
+++ b/templates/talkList.html
@@ -0,0 +1,8 @@
+<p class="mw-mf-overlay-header">{{explanation}}</p>
+<ul class="suggestions-results">
+ {{#sections}}
+ <li>
+ <a data-id="{{id}}">{{heading}}</a>
+ </li>
+ {{/sections}}
+</ul>
diff --git a/templates/talkSection.html b/templates/talkSection.html
new file mode 100644
index 0000000..20db434
--- /dev/null
+++ b/templates/talkSection.html
@@ -0,0 +1,5 @@
+<div class="content">
+<h2>{{heading}}</h2>
+
+{{{content}}}
+</div>
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/54140
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6e206267b754e1851c1223efb249a3830ba963d2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
