Skip to content

Commit

Permalink
Remove paper elements (#570)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeeus
ludeeus authored Mar 5, 2022
1 parent dc4655f commit d39164d
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 74 deletions.
9 changes: 3 additions & 6 deletions src/components/hacs-repository-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
mdiLanguageJavascript,
mdiReload,
} from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { ClassInfo, classMap } from "lit/directives/class-map";
Expand Down Expand Up @@ -114,9 +112,7 @@ export class HacsRepositoryCard extends LitElement {
: ""}
</div>
</div>
<paper-item>
<paper-item-body> ${this.repository.description} </paper-item-body>
</paper-item>
<div class="description">${this.repository.description}</div>
</div>
<div class="card-actions">
${this.repository.installed
Expand Down Expand Up @@ -361,9 +357,10 @@ export class HacsRepositoryCard extends LitElement {
.pointer {
cursor: pointer;
}
paper-item-body {
.description {
opacity: var(--dark-primary-opacity);
font-size: 14px;
padding: 8px 16px;
}
.status-new {
Expand Down
128 changes: 73 additions & 55 deletions src/panels/hacs-entry-panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import "@material/mwc-button/mwc-button";
import { mdiAlertCircle, mdiGithub, mdiHomeAssistant, mdiInformation, mdiOpenInNew } from "@mdi/js";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../../homeassistant-frontend/src/common/config/is_component_loaded";
Expand Down Expand Up @@ -114,41 +112,41 @@ export class HacsEntryPanel extends LitElement {
${sortRepositoriesByName(this.hacs.updates).map(
(repository) =>
html`
<paper-icon-item @click=${() => this._openUpdateDialog(repository)}>
${repository.category === "integration"
? html`
<img
slot="item-icon"
loading="lazy"
.src=${brandsUrl({
domain: repository.domain,
darkOptimized: this.hass.themes.darkMode,
type: "icon",
})}
referrerpolicy="no-referrer"
@error=${this._onImageError}
@load=${this._onImageLoad}
/>
`
: html`
<div slot="item-icon" class="icon-background">
<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>
`}
<paper-item-body two-line>
${repository.name}
<div secondary>
>
</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>
</paper-item-body>
</div>
${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
</paper-icon-item>
</div>
`
)}
</ha-card>`
Expand All @@ -162,40 +160,41 @@ export class HacsEntryPanel extends LitElement {
>
</ha-config-navigation>
${isComponentLoaded(this.hass, "hassio")
${!isComponentLoaded(this.hass, "hassio")
? html`
<paper-icon-item @click=${this._openSupervisorDialog}>
<div
class="icon-background"
slot="item-icon"
style="background-color: rgb(64, 132, 205)"
>
<ha-svg-icon .path=${mdiHomeAssistant} slot="item-icon"></ha-svg-icon>
<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>
</div>
<paper-item-body two-line>
${this.hacs.localize(`sections.addon.title`)}
<div secondary>${this.hacs.localize(`sections.addon.description`)}</div>
</paper-item-body>
${!this.narrow
? html`<ha-svg-icon right .path=${mdiOpenInNew}></ha-svg-icon>`
: ""}
</paper-icon-item>
</div>
`
: ""}
<paper-icon-item @click=${this._openAboutDialog}>
<div
class="icon-background"
slot="item-icon"
style="background-color: rgb(74, 89, 99)"
>
<ha-svg-icon .path=${mdiInformation} slot="item-icon"></ha-svg-icon>
<div class="list-item" @click=${this._openAboutDialog}>
<div class="list-item-icon">
<div class="icon-background" style="background-color: rgb(74, 89, 99)">
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
</div>
</div>
<paper-item-body two-line>
${this.hacs.localize(`sections.about.title`)}
<div secondary>${this.hacs.localize(`sections.about.description`)}</div>
</paper-item-body>
</paper-icon-item>
<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>
</ha-card>
</ha-config-section>
</ha-app-layout>
Expand Down Expand Up @@ -324,8 +323,27 @@ export class HacsEntryPanel extends LitElement {
max-width: 40px;
border-radius: 50%;
}
paper-icon-item {
.list-item {
width: 100%;
cursor: pointer;
display: flex;
padding: 16px;
}
.list-item-icon {
margin-right: 16px;
}
.list-item-header {
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;
}
`,
];
Expand Down
3 changes: 1 addition & 2 deletions src/panels/hacs-store-panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import "../components/hacs-repository-card";
import { Repository } from "../data/common";
import { Hacs } from "../data/hacs";
import { settingsClearAllNewRepositories } from "../data/websocket";
import { hassTabsSubpage, scrollBarStyle } from "../styles/element-styles";
import { scrollBarStyle } from "../styles/element-styles";
import { HacsStyles } from "../styles/hacs-common-style";
import { filterRepositoriesByInput } from "../tools/filter-repositories-by-input";
import { activePanel } from "./hacs-sections";
Expand Down Expand Up @@ -310,7 +310,6 @@ export class HacsStorePanel extends LitElement {
static get styles() {
return [
HacsStyles,
hassTabsSubpage,
scrollBarStyle,
css`
.filter {
Expand Down
10 changes: 0 additions & 10 deletions src/styles/element-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,6 @@ export const hacsButtonStyle = css`
}
`;

export const hassTabsSubpage = css`
hass-tabs-subpage {
font-family: var(--paper-font-body1_-_font-family);
-webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
}
`;

export const scrollBarStyle = css`
*::-webkit-scrollbar {
width: 0.4rem;
Expand Down
1 change: 0 additions & 1 deletion src/styles/hacs-common-style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export const hacsCommonClasses = css`
--mdc-theme-primary: var(--hcv-color-error);
}
.header {
font-size: var(--paper-font-headline_-_font-size);
opacity: var(--dark-primary-opacity);
padding: 8px 0 4px 16px;
}
Expand Down

0 comments on commit d39164d

Please sign in to comment.