Improve add cards dialog user experience

home-assistant · Jan 17, 2025 · da9cfa2 · da9cfa2
1 parent 8efaf2b
commit da9cfa2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -33,6 +33,7 @@ import type { LovelaceCard } from "../../types";
 import { getCardStubConfig } from "../get-card-stub-config";
 import { coreCards } from "../lovelace-cards";
 import type { Card, CardPickTarget } from "../types";
+import { haStyleScrollbar } from "../../../../resources/styles";
 
 interface CardElement {
   card: Card;
@@ -63,8 +64,6 @@ export class HuiCardPicker extends LitElement {
 
   @state() private _width?: number;
 
-  @state() private _height?: number;
-
   private _unusedEntities?: string[];
 
   private _usedEntities?: string[];
@@ -149,10 +148,10 @@ export class HuiCardPicker extends LitElement {
         )}
       ></search-input>
       <div
+        class="ha-scrollbar"
         id="content"
         style=${styleMap({
           width: this._width ? `${this._width}px` : "auto",
-          height: this._height ? `${this._height}px` : "auto",
         })}
       >
         <div class="cards-container">
@@ -352,8 +351,7 @@ export class HuiCardPicker extends LitElement {
     if (!value) {
       // Reset when we no longer filter
       this._width = undefined;
-      this._height = undefined;
-    } else if (!this._width || !this._height) {
+    } else if (!this._width) {
       // Save height and width so the dialog doesn't jump while searching
       const div = this.shadowRoot!.getElementById("content");
       if (div && !this._width) {
@@ -362,12 +360,6 @@ export class HuiCardPicker extends LitElement {
           this._width = width;
         }
       }
-      if (div && !this._height) {
-        const height = div.clientHeight;
-        if (height) {
-          this._height = height;
-        }
-      }
     }
 
     this._filter = value;
@@ -450,11 +442,7 @@ export class HuiCardPicker extends LitElement {
           .config=${cardConfig}
         ></div>
         <div class="card-header">
-          ${customCard
-            ? `${this.hass!.localize(
-                "ui.panel.lovelace.editor.cardpicker.custom_card"
-              )}: ${customCard.name || customCard.type}`
-            : name}
+          ${customCard ? customCard.name || customCard.type : name}
         </div>
         <div
           class="preview ${classMap({
@@ -470,12 +458,14 @@ export class HuiCardPicker extends LitElement {
                 )
               : description}
         </div>
+        <ha-ripple></ha-ripple>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
     return [
+      haStyleScrollbar,
       css`
         search-input {
           display: block;
@@ -486,9 +476,16 @@ export class HuiCardPicker extends LitElement {
         .cards-container-header {
           font-size: 16px;
           font-weight: 500;
-          padding: 12px 8px 4px 8px;
+          padding: 12px 8px;
           margin: 0;
           grid-column: 1 / -1;
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: var(
+              --ha-dialog-surface-background,
+              var(--mdc-theme-surface, #fff)
+          );
         }
 
         .cards-container {
@@ -522,11 +519,6 @@ export class HuiCardPicker extends LitElement {
           padding: 12px 16px;
           display: block;
           text-align: center;
-          background: var(
-            --ha-card-background,
-            var(--card-background-color, white)
-          );
-          border-bottom: 1px solid var(--divider-color);
         }
 
         .preview {
@@ -539,7 +531,6 @@ export class HuiCardPicker extends LitElement {
         }
 
         .preview > :first-child {
-          zoom: 0.6;
           display: block;
           width: 100%;
         }
@@ -583,6 +574,13 @@ export class HuiCardPicker extends LitElement {
         .icon.custom {
           background: var(--warning-color);
         }
+        #content {
+          height: calc(100vh - 290px);
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          #content {
+            height: calc(100vh - 345px);
+          }
       `,
     ];
   }

diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@@ -219,12 +219,12 @@ export class HuiCreateDialogCard
         }
         hui-entity-picker-table {
           display: block;
-          height: calc(100vh - 198px);
+          height: calc(100vh - 215px);
           --mdc-shape-small: 0;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           hui-entity-picker-table {
-            height: calc(100vh - 158px);
+            height: calc(100vh - 285px);
           }
         }
       `,

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -6420,7 +6420,7 @@
           "edit_card": {
             "header": "Card configuration",
             "typed_header": "{type} Card configuration",
-            "pick_card": "Which card would you like to add?",
+            "pick_card": "Add to dashboard",
             "pick_card_title": "Which card would you like to add to {name}",
             "toggle_editor": "Toggle editor",
             "unsaved_changes": "You have unsaved changes",