github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 18:05:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: align timeline to the right in mobile and add jump to button

Browse Source
This commit is contained in:
Sam 2016-10-31 12:40:28 +11:00
parent f8caae0be7
commit 584dc63d13
4 changed files with 125 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/components/topic-navigation.js.es6
View File

@ -49,7 +49,7 @@ export default Ember.Component.extend({
if (this.get('info.topicProgressExpanded')) {
$(window).on('click.hide-fullscreen', (e) => {
if ( $(e.target).is('.topic-timeline') ||
!$(e.target).parents().is('.timeline-container, #topic-progress-wrapper')) {
!$(e.target).parents().is('#topic-progress-wrapper')) {
this._collapseFullscreen();
}
});

9
app/assets/javascripts/discourse/controllers/topic.js.es6
View File

@ -43,6 +43,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
'convertToPrivateMessage',
'jumpTop',
'jumpToPost',
'jumpToPostPrompt',
'jumpToIndex',
'jumpBottom',
'replyToPost',
@ -425,6 +426,14 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
this._jumpToPostId(this.get('model.postStream.stream')[index-1]);
},
jumpToPostPrompt() {
const postText = prompt(I18n.t('topic.progress.jump_prompt_long'));
if (postText === null) { return; }
const postNumber = parseInt(postText, 10);
if (postNumber === 0) { return; }
this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
},
jumpToPost(postNumber) {
this._jumpToPostId(this.get('model.postStream').findPostIdForPostNumber(postNumber));
},

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

@ -59,7 +59,13 @@ createWidget('timeline-scroller', {
contents.push(h('div.timeline-ago', timelineDate(date)));
}
return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
let result = [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
if (attrs.fullScreen) {
result = [result[1], result[0]];
}
return result;
},
drag(e) {
@ -140,7 +146,7 @@ createWidget('timeline-scrollarea', {
const result = [
this.attach('timeline-padding', { height: before }),
this.attach('timeline-scroller', position),
this.attach('timeline-scroller', _.merge(position, {fullScreen: attrs.fullScreen})),
this.attach('timeline-padding', { height: after })
];
@ -221,8 +227,11 @@ export default createWidget('topic-timeline', {
let result = [];
if (attrs.mobileView) {
const titleHTML = new RawHtml({ html: `<span>${topic.get('fancyTitle')}</span>` });
if (attrs.fullScreen) {
let titleHTML = "";
if (attrs.mobileView) {
titleHTML = new RawHtml({ html: `<span>${topic.get('fancyTitle')}</span>` });
}
result.push(h('h3.title', titleHTML));
}
@ -236,21 +245,23 @@ export default createWidget('topic-timeline', {
}
const bottomAge = relativeAge(new Date(topic.last_posted_at), { addAgo: true, defaultFormat: timelineDate });
result = result.concat([this.attach('link', {
let scroller = [h('div.timeline-date-wrapper', this.attach('link', {
className: 'start-date',
rawLabel: timelineDate(createdAt),
action: 'jumpTop'
}),
})),
this.attach('timeline-scrollarea', attrs),
this.attach('link', {
h('div.timeline-date-wrapper', this.attach('link', {
className: 'now-date',
rawLabel: bottomAge,
action: 'jumpBottom'
})]);
}))];
if (currentUser) {
const controls = [];
if (!attrs.fullScreen && attrs.topic.get('details.can_create_post')) {
result = result.concat([h('div.timeline-scrollarea-wrapper', scroller)]);
const controls = [];
if (currentUser && !attrs.fullScreen) {
if (attrs.topic.get('details.can_create_post')) {
controls.push(this.attach('button', {
className: 'btn create',
icon: 'reply',
@ -259,9 +270,21 @@ export default createWidget('topic-timeline', {
}));
}
if (currentUser && !attrs.fullScreen) {
if (currentUser) {
controls.push(this.attach('topic-notifications-button', { topic }));
}
}
if (attrs.fullScreen) {
controls.push(this.attach('button', {
className: 'btn jump-to-post',
title: 'topic.progress.jump_prompt_long',
label: 'topic.progress.jump_prompt',
action: 'jumpToPostPrompt'
}));
}
if (controls.length > 0) {
result.push(h('div.timeline-footer-controls', controls));
}

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

@ -32,6 +32,11 @@
&.timeline-fullscreen.show {
max-height: 700px;
transition: max-height 0.4s ease-out;
.topic-timeline {
.timeline-footer-controls {
display: inherit;
}
}
}
&.timeline-fullscreen {
@ -44,15 +49,83 @@
left: 0;
right: 0;
border-top: 1px solid dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 90%));
padding-top: 15px;
padding-top: 20px;
z-index: 100000;
.timeline-scrollarea {
max-width: 200px;
}
.topic-timeline {
width: auto;
margin-left: 1.5em;
margin-right: 1.5em;
width: 100%;
margin-left: 0;
margin-right: 0;
display: table;
.timeline-date-wrapper {
float: right;
text-align: right;
font-size: 1.1em;
}
.title {
margin-top: 0;
padding-left: 1em;
display: table-cell;
vertical-align: top;
line-height: 1.3em;
}
.timeline-last-read {
right: 0px;
margin-left: 0;
i.progress {
margin-right: -3px;
margin-left: 1em;
}
}
.timeline-footer-controls {
display: none;
position: absolute;
bottom: 10px;
left: 10px;
button {
float: none;
display: block;
margin-bottom: 10px;
}
}
.timeline-scrollarea-wrapper {
display: table-cell;
padding-bottom: 20px;
padding-right: 1.5em;
width: 100px;
}
.timeline-scrollarea {
border-left: 0;
border-right-style: solid;
border-right-width: 1px;
max-width: 120px;
float: right;
.timeline-scroller {
position: relative;
margin-right: -1.5em;
padding-right: 1.5em;
justify-content: flex-end;
.timeline-scroller-content {
text-align: right;
padding-left: 0;
padding-right: 1em;
}
.timeline-handle {
float: none;
width: 11px;
position: relative;
right: -6px;
}
}
}
}
.timeline-scrollarea-wrapper::after {
content: "";
display: table;
clear: both;
}
}