Fixed arrow in sub-page to use new arrows and fixed new button icon i…

…ssues (#2807) * Fixed arrow in sub-page to use new arrows and fixed new button icon placement problem * Changed icon to text + added localization
home-assistant · Feb 23, 2019 · 70b2ff3 · 70b2ff3
1 parent a259a12
commit 70b2ff3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
@@ -22,10 +22,9 @@ class HassSubpage extends LitElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <paper-icon-button
-              icon="hass:arrow-left"
+            <ha-paper-icon-button-arrow-prev
               @click=${this._backTapped}
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title>${this.header}</div>
             <slot name="toolbar-icon"></slot>
           </app-toolbar>

diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
@@ -53,17 +53,30 @@ class LovelaceFullConfigEditor extends LitElement {
               icon="hass:close"
               @click="${this._closeEditor}"
             ></paper-icon-button>
-            <div main-title>Edit Config</div>
+            <div main-title>
+              ${this.hass!.localize(
+                "ui.panel.lovelace.editor.raw_editor.header"
+              )}
+            </div>
+            <div
+              class="save-button
+              ${classMap({
+                saved: this._saving! === false || this._changed === true,
+              })}"
+            >
+              ${this._changed
+                ? this.hass!.localize(
+                    "ui.panel.lovelace.editor.raw_editor.unsaved_changes"
+                  )
+                : this.hass!.localize(
+                    "ui.panel.lovelace.editor.raw_editor.saved"
+                  )}
+            </div>
             <mwc-button raised @click="${this._handleSave}"
-              >Save
-              <ha-icon
-                class="save-button
-            ${classMap({
-                  saved: this._saving! === false || this._changed === true,
-                })}"
-                icon="${this._changed ? "hass:circle-medium" : "hass:check"}"
-              ></ha-icon
-            ></mwc-button>
+              >${this.hass!.localize(
+                "ui.panel.lovelace.editor.raw_editor.save"
+              )}</mwc-button
+            >
           </app-toolbar>
         </app-header>
         <div class="content">
@@ -115,13 +128,11 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .save-button {
           opacity: 0;
-          margin-left: -21px;
-          transition: all 1.5s;
+          font-size: 14px;
+          padding: 0px 10px;
         }
 
         .saved {
-          margin-left: initial;
-          margin-right: -8px;
           opacity: 1;
         }
       `,

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -897,6 +897,12 @@
           "menu": {
             "raw_editor": "Raw config editor"
           },
+          "raw_editor": {
+            "header": "Edit Config",
+            "save": "Save",
+            "unsaved_changes": "Unsaved changes",
+            "saved": "Saved"
+          },
           "edit_view": {
             "header": "View Configuration",
             "add": "Add view",