mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Improve add cards dialog user experience (#23773)
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
parent
562589a6cb
commit
e994e3565d
@ -155,12 +155,14 @@ export class HuiCardPicker extends LitElement {
|
||||
height: this._height ? `${this._height}px` : "auto",
|
||||
})}
|
||||
>
|
||||
<div class="cards-container">
|
||||
${this._filter
|
||||
? this._filterCards(this._cards, this._filter).map(
|
||||
${this._filter
|
||||
? html`<div class="cards-container">
|
||||
${this._filterCards(this._cards, this._filter).map(
|
||||
(cardElement: CardElement) => cardElement.element
|
||||
)
|
||||
: html`
|
||||
)}
|
||||
</div>`
|
||||
: html`
|
||||
<div class="cards-container">
|
||||
${suggestedCards.length > 0
|
||||
? html`
|
||||
<div class="cards-container-header">
|
||||
@ -174,6 +176,8 @@ export class HuiCardPicker extends LitElement {
|
||||
${suggestedCards.map(
|
||||
(cardElement: CardElement) => cardElement.element
|
||||
)}
|
||||
</div>
|
||||
<div class="cards-container">
|
||||
${suggestedCards.length > 0
|
||||
? html`
|
||||
<div class="cards-container-header">
|
||||
@ -186,6 +190,8 @@ export class HuiCardPicker extends LitElement {
|
||||
${othersCards.map(
|
||||
(cardElement: CardElement) => cardElement.element
|
||||
)}
|
||||
</div>
|
||||
<div class="cards-container">
|
||||
${customCardsItems.length > 0
|
||||
? html`
|
||||
<div class="cards-container-header">
|
||||
@ -198,8 +204,8 @@ export class HuiCardPicker extends LitElement {
|
||||
${customCardsItems.map(
|
||||
(cardElement: CardElement) => cardElement.element
|
||||
)}
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
<div class="cards-container">
|
||||
<div
|
||||
class="card manual"
|
||||
@ -216,6 +222,7 @@ export class HuiCardPicker extends LitElement {
|
||||
`ui.panel.lovelace.editor.card.generic.manual_description`
|
||||
)}
|
||||
</div>
|
||||
<ha-ripple></ha-ripple>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -442,19 +449,20 @@ export class HuiCardPicker extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
// prevent tabbing to card
|
||||
if (element) {
|
||||
element.tabIndex = -1;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="card">
|
||||
<div class="card" tabindex="0">
|
||||
<div
|
||||
class="overlay"
|
||||
@click=${this._cardPicked}
|
||||
.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,6 +478,7 @@ export class HuiCardPicker extends LitElement {
|
||||
)
|
||||
: description}
|
||||
</div>
|
||||
<ha-ripple></ha-ripple>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -481,14 +490,28 @@ export class HuiCardPicker extends LitElement {
|
||||
display: block;
|
||||
--mdc-shape-small: var(--card-picker-search-shape);
|
||||
margin: var(--card-picker-search-margin);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: var(
|
||||
--ha-dialog-surface-background,
|
||||
var(--mdc-theme-surface, #fff)
|
||||
);
|
||||
}
|
||||
|
||||
.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: 56px;
|
||||
z-index: 1;
|
||||
background: linear-gradient(90deg, var(
|
||||
--ha-dialog-surface-background,
|
||||
var(--mdc-theme-surface, #fff)
|
||||
) 0%, #ffffff00 80%);
|
||||
}
|
||||
|
||||
.cards-container {
|
||||
@ -508,8 +531,7 @@ export class HuiCardPicker extends LitElement {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: var(--ha-card-border-width, 1px) solid
|
||||
var(--ha-card-border-color, var(--divider-color));
|
||||
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color));
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -522,11 +544,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 +556,6 @@ export class HuiCardPicker extends LitElement {
|
||||
}
|
||||
|
||||
.preview > :first-child {
|
||||
zoom: 0.6;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -198,7 +198,7 @@ export class HuiCreateDialogCard
|
||||
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 845px;
|
||||
--dialog-content-padding: 2px 24px 20px 24px;
|
||||
--dialog-content-padding: 0 24px 20px 24px;
|
||||
--dialog-z-index: 6;
|
||||
}
|
||||
|
||||
|
@ -6425,7 +6425,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",
|
||||
@ -7252,7 +7252,6 @@
|
||||
},
|
||||
"cardpicker": {
|
||||
"no_description": "No description available.",
|
||||
"custom_card": "Custom",
|
||||
"domain": "Domain",
|
||||
"entity": "Entity",
|
||||
"by_entity": "By entity",
|
||||
|
Loading…
x
Reference in New Issue
Block a user