From a076fcde8433d5f6839a61e735e1ea0ca2d3e072 Mon Sep 17 00:00:00 2001
From: Tomasz <t.jagusz@gmail.com>
Date: Tue, 6 Oct 2020 12:50:06 +0200
Subject: [PATCH] replace ha-icon_button and ha-icon in stack card editor
 (#7233)

---
 .../config-elements/hui-stack-card-editor.ts  | 50 ++++++++++++-------
 src/translations/en.json                      |  6 ++-
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index 84ca356c9c..d2640e7cae 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -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);
diff --git a/src/translations/en.json b/src/translations/en.json
index e0d6f97e1a..bdc732a7dd 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -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"
           },