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

View File

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