Tweak card create dialog a bit (#6787)

src/components/ha-header-bar.ts

@@ -1,6 +1,6 @@
-import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
 // @ts-ignore
 import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+import { css, customElement, html, LitElement, unsafeCSS } from "lit-element";
 
 @customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -11,6 +11,7 @@ import {
   LitElement,
   property,
 } from "lit-element";
+import { cache } from "lit-html/directives/cache";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -147,47 +148,52 @@ export class MoreInfoDialog extends LitElement {
             : ""}
         </div>
         <div class="content">
-          ${this._currTabIndex === 0
+          ${cache(
-            ? html`
+            this._currTabIndex === 0
-                ${DOMAINS_NO_INFO.includes(domain)
+              ? html`
-                  ? ""
+                  ${DOMAINS_NO_INFO.includes(domain)
-                  : html`
+                    ? ""
-                      <state-card-content
+                    : html`
-                        in-dialog
+                        <state-card-content
-                        .stateObj=${stateObj}
+                          in-dialog
-                        .hass=${this.hass}
+                          .stateObj=${stateObj}
-                      ></state-card-content>
+                          .hass=${this.hass}
-                    `}
+                        ></state-card-content>
-                <more-info-content
+                      `}
-                  .stateObj=${stateObj}
+                  <more-info-content
-                  .hass=${this.hass}
+                    .stateObj=${stateObj}
-                ></more-info-content>
+                    .hass=${this.hass}
-                ${stateObj.attributes.restored
+                  ></more-info-content>
-                  ? html`
+                  ${stateObj.attributes.restored
-                      <p>
+                    ? html`
-                        ${this.hass.localize(
+                        <p>
-                          "ui.dialogs.more_info_control.restored.not_provided"
+                          ${this.hass.localize(
-                        )}
+                            "ui.dialogs.more_info_control.restored.not_provided"
-                      </p>
+                          )}
-                      <p>
+                        </p>
-                        ${this.hass.localize(
+                        <p>
-                          "ui.dialogs.more_info_control.restored.remove_intro"
+                          ${this.hass.localize(
-                        )}
+                            "ui.dialogs.more_info_control.restored.remove_intro"
-                      </p>
+                          )}
-                      <mwc-button class="warning" @click=${this._removeEntity}>
+                        </p>
-                        ${this.hass.localize(
+                        <mwc-button
-                          "ui.dialogs.more_info_control.restored.remove_action"
+                          class="warning"
-                        )}
+                          @click=${this._removeEntity}
-                      </mwc-button>
+                        >
-                    `
+                          ${this.hass.localize(
-                  : ""}
+                            "ui.dialogs.more_info_control.restored.remove_action"
-              `
+                          )}
-            : html`
+                        </mwc-button>
-                <ha-more-info-tab-history
+                      `
-                  .hass=${this.hass}
+                    : ""}
-                  .entityId=${this._entityId}
+                `
-                ></ha-more-info-tab-history>
+              : html`
-              `}
+                  <ha-more-info-tab-history
+                    .hass=${this.hass}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-tab-history>
+                `
+          )}
         </div>
       </ha-dialog>
     `;

src/dialogs/more-info/ha-more-info-tab-history.ts

@@ -8,7 +8,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { styleMap } from "lit-html/directives/style-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
@@ -57,19 +57,21 @@ export class MoreInfoTabHistoryDialog extends LitElement {
               alt=${this.hass.localize("ui.common.loading")}
             ></ha-circular-progress>
           `
-        : html`
+        : this._entries.length
+        ? html`
             <ha-logbook
               narrow
               no-icon
               no-name
