Tweak card create dialog a bit (#6787)

This commit is contained in:
Bram Kragten 2020-09-04 18:30:04 +02:00 committed by GitHub
parent 9c4fdaa4f3
commit 793b9f238c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 136 additions and 100 deletions

View File

@ -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 {

View File

@ -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
? html`
${DOMAINS_NO_INFO.includes(domain)
? ""
: html`
<state-card-content
in-dialog
.stateObj=${stateObj}
.hass=${this.hass}
></state-card-content>
`}
<more-info-content
.stateObj=${stateObj}
.hass=${this.hass}
></more-info-content>
${stateObj.attributes.restored
? html`
<p>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.not_provided"
)}
</p>
<p>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.remove_intro"
)}
</p>
<mwc-button class="warning" @click=${this._removeEntity}>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.remove_action"
)}
</mwc-button>
`
: ""}
`
: html`
<ha-more-info-tab-history
.hass=${this.hass}
.entityId=${this._entityId}
></ha-more-info-tab-history>
`}
${cache(
this._currTabIndex === 0
? html`
${DOMAINS_NO_INFO.includes(domain)
? ""
: html`
<state-card-content
in-dialog
.stateObj=${stateObj}
.hass=${this.hass}
></state-card-content>
`}
<more-info-content
.stateObj=${stateObj}
.hass=${this.hass}
></more-info-content>
${stateObj.attributes.restored
? html`
<p>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.not_provided"
)}
</p>
<p>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.remove_intro"
)}
</p>
<mwc-button
class="warning"
@click=${this._removeEntity}
>
${this.hass.localize(
"ui.dialogs.more_info_control.restored.remove_action"
)}
</mwc-button>
`
: ""}
`
: html`
<ha-more-info-tab-history
.hass=${this.hass}
.entityId=${this._entityId}
></ha-more-info-tab-history>
`
)}
</div>
</ha-dialog>
`;

View File

@ -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({
"has-entries": Boolean(this._entries?.length),
style=${styleMap({
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 {
height: 360px;
ha-logbook {
max-height: 360px;
}
ha-circular-progress {

View File

@ -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 {

View File

@ -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"
)}
></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;

View File

@ -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 {
EditCardDialogParams,
showEditCardDialog,
} from "./show-edit-card-dialog";
import { CreateCardDialogParams } from "./show-create-card-dialog";
import { 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
? html`
<hui-card-picker
.lovelace=${this._params.lovelaceConfig}
.hass=${this.hass}
@config-changed=${this._handleCardPicked}
></hui-card-picker>
`
: html`
<div class="entity-picker-container">
<hui-entity-picker-table
${cache(
this._currTabIndex === 0
? html`
<hui-card-picker
.lovelace=${this._params.lovelaceConfig}
.hass=${this.hass}
.narrow=${true}
.entities=${this._allEntities(this.hass.states)}
@selected-changed=${this._handleSelectedChanged}
></hui-entity-picker-table>
</div>
`}
@config-changed=${this._handleCardPicked}
></hui-card-picker>
`
: html`
<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 {

View File

@ -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;
}

View File

@ -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"