mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 22:06:34 +00:00
Tweak card create dialog a bit (#6787)
This commit is contained in:
parent
9c4fdaa4f3
commit
793b9f238c
@ -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 {
|
||||
|
@ -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>
|
||||
`;
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user