mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-17 14:26:35 +00:00
Request darktheme optimized brand images if dark theme is used (#9777)
This commit is contained in:
Joakim Sørensen
GitHub
parent
b12e062d94
commit
aab0b8a3ce
@ -41,7 +41,12 @@ class StepFlowPickFlow extends LitElement {
|
||||
<img
|
||||
slot="item-icon"
|
||||
loading="lazy"
|
||||
src=${brandsUrl(flow.handler, "icon", true)}
|
||||
src=${brandsUrl({
|
||||
domain: flow.handler,
|
||||
type: "icon",
|
||||
useFallback: true,
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
|
||||
|
||||
@ -96,7 +96,12 @@ class StepFlowPickHandler extends LitElement {
|
||||
<img
|
||||
slot="item-icon"
|
||||
loading="lazy"
|
||||
src=${brandsUrl(handler.slug, "icon", true)}
|
||||
src=${brandsUrl({
|
||||
domain: handler.slug,
|
||||
type: "icon",
|
||||
useFallback: true,
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
|
||||
|
||||
@ -11,13 +11,19 @@ class IntegrationBadge extends LitElement {
|
||||
|
||||
@property() public badgeIcon?: string;
|
||||
|
||||
@property({ type: Boolean }) public darkOptimizedIcon?: boolean;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public clickable = false;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<div class="icon">
|
||||
<img
|
||||
src=${brandsUrl(this.domain, "icon")}
|
||||
src=${brandsUrl({
|
||||
domain: this.domain,
|
||||
type: "icon",
|
||||
darkOptimized: this.darkOptimizedIcon,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
${this.badgeIcon
|
||||
|
||||
@ -78,6 +78,7 @@ class OnboardingIntegrations extends LitElement {
|
||||
.domain=${entry.domain}
|
||||
.title=${title}
|
||||
badgeIcon="hass:check"
|
||||
.darkOptimizedIcon=${this.hass.selectedTheme?.dark}
|
||||
></integration-badge>
|
||||
`,
|
||||
];
|
||||
@ -94,6 +95,7 @@ class OnboardingIntegrations extends LitElement {
|
||||
clickable
|
||||
.domain=${flow.handler}
|
||||
.title=${title}
|
||||
.darkOptimizedIcon=${this.hass.selectedTheme?.dark}
|
||||
></integration-badge>
|
||||
</button>
|
||||
`,
|
||||
|
||||
@ -241,7 +241,11 @@ export class HaConfigDevicePage extends LitElement {
|
||||
integrations.length
|
||||
? html`
|
||||
<img
|
||||
src=${brandsUrl(integrations[0], "logo")}
|
||||
src=${brandsUrl({
|
||||
domain: integrations[0],
|
||||
type: "logo",
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
@load=${this._onImageLoad}
|
||||
@error=${this._onImageError}
|
||||
|
||||
@ -34,6 +34,7 @@ import {
|
||||
} from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { brandsUrl } from "../../../../util/brands-url";
|
||||
import { documentationUrl } from "../../../../util/documentation-url";
|
||||
import {
|
||||
showEnergySettingsGridFlowFromDialog,
|
||||
@ -152,7 +153,11 @@ export class EnergyGridSettings extends LitElement {
|
||||
(entry) => html`<div class="row" .entry=${entry}>
|
||||
<img
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://brands.home-assistant.io/co2signal/icon.png"
|
||||
src=${brandsUrl({
|
||||
domain: "co2signal",
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
/>
|
||||
<span class="content">${entry.title}</span>
|
||||
<a href=${`/config/integrations#config_entry=${entry.entry_id}`}>
|
||||
@ -170,7 +175,11 @@ export class EnergyGridSettings extends LitElement {
|
||||
<div class="row border-bottom">
|
||||
<img
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://brands.home-assistant.io/co2signal/icon.png"
|
||||
src=${brandsUrl({
|
||||
domain: "co2signal",
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
/>
|
||||
<mwc-button @click=${this._addCO2Sensor}>
|
||||
Add CO2 signal integration
|
||||
|
||||
@ -21,6 +21,7 @@ import "../../../../components/entity/ha-entity-picker";
|
||||
import type { HaRadio } from "../../../../components/ha-radio";
|
||||
import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
|
||||
import { ConfigEntry, getConfigEntries } from "../../../../data/config_entries";
|
||||
import { brandsUrl } from "../../../../util/brands-url";
|
||||
|
||||
const energyUnits = ["kWh"];
|
||||
|
||||
@ -117,7 +118,11 @@ export class DialogEnergySolarSettings
|
||||
<img
|
||||
referrerpolicy="no-referrer"
|
||||
style="height: 24px; margin-right: 16px;"
|
||||
src="https://brands.home-assistant.io/forecast_solar/icon.png"
|
||||
src=${brandsUrl({
|
||||
domain: "forecast_solar",
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
/>${entry.title}
|
||||
</div>`}
|
||||
>
|
||||
|
||||
@ -94,7 +94,12 @@ class IntegrationsCard extends LitElement {
|
||||
<td>
|
||||
<img
|
||||
loading="lazy"
|
||||
src=${brandsUrl(domain, "icon", true)}
|
||||
src=${brandsUrl({
|
||||
domain: domain,
|
||||
type: "icon",
|
||||
useFallback: true,
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
</td>
|
||||
|
||||
@ -78,7 +78,11 @@ export class HaIntegrationHeader extends LitElement {
|
||||
<slot name="above-header"></slot>
|
||||
<div class="header">
|
||||
<img
|
||||
src=${brandsUrl(this.domain, "icon")}
|
||||
src=${brandsUrl({
|
||||
domain: this.domain,
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.selectedTheme?.dark,
|
||||
})}
|
||||
referrerpolicy="no-referrer"
|
||||
@error=${this._onImageError}
|
||||
@load=${this._onImageLoad}
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
export const brandsUrl = (
|
||||
domain: string,
|
||||
type: "icon" | "logo",
|
||||
useFallback?: boolean
|
||||
): string =>
|
||||
`https://brands.home-assistant.io/${
|
||||
useFallback ? "_/" : ""
|
||||
}${domain}/${type}.png`;
|
||||
export interface BrandsOptions {
|
||||
domain: string;
|
||||
type: "icon" | "logo" | "icon@2x" | "logo@2x";
|
||||
useFallback?: boolean;
|
||||
darkOptimized?: boolean;
|
||||
}
|
||||
|
||||
export const brandsUrl = (options: BrandsOptions): string =>
|
||||
`https://brands.home-assistant.io/${options.useFallback ? "_/" : ""}${
|
||||
options.domain
|
||||
}/${options.darkOptimized ? "dark_" : ""}${options.type}.png`;
|
||||
|
||||
@ -1,33 +1,41 @@
|
||||
import { assert } from "chai";
|
||||
import { brandsUrl } from "../../src/util/brands-url";
|
||||
|
||||
describe("Generate brands Url", function () {
|
||||
it("Generate logo brands url for cloud component without fallback", function () {
|
||||
describe("Generate brands Url", () => {
|
||||
it("Generate logo brands url for cloud component without fallback", () => {
|
||||
assert.strictEqual(
|
||||
// @ts-ignore
|
||||
brandsUrl("cloud", "logo"),
|
||||
brandsUrl({ domain: "cloud", type: "logo" }),
|
||||
"https://brands.home-assistant.io/cloud/logo.png"
|
||||
);
|
||||
});
|
||||
it("Generate icon brands url for cloud component without fallback", function () {
|
||||
it("Generate icon brands url for cloud component without fallback", () => {
|
||||
assert.strictEqual(
|
||||
// @ts-ignore
|
||||
brandsUrl("cloud", "icon"),
|
||||
brandsUrl({ domain: "cloud", type: "icon" }),
|
||||
"https://brands.home-assistant.io/cloud/icon.png"
|
||||
);
|
||||
});
|
||||
it("Generate logo brands url for cloud component with fallback", function () {
|
||||
it("Generate logo brands url for cloud component with fallback", () => {
|
||||
assert.strictEqual(
|
||||
// @ts-ignore
|
||||
brandsUrl("cloud", "logo", true),
|
||||
brandsUrl({ domain: "cloud", type: "logo", useFallback: true }),
|
||||
"https://brands.home-assistant.io/_/cloud/logo.png"
|
||||
);
|
||||
});
|
||||
it("Generate icon brands url for cloud component with fallback", function () {
|
||||
it("Generate icon brands url for cloud component with fallback", () => {
|
||||
assert.strictEqual(
|
||||
// @ts-ignore
|
||||
brandsUrl("cloud", "icon", true),
|
||||
brandsUrl({ domain: "cloud", type: "icon", useFallback: true }),
|
||||
"https://brands.home-assistant.io/_/cloud/icon.png"
|
||||
);
|
||||
});
|
||||
|
||||
it("Generate dark theme optimized logo brands url for cloud component without fallback", () => {
|
||||
assert.strictEqual(
|
||||
// @ts-ignore
|
||||
brandsUrl({ domain: "cloud", type: "logo", darkOptimized: true }),
|
||||
"https://brands.home-assistant.io/cloud/dark_logo.png"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user