DEV: Extract the contents of the home logo to a component (#27157)
This commit extracts the content of the `HomeLogo` to a standalone component. This enables us to utilize the `home-logo-contents` plugin outlet to render an alternative version of the logo using the new component to reuse the rendering logic, but using alternative properties. For example: ```js const logoSmallUrl = settings .theme_uploads["theme-alternative-logo-small"]; const logoUrl = settings.theme_uploads["theme-alternative-logo"]; const mobileLogoUrl = settings .theme_uploads["theme-alternative-logo"]; api.renderInOutlet("home-logo-contents", <template> <HomeLogoContents @logoSmallUrl={{logoSmallUrl}} @logoUrl={{logoUrl}} @minimized={{@outletArgs.minimized}} @mobileLogoUrl={{mobileLogoUrl}} @showMobileLogo={{@outletArgs.showMobileLogo}} @title={{@outletArgs.title}} /> </template>); ``
This commit is contained in:
parent
5d33ea1f6e
commit
f846d2e8fd
|
@ -0,0 +1,37 @@
|
||||||
|
import icon from "discourse-common/helpers/d-icon";
|
||||||
|
import Logo from "./logo";
|
||||||
|
|
||||||
|
const HomeLogoContents = <template>
|
||||||
|
{{#if @minimized}}
|
||||||
|
{{#if @logoSmallUrl}}
|
||||||
|
<Logo
|
||||||
|
@key="logo-small"
|
||||||
|
@url={{@logoSmallUrl}}
|
||||||
|
@title={{@title}}
|
||||||
|
@darkUrl={{@logoSmallUrlDark}}
|
||||||
|
/>
|
||||||
|
{{else}}
|
||||||
|
{{icon "home"}}
|
||||||
|
{{/if}}
|
||||||
|
{{else if @showMobileLogo}}
|
||||||
|
<Logo
|
||||||
|
@key="logo-mobile"
|
||||||
|
@url={{@mobileLogoUrl}}
|
||||||
|
@title={{@title}}
|
||||||
|
@darkUrl={{@mobileLogoUrlDark}}
|
||||||
|
/>
|
||||||
|
{{else if @logoUrl}}
|
||||||
|
<Logo
|
||||||
|
@key="logo-big"
|
||||||
|
@url={{@logoUrl}}
|
||||||
|
@title={{@title}}
|
||||||
|
@darkUrl={{@logoUrlDark}}
|
||||||
|
/>
|
||||||
|
{{else}}
|
||||||
|
<h1 id="site-text-logo" class="text-logo">
|
||||||
|
{{@title}}
|
||||||
|
</h1>
|
||||||
|
{{/if}}
|
||||||
|
</template>;
|
||||||
|
|
||||||
|
export default HomeLogoContents;
|
|
@ -7,9 +7,8 @@ import PluginOutlet from "discourse/components/plugin-outlet";
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
||||||
import DiscourseURL from "discourse/lib/url";
|
import DiscourseURL from "discourse/lib/url";
|
||||||
import icon from "discourse-common/helpers/d-icon";
|
|
||||||
import getURL from "discourse-common/lib/get-url";
|
import getURL from "discourse-common/lib/get-url";
|
||||||
import Logo from "./logo";
|
import HomeLogoContents from "./home-logo-contents";
|
||||||
|
|
||||||
let hrefCallback;
|
let hrefCallback;
|
||||||
|
|
||||||
|
@ -64,6 +63,10 @@ export default class HomeLogo extends Component {
|
||||||
return this.logoResolver("mobile_logo", { dark: this.darkModeAvailable });
|
return this.logoResolver("mobile_logo", { dark: this.darkModeAvailable });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get title() {
|
||||||
|
return this.siteSettings.title;
|
||||||
|
}
|
||||||
|
|
||||||
logoResolver(name, opts = {}) {
|
logoResolver(name, opts = {}) {
|
||||||
// get alternative logos for browser dark dark mode switching
|
// get alternative logos for browser dark dark mode switching
|
||||||
if (opts.dark) {
|
if (opts.dark) {
|
||||||
|
@ -101,42 +104,28 @@ export default class HomeLogo extends Component {
|
||||||
<PluginOutlet
|
<PluginOutlet
|
||||||
@name="home-logo-contents"
|
@name="home-logo-contents"
|
||||||
@outletArgs={{hash
|
@outletArgs={{hash
|
||||||
minimized=@minimized
|
|
||||||
logoUrl=this.logoUrl
|
|
||||||
logoSmallUrl=this.logoSmallUrl
|
logoSmallUrl=this.logoSmallUrl
|
||||||
|
logoSmallUrlDark=this.logoSmallUrlDark
|
||||||
|
logoUrl=this.logoUrl
|
||||||
|
logoUrlDark=this.logoUrlDark
|
||||||
|
minimized=@minimized
|
||||||
|
mobileLogoUrl=this.mobileLogoUrl
|
||||||
|
mobileLogoUrlDark=this.mobileLogoUrlDark
|
||||||
showMobileLogo=this.showMobileLogo
|
showMobileLogo=this.showMobileLogo
|
||||||
|
title=this.title
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{{#if @minimized}}
|
<HomeLogoContents
|
||||||
{{#if this.logoSmallUrl}}
|
@logoSmallUrl={{this.logoSmallUrl}}
|
||||||
<Logo
|
@logoSmallUrlDark={{this.logoSmallUrlDark}}
|
||||||
@key="logo-small"
|
@logoUrl={{this.logoUrl}}
|
||||||
@url={{this.logoSmallUrl}}
|
@logoUrlDark={{this.logoUrlDark}}
|
||||||
@title={{this.siteSettings.title}}
|
@minimized={{@minimized}}
|
||||||
@darkUrl={{this.logoSmallUrlDark}}
|
@mobileLogoUrl={{this.mobileLogoUrl}}
|
||||||
/>
|
@mobileLogoUrlDark={{this.mobileLogoUrlDark}}
|
||||||
{{else}}
|
@showMobileLogo={{this.showMobileLogo}}
|
||||||
{{icon "home"}}
|
@title={{this.title}}
|
||||||
{{/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}}
|
|
||||||
</PluginOutlet>
|
</PluginOutlet>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue