Tweak style of related items (#16672)

This commit is contained in:
Bram Kragten 2023-05-30 18:12:41 +02:00 committed by GitHub
parent a70d7d8de3
commit 2b4f199337
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 74 deletions

View File

@ -16,6 +16,7 @@ import { Blueprints, fetchBlueprints } from "../data/blueprint";
import { ConfigEntry, getConfigEntries } from "../data/config_entries"; import { ConfigEntry, getConfigEntries } from "../data/config_entries";
import { SceneEntity } from "../data/scene"; import { SceneEntity } from "../data/scene";
import { findRelated, ItemType, RelatedResult } from "../data/search"; import { findRelated, ItemType, RelatedResult } from "../data/search";
import { haStyle } from "../resources/styles";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import { brandsUrl } from "../util/brands-url"; import { brandsUrl } from "../util/brands-url";
import "./ha-icon-next"; import "./ha-icon-next";
@ -83,42 +84,43 @@ export class HaRelatedItems extends LitElement {
return html` return html`
${this._related.config_entry && this._entries ${this._related.config_entry && this._entries
? html`<h3> ? html`<h3>
${this.hass.localize("ui.components.related-items.integration")}: ${this.hass.localize("ui.components.related-items.integration")}
</h3><mwc-list>${this._related.config_entry.map( </h3>
(relatedConfigEntryId) => { <mwc-list
const entry: ConfigEntry | undefined = this._entries!.find( >${this._related.config_entry.map((relatedConfigEntryId) => {
(configEntry) => configEntry.entry_id === relatedConfigEntryId const entry: ConfigEntry | undefined = this._entries!.find(
); (configEntry) => configEntry.entry_id === relatedConfigEntryId
if (!entry) { );
return ""; if (!entry) {
} return "";
return html` }
<a return html`
href=${`/config/integrations#config_entry=${relatedConfigEntryId}`} <a
@click=${this._navigateAwayClose} href=${`/config/integrations#config_entry=${relatedConfigEntryId}`}
> @click=${this._navigateAwayClose}
<ha-list-item hasMeta graphic="icon"> >
<img <ha-list-item hasMeta graphic="icon">
.src=${brandsUrl({ <img
domain: entry.domain, .src=${brandsUrl({
type: "icon", domain: entry.domain,
useFallback: true, type: "icon",
darkOptimized: this.hass.themes?.darkMode, useFallback: true,
})} darkOptimized: this.hass.themes?.darkMode,
alt=${entry.domain} })}
slot="graphic" alt=${entry.domain}
/> slot="graphic"
${this.hass.localize(`component.${entry.domain}.title`)}: />
${entry.title} <ha-icon-next slot="meta"></ha-icon-next> ${this.hass.localize(`component.${entry.domain}.title`)}:
</ha-list-item> ${entry.title} <ha-icon-next slot="meta"></ha-icon-next>
</a> </ha-list-item>
`; </a>
} `;
)}</mw-list>` })}</mwc-list
>`
: ""} : ""}
${this._related.device ${this._related.device
? html`<h3> ? html`<h3>
${this.hass.localize("ui.components.related-items.device")}: ${this.hass.localize("ui.components.related-items.device")}
</h3> </h3>
${this._related.device.map((relatedDeviceId) => { ${this._related.device.map((relatedDeviceId) => {
const device = this.hass.devices[relatedDeviceId]; const device = this.hass.devices[relatedDeviceId];
@ -145,7 +147,7 @@ export class HaRelatedItems extends LitElement {
: ""} : ""}
${this._related.area ${this._related.area
? html`<h3> ? html`<h3>
${this.hass.localize("ui.components.related-items.area")}: ${this.hass.localize("ui.components.related-items.area")}
</h3> </h3>
<mwc-list <mwc-list
>${this._related.area.map((relatedAreaId) => { >${this._related.area.map((relatedAreaId) => {
@ -184,9 +186,7 @@ export class HaRelatedItems extends LitElement {
: ""} : ""}
${this._related.entity ${this._related.entity
? html` ? html`
<h3> <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
${this.hass.localize("ui.components.related-items.entity")}:
</h3>
<mwc-list> <mwc-list>
${this._related.entity.map((entityId) => { ${this._related.entity.map((entityId) => {
const entity: HassEntity | undefined = const entity: HassEntity | undefined =
@ -215,7 +215,7 @@ export class HaRelatedItems extends LitElement {
: ""} : ""}
${this._related.group ${this._related.group
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.group")}:</h3> <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
<mwc-list> <mwc-list>
${this._related.group.map((groupId) => { ${this._related.group.map((groupId) => {
const group: HassEntity | undefined = this.hass.states[groupId]; const group: HassEntity | undefined = this.hass.states[groupId];
@ -243,7 +243,7 @@ export class HaRelatedItems extends LitElement {
: ""} : ""}
${this._related.scene ${this._related.scene
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.scene")}:</h3> <h3>${this.hass.localize("ui.components.related-items.scene")}</h3>
<mwc-list> <mwc-list>
${this._related.scene.map((sceneId) => { ${this._related.scene.map((sceneId) => {
const scene: SceneEntity | undefined = const scene: SceneEntity | undefined =
@ -273,7 +273,7 @@ export class HaRelatedItems extends LitElement {
${this._related.automation_blueprint ${this._related.automation_blueprint
? html` ? html`
<h3> <h3>
${this.hass.localize("ui.components.related-items.blueprint")}: ${this.hass.localize("ui.components.related-items.blueprint")}
</h3> </h3>
<mwc-list> <mwc-list>
${this._related.automation_blueprint.map((path) => { ${this._related.automation_blueprint.map((path) => {
@ -302,7 +302,7 @@ export class HaRelatedItems extends LitElement {
${this._related.automation ${this._related.automation
? html` ? html`
<h3> <h3>
${this.hass.localize("ui.components.related-items.automation")}: ${this.hass.localize("ui.components.related-items.automation")}
</h3> </h3>
<mwc-list> <mwc-list>
${this._related.automation.map((automationId) => { ${this._related.automation.map((automationId) => {
@ -334,7 +334,7 @@ export class HaRelatedItems extends LitElement {
${this._related.script_blueprint ${this._related.script_blueprint
? html` ? html`
<h3> <h3>
${this.hass.localize("ui.components.related-items.blueprint")}: ${this.hass.localize("ui.components.related-items.blueprint")}
</h3> </h3>
<mwc-list> <mwc-list>
${this._related.script_blueprint.map((path) => { ${this._related.script_blueprint.map((path) => {
@ -362,9 +362,7 @@ export class HaRelatedItems extends LitElement {
: ""} : ""}
${this._related.script ${this._related.script
? html` ? html`
<h3> <h3>${this.hass.localize("ui.components.related-items.script")}</h3>
${this.hass.localize("ui.components.related-items.script")}:
</h3>
<mwc-list> <mwc-list>
${this._related.script.map((scriptId) => { ${this._related.script.map((scriptId) => {
const script: HassEntity | undefined = const script: HassEntity | undefined =
@ -418,34 +416,29 @@ export class HaRelatedItems extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return [
a { haStyle,
color: var(--primary-color); css`
text-decoration: none; a {
} color: var(--primary-color);
ha-list-item { text-decoration: none;
--mdc-list-side-padding: 24px; }
} ha-list-item {
h3 { --mdc-list-side-padding: 24px;
font-family: var(--paper-font-title_-_font-family); }
-webkit-font-smoothing: var( h3 {
--paper-font-title_-_-webkit-font-smoothing padding: 0 24px;
); margin-bottom: 0;
font-size: var(--paper-font-title_-_font-size); }
font-weight: var(--paper-font-headline-_font-weight); h3:first-child {
letter-spacing: var(--paper-font-title_-_letter-spacing); margin-top: 0;
line-height: var(--paper-font-title_-_line-height); }
opacity: var(--dark-primary-opacity); .avatar {
padding: 0 24px; background-position: center center;
} background-size: cover;
h3:first-child { }
margin-top: 0; `,
} ];
.avatar {
background-position: center center;
background-size: cover;
}
`;
} }
} }

View File

@ -541,7 +541,7 @@
"scene": "Part of the following scenes", "scene": "Part of the following scenes",
"script": "Part of the following scripts", "script": "Part of the following scripts",
"automation": "Part of the following automations", "automation": "Part of the following automations",
"blueprint": "Using the following blueprints" "blueprint": "Using blueprint"
}, },
"data-table": { "data-table": {
"search": "Search", "search": "Search",