jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-17 14:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

RTL arrow components (#2750)

Browse Source 
* New arrow and chevron next+prev components

* New component files

* Refactor

* Updated super + commets

* Fix ha-style
This commit is contained in:
Paulus Schoutsen 2019-02-19 13:54:02 -08:00 committed by GitHub
commit 4073238103
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 270 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/src/custom-cards/ha-demo-card.ts
View File

@ -10,6 +10,8 @@ import "@polymer/paper-icon-button";
import "@material/mwc-button";
import "@polymer/paper-spinner/paper-spinner-lite";
import "../../../src/components/ha-card";
import "../../../src/components/ha-paper-icon-button-next";
import "../../../src/components/ha-paper-icon-button-prev";
import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
import { LovelaceCardConfig } from "../../../src/data/lovelace";
import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@ -47,12 +49,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
<div class="picker">
<paper-icon-button
<ha-paper-icon-button-prev
@click=${this._prevConfig}
icon="hass:chevron-right"
style="transform: rotate(180deg)"
.disabled=${this._switching}
></paper-icon-button>
></ha-paper-icon-button-prev>
<div>
${this._switching
? html`
@ -73,11 +73,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
""
)}
</div>
<paper-icon-button
<ha-paper-icon-button-next
@click=${this._nextConfig}
icon="hass:chevron-right"
.disabled=${this._switching}
></paper-icon-button>
></ha-paper-icon-button-next>
</div>
<div class="content">
Welcome home! You've reached the Home Assistant demo where we showcase

3
src/auth/ha-pick-auth-provider.js
View File

@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import EventsMixin from "../mixins/events-mixin";
import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
import "../components/ha-icon-next";
/*
* @appliesMixin EventsMixin
@ -26,7 +27,7 @@ class HaPickAuthProvider extends EventsMixin(
<template is="dom-repeat" items="[[authProviders]]">
<paper-item on-click="_handlePick">
<paper-item-body>[[item.name]]</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
`;

24
src/components/ha-icon-next.ts Normal file
View File

@ -0,0 +1,24 @@
import "@polymer/iron-icon/iron-icon";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { HaIcon } from "./ha-icon";
export class HaIconNext extends HaIcon {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-right"
: "hass:chevron-left";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-icon-next": HaIconNext;
}
}
customElements.define("ha-icon-next", HaIconNext);

24
src/components/ha-icon-prev.ts Normal file
View File

@ -0,0 +1,24 @@
import "@polymer/iron-icon/iron-icon";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { HaIcon } from "./ha-icon";
export class HaIconPrev extends HaIcon {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-left"
: "hass:chevron-right";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-icon-prev": HaIconPrev;
}
}
customElements.define("ha-icon-prev", HaIconPrev);

32
src/components/ha-paper-icon-button-arrow-next.ts Normal file
View File

@ -0,0 +1,32 @@
import { Constructor } from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
const paperIconButtonClass = customElements.get(
"paper-icon-button"
) as Constructor<PaperIconButtonElement>;
export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:arrow-right"
: "hass:arrow-left";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-icon-button-arrow-next": HaPaperIconButtonArrowNext;
}
}
customElements.define(
"ha-paper-icon-button-arrow-next",
HaPaperIconButtonArrowNext
);

32
src/components/ha-paper-icon-button-arrow-prev.ts Normal file
View File

@ -0,0 +1,32 @@
import { Constructor } from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
const paperIconButtonClass = customElements.get(
"paper-icon-button"
) as Constructor<PaperIconButtonElement>;
export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:arrow-left"
: "hass:arrow-right";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-icon-button-arrow-prev": HaPaperIconButtonArrowPrev;
}
}
customElements.define(
"ha-paper-icon-button-arrow-prev",
HaPaperIconButtonArrowPrev
);

29
src/components/ha-paper-icon-button-next.ts Normal file
View File

@ -0,0 +1,29 @@
import { Constructor } from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
const paperIconButtonClass = customElements.get(
"paper-icon-button"
) as Constructor<PaperIconButtonElement>;
export class HaPaperIconButtonNext extends paperIconButtonClass {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-right"
: "hass:chevron-left";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-icon-button-next": HaPaperIconButtonNext;
}
}
customElements.define("ha-paper-icon-button-next", HaPaperIconButtonNext);

29
src/components/ha-paper-icon-button-prev.ts Normal file
View File

@ -0,0 +1,29 @@
import { Constructor } from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
// Not duplicate, this is for typing.
// tslint:disable-next-line
import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
const paperIconButtonClass = customElements.get(
"paper-icon-button"
) as Constructor<PaperIconButtonElement>;
export class HaPaperIconButtonPrev extends paperIconButtonClass {
public connectedCallback() {
this.icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-left"
: "hass:chevron-right";
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
super.connectedCallback();
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-icon-button-prev": HaPaperIconButtonPrev;
}
}
customElements.define("ha-paper-icon-button-prev", HaPaperIconButtonPrev);

