replace ha-icon_button and ha-icon in stack card editor (#7233)

This commit is contained in:
Tomasz 2020-10-06 12:50:06 +02:00 committed by GitHub
parent ede9931903
commit a076fcde84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 21 deletions

View File

@ -1,3 +1,4 @@
import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from "@mdi/js";
import "@polymer/paper-tabs"; import "@polymer/paper-tabs";
import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tab";
import { import {
@ -13,7 +14,6 @@ import {
} from "lit-element"; } from "lit-element";
import { any, array, assert, object, optional, string } from "superstruct"; import { any, array, assert, object, optional, string } from "superstruct";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event"; import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-button";
import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace"; import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { StackCardConfig } from "../../cards/types"; import { StackCardConfig } from "../../cards/types";
@ -87,7 +87,7 @@ export class HuiStackCardEditor extends LitElement
@iron-activate=${this._handleSelectedCard} @iron-activate=${this._handleSelectedCard}
> >
<paper-tab> <paper-tab>
<ha-icon icon="hass:plus"></ha-icon> <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
</paper-tab> </paper-tab>
</paper-tabs> </paper-tabs>
</div> </div>
@ -107,26 +107,37 @@ export class HuiStackCardEditor extends LitElement
: "ui.panel.lovelace.editor.edit_card.show_visual_editor" : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
)} )}
</mwc-button> </mwc-button>
<ha-icon-button
id="move-before"
title="Move card before"
icon="hass:arrow-left"
.disabled=${selected === 0}
@click=${this._handleMove}
></ha-icon-button>
<ha-icon-button <mwc-icon-button
id="move-after" .disabled=${selected === 0}
title="Move card after" .title=${this.hass!.localize(
icon="hass:arrow-right" "ui.panel.lovelace.editor.edit_card.move_before"
)}
@click=${this._handleMove}
.move=${-1}
>
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
</mwc-icon-button>
<mwc-icon-button
.title=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move_after"
)}
.disabled=${selected === numcards - 1} .disabled=${selected === numcards - 1}
@click=${this._handleMove} @click=${this._handleMove}
></ha-icon-button> .move=${1}
>
<ha-svg-icon .path=${mdiArrowRight}></ha-svg-icon>
</mwc-icon-button>
<ha-icon-button <mwc-icon-button
icon="hass:delete" .title=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}
@click=${this._handleDeleteCard} @click=${this._handleDeleteCard}
></ha-icon-button> >
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
</mwc-icon-button>
</div> </div>
<hui-element-editor <hui-element-editor
@ -193,12 +204,13 @@ export class HuiStackCardEditor extends LitElement
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }
private _handleMove(ev) { private _handleMove(ev: Event) {
if (!this._config) { if (!this._config) {
return; return;
} }
const move = (ev.currentTarget as any).move;
const source = this._selectedCard; const source = this._selectedCard;
const target = ev.target.id === "move-before" ? source - 1 : source + 1; const target = source + move;
const cards = [...this._config.cards]; const cards = [...this._config.cards];
const card = cards.splice(this._selectedCard, 1)[0]; const card = cards.splice(this._selectedCard, 1)[0];
cards.splice(target, 0, card); cards.splice(target, 0, card);

View File

@ -2243,9 +2243,11 @@
"show_code_editor": "Show Code Editor", "show_code_editor": "Show Code Editor",
"add": "Add Card", "add": "Add Card",
"edit": "Edit", "edit": "Edit",
"delete": "Delete Card", "delete": "Delete card",
"duplicate": "Duplicate Card", "duplicate": "Duplicate card",
"move": "Move to View", "move": "Move to View",
"move_before": "Move card before",
"move_after": "Move card after",
"options": "More options", "options": "More options",
"search_cards": "Search cards" "search_cards": "Search cards"
}, },