fix layout issues in sensor group dialogs

nielsfaber · Mar 6, 2024 · f94be68 · f94be68
1 parent 461e232
commit f94be68
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 36 deletions.
diff --git a/custom_components/alarmo/frontend/src/dialogs/create-sensor-group-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/create-sensor-group-dialog.ts
@@ -62,7 +62,21 @@ export class CreateSensorGroupDialog extends SubscribeMixin(LitElement) {
   render() {
     if (!this._params) return html``;
     return html`
-      <ha-dialog open @closed=${this.closeDialog} @close-dialog=${this.closeDialog} .heading=${this.renderHeader()}>
+      <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
+      <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="close" .path=${mdiClose}>
+          </ha-icon-button>
+          <span slot="title">
+            ${this.data.group_id
+            ? localize(
+                'panels.sensors.dialogs.edit_group.title',
+                this.hass.language,
+                '{name}',
+                this.sensorGroups[this.data.group_id!].name
+              )
+            : localize('panels.sensors.dialogs.create_group.title', this.hass.language)}
+          </span>
+        </ha-dialog-header>
         <div class="wrapper">
           <settings-row dialog>
             <span slot="heading">
@@ -122,27 +136,6 @@ export class CreateSensorGroupDialog extends SubscribeMixin(LitElement) {
     `;
   }
 
-  renderHeader() {
-    return html`
-      <span class="header_title">
-        ${this.data.group_id
-          ? localize(
-              'panels.sensors.dialogs.edit_group.title',
-              this.hass.language,
-              '{name}',
-              this.sensorGroups[this.data.group_id!].name
-            )
-          : localize('panels.sensors.dialogs.create_group.title', this.hass.language)}
-      </span>
-      <ha-icon-button
-        .label=${this.hass.localize('ui.dialogs.generic.close')}
-        .path=${mdiClose}
-        dialogAction="close"
-        class="header_button"
-      ></ha-icon-button>
-    `;
-  }
-
   renderSensorOptions() {
     const sensors = Object.keys(this.sensors)
       .filter(e => !isDefined(this.sensors[e].group) || this.sensors[e].group === this.data.group_id)

diff --git a/custom_components/alarmo/frontend/src/dialogs/manage-sensor-groups-dialog.ts b/custom_components/alarmo/frontend/src/dialogs/manage-sensor-groups-dialog.ts
@@ -49,7 +49,12 @@ export class ManageSensorGroupsDialog extends SubscribeMixin(LitElement) {
   render() {
     if (!this._params) return html``;
     return html`
-      <ha-dialog open .heading=${this.renderHeader()} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
+      <ha-dialog open .heading=${true} @closed=${this.closeDialog} @close-dialog=${this.closeDialog}>
+        <ha-dialog-header slot="heading">
+          <ha-icon-button slot="navigationIcon" dialogAction="close" .path=${mdiClose}>
+          </ha-icon-button>
+          <span slot="title">${localize('panels.sensors.dialogs.manage_groups.title', this.hass.language)}</span>
+        </ha-dialog-header>
         <div class="wrapper">
           <div class="description">
             ${localize('panels.sensors.dialogs.manage_groups.description', this.hass.language)}
@@ -68,19 +73,6 @@ export class ManageSensorGroupsDialog extends SubscribeMixin(LitElement) {
     `;
   }
 
-  renderHeader() {
-    return html`
-      <span class="header_title">${localize('panels.sensors.dialogs.manage_groups.title', this.hass.language)}</span>
-      <ha-icon-button
-        .label=${this.hass.localize('ui.dialogs.generic.close')}
-        .path=${mdiClose}
-        dialogAction="close"
-        class="header_button"
-      >
-      </ha-icon-button>
-    `;
-  }
-
   renderGroup(item: SensorGroup) {
     return html`
     <ha-card