DEV: Introduce second home-logo wrapper plugin outlet (#26080)

The `home-logo-wrapper` outlet is used by chat, which means it is unavailable for use by any other themes/plugins. This commit introduces a second nested outlet called `home-logo` which can be used to replace the logo without affecting chat's header logic.
This commit is contained in:
David Taylor 2024-03-07 19:45:48 +00:00 committed by GitHub
parent 91f52e79ab
commit 8a13667a8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 30 deletions

View File

@ -2,6 +2,7 @@ import Component from "@glimmer/component";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import { service } from "@ember/service";
import PluginOutlet from "discourse/components/plugin-outlet";
import concatClass from "discourse/helpers/concat-class";
import { wantsNewWindow } from "discourse/lib/intercept-click";
import DiscourseURL from "discourse/lib/url";
@ -76,39 +77,41 @@ export default class HomeLogo extends Component {
}
<template>
<div class={{concatClass (if @minimized "title--minimized") "title"}}>
<a href={{this.href}} {{on "click" this.click}}>
{{#if @minimized}}
{{#if this.logoSmallUrl}}
<PluginOutlet @name="home-logo">
<div class={{concatClass (if @minimized "title--minimized") "title"}}>
<a href={{this.href}} {{on "click" this.click}}>
{{#if @minimized}}
{{#if this.logoSmallUrl}}
<Logo
@key="logo-small"
@url={{this.logoSmallUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.logoSmallUrlDark}}
/>
{{else}}
{{icon "home"}}
{{/if}}
{{else if this.showMobileLogo}}
<Logo
@key="logo-small"
@url={{this.logoSmallUrl}}
@key="logo-mobile"
@url={{this.mobileLogoUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.logoSmallUrlDark}}
@darkUrl={{this.mobileLogoUrlDark}}
/>
{{else if this.logoUrl}}
<Logo
@key="logo-big"
@url={{this.logoUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.logoUrlDark}}
/>
{{else}}
{{icon "home"}}
<h1 id="site-text-logo" class="text-logo">
{{this.siteSettings.title}}
</h1>
{{/if}}
{{else if this.showMobileLogo}}
<Logo
@key="logo-mobile"
@url={{this.mobileLogoUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.mobileLogoUrlDark}}
/>
{{else if this.logoUrl}}
<Logo
@key="logo-big"
@url={{this.logoUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.logoUrlDark}}
/>
{{else}}
<h1 id="site-text-logo" class="text-logo">
{{this.siteSettings.title}}
</h1>
{{/if}}
</a>
</div>
</a>
</div>
</PluginOutlet>
</template>
}

View File

@ -4,5 +4,9 @@ import { registerWidgetShim } from "discourse/widgets/render-glimmer";
registerWidgetShim(
"home-logo-wrapper-outlet",
"div.home-logo-wrapper-outlet",
hbs`<PluginOutlet @name="home-logo-wrapper"><MountWidget @widget="home-logo" @args={{@data}} /></PluginOutlet>`
hbs`<PluginOutlet @name="home-logo-wrapper">
<PluginOutlet @name="home-logo" @outletArgs>
<MountWidget @widget="home-logo" @args={{@data}} />
</PluginOutlet>
</PluginOutlet>`
);