mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +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";
|
||||||
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);
|
||||||
|
@ -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"
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user