awjrichards has submitted this change and it was merged.
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
A less/modules/talk.less
M stylesheets/modules/mf-search.css
A stylesheets/modules/talk.css
A templates/overlays/talk.html
A templates/talkSection.html
10 files changed, 183 insertions(+), 8 deletions(-)
Approvals:
Jdlrobson: Checked; Looks good to me, but someone else must approve
awjrichards: Verified; Looks good to me, approved
jenkins-bot: Checked
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 0d0c2bb..71e2377 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -253,6 +253,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)
@@ -606,6 +611,11 @@
'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-handshake-title' => 'Title for the page redirecting
the user to the login form.',
+ 'mobile-frontend-handshake-wait' => 'Text asking the user to wait while
he is redirected to the login form.',
+ '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 0bde4e6..00d5528 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -320,8 +320,22 @@
'group' => 'mobile.action',
);
+$wgResourceModules['mobile.alpha.plumbing'] = array(
+ 'localBasePath' => $localBasePath,
+ 'localTemplateBasePath' => $localBasePath . '/templates',
+ 'templates' => array(
+ 'overlays/talk',
+ 'talkSection',
+ ),
+ 'class' => 'MFResourceLoaderModule',
+ 'mobileTargets' => array( 'alpha' ),
+);
+
$wgResourceModules['mobile.alpha'] = $wgMFMobileResourceBoilerplate + array(
- 'dependencies' => array( 'mobile.stable' ),
+ 'dependencies' => array(
+ 'mobile.alpha.plumbing',
+ 'mobile.stable',
+ ),
'messages' => array(
// for mf-random.js
'mobile-frontend-ajax-random-heading',
@@ -334,10 +348,16 @@
// 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',
'stylesheets/modules/mf-tables.css',
+ 'stylesheets/modules/talk.css',
),
'scripts' => array(
'javascripts/common/application-alpha.js',
@@ -348,6 +368,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 f0d4e16..bfc890e 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -170,6 +170,7 @@
$userLogin = $title->isSpecial( 'Userlogin' );
$out = $this->getOutput();
$inBeta = MobileContext::singleton()->isBetaGroupMember();
+ $inAlpha = MobileContext::singleton()->isAlphaGroupMember();
if ( $userLogin ) {
$pageHeading = $this->getLoginPageHeading();
@@ -190,6 +191,15 @@
// 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
+ if ( $title->getNamespace() !== NS_TALK
) {
+ $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..3946e6b
--- /dev/null
+++ b/javascripts/modules/talk.js
@@ -0,0 +1,59 @@
+( function( M, $ ) {
+
+ var nav = M.require( 'navigation' ),
+ TalkOverlay = nav.Overlay.extend( {
+ template: M.template.get( 'overlays/talk' )
+ } ),
+ talkPage = 'Talk:' + mw.config.get( 'wgTitle' ),
+ Page = M.require( 'page'),
+ $talk = $( '#talk' ),
+ req,
+ api = M.require( 'api' );
+
+ $talk.on( 'click', function( ev ) {
+ // FIXME: this currently gives an indication something async is
happening. We can do better.
+ $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 topOverlay, 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'
);
+ topOverlay = new TalkOverlay( {
+ heading: mw.msg(
'mobile-frontend-talk-overlay-header' ),
+ explanation: explanation,
+ sections: sections
+ } );
+ topOverlay.show();
+ topOverlay.$( 'a' ).on( 'click', function() {
+ var
+ section = page.getSubSection( parseInt(
$( this ).data( 'id' ), 10 ) ),
+ childOverlay = new nav.Overlay( {
+ content: M.template.get(
'talkSection' ).render( section ),
+ parent: topOverlay
+ } );
+ childOverlay.show();
+ } );
+ } ).error( function() {
+ $talk.css( 'opacity', '' );
+ } );
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index f9346aa..01d079d 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -95,7 +95,7 @@
background-color: white;
list-style: none;
- li.suggestions-result {
+ li {
.overlayListItem();
}
}
diff --git a/less/modules/talk.less b/less/modules/talk.less
new file mode 100644
index 0000000..c7448e7
--- /dev/null
+++ b/less/modules/talk.less
@@ -0,0 +1,33 @@
+@import "../mf-mixins.less";
+@speechBubbleSize: 30px;
+@speechBubbleTailSize: @speechBubbleSize * 0.7;
+@speechBubbleColor: #C91F2C;
+
+.alpha {
+ // FIXME: probably want to use consistent styling for non-javascript
users. Move into common.css?
+ #talk {
+ right: @contentMarginRight;
+ z-index: 5;
+ position: fixed;
+ bottom: 0;
+ padding: 0 ( @speechBubbleSize / 2 );
+ height: @speechBubbleSize;
+ line-height: @speechBubbleSize;
+ margin:( @speechBubbleSize / 4 ) 0 @speechBubbleSize;
+ text-align: center;
+ color: white;
+ display: inline-block;
+ background: @speechBubbleColor;
+ font-size: @speechBubbleSize / 2;
+
+ &:before {
+ content: "";
+ position: absolute;
+ bottom: -@speechBubbleTailSize * 2/3;
+ right: 0;
+ border-width: 0 0 @speechBubbleTailSize
@speechBubbleTailSize;
+ border-style: solid;
+ border-color: transparent @speechBubbleColor;
+ }
+ }
+}
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index 5cbd084..6ada517 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -85,7 +85,7 @@
background-color: white;
list-style: none;
}
-ul.suggestions-results li.suggestions-result {
+ul.suggestions-results li {
color: #666;
border: none;
position: relative;
@@ -94,17 +94,17 @@
padding: 12px 40px;
font-size: 0.9em;
}
-ul.suggestions-results li.suggestions-result a {
+ul.suggestions-results li a {
display: block;
text-decoration: none;
color: #666;
}
-ul.suggestions-results li.suggestions-result a:active,
-ul.suggestions-results li.suggestions-result a:hover,
-ul.suggestions-results li.suggestions-result a:visited {
+ul.suggestions-results li a:active,
+ul.suggestions-results li a:hover,
+ul.suggestions-results li a:visited {
text-decoration: none;
color: #666;
}
-ul.suggestions-results li.suggestions-result:hover {
+ul.suggestions-results li:hover {
background-color: #ACD1E9;
}
diff --git a/stylesheets/modules/talk.css b/stylesheets/modules/talk.css
new file mode 100644
index 0000000..c4a99ce
--- /dev/null
+++ b/stylesheets/modules/talk.css
@@ -0,0 +1,24 @@
+.alpha #talk {
+ right: 23px;
+ z-index: 5;
+ position: fixed;
+ bottom: 0;
+ padding: 0 15px;
+ height: 30px;
+ line-height: 30px;
+ margin: 7.5px 0 30px;
+ text-align: center;
+ color: white;
+ display: inline-block;
+ background: #c91f2c;
+ font-size: 15px;
+}
+.alpha #talk:before {
+ content: "";
+ position: absolute;
+ bottom: -14px;
+ right: 0;
+ border-width: 0 0 21px 21px;
+ border-style: solid;
+ border-color: transparent #c91f2c;
+}
diff --git a/templates/overlays/talk.html b/templates/overlays/talk.html
new file mode 100644
index 0000000..32492d1
--- /dev/null
+++ b/templates/overlays/talk.html
@@ -0,0 +1,13 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <h2>{{heading}}</h2>
+</div>
+<p class="mw-mf-overlay-header">{{explanation}}</p>
+<ul class="suggestions-results">
+ {{#sections}}
+ <li>
+ <a data-id="{{id}}">{{heading}}</a>
+ </li>
+ {{/sections}}
+</ul>
+</div>
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: merged
Gerrit-Change-Id: I6e206267b754e1851c1223efb249a3830ba963d2
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Maryana <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
