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:
parent
5a40c31110
commit
b341f75400
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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 : "");
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue