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` };
},
html() {
return [
iconNode('circle', { class: 'progress' }),
this.attach('button', {
html(attrs) {
const result = [ iconNode('minus', { class: 'progress' }) ];
if (attrs.showButton) {
result.push(this.attach('button', {
className: 'btn btn-primary btn-small',
label: 'topic.timeline.back',
title: 'topic.timeline.back_description',
action: 'goBack'
})
];
}));
}
return result;
},
goBack() {
@ -159,8 +161,12 @@ createWidget('timeline-scrollarea', {
if (position.lastRead && position.lastRead !== position.total) {
const lastReadTop = Math.round(position.lastReadPercentage * SCROLLAREA_HEIGHT);
if ((lastReadTop > (before + SCROLLER_HEIGHT)) && (lastReadTop < (SCROLLAREA_HEIGHT - SCROLLER_HEIGHT))) {
result.push(this.attach('timeline-last-read', { top: lastReadTop, lastRead: position.lastRead }));
if (lastReadTop > (before + SCROLLER_HEIGHT * 0.5)) {
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;
margin-left: 0;
i.progress {
margin-right: -3px;
margin-left: 1em;
display: none
}
}
.timeline-footer-controls {
@ -262,15 +261,15 @@
.timeline-last-read {
position: absolute;
margin-left: -0.19em;
margin-left: -0.35em;
.btn-small {
padding: 2px 5px;
}
i.progress {
font-size: 0.5em;
color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%));
font-size: 0.8em;
color: $tertiary;
margin-right: 1em;
}
}