jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tweak style of related items (#16672)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/ha-related-items.ts
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,9 +84,10 @@ 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
>${this._related.config_entry.map((relatedConfigEntryId) => {
const entry: ConfigEntry | undefined = this._entries!.find( const entry: ConfigEntry | undefined = this._entries!.find(
(configEntry) => configEntry.entry_id === relatedConfigEntryId (configEntry) => configEntry.entry_id === relatedConfigEntryId
); );
@ -113,12 +115,12 @@ export class HaRelatedItems extends LitElement {
</ha-list-item> </ha-list-item>
</a> </a>
`; `;
} })}</mwc-list
)}</mw-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,7 +416,9 @@ export class HaRelatedItems extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return [
haStyle,
css`
a { a {
color: var(--primary-color); color: var(--primary-color);
text-decoration: none; text-decoration: none;
@ -427,16 +427,8 @@ export class HaRelatedItems extends LitElement {
--mdc-list-side-padding: 24px; --mdc-list-side-padding: 24px;
} }
h3 { h3 {
font-family: var(--paper-font-title_-_font-family);
-webkit-font-smoothing: var(
--paper-font-title_-_-webkit-font-smoothing
);
font-size: var(--paper-font-title_-_font-size);
font-weight: var(--paper-font-headline-_font-weight);
letter-spacing: var(--paper-font-title_-_letter-spacing);
line-height: var(--paper-font-title_-_line-height);
opacity: var(--dark-primary-opacity);
padding: 0 24px; padding: 0 24px;
margin-bottom: 0;
} }
h3:first-child { h3:first-child {
margin-top: 0; margin-top: 0;
@ -445,7 +437,8 @@ export class HaRelatedItems extends LitElement {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
} }
`; `,
];
} }
} }

2
src/translations/en.json
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",