-              class=${classMap({
+              style=${styleMap({
-                "has-entries": Boolean(this._entries?.length),
+                height: `${(this._entries.length + 1) * 56}px`,
               })}
               .hass=${this.hass}
               .entries=${this._entries}
               .userIdToName=${this._persons}
             ></ha-logbook>
-          `}
+          `
+        : ""}
     `;
   }
 
@@ -144,8 +146,8 @@ export class MoreInfoTabHistoryDialog extends LitElement {
           margin-bottom: 16px;
         }
 
-        ha-logbook.has-entries {
+        ha-logbook {
-          height: 360px;
+          max-height: 360px;
         }
 
         ha-circular-progress {

src/panels/logbook/ha-logbook.ts

@@ -103,7 +103,7 @@ class HaLogbook extends LitElement {
     const item_username =
       item.context_user_id && this.userIdToName[item.context_user_id];
     return html`
-      <div>
+      <div class="entry-container">
         ${index === 0 ||
         (item?.when &&
           previous?.when &&
@@ -195,19 +195,39 @@ class HaLogbook extends LitElement {
         direction: ltr;
       }
 
+      .entry-container {
+        width: 100%;
+      }
+
       .entry {
         display: flex;
+        width: 100%;
         line-height: 2em;
-        padding-bottom: 8px;
+        padding: 8px 16px;
+        box-sizing: border-box;
+        border-top: 1px solid
+          var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
       }
 
       .time {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
         width: 65px;
         flex-shrink: 0;
         font-size: 12px;
         color: var(--secondary-text-color);
       }
 
+      .date {
+        margin: 8px 0;
+        padding: 0 16px;
+      }
+
+      .narrow .date {
+        padding: 0 8px;
+      }
+
       .rtl .date {
         direction: rtl;
       }
@@ -239,10 +259,6 @@ class HaLogbook extends LitElement {
         color: var(--primary-color);
       }
 
-      .container {
-        padding: 0 16px;
-      }
-
       .uni-virtualizer-host {
         display: block;
         position: relative;
@@ -256,8 +272,9 @@ class HaLogbook extends LitElement {
       }
 
       .narrow .entry {
-        flex-direction: column-reverse;
+        flex-direction: column;
         line-height: 1.5;
+        padding: 8px;
       }
 
       .narrow .icon-message ha-icon {

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -1,48 +1,45 @@
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
 import Fuse from "fuse.js";
-import memoizeOne from "memoize-one";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { styleMap } from "lit-html/directives/style-map";
 import { until } from "lit-html/directives/until";
-
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../common/search/search-input";
+import "../../../../components/ha-circular-progress";
 import { UNAVAILABLE_STATES } from "../../../../data/entity";
+import type {
+  LovelaceCardConfig,
+  LovelaceConfig,
+} from "../../../../data/lovelace";
 import {
   CustomCardEntry,
   customCards,
   CUSTOM_TYPE_PREFIX,
   getCustomCardEntry,
 } from "../../../../data/lovelace_custom_cards";
+import type { HomeAssistant } from "../../../../types";
 import {
-  computeUsedEntities,
   calcUnusedEntities,
+  computeUsedEntities,
 } from "../../common/compute-unused-entities";
 import { tryCreateCardElement } from "../../create-element/create-card-element";
+import type { LovelaceCard } from "../../types";
 import { getCardStubConfig } from "../get-card-stub-config";
 import { coreCards } from "../lovelace-cards";
-
+import type { Card, CardPickTarget } from "../types";
-import type { CardPickTarget, Card } from "../types";
-import type { LovelaceCard } from "../../types";
-import type { HomeAssistant } from "../../../../types";
-import type {
-  LovelaceCardConfig,
-  LovelaceConfig,
-} from "../../../../data/lovelace";
-
-import "../../../../components/ha-circular-progress";
-import "../../../../common/search/search-input";
 
 interface CardElement {
   card: Card;
@@ -107,7 +104,7 @@ export class HuiCardPicker extends LitElement {
         no-label-float
         @value-changed=${this._handleSearchChange}
         .label=${this.hass.localize(
-          "ui.panel.lovelace.editor.card.generic.search"
+          "ui.panel.lovelace.editor.edit_card.search_cards"
         )}
       ></search-input>
       <div
@@ -339,6 +336,11 @@ export class HuiCardPicker extends LitElement {
   static get styles(): CSSResult[] {
     return [
       css`
+        search-input {
+          display: block;
+          margin: 0 -8px;
+        }
+
         .cards-container {
           display: grid;
           grid-gap: 8px 8px;

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -10,6 +10,8 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { cache } from "lit-html/directives/cache";
+import { classMap } from "lit-html/directives/class-map";
 import memoize from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -23,10 +25,8 @@ import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./hui-card-picker";
 import "./hui-entity-picker-table";
-import {
+import { CreateCardDialogParams } from "./show-create-card-dialog";
-  EditCardDialogParams,
+import { showEditCardDialog } from "./show-edit-card-dialog";
-  showEditCardDialog,
-} from "./show-edit-card-dialog";
 import { showSuggestCardDialog } from "./show-suggest-card-dialog";
 
 declare global {
@@ -43,7 +43,7 @@ interface SelectedChangedEvent {
 export class HuiCreateDialogCard extends LitElement implements HassDialog {
   @property({ attribute: false }) protected hass!: HomeAssistant;
 
-  @internalProperty() private _params?: EditCardDialogParams;
+  @internalProperty() private _params?: CreateCardDialogParams;
 
   @internalProperty() private _viewConfig!: LovelaceViewConfig;
 
@@ -51,7 +51,7 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
 
   @internalProperty() private _currTabIndex = 0;
 
-  public async showDialog(params: EditCardDialogParams): Promise<void> {
+  public async showDialog(params: CreateCardDialogParams): Promise<void> {
     this._params = params;
     const [view] = params.path;
     this._viewConfig = params.lovelaceConfig.views[view];
@@ -76,10 +76,11 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
         .heading=${true}
+        class=${classMap({ table: this._currTabIndex === 1 })}
       >
         <div slot="heading">
           <ha-header-bar>
-            <div slot="title">
+            <span slot="title">
               ${this._viewConfig.title
                 ? this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
@@ -89,7 +90,7 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
                 : this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.pick_card"
                   )}
-            </div>
+            </span>
           </ha-header-bar>
           <mwc-tab-bar
             .activeIndex=${this._currTabIndex}
@@ -108,24 +109,26 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
             ></mwc-tab>
           </mwc-tab-bar>
         </div>
-        ${this._currTabIndex === 0
+        ${cache(
-          ? html`
+          this._currTabIndex === 0
-              <hui-card-picker
+            ? html`
-                .lovelace=${this._params.lovelaceConfig}
+                <hui-card-picker
-                .hass=${this.hass}
+                  .lovelace=${this._params.lovelaceConfig}
-                @config-changed=${this._handleCardPicked}
-              ></hui-card-picker>
-            `
-          : html`
-              <div class="entity-picker-container">
-                <hui-entity-picker-table
                   .hass=${this.hass}
-                  .narrow=${true}
+                  @config-changed=${this._handleCardPicked}
-                  .entities=${this._allEntities(this.hass.states)}
+                ></hui-card-picker>
-                  @selected-changed=${this._handleSelectedChanged}
+              `
-                ></hui-entity-picker-table>
+            : html`
-              </div>
+                <div class="entity-picker-container">
-            `}
+                  <hui-entity-picker-table
+                    .hass=${this.hass}
+                    .narrow=${true}
+                    .entities=${this._allEntities(this.hass.states)}
+                    @selected-changed=${this._handleSelectedChanged}
+                  ></hui-entity-picker-table>
+                </div>
+              `
+        )}
 
         <div slot="primaryAction">
           <mwc-button @click=${this._cancel}>
@@ -167,6 +170,11 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
 
         ha-dialog {
           --mdc-dialog-max-width: 845px;
+          --dialog-content-padding: 2px 24px 20px 24px;
+        }
+
+        ha-dialog.table {
+          --dialog-content-padding: 0;
         }
 
         ha-header-bar {
@@ -190,7 +198,8 @@ export class HuiCreateDialogCard extends LitElement implements HassDialog {
         }
 
         mwc-tab-bar {
-          padding-top: 8px;
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
         .entity-picker-container {

src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts

@@ -5,7 +5,6 @@ export interface EditCardDialogParams {
   lovelaceConfig: LovelaceConfig;
   saveConfig: (config: LovelaceConfig) => void;
   path: [number] | [number, number];
-  entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
   cardConfig?: LovelaceCardConfig;
 }
 

src/translations/en.json

@@ -2137,7 +2137,8 @@
             "delete": "Delete Card",
             "duplicate": "Duplicate Card",
             "move": "Move to View",
-            "options": "More options"
+            "options": "More options",
+            "search_cards": "Search cards"
           },
           "move_card": {
             "header": "Choose a view to move the card to"