Better place where device edit button is on desktop (#8566)

This commit is contained in:
Paulus Schoutsen 2021-03-06 05:18:42 -08:00 committed by GitHub
parent f659a6fe37
commit 35f776284b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -181,15 +181,17 @@ export class HaConfigDevicePage extends LitElement {
<span slot="header">
${computeDeviceName(device, this.hass)}
</span>
<ha-icon-button
slot="toolbar-icon"
icon="hass:pencil"
@click=${this._showSettings}
></ha-icon-button>
`
: ""
}
<ha-icon-button
slot="toolbar-icon"
icon="hass:cog"
@click=${this._showSettings}
></ha-icon-button>
<div class="container">
<div class="header fullwidth">
@ -197,19 +199,25 @@ export class HaConfigDevicePage extends LitElement {
this.narrow
? ""
: html`
<div>
<h1>${computeDeviceName(device, this.hass)}</h1>
${area
? html`
<a href="/config/areas/area/${area.area_id}"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.area",
"area",
area.name || "Unnamed Area"
)}</a
>
`
: ""}
<div class="header-name">
<div>
<h1>${computeDeviceName(device, this.hass)}</h1>
${area
? html`
<a href="/config/areas/area/${area.area_id}"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.area",
"area",
area.name || "Unnamed Area"
)}</a
>
`
: ""}
</div>
<ha-icon-button
icon="hass:pencil"
@click=${this._showSettings}
></ha-icon-button>
</div>
`
}
@ -780,6 +788,12 @@ export class HaConfigDevicePage extends LitElement {
justify-content: space-between;
}
.header-name {
display: flex;
align-items: center;
padding-left: 8px;
}
.column,
.fullwidth {
padding: 8px;