github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-01 00:01:01 +08:00
Code Issues Actions 12 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.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
// current scroll position of the page.
this.scrollListener = new ScrollListener(this.onscroll.bind(this));
@ -59,6 +64,8 @@ export default class StreamScrubber extends Component {
view() {
var retain = this.subtree.retain();
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)}, [
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('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'])
])

17
less/forum/discussion.less
View File

@ -509,8 +509,23 @@
.scrubber-before, .scrubber-after {
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 {
position: relative;
z-index: 1;
background: @fl-body-bg;
width: 100%;
padding: 5px 0;
}
@ -522,6 +537,7 @@
float: left;
margin-left: -2px;
transition: background 0.2s;
.disabled & {
background: @fl-body-secondary-color;
}
@ -533,6 +549,7 @@
top: 50%;
width: 100%;
left: 15px;
& strong {
display: block;
}