From e9585007353b7795865a92329126c5bce0b78723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Sat, 5 Aug 2017 01:22:01 +0200 Subject: [PATCH] extract 'timeline-controls' and 'timeline-footer-controls' widgets --- .../discourse/widgets/topic-timeline.js.es6 | 92 ++++++++++++------- .../stylesheets/common/topic-timeline.scss | 4 + 2 files changed, 61 insertions(+), 35 deletions(-) diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 index eab0694e7d3..06ba9421970 100644 --- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 +++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 @@ -270,6 +270,57 @@ createWidget('topic-timeline-container', { } }); +createWidget('timeline-controls', { + tagName: 'div.timeline-controls', + + html(attrs) { + const controls = []; + const { fullScreen, currentUser, topic } = attrs; + + if (!fullScreen && currentUser && currentUser.get('canManageTopic')) { + controls.push(this.attach('topic-admin-menu-button', { topic })); + } + + return controls; + } +}); + +createWidget('timeline-footer-controls', { + tagName: 'div.timeline-footer-controls', + + html(attrs) { + const controls = []; + const { currentUser, fullScreen, topic } = attrs; + + if (currentUser && !fullScreen) { + if (topic.get('details.can_create_post')) { + controls.push(this.attach('button', { + className: 'create', + icon: 'reply', + title: 'topic.reply.help', + action: 'replyToPost' + })); + } + } + + if (fullScreen) { + controls.push(this.attach('button', { + className: 'jump-to-post', + title: 'topic.progress.jump_prompt_long', + label: 'topic.progress.jump_prompt', + action: 'jumpToPostPrompt' + })); + } + + if (currentUser) { + controls.push(this.attach('topic-notifications-button', { topic })); + } + + return controls; + } + +}); + export default createWidget('topic-timeline', { tagName: 'div.topic-timeline', @@ -317,6 +368,8 @@ export default createWidget('topic-timeline', { const stream = attrs.topic.get('postStream.stream'); const { currentUser } = this; + attrs["currentUser"] = currentUser; + let result = []; if (attrs.fullScreen) { @@ -333,16 +386,14 @@ export default createWidget('topic-timeline', { if (this.state.excerpt) { elems.push(new RawHtml({ - html: "
" + this.state.excerpt + "
" + html: `
${this.state.excerpt}
` })); } result.push(h('div.title', elems)); } - if (!attrs.fullScreen && currentUser && currentUser.get('canManageTopic')) { - result.push(h('div.timeline-controls', this.attach('topic-admin-menu-button', { topic }))); - } + result.push(this.attach('timeline-controls', attrs)); if (stream.length < 3) { const topicHeight = $('#topic').height(); @@ -365,37 +416,8 @@ export default createWidget('topic-timeline', { action: 'jumpBottom' }))]; - 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: 'create', - icon: 'reply', - title: 'topic.reply.help', - action: 'replyToPost' - })); - } - - } - - if (attrs.fullScreen) { - controls.push(this.attach('button', { - className: 'jump-to-post', - title: 'topic.progress.jump_prompt_long', - label: 'topic.progress.jump_prompt', - action: 'jumpToPostPrompt' - })); - } - - if (currentUser) { - controls.push(this.attach('topic-notifications-button', { topic })); - } - - if (controls.length > 0) { - result.push(h('div.timeline-footer-controls', controls)); - } + result.push(h('div.timeline-scrollarea-wrapper', scroller)); + result.push(this.attach('timeline-footer-controls', attrs)); return result; } diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss index 42869627fd0..afba6f72cd3 100644 --- a/app/assets/stylesheets/common/topic-timeline.scss +++ b/app/assets/stylesheets/common/topic-timeline.scss @@ -197,6 +197,10 @@ .timeline-controls { margin-bottom: 1em; + + button { + margin-right: 0.5em; + } } .timeline-footer-controls {