diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts index 946c1979de..0677e96673 100644 --- a/src/components/ha-header-bar.ts +++ b/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 { diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 56d429836d..086040ddef 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/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 { : ""}
- ${this._currTabIndex === 0 - ? html` - ${DOMAINS_NO_INFO.includes(domain) - ? "" - : html` - - `} - - ${stateObj.attributes.restored - ? html` -

- ${this.hass.localize( - "ui.dialogs.more_info_control.restored.not_provided" - )} -

-

- ${this.hass.localize( - "ui.dialogs.more_info_control.restored.remove_intro" - )} -

- - ${this.hass.localize( - "ui.dialogs.more_info_control.restored.remove_action" - )} - - ` - : ""} - ` - : html` - - `} + ${cache( + this._currTabIndex === 0 + ? html` + ${DOMAINS_NO_INFO.includes(domain) + ? "" + : html` + + `} + + ${stateObj.attributes.restored + ? html` +

+ ${this.hass.localize( + "ui.dialogs.more_info_control.restored.not_provided" + )} +

+

+ ${this.hass.localize( + "ui.dialogs.more_info_control.restored.remove_intro" + )} +

+ + ${this.hass.localize( + "ui.dialogs.more_info_control.restored.remove_action" + )} + + ` + : ""} + ` + : html` + + ` + )}
`; diff --git a/src/dialogs/more-info/ha-more-info-tab-history.ts b/src/dialogs/more-info/ha-more-info-tab-history.ts index 036d66bdb6..18624a11ef 100644 --- a/src/dialogs/more-info/ha-more-info-tab-history.ts +++ b/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")} > ` - : html` + : this._entries.length + ? html` - `} + ` + : ""} `; } @@ -144,8 +146,8 @@ export class MoreInfoTabHistoryDialog extends LitElement { margin-bottom: 16px; } - ha-logbook.has-entries { - height: 360px; + ha-logbook { + max-height: 360px; } ha-circular-progress { diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts index 173dc59231..11880d5887 100644 --- a/src/panels/logbook/ha-logbook.ts +++ b/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` -
+
${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 { diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 54e108a46f..f68b99e1f5 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/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 { 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"; +import type { Card, CardPickTarget } from "../types"; 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" )} >
{ + public async showDialog(params: CreateCardDialogParams): Promise { 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 })} >
-
+ ${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" )} -
+
- ${this._currTabIndex === 0 - ? html` - - ` - : html` -
- -
- `} + @config-changed=${this._handleCardPicked} + > + ` + : html` +
+ +
+ ` + )}
@@ -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 { diff --git a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts b/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts index 18b0d820e3..46525f1c43 100644 --- a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts +++ b/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; } diff --git a/src/translations/en.json b/src/translations/en.json index 0e2df4858a..efec3b01be 100755 --- a/src/translations/en.json +++ b/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"