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

DEV: Render the scroll area at correct times (#19333) 

- Only display topic actions (reply / notification bell) under correct circumstances (multiple posts present, etc)
- Moves topic actions from `glimmer-topic-timeline` into `glimmer-topic-timeline/container` where it should be
This commit is contained in:
Isaac Janzen 2022-12-06 13:35:02 -06:00 committed by GitHub
parent 5a40c31110
commit b341f75400
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs
View File

@ -7,6 +7,7 @@
@jumpBottom={{@jumpBottom}}
@jumpEnd={{@jumpEnd}}
@jumpToIndex={{@jumpToIndex}}
@jumpToPostPrompt={{@jumpToPostPrompt}}
@fullscreen={{@fullscreen}}
@mobileView={{@mobileView}}
@currentUser={{this.currentUser}}
@ -23,50 +24,7 @@
@resetBumpDate={{@resetBumpDate}}
@convertToPublicTopic={{@convertToPublicTopic}}
@convertToPrivateMessage={{@convertToPrivateMessage}}
@replyToPost={{@replyToPost}}
/>
<div class="timeline-footer-controls">
{{#if this.displaySummary}}
<button type="button" class="show-summary btn-small" label={{i18n "summary.short_label"}} title={{i18n "summary.short_title"}} {{on "click" @showSummary}}>
{{d-icon "layer-group"}}
</button>
{{/if}}
{{#if (and this.currentUser (not @fullscreen))}}
{{#if this.canCreatePost}}
<button type="button" class="btn btn-default create reply-to-post no-text btn-icon" title={{i18n "topic.reply.help"}} {{on "click" (fn @replyToPost null)}}>
{{d-icon "reply"}}
</button>
{{/if}}
{{/if}}
{{#if @fullscreen}}
<button
type="button"
{{!-- we need to keep this a widget-button to not close the modal when opening form --}}
class="widget-button btn btn-text jump-to-post"
title={{i18n "topic.progress.jump_prompt_long"}}
{{on "click" @jumpToPostPrompt}}
>
<span class="d-button-label">
{{i18n "topic.progress.jump_prompt"}}
</span>
</button>
{{/if}}
{{#if this.currentUser}}
<TopicNotificationsButton
@notificationLevel={{@model.details.notification_level}}
@topic={{@model}}
@showFullTitle={{false}}
@appendReason={{false}}
@placement={{"bottom-end"}}
@showCaret={{false}}
/>
{{#if @mobileView}}
<TopicAdminMenuButton @topic={{@model}} @addKeyboardTargetClass={{true}} @openUpwards={{true}} />
{{/if}}
{{/if}}
</div>
</div>
</div>

4
app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.js
View File

@ -79,10 +79,6 @@ export default class GlimmerTopicTimeline extends Component {
return this.args.fullscreen && !this.args.addShowClass;
}
get canCreatePost() {
return this.args.model.details?.can_create_post;
}
get createdAt() {
return new Date(this.args.model.created_at);
}

44
app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
View File

@ -94,4 +94,48 @@
</a>
</div>
</div>
<div class="timeline-footer-controls">
{{#if this.displaySummary}}
<button type="button" class="show-summary btn-small" label={{i18n "summary.short_label"}} title={{i18n "summary.short_title"}} {{on "click" @showSummary}}>
{{d-icon "layer-group"}}
</button>
{{/if}}
{{#if (and @currentUser (not @fullscreen))}}
{{#if this.canCreatePost}}
<button type="button" class="btn btn-default create reply-to-post no-text btn-icon" title={{i18n "topic.reply.help"}} {{on "click" (fn @replyToPost null)}}>
{{d-icon "reply"}}
</button>
{{/if}}
{{/if}}
{{#if @fullscreen}}
<button
type="button"
{{!-- we need to keep this a widget-button to not close the modal when opening form --}}
class="widget-button btn btn-text jump-to-post"
title={{i18n "topic.progress.jump_prompt_long"}}
{{on "click" @jumpToPostPrompt}}
>
<span class="d-button-label">
{{i18n "topic.progress.jump_prompt"}}
</span>
</button>
{{/if}}
{{#if @currentUser}}
<TopicNotificationsButton
@notificationLevel={{@model.details.notification_level}}
@topic={{@model}}
@showFullTitle={{false}}
@appendReason={{false}}
@placement={{"bottom-end"}}
@showCaret={{false}}
/>
{{#if @mobileView}}
<TopicAdminMenuButton @topic={{@model}} @addKeyboardTargetClass={{true}} @openUpwards={{true}} />
{{/if}}
{{/if}}
</div>
{{/if}}

30
app/assets/javascripts/discourse/app/components/topic-timeline/container.js
View File

@ -27,7 +27,6 @@ export default class TopicTimelineScrollArea extends Component {
@tracked total;
@tracked date;
@tracked lastReadPercentage = null;
@tracked displayTimeLineScrollArea = true;
@tracked before;
@tracked after;
@tracked timelineScrollareaStyle;
@ -38,15 +37,6 @@ export default class TopicTimelineScrollArea extends Component {
super(...arguments);
if (!this.args.mobileView) {
const streamLength = this.args.model.postStream?.stream?.length;
if (streamLength === 1) {
const postsWrapper = document.querySelector(".posts-wrapper");
if (postsWrapper && postsWrapper.offsetHeight < 1000) {
this.displayTimeLineScrollArea = false;
}
}
// listen for scrolling event to update timeline
this.appEvents.on("topic:current-post-scrolled", this.postScrolled);
// listen for composer sizing changes to update timeline
@ -58,6 +48,26 @@ export default class TopicTimelineScrollArea extends Component {
this.calculatePosition();
}
get displayTimeLineScrollArea() {
if (this.args.mobileView) {
return true;
}
const streamLength = this.args.model.postStream?.stream?.length;
if (streamLength === 1) {
const postsWrapper = document.querySelector(".posts-wrapper");
if (postsWrapper && postsWrapper.offsetHeight < 1000) {
return false;
}
}
return true;
}
get canCreatePost() {
return this.args.model.details?.can_create_post;
}
get topicTitle() {
return htmlSafe(this.args.mobileView ? this.args.model.fancyTitle : "");
}