Some data table fixes (#20286)

home-assistant · Mar 30, 2024 · 7e3e224 · 7e3e224
1 parent 503a797
commit 7e3e224
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 5 deletions.
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
@@ -142,9 +142,12 @@ class HassSubpage extends LitElement {
           right: calc(16px + env(safe-area-inset-right));
           inset-inline-end: calc(16px + env(safe-area-inset-right));
           inset-inline-start: initial;
-
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -8,7 +8,7 @@ import {
   mdiArrowDown,
   mdiArrowUp,
   mdiClose,
-  mdiFilterRemove,
+  mdiFilterVariantRemove,
   mdiFilterVariant,
   mdiFormatListChecks,
   mdiMenuDown,
@@ -227,6 +227,9 @@ export class HaTabsSubpageDataTable extends LitElement {
             class="has-dropdown select-mode-chip"
             .active=${this._selectMode}
             @click=${this._enableSelectMode}
+            .label=${localize(
+              "ui.components.subpage-data-table.enter_selection_mode"
+            )}
           >
             <ha-svg-icon slot="icon" .path=${mdiFormatListChecks}></ha-svg-icon>
           </ha-assist-chip>`
@@ -294,6 +297,9 @@ export class HaTabsSubpageDataTable extends LitElement {
                 <ha-icon-button
                   .path=${mdiClose}
                   @click=${this._disableSelectMode}
+                  .label=${localize(
+                    "ui.components.subpage-data-table.exit_selection_mode"
+                  )}
                 ></ha-icon-button>
                 <p>
                   ${localize("ui.components.subpage-data-table.selected", {
@@ -318,6 +324,9 @@ export class HaTabsSubpageDataTable extends LitElement {
                     slot="navigationIcon"
                     .path=${mdiClose}
                     @click=${this._toggleFilters}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.close_filter"
+                    )}
                   ></ha-icon-button>
                   <span slot="title"
                     >${localize(
@@ -326,7 +335,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                   >
                   <ha-icon-button
                     slot="actionItems"
-                    .path=${mdiFilterRemove}
+                    @click=${this._clearFilters}
+                    .path=${mdiFilterVariantRemove}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.clear_filter"
+                    )}
                   ></ha-icon-button>
                 </ha-dialog-header>
                 <div class="filter-dialog-content">
@@ -347,8 +360,11 @@ export class HaTabsSubpageDataTable extends LitElement {
                     ></ha-svg-icon>
                   </ha-assist-chip>
                   <ha-icon-button
-                    .path=${mdiFilterRemove}
+                    .path=${mdiFilterVariantRemove}
                     @click=${this._clearFilters}
+                    .label=${localize(
+                      "ui.components.subpage-data-table.clear_filter"
+                    )}
                   ></ha-icon-button>
                 </div>
                 <div class="pane-content">

diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
@@ -344,6 +344,10 @@ class HassTabsSubpage extends LitElement {
           inset-inline-start: initial;
           bottom: calc(16px + env(safe-area-inset-bottom));
           z-index: 1;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end;
+          gap: 8px;
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + env(safe-area-inset-bottom));

diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -424,7 +424,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
       }
       .floor {
         --primary-color: var(--secondary-text-color);
-        margin-inline-end: 8px;
       }
       .warning {
         color: var(--error-color);

diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
@@ -1,6 +1,7 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
+  mdiCog,
   mdiContentDuplicate,
   mdiDelete,
   mdiHelpCircle,
@@ -287,6 +288,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                 ),
                 action: () => this._showInfo(automation),
               },
+              {
+                path: mdiCog,
+                label: this.hass.localize(
+                  "ui.panel.config.automation.picker.show_settings"
+                ),
+                action: () => this._showSettings(automation),
+              },
               {
                 path: mdiTag,
                 label: this.hass.localize(
@@ -637,6 +645,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   }
 
+  private _showSettings(automation: any) {
+    fireEvent(this, "hass-more-info", {
+      entityId: automation.entity_id,
+      view: "settings",
+    });
+  }
+
   private _runActions(automation: any) {
     triggerAutomationActions(this.hass, automation.entity_id);
   }

diff --git a/src/panels/config/labels/dialog-label-detail.ts b/src/panels/config/labels/dialog-label-detail.ts
@@ -49,11 +49,19 @@ class DialogLabelDetail
       this._icon = "";
       this._color = "";
     }
+    document.body.addEventListener("keydown", this._handleKeyPress);
   }
 
+  private _handleKeyPress = (ev: KeyboardEvent) => {
+    if (ev.key === "Escape") {
+      ev.stopPropagation();
+    }
+  };
+
   public closeDialog(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
+    document.body.removeEventListener("keydown", this._handleKeyPress);
   }
 
   protected render() {

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -501,6 +501,10 @@
       },
       "subpage-data-table": {
         "filters": "Filters",
+        "clear_filter": "Clear filter",
+        "close_filter": "Close filters",
+        "exit_selection_mode": "Exit selection mode",
+        "enter_selection_mode": "Enter selection mode",
         "sort_by": "Sort by {sortColumn}",
         "group_by": "Group by {groupColumn}",
         "dont_group_by": "Don't group",
@@ -2669,6 +2673,7 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
+            "show_settings": "Show settings",
             "delete": "[%key:ui::common::delete%]",
             "delete_confirm_title": "Delete automation?",
             "delete_confirm_text": "{name} will be permanently deleted.",