jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 12:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix assist dropdown button

Browse Source
This commit is contained in:
Wendelin 2025-05-26 17:10:26 +02:00
parent f41dc0a344
commit d2d843f464
No known key found for this signature in database
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ha-button.ts
View File

@ -26,7 +26,7 @@ export type Appearance = "accent" | "filled" | "plain";
* @csspart spinner - The spinner that shows when the button is in the loading state.
*
* @cssprop --ha-button-font-family - Font family for the button text.
* @cssprop --ha-font-weight-medium - Medium font weight for button text.
* @cssprop --ha-button-font-weight - buttons font weight.
* @cssprop --ha-button-border-width - Border width for the button.
* @cssprop --ha-button-theme-color - Main color for the button.
* @cssprop --ha-button-theme-darker-color - Darker variant of the main color.
@ -35,6 +35,8 @@ export type Appearance = "accent" | "filled" | "plain";
* @cssprop --ha-button-border-radius - Border radius for the button.
* @cssprop --ha-button-text-color - Text color for the button.
* @cssprop --ha-button-font-size - Font weight for the button text.
* @cssprop --ha-button-padding-inline-start - padding for the button text on the left side.
* @cssprop --ha-button-padding-inline-end - padding for the button text on the right side.
*
* @attr {("small"|"medium")} size - Sets the button size.
* @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
@ -95,7 +97,7 @@ export class HaButton extends Button {
--ha-button-theme-color: #545868;
--ha-button-theme-darker-color: #373a44;
--ha-button-theme-active-color: #1c1d22;
--ha-button-theme-lighter-color: #e4e5e9;
--ha-button-theme-lighter-color: #767986;
}
:host([variant="warning"]) {
@ -180,20 +182,30 @@ export class HaButton extends Button {
color: var(--white-color);
}
.button.button--medium .button__label {
padding-inline-start: var(--ha-button-padding-inline-start, 16px);
padding-inline-end: var(--ha-button-padding-inline-start, 16px);
}
.button.button--small .button__label {
padding-inline-start: var(--ha-button-padding-inline-start, 12px);
padding-inline-end: var(--ha-button-padding-inline-start, 12px);
}
/* spacing */
.button--has-prefix.button--medium .button__label {
padding-inline-start: 8px;
padding-inline-start: var(--ha-button-padding-inline-start, 8px);
}
.button--has-prefix.button--small .button__label {
padding-inline-start: 4px;
padding-inline-start: var(--ha-button-padding-inline-start, 4px);
}
.button--has-suffix.button--medium .button__label,
.button--caret.button--medium .button__label {
padding-inline-end: 8px;
padding-inline-end: var(--ha-button-padding-inline-end, 8px);
}
.button--has-suffix.button--small .button__label,
.button--caret.button--small .button__label {
padding-inline-end: 4px;
padding-inline-end: var(--ha-button-padding-inline-end, 4px);
}
/*

38
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -10,14 +10,14 @@ import { customElement, property, state } from "lit/decorators";
import { storage } from "../../common/decorators/storage";
import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import "../../components/ha-alert";
import "../../components/ha-assist-chat";
import "../../components/ha-button";
import "../../components/ha-button-menu";
import "../../components/ha-dialog";
import "../../components/ha-dialog-header";
import "../../components/ha-icon-button";
import "../../components/ha-list-item";
import "../../components/ha-alert";
import "../../components/ha-assist-chat";
import "../../components/ha-spinner";
import type { AssistPipeline } from "../../data/assist_pipeline";
import {
@ -110,10 +110,15 @@ export class HaVoiceCommandDialog extends LitElement {
activatable
fixed
>
<ha-button slot="trigger">
<ha-button
slot="trigger"
appearance="plain"
variant="neutral"
size="small"
>
${this._pipeline?.name}
<ha-svg-icon
slot="trailingIcon"
slot="suffix"
.path=${mdiChevronDown}
></ha-svg-icon>
</ha-button>
@ -269,19 +274,18 @@ export class HaVoiceCommandDialog extends LitElement {
margin-inline-start: -8px;
}
ha-button-menu ha-button {
--mdc-theme-primary: var(--secondary-text-color);
--mdc-typography-button-text-transform: none;
--mdc-typography-button-font-size: unset;
--mdc-typography-button-font-weight: var(--ha-font-weight-normal);
--mdc-typography-button-letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em
);
--mdc-typography-button-line-height: var(
--mdc-typography-headline6-line-height,
var(--ha-line-height-expanded)
);
--button-height: auto;
--ha-button-theme-color: transparent;
--ha-button-text-color: var(--primary-text-color);
--ha-button-padding-inline-start: 8px;
--ha-button-font-weight: var(--ha-font-weight-normal);
--ha-button-border-radius: 4px;
--ha-button-theme-lighter-color: rgba(0, 0, 0, 0.1);
--ha-button-height: 24px;
}
@media (prefers-color-scheme: dark) {
ha-button-menu ha-button {
--ha-button-theme-lighter-color: rgba(255, 255, 255, 0.1);
}
}
ha-button-menu ha-button ha-svg-icon {
height: 28px;