6
src/dialogs/more-info/more-info-settings.js
View File

@ -13,6 +13,7 @@ import computeDomain from "../../common/entity/compute_domain";
import isComponentLoaded from "../../common/config/is_component_loaded";
import { updateEntityRegistryEntry } from "../../data/entity_registry";
import "../../components/ha-paper-icon-button-arrow-prev";
/*
* @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin
@ -44,10 +45,9 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
</style>
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
<ha-paper-icon-button-arrow-prev
on-click="_backTapped"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title="">[[_computeStateName(stateObj)]]</div>
<mwc-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
>[[localize('ui.dialogs.more_info_settings.save')]]</mwc-button

41
src/layouts/hass-subpage.js Normal file
View File

@ -0,0 +1,41 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../components/ha-paper-icon-button-arrow-prev";
class HassSubpage extends PolymerElement {
static get template() {
return html`
<style include="ha-style"></style>
<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<ha-paper-icon-button-arrow-prev
on-click="_backTapped"
></ha-paper-icon-button-arrow-prev>
<div main-title="">[[header]]</div>
<slot name="toolbar-icon"></slot>
</app-toolbar>
</app-header>
<slot></slot>
</app-header-layout>
`;
}
static get properties() {
return {
header: String,
};
}
_backTapped() {
history.back();
}
}
customElements.define("hass-subpage", HassSubpage);

6
src/panels/config/automation/ha-automation-editor.ts
View File

@ -15,6 +15,7 @@ import { classMap } from "lit-html/directives/class-map";
import { h, render } from "preact";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
import Automation from "../js/automation";
@ -74,10 +75,9 @@ class HaAutomationEditor extends LitElement {
<ha-app-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.automation
? computeStateName(this.automation)

11
src/panels/config/automation/ha-automation-picker.js
View File

@ -8,10 +8,13 @@ import "@polymer/paper-item/paper-item";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
import "../ha-config-section";
import "../../../components/ha-icon-next";
import NavigateMixin from "../../../mixins/navigate-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin";
import computeStateName from "../../../common/entity/compute_state_name";
@ -64,10 +67,8 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
on-click="_backTapped"
></paper-icon-button>
<ha-paper-icon-button-arrow-prev on-click="_backTapped">
</ha-paper-icon-button-arrow-prev>
<div main-title="">
[[localize('ui.panel.config.automation.caption')]]
</div>
@ -101,7 +102,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<div>[[computeName(automation)]]</div>
<div secondary="">[[computeDescription(automation)]]</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
</paper-card>

4
src/panels/config/cloud/ha-config-cloud-login.js
View File

@ -15,7 +15,7 @@ import "../../../resources/ha-style";
import "../ha-config-section";
import EventsMixin from "../../../mixins/events-mixin";
import NavigateMixin from "../../../mixins/navigate-mixin";
import "../../../components/ha-icon-next";
/*
* @appliesMixin NavigateMixin
* @appliesMixin EventsMixin
@ -148,7 +148,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
Start your free 1 month trial
<div secondary="">No payment information necessary</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</paper-card>
</ha-config-section>

3
src/panels/config/config-entries/ha-config-entries-dashboard.js
View File

@ -11,6 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/entity/ha-state-icon";
import "../../../layouts/hass-subpage";
import "../../../resources/ha-style";
import "../../../components/ha-icon-next";
import "../ha-config-section";
import EventsMixin from "../../../mixins/events-mixin";
@ -109,7 +110,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
</template>
</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</template>

6
src/panels/config/customize/ha-config-customize.js
View File

@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../resources/ha-style";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../ha-config-section";
import "../ha-entity-config";
@ -27,10 +28,9 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
<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
on-click="_backTapped"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title="">
[[localize('ui.panel.config.customize.caption')]]
</div>

7
src/panels/config/dashboard/ha-config-dashboard.js
View File

@ -9,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-menu-button";
import "../../../components/ha-icon-next";
import "../ha-config-section";
import "./ha-config-navigation";
@ -66,7 +67,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
</div>
</template>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</paper-card>
</a>
@ -81,7 +82,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
[[localize('ui.panel.config.integrations.description')]]
</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
@ -93,7 +94,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
[[localize('ui.panel.config.users.description')]]
</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</paper-card>

4
src/panels/config/dashboard/ha-config-navigation.js
View File

@ -10,6 +10,8 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
import isComponentLoaded from "../../../common/config/is_component_loaded";
import "../../../components/ha-icon-next";
const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
/*
* @appliesMixin LocalizeMixin
@ -34,7 +36,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
[[_computeCaption(item, localize)]]
<div secondary="">[[_computeDescription(item, localize)]]</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
</template>

6
src/panels/config/script/ha-script-editor.js
View File

@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { h, render } from "preact";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-paper-icon-button-arrow-prev";
import Script from "../js/script";
import unmountPreact from "../../../common/preact/unmount";
@ -98,10 +99,9 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
<ha-paper-icon-button-arrow-prev
on-click="backTapped"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title="">Script [[computeName(script)]]</div>
</app-toolbar>
</app-header>

9
src/panels/config/script/ha-script-picker.js
View File

@ -11,6 +11,8 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-icon-next";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../ha-config-section";
@ -65,10 +67,9 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
<ha-paper-icon-button-arrow-prev
on-click="_backTapped"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title="">
[[localize('ui.panel.config.script.caption')]]
</div>
@ -99,7 +100,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<div>[[computeName(script)]]</div>
<div secondary="">[[computeDescription(script)]]</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</template>
</paper-card>

3
src/panels/config/users/ha-config-user-picker.js
View File

@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../layouts/hass-subpage";
import "../../../components/ha-icon-next";
import LocalizeMixin from "../../../mixins/localize-mixin";
import NavigateMixin from "../../../mixins/navigate-mixin";
@ -71,7 +72,7 @@ class HaUserPicker extends EventsMixin(
</template>
</div>
</paper-item-body>
<iron-icon icon="hass:chevron-right"></iron-icon>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</template>

6
src/panels/config/zha/ha-config-zha.ts Normal file → Executable file
View File

@ -12,6 +12,7 @@ import { HassEntity } from "home-assistant-js-websocket";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import { Cluster } from "../../../data/zha";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-paper-icon-button-arrow-prev";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { ZHAClusterSelectedParams, ZHANodeSelectedParams } from "./types";
@ -40,10 +41,9 @@ export class HaConfigZha extends LitElement {
<ha-app-layout>
<app-header slot="header">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
<ha-paper-icon-button-arrow-prev
@click="${this._onBackTapped}"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title>Zigbee Home Automation</div>
</app-toolbar>
</app-header>

6
src/panels/config/zwave/ha-config-zwave.js
View File

@ -12,6 +12,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-menu-button";
import "../../../components/ha-service-description";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
import "../../../resources/ha-style";
@ -85,10 +86,9 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
<ha-paper-icon-button-arrow-prev
on-click="_backTapped"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
<div main-title="">
[[localize('ui.panel.config.zwave.caption')]]
</div>

3
src/panels/lovelace/components/notifications/hui-notification-drawer.js
View File

@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "./hui-notification-item";
import "../../../../components/ha-paper-icon-button-next";
import EventsMixin from "../../../../mixins/events-mixin";
import LocalizeMixin from "../../../../mixins/localize-mixin";
@ -121,7 +122,7 @@ export class HuiNotificationDrawer extends EventsMixin(
<div class="container">
<app-toolbar>
<div main-title>[[localize('ui.notification_drawer.title')]]</div>
<paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
<ha-paper-icon-button-next on-click="_closeDrawer"></paper-icon-button>
</app-toolbar>
<div class="notifications">
<template is="dom-if" if="[[!_empty(notifications)]]">

18
src/panels/lovelace/hui-root.ts
View File

@ -26,6 +26,8 @@ import scrollToTarget from "../../common/dom/scroll-to-target";
import "../../layouts/ha-app-layout";
import "../../components/ha-start-voice-button";
import "../../components/ha-paper-icon-button-arrow-next";
import "../../components/ha-paper-icon-button-arrow-prev";
import "../../components/ha-icon";
import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
import { subscribeNotifications } from "../../data/ws-notifications";
@ -49,7 +51,7 @@ import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovel
import { Lovelace } from "./types";
import { afterNextRender } from "../../common/util/render-status";
import { haStyle } from "../../resources/styles";
import { computeRTL, computeRTLDirection } from "../../common/util/compute_rtl";
import { computeRTLDirection } from "../../common/util/compute_rtl";
// CSS and JS should only be imported once. Modules and HTML are safe.
const CSS_CACHE = {};
@ -251,15 +253,12 @@ class HUIRoot extends LitElement {
<paper-tab>
${this._editMode
? html`
<paper-icon-button
<ha-paper-icon-button-arrow-prev
title="Move view left"
class="edit-icon view"
icon="${computeRTL(this.hass!)
? "hass:arrow-right"
: "hass:arrow-left"}"
@click="${this._moveViewLeft}"
?disabled="${this._curView === 0}"
></paper-icon-button>
></ha-paper-icon-button-arrow-prev>
`
: ""}
${view.icon
@ -278,17 +277,14 @@ class HUIRoot extends LitElement {
icon="hass:pencil"
@click="${this._editView}"
></ha-icon>
<paper-icon-button
<ha-paper-icon-button-arrow-next
title="Move view right"
class="edit-icon view"
icon="${computeRTL(this.hass!)
? "hass:arrow-left"
: "hass:arrow-right"}"
@click="${this._moveViewRight}"
?disabled="${(this._curView! as number) +
1 ===
this.lovelace!.config.views.length}"
></paper-icon-button>
></ha-paper-icon-button-arrow-next>
`
: ""}
</paper-tab>