mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Tweak style of related items (#16672)
This commit is contained in:
parent
a70d7d8de3
commit
2b4f199337
@ -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;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user