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

Fix config dashboard scroll on desktop (#6242)

Browse Source
This commit is contained in:
Paulus Schoutsen 2020-06-26 12:05:54 -07:00 committed by GitHub
parent d55cb95479
commit 7395d19489
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 96 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/panels/config/dashboard/ha-config-dashboard.ts
View File

@ -26,7 +26,8 @@ import { mdiCloudLock } from "@mdi/js";
class HaConfigDashboard extends LitElement {
@property() public hass!: HomeAssistant;
@property() public narrow!: boolean;
@property({ type: Boolean, reflect: true })
public narrow!: boolean;
@property() public isWide!: boolean;
@ -35,6 +36,96 @@ class HaConfigDashboard extends LitElement {
@property() public showAdvanced!: boolean;
protected render(): TemplateResult {
const content = html` <ha-config-section
.narrow=${this.narrow}
.isWide=${this.isWide}
>
<div slot="header">
${this.hass.localize("ui.panel.config.header")}
</div>
<div slot="introduction">
${this.hass.localize("ui.panel.config.introduction")}
</div>
${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
? html`
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{
component: "cloud",
path: "/config/cloud",
translationKey: "ui.panel.config.cloud.caption",
info: this.cloudStatus,
iconPath: mdiCloudLock,
},
]}
></ha-config-navigation>
</ha-card>
`
: ""}
${Object.values(configSections).map(
(section) => html`
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${section}
></ha-config-navigation>
</ha-card>
`
)}
${isComponentLoaded(this.hass, "zha")
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.config.integration_panel_move.missing_zha",
"integrations_page",
html`<a href="/config/integrations">
${this.hass.localize(
"ui.panel.config.integration_panel_move.link_integration_page"
)}
</a>`
)}
</div>
`
: ""}
${isComponentLoaded(this.hass, "zwave")
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.config.integration_panel_move.missing_zwave",
"integrations_page",
html`<a href="/config/integrations">
${this.hass.localize(
"ui.panel.config.integration_panel_move.link_integration_page"
)}
</a>`
)}
</div>
`
: ""}
${!this.showAdvanced
? html`
<div class="promo-advanced">
${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
<a href="/profile"
>${this.hass.localize(
"ui.panel.config.advanced_mode.link_profile_page"
)}</a
>.
</div>
`
: ""}
</ha-config-section>`;
if (!this.narrow) {
return content;
}
return html`
<app-header-layout has-scrolling-region>
<app-header fixed slot="header">
@ -46,90 +137,7 @@ class HaConfigDashboard extends LitElement {
</app-toolbar>
</app-header>
<ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
<div slot="header">
${this.hass.localize("ui.panel.config.header")}
</div>
<div slot="introduction">
${this.hass.localize("ui.panel.config.introduction")}
</div>
${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
? html`
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{
component: "cloud",
path: "/config/cloud",
translationKey: "ui.panel.config.cloud.caption",
info: this.cloudStatus,
iconPath: mdiCloudLock,
},
]}
></ha-config-navigation>
</ha-card>
`
: ""}
${Object.values(configSections).map(
(section) => html`
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${section}
></ha-config-navigation>
</ha-card>
`
)}
${isComponentLoaded(this.hass, "zha")
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.config.integration_panel_move.missing_zha",
"integrations_page",
html`<a href="/config/integrations">
${this.hass.localize(
"ui.panel.config.integration_panel_move.link_integration_page"
)}
</a>`
)}
</div>
`
: ""}
${isComponentLoaded(this.hass, "zwave")
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.config.integration_panel_move.missing_zwave",
"integrations_page",
html`<a href="/config/integrations">
${this.hass.localize(
"ui.panel.config.integration_panel_move.link_integration_page"
)}
</a>`
)}
</div>
`
: ""}
${!this.showAdvanced
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.config.advanced_mode.hint_enable"
)}
<a href="/profile"
>${this.hass.localize(
"ui.panel.config.advanced_mode.link_profile_page"
)}</a
>.
</div>
`
: ""}
</ha-config-section>
${content}
</app-header-layout>
`;
}
@ -145,6 +153,9 @@ class HaConfigDashboard extends LitElement {
margin-bottom: 24px;
}
ha-config-section {
margin-top: -12px;
}
:host([narrow]) ha-config-section {
margin-top: -20px;
}
ha-card {