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

New arrow and chevron next+prev components

Browse Source
This commit is contained in:
Yosi Levy 2019-02-13 19:56:12 +00:00
parent f23258eb8c
commit 5d58dfab3e
18 changed files with 64 additions and 58 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 "@polymer/paper-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>
`;

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>
<paper-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
>[[localize('ui.dialogs.more_info_settings.save')]]</paper-button

7
src/layouts/hass-subpage.js
View File

@ -5,6 +5,8 @@ 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`
@ -12,10 +14,9 @@ class HassSubpage extends 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="">[[header]]</div>
<slot name="toolbar-icon"></slot>
</app-toolbar>

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

@ -14,6 +14,7 @@ import "@polymer/paper-fab/paper-fab";
import { h, render } from "preact";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
import Automation from "../js/automation";
@ -72,10 +73,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)

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

@ -9,13 +9,17 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-markdown";
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";
/*
* @appliesMixin LocalizeMixin
* @appliesMixin NavigateMixin
@ -56,10 +60,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>
@ -92,7 +94,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
@ -147,7 +147,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";
@ -111,7 +112,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";
@ -85,10 +86,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

@ -9,6 +9,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-icon-next";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../ha-config-section";
@ -52,10 +54,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>
@ -86,7 +87,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-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";
@ -59,7 +60,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
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/ha-style";
import { HomeAssistant } from "../../../types";
import {
@ -46,10 +47,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/ha-style";
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>