UX: Move buttons to the bottom of the timeline

This commit is contained in:
Robin Ward 2016-05-26 10:50:01 -04:00
parent 6200d61f0a
commit 9ec56775de
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
2 changed files with 37 additions and 33 deletions

View File

@ -210,41 +210,45 @@ export default createWidget('topic-timeline', {
const { topic } = attrs;
const createdAt = new Date(topic.created_at);
const stream = attrs.topic.get('postStream.stream');
const { currentUser } = this;
if (stream.length < 3) { return; }
const controls = [];
if (attrs.topic.get('details.can_create_post')) {
controls.push(this.attach('button', {
className: 'btn btn-primary create',
icon: 'reply',
label: 'topic.reply.title',
action: 'replyToPost'
}));
}
const { currentUser } = this;
if (currentUser) {
controls.push(this.attach('topic-notifications-button', { topic }));
}
const rawLabel = relativeAge(new Date(topic.last_posted_at), { addAgo: true, defaultFormat: timelineDate });
const result = [ h('div.timeline-controls', controls),
this.attach('link', {
className: 'start-date',
rawLabel: timelineDate(createdAt),
action: 'jumpTop'
}),
this.attach('timeline-scrollarea', attrs),
this.attach('link', {
className: 'now-date',
icon: 'dot-circle-o',
rawLabel,
action: 'jumpBottom'
}) ];
let result = [];
if (currentUser && currentUser.get('canManageTopic')) {
result.push(h('div.timeline-footer-controls', this.attach('topic-admin-menu-button', { topic })));
result.push(h('div.timeline-controls', this.attach('topic-admin-menu-button', { topic })));
}
result = result.concat([this.attach('link', {
className: 'start-date',
rawLabel: timelineDate(createdAt),
action: 'jumpTop'
}),
this.attach('timeline-scrollarea', attrs),
this.attach('link', {
className: 'now-date',
icon: 'dot-circle-o',
rawLabel,
action: 'jumpBottom'
})]);
if (currentUser) {
const controls = [];
if (attrs.topic.get('details.can_create_post')) {
controls.push(this.attach('button', {
className: 'btn btn-primary create',
icon: 'reply',
label: 'topic.reply.title',
action: 'replyToPost'
}));
}
if (currentUser) {
controls.push(this.attach('topic-notifications-button', { topic }));
}
result.push(h('div.timeline-footer-controls', controls));
}
return result;

View File

@ -17,12 +17,12 @@
margin-left: 3em;
width: 150px;
.timeline-footer-controls {
margin-top: 1em;
.timeline-controls {
margin-bottom: 1em;
}
.timeline-controls {
margin-bottom: 2em;
.timeline-footer-controls {
margin-top: 1em;
line-height: 2.5em;
button {