Skip to content

Commit

Permalink
Consistant entry page styles (#591)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeeus
ludeeus authored May 22, 2022
1 parent 7d91708 commit cdfa929
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 121 deletions.
1 change: 1 addition & 0 deletions src/hacs-router.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ class HacsRouter extends HassRouterPage {
this.style.setProperty("--app-header-background-color", "var(--sidebar-background-color)");
this.style.setProperty("--app-header-text-color", "var(--sidebar-text-color)");
this.style.setProperty("--app-header-border-bottom", "1px solid var(--divider-color)");
this.style.setProperty("--ha-card-border-radius", "var(--ha-config-card-border-radius, 8px)");
}

public disconnectedCallback() {
Expand Down
255 changes: 134 additions & 121 deletions src/panels/hacs-entry-panel.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import { mdiAlertCircle, mdiGithub, mdiHomeAssistant, mdiInformation } from "@mdi/js";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
Expand All @@ -9,10 +10,11 @@ import { navigate } from "../../homeassistant-frontend/src/common/navigate";
import { computeRTL } from "../../homeassistant-frontend/src/common/util/compute_rtl";
import "../../homeassistant-frontend/src/components/ha-alert";
import "../../homeassistant-frontend/src/components/ha-card";
import "../../homeassistant-frontend/src/components/ha-clickable-list-item";
import "../../homeassistant-frontend/src/components/ha-icon-next";
import "../../homeassistant-frontend/src/components/ha-menu-button";
import "../../homeassistant-frontend/src/components/ha-svg-icon";
import "../../homeassistant-frontend/src/layouts/ha-app-layout";
import "../../homeassistant-frontend/src/panels/config/dashboard/ha-config-navigation";
import "../../homeassistant-frontend/src/panels/config/ha-config-section";
import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
import { HomeAssistant, Route } from "../../homeassistant-frontend/src/types";
Expand Down Expand Up @@ -109,89 +111,115 @@ export class HacsEntryPanel extends LitElement {
${this.hacs.updates?.length !== 0
? html` <ha-card outlined>
<div class="title">${this.hacs.localize("common.updates")}</div>
${sortRepositoriesByName(this.hacs.updates).map(
(repository) =>
html`
<div class="list-item" @click=${() => this._openUpdateDialog(repository)}>
<div class="list-item-icon">
${repository.category === "integration"
? html`
<img
loading="lazy"
.src=${brandsUrl({
domain: repository.domain,
darkOptimized: this.hass.themes.darkMode,
type: "icon",
})}
referrerpolicy="no-referrer"
@error=${this._onImageError}
@load=${this._onImageLoad}
/>
`
: html`
<ha-svg-icon
path="${mdiGithub}"
style="padding-left: 0; height: 40px; width: 40px;"
>
</ha-svg-icon>
`}
</div>
<div class="list-item-content">
<div class="list-item-header">${repository.name}</div>
<div class="list-item-description">
${this.hacs.localize("sections.pending_repository_upgrade", {
downloaded: repository.installed_version,
available: repository.available_version,
})}
</div>
</div>
${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
</div>
<mwc-list>
${sortRepositoriesByName(this.hacs.updates).map(
(repository) => html`
<ha-clickable-list-item
graphic="avatar"
disableHref
twoline
@click=${() => this._openUpdateDialog(repository)}
>
${repository.category === "integration"
? html`
<img
loading="lazy"
.src=${brandsUrl({
domain: repository.domain,
darkOptimized: this.hass.themes.darkMode,
type: "icon",
})}
referrerpolicy="no-referrer"
@error=${this._onImageError}
@load=${this._onImageLoad}
slot="graphic"
/>
`
: html`
<ha-svg-icon
slot="graphic"
path="${mdiGithub}"
style="padding-left: 0; height: 40px; width: 40px;"
>
</ha-svg-icon>
`}
<span>${repository.name}</span>
<span slot="secondary"
>${this.hacs.localize("sections.pending_repository_upgrade", {
downloaded: repository.installed_version,
available: repository.available_version,
})}</span
>
</ha-clickable-list-item>
`
)}
)}
</mwc-list>
</ha-card>`
: ""}
<ha-card outlined>
<ha-config-navigation
.hass=${this.hass}
.pages=${this.hacs.sections}
.narrow=${this.narrow}
>
</ha-config-navigation>
${isComponentLoaded(this.hass, "hassio")
? html`
<div class="list-item" @click=${this._openSupervisorDialog}>
<div class="list-item-icon">
<div class="icon-background" style="background-color: rgb(64, 132, 205)">
<ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
</div>
</div>
<div class="list-item-content">
<div class="list-item-header">
${this.hacs.localize(`sections.addon.title`)}
</div>
<div class="list-item-description">
${this.hacs.localize(`sections.addon.description`)}
</div>
<mwc-list>
${this.hacs.sections.map(
(page) => html`
<ha-clickable-list-item
graphic="avatar"
twoline
.hasMeta=${!this.narrow}
href=${page.path}
>
<div
slot="graphic"
class=${page.iconColor ? "icon-background" : ""}
.style="background-color: ${page.iconColor || "undefined"}"
>
<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
</div>
</div>
<span>${page.name}</span>
<span slot="secondary">${page.description}</span>
${!this.narrow ? html`<ha-icon-next slot="meta"></ha-icon-next>` : ""}
</ha-clickable-list-item>
`
: ""}
<div class="list-item" @click=${this._openAboutDialog}>
<div class="list-item-icon">
<div class="icon-background" style="background-color: rgb(74, 89, 99)">
)}
${isComponentLoaded(this.hass, "hassio")
? html`
<ha-clickable-list-item
graphic="avatar"
disableHref
twoline
@click=${this._openSupervisorDialog}
.hasMeta=${!this.narrow}
>
<div
class="icon-background"
slot="graphic"
style="background-color: rgb(64, 132, 205)"
>
<ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
</div>
<span>${this.hacs.localize(`sections.addon.title`)}</span>
<span slot="secondary"
>${this.hacs.localize(`sections.addon.description`)}</span
>
</ha-clickable-list-item>
`
: ""}
<ha-clickable-list-item
graphic="avatar"
twoline
@click=${this._openAboutDialog}
disableHref
>
<div
class="icon-background"
slot="graphic"
style="background-color: rgb(74, 89, 99)"
>
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</div>
</div>
<div class="list-item-content">
<div class="list-item-header">${this.hacs.localize(`sections.about.title`)}</div>
<div class="list-item-description">
${this.hacs.localize(`sections.about.description`)}
</div>
</div>
</div>
<span>${this.hacs.localize(`sections.about.title`)}</span>
<span slot="secondary">${this.hacs.localize(`sections.about.description`)}</span>
</ha-clickable-list-item>
</mwc-list>
</ha-card>
</ha-config-section>
</ha-app-layout>
Expand Down Expand Up @@ -265,13 +293,19 @@ export class HacsEntryPanel extends LitElement {
haStyle,
HacsStyles,
css`
:host {
--mdc-list-vertical-padding: 0;
}
ha-card:last-child {
margin-bottom: env(safe-area-inset-bottom);
}
:host(:not([narrow])) ha-card:last-child {
margin-bottom: 24px;
margin-bottom: max(24px, env(safe-area-inset-bottom));
}
ha-config-section {
margin: -16px auto auto;
margin: auto;
margin-top: -32px;
max-width: 600px;
color: var(--secondary-text-color);
}
ha-card {
overflow: hidden;
Expand All @@ -280,69 +314,48 @@ export class HacsEntryPanel extends LitElement {
text-decoration: none;
color: var(--primary-text-color);
}
.title {
font-size: 16px;
a.button {
display: block;
color: var(--primary-color);
padding: 16px;
padding-bottom: 0;
}
:host([narrow]) ha-card {
border-radius: 0;
box-shadow: unset;
}
:host([narrow]) ha-config-section {
margin-top: -42px;
}
.icon-background {
border-radius: 50%;
}
.icon-background ha-svg-icon {
color: #fff;
}
.title {
font-size: 16px;
padding: 16px;
padding-bottom: 0;
}
@media all and (max-width: 600px) {
ha-card {
border-width: 1px 0;
border-radius: 0;
box-shadow: unset;
}
ha-config-section {
margin-top: -42px;
}
}
ha-svg-icon,
ha-icon-next {
color: var(--secondary-text-color);
height: 24px;
width: 24px;
display: block;
}
ha-svg-icon {
padding: 8px;
}
.list-item-icon > * {
height: 40px;
width: 40px;
padding: 0;
}
img {
.icon-background {
border-radius: 50%;
}
.list-item {
width: 100%;
cursor: pointer;
display: flex;
padding: 16px;
}
.list-item-icon {
margin-right: 16px;
.icon-background ha-svg-icon {
color: #fff;
}
.list-item-header {
ha-clickable-list-item {
cursor: pointer;
font-size: 16px;
}
.list-item-description {
color: var(--secondary-text-color);
margin-right: 16px;
}
.list-item ha-icon-next,
.list-item ha-svg-icon[right] {
right: 0;
padding: 16px;
position: absolute;
padding: 0;
}
`,
];
Expand Down

0 comments on commit cdfa929

Please sign in to comment.