mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
replace ha-icon_button and ha-icon in stack card editor (#7233)
This commit is contained in:
parent
ede9931903
commit
a076fcde84
@ -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);
|
||||
|
@ -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"
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user