mirror of
https://github.com/discourse/discourse.git
synced 2025-02-26 22:33:55 +08:00
DEV: Update how we determine the presence of a topic in the header (#27138)
# Context
We currently have a tracked value of `topic` in the header service that we utilize across the app for determining the presence of a topic.
A simple example is: If you are in a topic, and scroll down the page, we need to communicate to the header that a topic is present and we change the styling of the header.
The issue with this logic is that when entering a topic (and you are at the top of the page), we **haven't** set the topic on the header service yet. We only set the topic when you have scrolled down on the page (set by `app/components/discourse-topic.js`)
This is unhelpful behavior when you are utilizing a plugin outlet that is receiving the `topic` from the header:
17add599e3/app/assets/javascripts/discourse/app/components/header/topic/info.gjs (L85)
As the `topic` won't be present until you scroll down the page.
# Changes
This PR adds a tracked `inTopic` value to the header service that is a boolean value. This is to let the app know
> Yes, we are scrolled within a topic
And instead sets the tracked `topic` value immediately, if you are loading a topic, to allow the necessary data to be populated to the plugin outlets on page load.
This commit is contained in:
parent
531fc1d754
commit
caa29ec973
@ -56,7 +56,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
|
|||||||
|
|
||||||
_hideTopicInHeader() {
|
_hideTopicInHeader() {
|
||||||
this.appEvents.trigger("header:hide-topic");
|
this.appEvents.trigger("header:hide-topic");
|
||||||
this.header.topic = null;
|
this.header.inTopic = false;
|
||||||
this._lastShowTopic = false;
|
this._lastShowTopic = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -65,7 +65,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.appEvents.trigger("header:show-topic", topic);
|
this.appEvents.trigger("header:show-topic", topic);
|
||||||
this.header.topic = topic;
|
this.header.inTopic = true;
|
||||||
this._lastShowTopic = true;
|
this._lastShowTopic = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -242,7 +242,7 @@ export default class GlimmerHeader extends Component {
|
|||||||
</div>
|
</div>
|
||||||
<PluginOutlet
|
<PluginOutlet
|
||||||
@name="after-header"
|
@name="after-header"
|
||||||
@outletArgs={{hash minimized=(globalThis.Boolean this.header.topic)}}
|
@outletArgs={{hash minimized=this.header.inTopic}}
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
@ -8,7 +8,7 @@ export default class AuthButtons extends Component {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span class="auth-buttons">
|
<span class="auth-buttons">
|
||||||
{{#if (and @canSignUp (not this.header.topic))}}
|
{{#if (and @canSignUp (not this.header.inTopic))}}
|
||||||
<DButton
|
<DButton
|
||||||
class="btn-primary btn-small sign-up-button"
|
class="btn-primary btn-small sign-up-button"
|
||||||
@action={{@showCreateAccount}}
|
@action={{@showCreateAccount}}
|
||||||
|
@ -16,7 +16,7 @@ export default class Contents extends Component {
|
|||||||
@service sidebarState;
|
@service sidebarState;
|
||||||
|
|
||||||
get topicPresent() {
|
get topicPresent() {
|
||||||
return !!this.header.topic;
|
return this.header.inTopic;
|
||||||
}
|
}
|
||||||
|
|
||||||
get sidebarIcon() {
|
get sidebarIcon() {
|
||||||
@ -45,7 +45,7 @@ export default class Contents extends Component {
|
|||||||
</PluginOutlet>
|
</PluginOutlet>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if this.header.topic}}
|
{{#if this.header.inTopic}}
|
||||||
<TopicInfo @topic={{this.header.topic}} />
|
<TopicInfo @topic={{this.header.topic}} />
|
||||||
{{else if
|
{{else if
|
||||||
(and
|
(and
|
||||||
|
@ -10,6 +10,7 @@ import { isTesting } from "discourse-common/config/environment";
|
|||||||
// This route is used for retrieving a topic based on params
|
// This route is used for retrieving a topic based on params
|
||||||
export default DiscourseRoute.extend({
|
export default DiscourseRoute.extend({
|
||||||
composer: service(),
|
composer: service(),
|
||||||
|
header: service(),
|
||||||
|
|
||||||
// Avoid default model hook
|
// Avoid default model hook
|
||||||
model(params) {
|
model(params) {
|
||||||
@ -44,6 +45,8 @@ export default DiscourseRoute.extend({
|
|||||||
if (topic.isPrivateMessage && topic.suggested_topics) {
|
if (topic.isPrivateMessage && topic.suggested_topics) {
|
||||||
this.pmTopicTrackingState.startTracking();
|
this.pmTopicTrackingState.startTracking();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.header.topic = topic;
|
||||||
},
|
},
|
||||||
|
|
||||||
deactivate() {
|
deactivate() {
|
||||||
|
@ -7,6 +7,7 @@ export default class Header extends Service {
|
|||||||
@service siteSettings;
|
@service siteSettings;
|
||||||
|
|
||||||
@tracked topic = null;
|
@tracked topic = null;
|
||||||
|
@tracked inTopic = false;
|
||||||
@tracked hamburgerVisible = false;
|
@tracked hamburgerVisible = false;
|
||||||
@tracked userVisible = false;
|
@tracked userVisible = false;
|
||||||
@tracked anyWidgetHeaderOverrides = false;
|
@tracked anyWidgetHeaderOverrides = false;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user