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

Improve styling of ZHA manage device dialog (#27556)

Browse Source
This commit is contained in:
Jan-Philipp Benecke
2025-10-18 08:26:58 +02:00
committed by GitHub
parent 904a083f61
commit 80b92b9813
6 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/buttons/ha-call-service-button.ts
View File

@@ -6,6 +6,7 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import "./ha-progress-button";
import type { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
import type { Appearance } from "../ha-button";
@customElement("ha-call-service-button")
class HaCallServiceButton extends LitElement {
@@ -25,12 +26,14 @@ class HaCallServiceButton extends LitElement {
@property() public confirmation?;
@property() public appearance: Appearance = "plain";
public render(): TemplateResult {
return html`
<ha-progress-button
.progress=${this.progress}
.disabled=${this.disabled}
appearance="plain"
.appearance=${this.appearance}
@click=${this._buttonTapped}
tabindex="0"
>

3
src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
View File

@@ -220,6 +220,9 @@ class DialogZHAManageZigbeeDevice extends LitElement {
.content {
outline: none;
display: flex;
flex-direction: column;
gap: var(--ha-space-2);
}
@media all and (min-width: 600px) and (min-height: 501px) {

28
src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
View File

@@ -117,15 +117,6 @@ export class ZHAClusterAttributes extends LitElement {
></ha-textfield>
</div>
<div class="card-actions">
<ha-progress-button
@click=${this._onGetZigbeeAttributeClick}
.progress=${this._readingAttribute}
.disabled=${this._readingAttribute}
>
${this.hass!.localize(
"ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
)}
</ha-progress-button>
<ha-call-service-button
.hass=${this.hass}
domain="zha"
@@ -136,6 +127,15 @@ export class ZHAClusterAttributes extends LitElement {
"ui.panel.config.zha.cluster_attributes.write_zigbee_attribute"
)}
</ha-call-service-button>
<ha-progress-button
@click=${this._onGetZigbeeAttributeClick}
.progress=${this._readingAttribute}
.disabled=${this._readingAttribute}
>
${this.hass!.localize(
"ui.panel.config.zha.cluster_attributes.read_zigbee_attribute"
)}
</ha-progress-button>
</div>
`;
}
@@ -230,6 +230,10 @@ export class ZHAClusterAttributes extends LitElement {
return [
haStyle,
css`
ha-card {
border: none;
}
ha-select {
margin-top: 16px;
}
@@ -263,6 +267,12 @@ export class ZHAClusterAttributes extends LitElement {
.header {
flex-grow: 1;
}
.card-actions {
display: flex;
justify-content: flex-end;
gap: var(--ha-space-1);
}
`,
];
}

10
src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
View File

@@ -108,6 +108,7 @@ export class ZHAClusterCommands extends LitElement {
service="issue_zigbee_cluster_command"
.data=${this._issueClusterCommandServiceData}
.disabled=${!this._canIssueCommand}
appearance="accent"
>
${this.hass!.localize(
"ui.panel.config.zha.cluster_commands.issue_zigbee_command"
@@ -187,6 +188,10 @@ export class ZHAClusterCommands extends LitElement {
return [
haStyle,
css`
ha-card {
border: none;
}
ha-select {
margin-top: 16px;
}
@@ -239,6 +244,11 @@ export class ZHAClusterCommands extends LitElement {
padding-inline-start: initial;
color: var(--primary-color);
}
.card-actions {
display: flex;
justify-content: flex-end;
}
`,
];
}

25
src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
View File

@@ -60,6 +60,15 @@ export class ZHADeviceBindingControl extends LitElement {
</ha-select>
</div>
<div class="card-actions">
<ha-progress-button
@click=${this._onUnbindDevicesClick}
.disabled=${!(this._deviceToBind && this.device) ||
this._bindingOperationInProgress}
variant="danger"
appearance="plain"
>
${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
</ha-progress-button>
<ha-progress-button
@click=${this._onBindDevicesClick}
.disabled=${!(this._deviceToBind && this.device) ||
@@ -67,13 +76,6 @@ export class ZHADeviceBindingControl extends LitElement {
>
${this.hass!.localize("ui.panel.config.zha.device_binding.bind")}
</ha-progress-button>
<ha-progress-button
@click=${this._onUnbindDevicesClick}
.disabled=${!(this._deviceToBind && this.device) ||
this._bindingOperationInProgress}
>
${this.hass!.localize("ui.panel.config.zha.device_binding.unbind")}
</ha-progress-button>
</div>
</ha-card>
`;
@@ -133,6 +135,10 @@ export class ZHADeviceBindingControl extends LitElement {
width: 100%;
}
.content {
padding-top: var(--ha-space-2);
}
.command-picker {
align-items: center;
padding-left: 28px;
@@ -145,6 +151,11 @@ export class ZHADeviceBindingControl extends LitElement {
.header {
flex-grow: 1;
}
.card-actions {
display: flex;
justify-content: flex-end;
gap: var(--ha-space-1);
}
`,
];
}

29
src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
View File

@@ -85,6 +85,16 @@ export class ZHAGroupBindingControl extends LitElement {
></zha-clusters-data-table>
</div>
<div class="card-actions">
<ha-progress-button
@click=${this._onUnbindGroupClick}
.disabled=${!this._canBind || this._bindingOperationInProgress}
variant="danger"
appearance="plain"
>
${this.hass!.localize(
"ui.panel.config.zha.group_binding.unbind_button_label"
)}
</ha-progress-button>
<ha-progress-button
@click=${this._onBindGroupClick}
.disabled=${!this._canBind || this._bindingOperationInProgress}
@@ -93,15 +103,6 @@ export class ZHAGroupBindingControl extends LitElement {
"ui.panel.config.zha.group_binding.bind_button_label"
)}
</ha-progress-button>
<ha-progress-button
@click=${this._onUnbindGroupClick}
.disabled=${!this._canBind || this._bindingOperationInProgress}
>
${this.hass!.localize(
"ui.panel.config.zha.group_binding.unbind_button_label"
)}
</ha-progress-button>
</div>
</ha-card>
</ha-config-section>
@@ -205,6 +206,10 @@ export class ZHAGroupBindingControl extends LitElement {
width: 100%;
}
.content {
padding-top: var(--ha-space-2);
}
.command-picker {
align-items: center;
padding-left: 28px;
@@ -225,6 +230,12 @@ export class ZHAGroupBindingControl extends LitElement {
.sectionHeader {
flex-grow: 1;
}
.card-actions {
display: flex;
justify-content: flex-end;
gap: var(--ha-space-1);
}
`,
];
}