jenkins-bot has submitted this change and it was merged.
Change subject: Highlight unread message from notifications link
......................................................................
Highlight unread message from notifications link
Adjusts the urls output by flow notifications to include
?fromnotif=1. When the flow-board javascript sees the
fromnotif=1 along with #flow-post-rx09uq09wure it will
give a minimal highlight to the selected post and all posts
newer than the selected post.
There are two vector specific stylings that I don't know what to
do with, one is the color of the highlight. The card wasn't clear
so i made it the same color blue as bluelinks so its not a new color.
The other vector specific thing is a media query for 982px, this is
needed to get the top level highlight to line up with the sidebar.
Change-Id: I3a00f25718059403ea3c6fe6eaf66c90e31fd336
---
M Resources.php
M includes/Notifications/Formatter.php
M modules/new/components/flow-board.js
M modules/new/styles/board/topic/post.less
M modules/new/styles/flow.less/flow.colors.less
5 files changed, 110 insertions(+), 6 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/Resources.php b/Resources.php
index 73d4916..2bf993b 100644
--- a/Resources.php
+++ b/Resources.php
@@ -304,6 +304,7 @@
'jquery.json',
'jquery.conditionalScroll',
'mediawiki.api',
+ 'mediawiki.Uri',
'mediawiki.Title',
'mediawiki.user',
'mediawiki.util',
diff --git a/includes/Notifications/Formatter.php
b/includes/Notifications/Formatter.php
index 93ff1ff..8c148c8 100644
--- a/includes/Notifications/Formatter.php
+++ b/includes/Notifications/Formatter.php
@@ -36,6 +36,7 @@
}
} elseif ( $param === 'topic-permalink' ) {
$anchor = $this->getUrlGenerator()->workflowLink(
$event->getTitle(), $extra['topic-workflow'] );
+ $anchor->query['fromnotif'] = 1;
$message->params( $anchor->getFullUrl() );
} elseif ( $param == 'flow-title' ) {
$title = $event->getTitle();
@@ -84,6 +85,9 @@
}
}
}
+
+ $anchor->query['fromnotif'] = 1;
+
return $anchor;
}
@@ -130,6 +134,7 @@
}
if ( $anchor ) {
+ $anchor->query['fromnotif'] = 1;
return array( $anchor->title, $anchor->query );
} else {
return array( null, array() );
diff --git a/modules/new/components/flow-board.js
b/modules/new/components/flow-board.js
index 0bbcd03..9a4d24d 100644
--- a/modules/new/components/flow-board.js
+++ b/modules/new/components/flow-board.js
@@ -14,7 +14,9 @@
*/
function FlowBoardComponent( $container ) {
// Parent FlowComponent constructor
- var parentReturn = this.parent.apply( this, arguments );
+ var parentReturn = this.parent.apply( this, arguments ),
+ uri = new mw.Uri( window.location.href );
+
delete this.parent;
if ( parentReturn && parentReturn.constructor ) {
// If the parent returned an instantiated class
(cached), return that
@@ -31,11 +33,12 @@
}
// Handle URL parameters
- if ( window.location.hash && /^\#flow-post-[a-z0-9]+$/.test(
window.location.hash ) ) {
- $container.find( window.location.hash )
- // @todo: Add class in PHP so it works for
non-JavaScript users.
- .addClass( 'flow-post-highlighted' )
- .conditionalScrollIntoView();
+ if ( window.location.hash ) {
+ if ( uri.query.fromnotif ) {
+ flowHighlightPost( $container,
window.location.hash, 'newer' );
+ } else {
+ flowHighlightPost( $container,
window.location.hash );
+ }
}
}
@@ -43,6 +46,38 @@
mw.flow.registerComponent( 'board', FlowBoardComponent );
/**
+ * Helper receives
+ * @param {jQuery}
+ * @param {string}
+ * @param {string}
+ * @return {jQuery}
+ */
+ function flowHighlightPost( $container, targetSelector, option ) {
+ var $target = $container.find( targetSelector ),
+ uid = $target.data( 'flow-id' );
+
+ // reset existing highlights
+ $container.find( '.flow-post-highlighted' ).removeClass(
'flow-post-highlighted' );
+
+ if ( option === 'newer' ) {
+ $target.addClass( 'flow-post-highlight-newer' );
+ if ( uid ) {
+ $container.find( '.flow-post' ).each( function(
idx, el ) {
+ var $el = $( el ),
+ id = $el.data( 'flow-id' );
+ if ( id && id > uid ) {
+ $el.addClass(
'flow-post-highlight-newer' );
+ }
+ } );
+ }
+ } else {
+ $target.addClass( 'flow-post-highlighted' );
+ }
+
+ return $target;
+ }
+
+ /**
* Sets up the board and base properties on this class.
* Returns either FALSE for failure, or jQuery object of old nodes that
were replaced.
* @return {Boolean|jQuery}
diff --git a/modules/new/styles/board/topic/post.less
b/modules/new/styles/board/topic/post.less
index 0a1dc79..f01073b 100644
--- a/modules/new/styles/board/topic/post.less
+++ b/modules/new/styles/board/topic/post.less
@@ -3,6 +3,14 @@
@import 'flow.helpers';
@import 'flow.variables';
+@highlightedIndent: 0.2em;
+
+// Helpers
+.minimalPostHighlight( @negativeMargin ) {
+ margin-left: 0 - @negativeMargin - @topicIndent;
+ padding-left: @topicIndent + @negativeMargin - @highlightedIndent;
+}
+
// Comments
form.flow-post {
margin-left: @topicIndent - (@textareaPadding * 2);
@@ -44,6 +52,35 @@
@highlightedIndent: @topicIndent - 0.75em;
padding-left: @highlightedIndent;
border-left: solid @highlightedIndent @colorHighlight;
+ }
+ }
+
+ // Highlights all posts newer than a specific post
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ border-left: solid @highlightedIndent
@colorHighlightNewer;
+ }
+ }
+
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ .minimalPostHighlight( 0.7em );
+ }
+ }
+
+ .flow-post {
+ &.flow-post-highlight-newer {
+ > .flow-post-content {
+ .minimalPostHighlight( 0.3em );
+ }
+ }
+
+ .flow-post {
+ &.flow-post-highlight-newer {
+ > .flow-post-main .flow-post-content {
+ .minimalPostHighlight( 0.4em );
+ }
+ }
}
}
@@ -115,5 +152,30 @@
line-height: inherit;
font-size: inherit;
}
+
+ &.flow-post-highlight-newer > .flow-post-main
.flow-post-content {
+ .minimalPostHighlight( 1.3em );
+ }
+ .flow-post.flow-post-highlight-newer > .flow-post-main
.flow-post-content {
+ .minimalPostHighlight( 1.1em );
+ }
+ .flow-post .flow-post.flow-post-highlight-newer >
.flow-post-main .flow-post-content {
+ .minimalPostHighlight( 1.1em );
+ }
+ }
+}
+
+// What to do? vector changes this width on us from screen-hd.less with:
+//
+// @media screen and (min-width: 982px)
+// div#content {
+// margin-left: 11em;
+// padding: 1.25em 1.5em 1.5em 1.5em;
+// }
+//
+// The standard padding for narrower screens is 1em all around.
+@media all and (min-width: 982px) {
+ .flow-post.flow-post-highlight-newer > .flow-post-main
.flow-post-content {
+ .minimalPostHighlight( 1.8em );
}
}
diff --git a/modules/new/styles/flow.less/flow.colors.less
b/modules/new/styles/flow.less/flow.colors.less
index 011e713..d324391 100644
--- a/modules/new/styles/flow.less/flow.colors.less
+++ b/modules/new/styles/flow.less/flow.colors.less
@@ -1,3 +1,4 @@
@import 'mediawiki.ui/variables';
@colorHighlight: #00AF89;
+@colorHighlightNewer: #0645AD;
--
To view, visit https://gerrit.wikimedia.org/r/148310
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3a00f25718059403ea3c6fe6eaf66c90e31fd336
Gerrit-PatchSet: 10
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: EBernhardson <[email protected]>
Gerrit-Reviewer: Bsitu <[email protected]>
Gerrit-Reviewer: EBernhardson <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: SG <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
