Add sick animation

This commit is contained in:
Paulus Schoutsen 2025-07-11 13:30:33 +00:00
parent 517a0a6223
commit a8f6589ce0
2 changed files with 36 additions and 11 deletions

View File

@ -1,5 +1,5 @@
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit"; import { html, css, LitElement, nothing } from "lit";
import { mdiStarFourPoints } from "@mdi/js"; import { mdiStarFourPoints } from "@mdi/js";
import { customElement, state, property } from "lit/decorators"; import { customElement, state, property } from "lit/decorators";
@ -10,6 +10,7 @@ import type {
} from "../data/ai_task"; } from "../data/ai_task";
import { fetchAITaskPreferences, generateDataAITask } from "../data/ai_task"; import { fetchAITaskPreferences, generateDataAITask } from "../data/ai_task";
import "./chips/ha-assist-chip"; import "./chips/ha-assist-chip";
import "./ha-svg-icon";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { isComponentLoaded } from "../common/config/is_component_loaded"; import { isComponentLoaded } from "../common/config/is_component_loaded";
@ -57,7 +58,7 @@ export class HaSuggestWithAIButton extends LitElement {
label=${this.hass.localize( label=${this.hass.localize(
this._suggesting ? "ui.common.suggesting_ai" : "ui.common.suggest_ai" this._suggesting ? "ui.common.suggesting_ai" : "ui.common.suggest_ai"
)} )}
.active=${this._suggesting} ?active=${this._suggesting}
> >
<ha-svg-icon slot="icon" .path=${mdiStarFourPoints}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiStarFourPoints}></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
@ -77,6 +78,24 @@ export class HaSuggestWithAIButton extends LitElement {
this._suggesting = false; this._suggesting = false;
} }
} }
static styles = css`
ha-assist-chip[active] {
animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-primary-color), 0);
}
50% {
box-shadow: 0 0 8px 2px rgba(var(--rgb-primary-color), 0.6);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-primary-color), 0);
}
}
`;
} }
declare global { declare global {

View File

@ -1,13 +1,14 @@
import "@material/mwc-button"; import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { mdiClose, mdiPlus, mdiStarFourPoints } from "@mdi/js"; import { mdiClose, mdiPlus } from "@mdi/js";
import { dump } from "js-yaml"; import { dump } from "js-yaml";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-domain-icon"; import "../../../../components/ha-domain-icon";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textarea"; import "../../../../components/ha-textarea";
import "../../../../components/ha-textfield"; import "../../../../components/ha-textfield";
import "../../../../components/ha-labels-picker"; import "../../../../components/ha-labels-picker";
@ -460,13 +461,18 @@ ${dump(this._params.config)}
} }
} }
if (result.data.category) { if (result.data.category) {
// TODO search up category ID // We get back category name, convert it to ID
this._entryUpdates = { const categoryId = Object.entries(categories).find(
...this._entryUpdates, ([, name]) => name === result.data.category
category: result.data.category, )?.[0];
}; if (categoryId) {
if (!this._visibleOptionals.includes("category")) { this._entryUpdates = {
this._visibleOptionals = [...this._visibleOptionals, "category"]; ...this._entryUpdates,
category: categoryId,
};
if (!this._visibleOptionals.includes("category")) {
this._visibleOptionals = [...this._visibleOptionals, "category"];
}
} }
} }
if (result.data.labels?.length) { if (result.data.labels?.length) {