jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 21:17:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move icon slot and adjust styles

Browse Source
This commit is contained in:
Ludeeus 2021-11-21 10:23:16 +00:00
parent a8adf17f9d
commit 82240a3b79
3 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
gallery/src/demos/demo-ha-alert.ts
View File

@ -1,8 +1,9 @@
import "../../../src/components/ha-logo-svg"; import "@material/mwc-button/mwc-button";
import { html, css, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import "../../../src/components/ha-alert"; import "../../../src/components/ha-alert";
import "../../../src/components/ha-card"; import "../../../src/components/ha-card";
import "../../../src/components/ha-logo-svg";
const alerts: { const alerts: {
title?: string; title?: string;
@ -88,7 +89,17 @@ const alerts: {
title: "Slotted icon", title: "Slotted icon",
description: "Alert with slotted icon", description: "Alert with slotted icon",
type: "warning", type: "warning",
iconSlot: html`<ha-logo-svg slot="icon"></ha-logo-svg>`, iconSlot: html`<span slot="icon" class="image">
<ha-logo-svg></ha-logo-svg>
</span>`,
},
{
title: "Slotted image",
description: "Alert with slotted image",
type: "warning",
iconSlot: html`<span slot="icon" class="image"
><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
/></span>`,
}, },
{ {
title: "Slotted action", title: "Slotted action",
@ -157,14 +168,14 @@ export class DemoHaAlert extends LitElement {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
span { .image {
margin-right: 16px; display: inline-flex;
height: 100%;
align-items: center;
} }
ha-logo-svg { img {
width: 28px; max-height: 24px;
height: 28px; width: 24px;
padding-right: 8px;
place-self: center;
} }
mwc-button { mwc-button {
--mdc-theme-primary: var(--primary-text-color); --mdc-theme-primary: var(--primary-text-color);

72
src/components/ha-alert.ts
View File

@ -51,32 +51,30 @@ class HaAlert extends LitElement {
[this.alertType]: true, [this.alertType]: true,
})}" })}"
> >
<slot name="icon"> <div class="icon ${this.title ? "" : "no-title"}">
<div class="icon ${this.title ? "" : "no-title"}"> <slot name="icon">
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon> <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</div> </slot>
</slot> </div>
<div class="content"> <div class="content">
<div class="main-content"> <div class="main-content">
${this.title ? html`<div class="title">${this.title}</div>` : ""} ${this.title ? html`<div class="title">${this.title}</div>` : ""}
<slot></slot> <slot></slot>
</div> </div>
<div class="action"> <slot name="action">
<slot name="action"> ${this.actionText
${this.actionText ? html`<mwc-button
? html`<mwc-button @click=${this._action_clicked}
@click=${this._action_clicked} .label=${this.actionText}
.label=${this.actionText} ></mwc-button>`
></mwc-button>` : this.dismissable
: this.dismissable ? html`<ha-icon-button
? html`<ha-icon-button @click=${this._dismiss_clicked}
@click=${this._dismiss_clicked} label="Dismiss alert"
label="Dismiss alert" .path=${mdiClose}
.path=${mdiClose} ></ha-icon-button>`
></ha-icon-button>` : ""}
: ""} </slot>
</slot>
</div>
</div> </div>
</div> </div>
`; `;
@ -100,7 +98,7 @@ class HaAlert extends LitElement {
.issue-type.rtl { .issue-type.rtl {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.issue-type::before { .issue-type::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -111,18 +109,12 @@ class HaAlert extends LitElement {
content: ""; content: "";
border-radius: 4px; border-radius: 4px;
} }
slot > .icon { .icon {
margin-right: 8px; z-index: 1;
width: 24px;
} }
.icon.no-title { .icon.no-title {
align-self: center; align-self: center;
} }
.issue-type.rtl > slot > .icon {
margin-right: 0px;
margin-left: 8px;
width: 24px;
}
.issue-type.rtl > .content { .issue-type.rtl > .content {
flex-direction: row-reverse; flex-direction: row-reverse;
text-align: right; text-align: right;
@ -135,6 +127,12 @@ class HaAlert extends LitElement {
} }
.main-content { .main-content {
overflow-wrap: anywhere; overflow-wrap: anywhere;
margin-left: 8px;
margin-right: 0;
}
.issue-type.rtl > .main-content {
margin-left: 0;
margin-right: 8px;
} }
.title { .title {
margin-top: 2px; margin-top: 2px;
@ -146,31 +144,31 @@ class HaAlert extends LitElement {
ha-icon-button { ha-icon-button {
--mdc-icon-button-size: 36px; --mdc-icon-button-size: 36px;
} }
.issue-type.info > slot > .icon { .issue-type.info > .icon {
color: var(--info-color); color: var(--info-color);
} }
.issue-type.info::before { .issue-type.info::after {
background-color: var(--info-color); background-color: var(--info-color);
} }
.issue-type.warning > slot > .icon { .issue-type.warning > .icon {
color: var(--warning-color); color: var(--warning-color);
} }
.issue-type.warning::before { .issue-type.warning::after {
background-color: var(--warning-color); background-color: var(--warning-color);
} }
.issue-type.error > slot > .icon { .issue-type.error > .icon {
color: var(--error-color); color: var(--error-color);
} }
.issue-type.error::before { .issue-type.error::after {
background-color: var(--error-color); background-color: var(--error-color);
} }
.issue-type.success > slot > .icon { .issue-type.success > .icon {
color: var(--success-color); color: var(--success-color);
} }
.issue-type.success::before { .issue-type.success::after {
background-color: var(--success-color); background-color: var(--success-color);
} }
`; `;

17
src/panels/config/dashboard/ha-config-updates.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import { mdiPackageVariant } from "@mdi/js"; import { mdiPackageUp } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item-body";
import { import {
@ -63,7 +63,7 @@ class HaConfigUpdates extends LitElement {
${update.update_type === "addon" ${update.update_type === "addon"
? update.icon ? update.icon
? html`<img src="/api/hassio${update.icon}" />` ? html`<img src="/api/hassio${update.icon}" />`
: html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>` : html`<ha-svg-icon .path=${mdiPackageUp}></ha-svg-icon>`
: html`<ha-logo-svg></ha-logo-svg>`} : html`<ha-logo-svg></ha-logo-svg>`}
</span> </span>
${this.hass.localize("ui.panel.config.updates.version_available", { ${this.hass.localize("ui.panel.config.updates.version_available", {
@ -98,15 +98,18 @@ class HaConfigUpdates extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.icon { .icon {
place-self: center; display: inline-flex;
height: 100%;
align-items: center;
} }
img, img,
ha-svg-icon, ha-svg-icon,
ha-logo-svg { ha-logo-svg {
width: var(--mdc-icon-size, 32px); --mdc-icon-size: 32px;
height: var(--mdc-icon-size, 32px); max-height: 32px;
padding-right: 12px; width: 32px;
display: block; }
ha-logo-svg {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
`; `;