Show position on sidebar card and hide arrow on panel card (#17092)

This commit is contained in:
Paul Bottein 2023-06-29 11:27:49 +02:00 committed by GitHub
parent 6cc207752f
commit 77d24f4129
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 31 deletions

View File

@ -46,7 +46,7 @@ export class HuiCardOptions extends LitElement {
@queryAssignedNodes() private _assignedNodes?: NodeListOf<LovelaceCard>; @queryAssignedNodes() private _assignedNodes?: NodeListOf<LovelaceCard>;
@property({ type: Boolean }) public showPosition = false; @property({ type: Boolean }) public hidePosition = false;
@storage({ @storage({
key: "lovelaceClipboard", key: "lovelaceClipboard",
@ -82,36 +82,38 @@ export class HuiCardOptions extends LitElement {
> >
<div class="right"> <div class="right">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<ha-icon-button ${!this.hidePosition
.label=${this.hass!.localize( ? html`
"ui.panel.lovelace.editor.edit_card.move_down" <ha-icon-button
)} .label=${this.hass!.localize(
.path=${mdiArrowDown} "ui.panel.lovelace.editor.edit_card.move_down"
class="move-arrow" )}
@click=${this._cardDown} .path=${mdiArrowDown}
.disabled=${this.lovelace!.config.views[this.path![0]].cards! class="move-arrow"
.length === @click=${this._cardDown}
this.path![1] + 1} .disabled=${this.lovelace!.config.views[this.path![0]]
></ha-icon-button> .cards!.length ===
${this.showPosition this.path![1] + 1}
? html`<ha-icon-button ></ha-icon-button>
@click=${this._changeCardPosition} <ha-icon-button
.label=${this.hass!.localize( @click=${this._changeCardPosition}
"ui.panel.lovelace.editor.edit_card.change_position" .label=${this.hass!.localize(
)} "ui.panel.lovelace.editor.edit_card.change_position"
> )}
<div class="position-badge">${this.path![1] + 1}</div> >
</ha-icon-button>` <div class="position-badge">${this.path![1] + 1}</div>
</ha-icon-button>
<ha-icon-button
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_up"
)}
.path=${mdiArrowUp}
class="move-arrow"
@click=${this._cardUp}
?disabled=${this.path![1] === 0}
></ha-icon-button>
`
: nothing} : nothing}
<ha-icon-button
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_up"
)}
.path=${mdiArrowUp}
class="move-arrow"
@click=${this._cardUp}
?disabled=${this.path![1] === 0}
></ha-icon-button>
<ha-button-menu @action=${this._handleAction}> <ha-button-menu @action=${this._handleAction}>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"

View File

@ -272,7 +272,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
wrapper.hass = this.hass; wrapper.hass = this.hass;
wrapper.lovelace = this.lovelace; wrapper.lovelace = this.lovelace;
wrapper.path = [this.index!, index]; wrapper.path = [this.index!, index];
wrapper.showPosition = true;
card.editMode = true; card.editMode = true;
wrapper.appendChild(card); wrapper.appendChild(card);
columnEl.appendChild(wrapper); columnEl.appendChild(wrapper);

View File

@ -121,6 +121,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
wrapper.hass = this.hass; wrapper.hass = this.hass;
wrapper.lovelace = this.lovelace; wrapper.lovelace = this.lovelace;
wrapper.path = [this.index!, 0]; wrapper.path = [this.index!, 0];
wrapper.hidePosition = true;
card.editMode = true; card.editMode = true;
wrapper.appendChild(card); wrapper.appendChild(card);
this._card = wrapper; this._card = wrapper;