From a00f88bb3013faec1fa36226add6638002f37705 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 23 Dec 2024 11:13:45 +0100
Subject: [PATCH] Fix selection mode backups on mobile

---
 src/components/ha-fab.ts                      |   3 +-
 .../config/backup/ha-config-backup-backups.ts | 121 ++++--------------
 .../backup/ha-config-backup-overview.ts       |   4 -
 3 files changed, 25 insertions(+), 103 deletions(-)

diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index a477cea80fd2..fed289b2da9e 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -20,7 +20,8 @@ export class HaFab extends FabBase {
         direction: var(--direction);
       }
       :disabled {
-        opacity: var(--light-disabled-opacity);
+        --mdc-theme-secondary: var(--disabled-text-color);
+        pointer-events: none;
       }
     `,
     // safari workaround - must be explicit
diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts
index 04ee5413d0d5..dd203ef97905 100644
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -7,9 +7,8 @@ import {
   mdiUpload,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { storage } from "../../../common/decorators/storage";
@@ -346,39 +345,27 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           </ha-button-menu>
         </div>
 
-        ${this._selected.length
-          ? html`<div
-              class=${classMap({
-                "header-toolbar": this.narrow,
-                "table-header": !this.narrow,
-              })}
-              slot="header"
-            >
-              <p class="selected-txt">
-                ${this._selected.length} backups selected
-              </p>
-              <div class="header-btns">
-                ${!this.narrow
-                  ? html`
-                      <ha-button @click=${this._deleteSelected} class="warning">
-                        Delete selected
-                      </ha-button>
-                    `
-                  : html`
-                      <ha-icon-button
-                        .label=${"Delete selected"}
-                        .path=${mdiDelete}
-                        id="delete-btn"
-                        class="warning"
-                        @click=${this._deleteSelected}
-                      ></ha-icon-button>
-                      <simple-tooltip animation-delay="0" for="delete-btn">
-                        Delete selected
-                      </simple-tooltip>
-                    `}
-              </div>
-            </div> `
-          : nothing}
+        <div slot="selection-bar">
+          ${!this.narrow
+            ? html`
+                <ha-button @click=${this._deleteSelected} class="warning">
+                  Delete selected
+                </ha-button>
+              `
+            : html`
+                <ha-icon-button
+                  .label=${"Delete selected"}
+                  .path=${mdiDelete}
+                  id="delete-btn"
+                  class="warning"
+                  @click=${this._deleteSelected}
+                ></ha-icon-button>
+                <simple-tooltip animation-delay="0" for="delete-btn">
+                  Delete selected
+                </simple-tooltip>
+              `}
+        </div>
+
         <ha-filter-states
           .hass=${this.hass}
           label="Type"
@@ -533,69 +520,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        .header {
-          padding: 16px 16px 0 16px;
-          display: flex;
-          flex-direction: row;
-          gap: 16px;
-          background-color: var(--primary-background-color);
-        }
-        @media (max-width: 1000px) {
-          .header {
-            flex-direction: column;
-          }
-        }
-        .header > * {
-          flex: 1;
-          min-width: 0;
-        }
-
-        ha-fab[disabled] {
-          --mdc-theme-secondary: var(--disabled-text-color) !important;
-        }
-
-        .table-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          height: var(--header-height);
-          box-sizing: border-box;
-        }
-        .header-toolbar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          color: var(--secondary-text-color);
-          position: relative;
-          top: -4px;
-        }
-        .selected-txt {
-          font-weight: bold;
-          padding-left: 16px;
-          padding-inline-start: 16px;
-          padding-inline-end: initial;
-          color: var(--primary-text-color);
-        }
-        .table-header .selected-txt {
-          margin-top: 20px;
-        }
-        .header-toolbar .selected-txt {
-          font-size: 16px;
-        }
-        .header-toolbar .header-btns {
-          margin-right: -12px;
-          margin-inline-end: -12px;
-          margin-inline-start: initial;
-        }
-        .header-btns > ha-button,
-        .header-btns > ha-icon-button {
-          margin: 8px;
-        }
-      `,
-    ];
+    return haStyle;
   }
 }
 
diff --git a/src/panels/config/backup/ha-config-backup-overview.ts b/src/panels/config/backup/ha-config-backup-overview.ts
index 45cdf544853f..b7621ab9f7f1 100644
--- a/src/panels/config/backup/ha-config-backup-overview.ts
+++ b/src/panels/config/backup/ha-config-backup-overview.ts
@@ -258,10 +258,6 @@ class HaConfigBackupOverview extends LitElement {
           padding-left: 0;
           padding-right: 0;
         }
-        ha-fab[disabled] {
-          --mdc-theme-secondary: var(--disabled-text-color) !important;
-          pointer-events: none;
-        }
       `,
     ];
   }