Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Try improving the back button on the timeline

This commit is contained in:
Robin Ward 2016-12-15 14:24:58 -05:00
parent ba8c6fd840
commit d0ddceb4e4
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
View File

@ -19,16 +19,18 @@ createWidget('timeline-last-read', {
return { style: `height: 40px; top: ${attrs.top}px` }; return { style: `height: 40px; top: ${attrs.top}px` };
}, },
html() { html(attrs) {
return [ const result = [ iconNode('minus', { class: 'progress' }) ];
iconNode('circle', { class: 'progress' }), if (attrs.showButton) {
this.attach('button', { result.push(this.attach('button', {
className: 'btn btn-primary btn-small', className: 'btn btn-primary btn-small',
label: 'topic.timeline.back', label: 'topic.timeline.back',
title: 'topic.timeline.back_description', title: 'topic.timeline.back_description',
action: 'goBack' action: 'goBack'
}) }));
]; }
return result;
}, },
goBack() { goBack() {
@ -159,8 +161,12 @@ createWidget('timeline-scrollarea', {
if (position.lastRead && position.lastRead !== position.total) { if (position.lastRead && position.lastRead !== position.total) {
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT); const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
if ((lastReadTop > (before + SCROLLER_HEIGHT)) && (lastReadTop < (SCROLLAREA_HEIGHT - SCROLLER_HEIGHT))) { if (lastReadTop > (before + SCROLLER_HEIGHT * 0.5)) {
result.push(this.attach('timeline-last-read', { top: lastReadTop, lastRead: position.lastRead })); result.push(this.attach('timeline-last-read', {
top: lastReadTop,
lastRead: position.lastRead,
showButton: (lastReadTop > (before + SCROLLER_HEIGHT)) && (lastReadTop < (SCROLLAREA_HEIGHT - SCROLLER_HEIGHT))
}));
} }
} }

9
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -106,8 +106,7 @@
right: 0px; right: 0px;
margin-left: 0; margin-left: 0;
i.progress { i.progress {
margin-right: -3px; display: none
margin-left: 1em;
} }
} }
.timeline-footer-controls { .timeline-footer-controls {
@ -262,15 +261,15 @@
.timeline-last-read { .timeline-last-read {
position: absolute; position: absolute;
margin-left: -0.19em; margin-left: -0.35em;
.btn-small { .btn-small {
padding: 2px 5px; padding: 2px 5px;
} }
i.progress { i.progress {
font-size: 0.5em; font-size: 0.8em;
color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%)); color: $tertiary;
margin-right: 1em; margin-right: 1em;
} }
} }