Improve add cards dialog user experience (#23773)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Jan-Philipp Benecke 2025-01-21 09:53:28 +01:00 committed by GitHub
parent 562589a6cb
commit e994e3565d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 25 deletions

View File

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

View File

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

View File

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