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

Add ellipsis to ha-button label (#27391)

Browse Source
This commit is contained in:
Wendelin
2025-10-07 15:03:54 +02:00
committed by GitHub
parent ab172abe02
commit 23deab253b
2 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -223,6 +223,12 @@ export class HaButton extends Button {
.button.has-end { .button.has-end {
padding-inline-end: 8px; padding-inline-end: 8px;
} }
.label {
overflow: hidden;
text-overflow: ellipsis;
padding: var(--ha-space-1) 0;
}
`, `,
]; ];
} }

70
src/panels/config/devices/ha-config-device-page.ts
View File

@@ -770,43 +770,39 @@ export class HaConfigDevicePage extends LitElement {
${firstDeviceAction || actions.length ${firstDeviceAction || actions.length
? html` ? html`
<div class="card-actions" slot="actions"> <div class="card-actions" slot="actions">
<div> <ha-button
<ha-button href=${ifDefined(firstDeviceAction!.href)}
href=${ifDefined(firstDeviceAction!.href)} rel=${ifDefined(
rel=${ifDefined( firstDeviceAction!.target ? "noreferrer" : undefined
firstDeviceAction!.target ? "noreferrer" : undefined )}
)} appearance="plain"
appearance="plain" target=${ifDefined(firstDeviceAction!.target)}
target=${ifDefined(firstDeviceAction!.target)} class=${ifDefined(firstDeviceAction!.classes)}
class=${ifDefined(firstDeviceAction!.classes)} .variant=${firstDeviceAction!.classes?.includes("warning")
.variant=${firstDeviceAction!.classes?.includes( ? "danger"
"warning" : "brand"}
) .action=${firstDeviceAction!.action}
? "danger" @click=${this._deviceActionClicked}
: "brand"} >
.action=${firstDeviceAction!.action} ${firstDeviceAction!.label}
@click=${this._deviceActionClicked} ${firstDeviceAction!.icon
> ? html`
${firstDeviceAction!.label} <ha-svg-icon
${firstDeviceAction!.icon class=${ifDefined(firstDeviceAction!.classes)}
? html` .path=${firstDeviceAction!.icon}
<ha-svg-icon slot="start"
class=${ifDefined(firstDeviceAction!.classes)} ></ha-svg-icon>
.path=${firstDeviceAction!.icon} `
slot="start" : nothing}
></ha-svg-icon> ${firstDeviceAction!.trailingIcon
` ? html`
: nothing} <ha-svg-icon
${firstDeviceAction!.trailingIcon .path=${firstDeviceAction!.trailingIcon}
? html` slot="end"
<ha-svg-icon ></ha-svg-icon>
.path=${firstDeviceAction!.trailingIcon} `
slot="end" : nothing}
></ha-svg-icon> </ha-button>
`
: nothing}
</ha-button>
</div>
${actions.length ${actions.length
? html` ? html`