jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix integration card design gallery (#17167)

Browse Source
This commit is contained in:
Bram Kragten 2023-07-05 15:22:22 +02:00 committed by GitHub
parent dcae8b9790
commit 3390dda7be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gallery/src/pages/misc/integration-card.ts
View File

@ -265,6 +265,8 @@ export class DemoIntegrationCard extends LitElement {
></ha-config-flow-card> ></ha-config-flow-card>
` `
)} )}
</div>
<div class="container">
${configEntries.map( ${configEntries.map(
(info) => html` (info) => html`
<ha-integration-card <ha-integration-card
@ -338,10 +340,10 @@ export class DemoIntegrationCard extends LitElement {
return css` return css`
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 16px 16px; grid-gap: 8px 8px;
padding: 8px 16px 16px; padding: 8px 16px 16px;
margin-bottom: 64px; margin-bottom: 16px;
} }
.container > * { .container > * {

23
src/panels/config/integrations/ha-config-flow-card.ts
View File

@ -16,6 +16,9 @@ import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url"; import { documentationUrl } from "../../../util/documentation-url";
import type { DataEntryFlowProgressExtended } from "./ha-config-integrations"; import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
import "./ha-integration-action-card"; import "./ha-integration-action-card";
import "../../../components/ha-button-menu";
import "../../../components/ha-button";
import "../../../components/ha-list-item";
@customElement("ha-config-flow-card") @customElement("ha-config-flow-card")
export class HaConfigFlowCard extends LitElement { export class HaConfigFlowCard extends LitElement {
@ -37,7 +40,7 @@ export class HaConfigFlowCard extends LitElement {
.domain=${this.flow.handler} .domain=${this.flow.handler}
.label=${this.flow.localized_title} .label=${this.flow.localized_title}
> >
<mwc-button <ha-button
unelevated unelevated
@click=${this._continueFlow} @click=${this._continueFlow}
.label=${this.hass.localize( .label=${this.hass.localize(
@ -45,15 +48,15 @@ export class HaConfigFlowCard extends LitElement {
attention ? "reconfigure" : "configure" attention ? "reconfigure" : "configure"
}` }`
)} )}
></mwc-button> ></ha-button>
${DISCOVERY_SOURCES.includes(this.flow.context.source) && ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
this.flow.context.unique_id this.flow.context.unique_id
? html`<mwc-button ? html`<ha-button
@click=${this._ignoreFlow} @click=${this._ignoreFlow}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.integrations.ignore.ignore" "ui.panel.config.integrations.ignore.ignore"
)} )}
></mwc-button>` ></ha-button>`
: ""} : ""}
${this.flow.context.configuration_url || this.manifest ${this.flow.context.configuration_url || this.manifest
? html`<ha-button-menu slot="header-button"> ? html`<ha-button-menu slot="header-button">
@ -75,7 +78,7 @@ export class HaConfigFlowCard extends LitElement {
? "_self" ? "_self"
: "_blank"} : "_blank"}
> >
<mwc-list-item graphic="icon" hasMeta> <ha-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.open_configuration_url" "ui.panel.config.integrations.config_entry.open_configuration_url"
)} )}
@ -84,7 +87,7 @@ export class HaConfigFlowCard extends LitElement {
slot="meta" slot="meta"
.path=${mdiOpenInNew} .path=${mdiOpenInNew}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</a>` </a>`
: ""} : ""}
${this.manifest ${this.manifest
@ -98,7 +101,7 @@ export class HaConfigFlowCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item graphic="icon" hasMeta> <ha-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.documentation" "ui.panel.config.integrations.config_entry.documentation"
)} )}
@ -110,7 +113,7 @@ export class HaConfigFlowCard extends LitElement {
slot="meta" slot="meta"
.path=${mdiOpenInNew} .path=${mdiOpenInNew}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</a>` </a>`
: ""} : ""}
</ha-button-menu>` </ha-button-menu>`
@ -171,6 +174,10 @@ export class HaConfigFlowCard extends LitElement {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.attention {
--mdc-theme-primary: var(--error-color);
--ha-card-border-color: var(--error-color);
}
`; `;
} }

7
src/panels/config/integrations/ha-ignored-config-entry-card.ts
View File

@ -7,6 +7,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import type { ConfigEntryExtended } from "./ha-config-integrations"; import type { ConfigEntryExtended } from "./ha-config-integrations";
import "./ha-integration-action-card"; import "./ha-integration-action-card";
import "../../../components/ha-button";
@customElement("ha-ignored-config-entry-card") @customElement("ha-ignored-config-entry-card")
export class HaIgnoredConfigEntryCard extends LitElement { export class HaIgnoredConfigEntryCard extends LitElement {
@ -32,12 +33,12 @@ export class HaIgnoredConfigEntryCard extends LitElement {
this.entry.localized_domain_name this.entry.localized_domain_name
: this.entry.title} : this.entry.title}
> >
<mwc-button <ha-button
@click=${this._removeIgnoredIntegration} @click=${this._removeIgnoredIntegration}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.integrations.ignore.stop_ignore" "ui.panel.config.integrations.ignore.stop_ignore"
)} )}
></mwc-button> ></ha-button>
</ha-integration-action-card> </ha-integration-action-card>
`; `;
} }
@ -76,7 +77,7 @@ export class HaIgnoredConfigEntryCard extends LitElement {
--state-color: var(--divider-color, #e0e0e0); --state-color: var(--divider-color, #e0e0e0);
} }
mwc-button { ha-button {
--mdc-theme-primary: var(--primary-color); --mdc-theme-primary: var(--primary-color);
} }
`; `;

3
src/panels/config/integrations/ha-integration-card.ts
View File

@ -1,6 +1,4 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button";
import "@material/mwc-list";
import "@material/mwc-ripple"; import "@material/mwc-ripple";
import type { Ripple } from "@material/mwc-ripple"; import type { Ripple } from "@material/mwc-ripple";
import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers"; import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
@ -24,6 +22,7 @@ import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { computeRTL } from "../../../common/util/compute_rtl"; import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import { ConfigEntry, ERROR_STATES } from "../../../data/config_entries"; import { ConfigEntry, ERROR_STATES } from "../../../data/config_entries";
import type { DeviceRegistryEntry } from "../../../data/device_registry"; import type { DeviceRegistryEntry } from "../../../data/device_registry";