jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add icons to device config dashboard (#14184)

Browse Source 
* Add icons to device config dashboard

* Add `alt=""`
This commit is contained in:
Bram Kragten 2022-10-26 15:19:56 +02:00 committed by GitHub
parent 3ac6e6f307
commit 527c4f71c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/data-table/ha-data-table.ts
View File

@ -724,6 +724,11 @@ export class HaDataTable extends LitElement {
width: 54px; width: 54px;
} }
.mdc-data-table__cell--icon img {
width: 24px;
height: 24px;
}
.mdc-data-table__header-cell.mdc-data-table__header-cell--icon { .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
text-align: center; text-align: center;
} }
@ -740,6 +745,7 @@ export class HaDataTable extends LitElement {
} }
.mdc-data-table__cell--icon:first-child ha-icon, .mdc-data-table__cell--icon:first-child ha-icon,
.mdc-data-table__cell--icon:first-child img,
.mdc-data-table__cell--icon:first-child ha-state-icon, .mdc-data-table__cell--icon:first-child ha-state-icon,
.mdc-data-table__cell--icon:first-child ha-svg-icon { .mdc-data-table__cell--icon:first-child ha-svg-icon {
margin-left: 8px; margin-left: 8px;
@ -748,7 +754,12 @@ export class HaDataTable extends LitElement {
:host([dir="rtl"]) :host([dir="rtl"])
.mdc-data-table__cell--icon:first-child .mdc-data-table__cell--icon:first-child
ha-state-icon, ha-state-icon,
:host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon { :host([dir="rtl"])
.mdc-data-table__cell--icon:first-child
ha-svg-icon
:host([dir="rtl"])
.mdc-data-table__cell--icon:first-child
img {
margin-left: auto; margin-left: auto;
margin-right: 8px; margin-right: 8px;
} }

81
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -35,6 +35,7 @@ import { domainToName } from "../../../data/integration";
import "../../../layouts/hass-tabs-subpage-data-table"; import "../../../layouts/hass-tabs-subpage-data-table";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types"; import { HomeAssistant, Route } from "../../../types";
import { brandsUrl } from "../../../util/brands-url";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu"; import "../integrations/ha-integration-overflow-menu";
import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node"; import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
@ -215,6 +216,9 @@ export class HaConfigDeviceDashboard extends LitElement {
: this.hass.localize( : this.hass.localize(
"ui.panel.config.devices.data_table.no_integration" "ui.panel.config.devices.data_table.no_integration"
), ),
domains: device.config_entries
.filter((entId) => entId in entryLookup)
.map((entId) => entryLookup[entId].domain),
battery_entity: [ battery_entity: [
this._batteryEntity(device.id, deviceEntityLookup), this._batteryEntity(device.id, deviceEntityLookup),
this._batteryChargingEntity(device.id, deviceEntityLookup), this._batteryChargingEntity(device.id, deviceEntityLookup),
@ -235,37 +239,52 @@ export class HaConfigDeviceDashboard extends LitElement {
private _columns = memoizeOne( private _columns = memoizeOne(
(narrow: boolean, showDisabled: boolean): DataTableColumnContainer => { (narrow: boolean, showDisabled: boolean): DataTableColumnContainer => {
const columns: DataTableColumnContainer = narrow const columns: DataTableColumnContainer = {
? { icon: {
name: { title: "",
title: this.hass.localize( type: "icon",
"ui.panel.config.devices.data_table.device" template: (_icon, device) =>
), device.domains.length
main: true, ? html`<img
sortable: true, alt=""
filterable: true, referrerpolicy="no-referrer"
direction: "asc", src=${brandsUrl({
grows: true, domain: device.domains[0],
template: (name, device: DataTableRowData) => html` type: "icon",
${name} darkOptimized: this.hass.themes?.darkMode,
<div class="secondary"> })}
${device.area} | ${device.integration} />`
</div> : "",
`, },
}, };
}
: { if (narrow) {
name: { columns.name = {
title: this.hass.localize( title: this.hass.localize(
"ui.panel.config.devices.data_table.device" "ui.panel.config.devices.data_table.device"
), ),
main: true, main: true,
sortable: true, sortable: true,
filterable: true, filterable: true,
grows: true, direction: "asc",
direction: "asc", grows: true,
}, template: (name, device: DataTableRowData) => html`
}; ${name}
<div class="secondary">${device.area} | ${device.integration}</div>
`,
};
} else {
columns.name = {
title: this.hass.localize(
"ui.panel.config.devices.data_table.device"
),
main: true,
sortable: true,
filterable: true,
grows: true,
direction: "asc",
};
}
columns.manufacturer = { columns.manufacturer = {
title: this.hass.localize( title: this.hass.localize(

2
src/panels/config/script/ha-script-picker.ts
View File

@ -91,7 +91,7 @@ class HaScriptPicker extends LitElement {
), ),
type: "icon", type: "icon",
template: (_icon, script) => template: (_icon, script) =>
html` <ha-state-icon .state=${script}></ha-state-icon>`, html`<ha-state-icon .state=${script}></ha-state-icon>`,
}, },
name: { name: {
title: this.hass.localize("ui.panel.config.script.picker.headers.name"), title: this.hass.localize("ui.panel.config.script.picker.headers.name"),