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

UX: Default to dark category logo on dark schemes (#18510) 

Fixes an edge case for when a category has a dark logo and the default
color scheme is dark.
This commit is contained in:
Penar Musaraj 2022-10-07 11:37:07 -04:00 committed by GitHub
parent d2d4749127
commit 6426932834
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/discourse/app/components/category-logo.js
View File

@ -1,3 +1,19 @@
import templateOnly from "@ember/component/template-only";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
export default templateOnly();
export default class CategoryLogo extends Component {
@service session;
get defaultCategoryLogo() {
// use dark logo by default in edge case
// when scheme is dark and dark logo is present
if (
this.session.defaultColorSchemeIsDark &&
this.args.category.uploaded_logo_dark
) {
return this.args.category.uploaded_logo_dark;
}
return this.args.category.uploaded_logo;
}
}

2
app/assets/javascripts/discourse/app/templates/components/category-logo.hbs
View File

@ -2,7 +2,7 @@
{{#if (and @category.uploaded_logo.url @category.uploaded_logo_dark.url)}}
<picture>
<source srcset={{@category.uploaded_logo_dark.url}} width={{@category.uploaded_logo_dark.width}} height={{@category.uploaded_logo_dark.height}} media="(prefers-color-scheme: dark)">
<CdnImg @src={{@category.uploaded_logo.url}} @width={{@category.uploaded_logo.width}} @height={{@category.uploaded_logo.height}}/>
<CdnImg @src={{this.defaultCategoryLogo.url}} @width={{this.defaultCategoryLogo.width}} @height={{this.defaultCategoryLogo.height}}/>
</picture>
{{else if @category.uploaded_logo.url}}
<CdnImg @src={{@category.uploaded_logo.url}} @width={{@category.uploaded_logo.width}} @height={{@category.uploaded_logo.height}}/>