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

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:
Sérgio Saquetim 2024-06-10 15:35:08 -03:00 committed by GitHub
parent 5d33ea1f6e
commit f846d2e8fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/discourse/app/components/header/home-logo-contents.gjs Normal file
View File

@ -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;

55
app/assets/javascripts/discourse/app/components/header/home-logo.gjs
View File

@ -7,9 +7,8 @@ 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";
import icon from "discourse-common/helpers/d-icon";
import getURL from "discourse-common/lib/get-url";
import Logo from "./logo";
import HomeLogoContents from "./home-logo-contents";
let hrefCallback;
@ -64,6 +63,10 @@ export default class HomeLogo extends Component {
return this.logoResolver("mobile_logo", { dark: this.darkModeAvailable });
}
get title() {
return this.siteSettings.title;
}
logoResolver(name, opts = {}) {
// get alternative logos for browser dark dark mode switching
if (opts.dark) {
@ -101,42 +104,28 @@ export default class HomeLogo extends Component {
<PluginOutlet
@name="home-logo-contents"
@outletArgs={{hash
minimized=@minimized
logoUrl=this.logoUrl
logoSmallUrl=this.logoSmallUrl
logoSmallUrlDark=this.logoSmallUrlDark
logoUrl=this.logoUrl
logoUrlDark=this.logoUrlDark
minimized=@minimized
mobileLogoUrl=this.mobileLogoUrl
mobileLogoUrlDark=this.mobileLogoUrlDark
showMobileLogo=this.showMobileLogo
title=this.title
}}
>
{{#if @minimized}}
{{#if this.logoSmallUrl}}
<Logo
@key="logo-small"
@url={{this.logoSmallUrl}}
@title={{this.siteSettings.title}}
@darkUrl={{this.logoSmallUrlDark}}
<HomeLogoContents
@logoSmallUrl={{this.logoSmallUrl}}
@logoSmallUrlDark={{this.logoSmallUrlDark}}
@logoUrl={{this.logoUrl}}
@logoUrlDark={{this.logoUrlDark}}
@minimized={{@minimized}}
@mobileLogoUrl={{this.mobileLogoUrl}}
@mobileLogoUrlDark={{this.mobileLogoUrlDark}}
@showMobileLogo={{this.showMobileLogo}}
@title={{this.title}}
/>
{{else}}
{{icon "home"}}
{{/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>
</a>
</div>