github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-08 05:55:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add unread indicator to scrubber. closes #94

Browse Source
This commit is contained in:
Toby Zerner 2015-05-27 16:18:21 +09:30
parent 1ec2a4c742
commit 796c2590a2
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
js/forum/src/components/stream-scrubber.js
View File

@ -41,6 +41,11 @@ export default class StreamScrubber extends Component {
this.visible = m.prop(1); this.visible = m.prop(1);
this.description = m.prop(); this.description = m.prop();
this.unreadCount = () => {
var discussion = this.props.streamContent.props.stream.discussion;
return discussion.lastPostNumber() - discussion.readNumber();
};
// Define a handler to update the state of the scrollbar to reflect the // Define a handler to update the state of the scrollbar to reflect the
// current scroll position of the page. // current scroll position of the page.
this.scrollListener = new ScrollListener(this.onscroll.bind(this)); this.scrollListener = new ScrollListener(this.onscroll.bind(this));
@ -59,6 +64,8 @@ export default class StreamScrubber extends Component {
view() { view() {
var retain = this.subtree.retain(); var retain = this.subtree.retain();
var streamContent = this.props.streamContent; var streamContent = this.props.streamContent;
var unreadCount = this.unreadCount();
var unreadPercent = unreadCount / this.count();
return m('div.stream-scrubber.dropdown'+(this.disabled() ? '.disabled' : ''), {config: this.onload.bind(this)}, [ return m('div.stream-scrubber.dropdown'+(this.disabled() ? '.disabled' : ''), {config: this.onload.bind(this)}, [
m('a.btn.btn-default.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', [ m('a.btn.btn-default.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', [
@ -77,7 +84,18 @@ export default class StreamScrubber extends Component {
m('span.description', retain || this.description()) m('span.description', retain || this.description())
]) ])
]), ]),
m('div.scrubber-after') m('div.scrubber-after'),
(app.session.user() && unreadPercent) ? m('div.scrubber-unread', {
style: {top: (100 - unreadPercent * 100)+'%', height: (unreadPercent * 100)+'%'},
config: function(element, isInitialized, context) {
var $element = $(element);
var newStyle = {top: $element.css('top'), height: $element.css('height')};
if (context.oldStyle) {
$element.stop(true).css(context.oldStyle).animate(newStyle);
}
context.oldStyle = newStyle;
}
}, unreadCount+' unread') : ''
]), ]),
m('a.scrubber-last[href=javascript:;]', {onclick: streamContent.goToLast.bind(streamContent)}, [icon('angle-double-down'), ' Now']) m('a.scrubber-last[href=javascript:;]', {onclick: streamContent.goToLast.bind(streamContent)}, [icon('angle-double-down'), ' Now'])
]) ])

17
less/forum/discussion.less
View File

@ -509,8 +509,23 @@
.scrubber-before, .scrubber-after { .scrubber-before, .scrubber-after {
border-left: 1px solid @fl-body-secondary-color; border-left: 1px solid @fl-body-secondary-color;
} }
.scrubber-unread {
position: absolute;
border-left: 1px solid lighten(@fl-body-muted-color, 10%);
width: 100%;
background-image: linear-gradient(to right, @fl-body-secondary-color, fade(@fl-body-secondary-color, 0) 10px, fade(@fl-body-secondary-color, 0));
display: flex;
align-items: center;
color: @fl-body-muted-color;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
padding-left: 13px;
}
.scrubber-slider { .scrubber-slider {
position: relative; position: relative;
z-index: 1;
background: @fl-body-bg;
width: 100%; width: 100%;
padding: 5px 0; padding: 5px 0;
} }
@ -522,6 +537,7 @@
float: left; float: left;
margin-left: -2px; margin-left: -2px;
transition: background 0.2s; transition: background 0.2s;
.disabled & { .disabled & {
background: @fl-body-secondary-color; background: @fl-body-secondary-color;
} }
@ -533,6 +549,7 @@
top: 50%; top: 50%;
width: 100%; width: 100%;
left: 15px; left: 15px;
& strong { & strong {
display: block; display: block;
} }