Ensure consistent card look on device config page (#10386)

This commit is contained in:
Philip Allgaier 2021-10-26 11:12:27 +02:00 committed by GitHub
parent d61a77f2d9
commit 29a1167782
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 16 deletions

View File

@ -148,7 +148,11 @@ export class HaDeviceEntitiesCard extends LitElement {
private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult { private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult {
return html` return html`
<paper-icon-item .entry=${entry} @click=${this._openEditEntry}> <paper-icon-item
class="disabled-entry"
.entry=${entry}
@click=${this._openEditEntry}
>
<ha-svg-icon <ha-svg-icon
slot="item-icon" slot="item-icon"
.path=${domainIcon(computeDomain(entry.entity_id))} .path=${domainIcon(computeDomain(entry.entity_id))}
@ -205,6 +209,9 @@ export class HaDeviceEntitiesCard extends LitElement {
.disabled-entry { .disabled-entry {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
#entities {
margin-top: -24px; /* match the spacing between card title and content of the device info card above it */
}
#entities > * { #entities > * {
margin: 8px 16px 8px 8px; margin: 8px 16px 8px 8px;
} }
@ -213,8 +220,9 @@ export class HaDeviceEntitiesCard extends LitElement {
} }
paper-icon-item { paper-icon-item {
min-height: 40px; min-height: 40px;
padding: 0 8px; padding: 0 16px;
cursor: pointer; cursor: pointer;
--paper-item-icon-width: 48px;
} }
.name { .name {
font-size: 14px; font-size: 14px;

View File

@ -420,7 +420,7 @@ export class HaConfigDevicePage extends LitElement {
: ""; : "";
}) })
: html` : html`
<paper-item class="no-link"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.add_prompt", "ui.panel.config.devices.add_prompt",
"name", "name",
@ -428,7 +428,7 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.automation.automations" "ui.panel.config.devices.automation.automations"
) )
)} )}
</paper-item> </div>
`} `}
</ha-card> </ha-card>
` `
@ -502,7 +502,7 @@ export class HaConfigDevicePage extends LitElement {
: ""; : "";
}) })
: html` : html`
<paper-item class="no-link"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.add_prompt", "ui.panel.config.devices.add_prompt",
"name", "name",
@ -510,7 +510,7 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.scene.scenes" "ui.panel.config.devices.scene.scenes"
) )
)} )}
</paper-item> </div>
` `
} }
</ha-card> </ha-card>
@ -558,7 +558,7 @@ export class HaConfigDevicePage extends LitElement {
: ""; : "";
}) })
: html` : html`
<paper-item class="no-link"> <div class="card-content">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.add_prompt", "ui.panel.config.devices.add_prompt",
"name", "name",
@ -566,7 +566,7 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.script.scripts" "ui.panel.config.devices.script.scripts"
) )
)} )}
</paper-item> </div>
`} `}
</ha-card> </ha-card>
` `
@ -953,19 +953,11 @@ export class HaConfigDevicePage extends LitElement {
font-size: var(--paper-font-body1_-_font-size); font-size: var(--paper-font-body1_-_font-size);
} }
paper-item.no-link {
cursor: default;
}
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-color); color: var(--primary-color);
} }
ha-card {
padding-bottom: 8px;
}
ha-card a { ha-card a {
color: var(--primary-text-color); color: var(--primary-text-color);
} }