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

Merge branch 'RTL-arrow-components' of https://github.com/yosilevy/home-assistant-polymer into RTL-arrow-components

Browse Source
This commit is contained in:
Yosi Levy 2019-02-19 20:18:40 +02:00
commit b4ac3ddfbd
12 changed files with 214 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/panels/config/area_registry/ha-config-area-registry.ts
View File

@ -27,6 +27,8 @@ import {
showAreaRegistryDetailDialog,
loadAreaRegistryDetailDialog,
} from "./show-dialog-area-registry-detail";
import { classMap } from "lit-html/directives/class-map";
import { computeRTL } from "../../../common/util/compute_rtl";
class HaConfigAreaRegistry extends LitElement {
public hass?: HomeAssistant;
@ -48,20 +50,25 @@ class HaConfigAreaRegistry extends LitElement {
`;
}
return html`
<hass-subpage header="Area Registry">
<hass-subpage
header="${this.hass.localize("ui.panel.config.area_registry.caption")}"
>
<ha-config-section .isWide=${this.isWide}>
<span slot="header">
${this.hass.localize("ui.panel.config.area_registry.picker.header")}
</span>
<span slot="introduction">
Areas are used to organize where devices are. This information will
be used throughout Home Assistant to help you in organizing your
interface, permissions and integrations with other systems.
${this.hass.localize(
"ui.panel.config.area_registry.picker.introduction"
)}
<p>
To place devices in an area, navigate to
<a href="/config/integrations">the integrations page</a> and then
click on a configured integration to get to the device cards.
${this.hass.localize(
"ui.panel.config.area_registry.picker.introduction2"
)}
</p>
<a href="/config/integrations"
><ha-icon icon="mdi:link"></ha-icon
></a>
</span>
<paper-card>
${this._items.map((entry) => {
@ -94,8 +101,13 @@ class HaConfigAreaRegistry extends LitElement {
<paper-fab
?is-wide=${this.isWide}
icon="hass:plus"
title="Create Area"
title="${this.hass.localize(
"ui.panel.config.area_registry.picker.create_area"
)}"
@click=${this._createArea}
class="${classMap({
rtl: computeRTL(this.hass),
})}"
></paper-fab>
`;
}
@ -188,6 +200,17 @@ All devices in this area will become unassigned.`)
bottom: 24px;
right: 24px;
}
paper-fab.rtl {
right: auto;
left: 16px;
}
paper-fab[is-wide].rtl {
bottom: 24px;
right: auto;
left: 24px;
}
`;
}
}

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

@ -110,6 +110,9 @@ class HaAutomationEditor extends LitElement {
"ui.panel.config.automation.editor.save"
)}"
@click=${this._saveAutomation}
class="${classMap({
rtl: computeRTL(this.hass),
})}"
></paper-fab>
</ha-app-layout>
`;
@ -280,6 +283,17 @@ class HaAutomationEditor extends LitElement {
paper-fab[dirty] {
margin-bottom: 0;
}
paper-fab.rtl {
right: auto;
left: 16px;
}
paper-fab[is-wide].rtl {
bottom: 24px;
right: auto;
left: 24px;
}
`,
];
}

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

@ -8,7 +8,6 @@ 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-markdown";
import "../../../components/ha-paper-icon-button-arrow-prev";
import "../../../layouts/ha-app-layout";
@ -19,6 +18,7 @@ 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";
import { computeRTL } from "../../../common/util/compute_rtl";
/*
* @appliesMixin LocalizeMixin
@ -48,12 +48,19 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
right: 24px;
}
a {
color: var(--primary-color);
paper-fab[rtl] {
right: auto;
left: 16px;
}
ha-markdown p {
margin: 0px;
paper-fab[rtl][is-wide] {
bottom: 24px;
right: auto;
left: 24px;
}
a {
color: var(--primary-color);
}
</style>
@ -73,9 +80,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
[[localize('ui.panel.config.automation.picker.header')]]
</div>
<div slot="introduction">
<ha-markdown
content="[[localize('ui.panel.config.automation.picker.introduction')]]"
></ha-markdown>
[[localize('ui.panel.config.automation.picker.introduction')]]
<a href="https://home-assistant.io/docs/automation/editor/"
><ha-icon icon="mdi:link"></ha-icon
></a>
</div>
<paper-card
@ -106,6 +114,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
icon="hass:plus"
title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
on-click="addAutomation"
rtl$="[[rtl]]"
></paper-fab>
</ha-app-layout>
`;
@ -133,6 +142,12 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
isWide: {
type: Boolean,
},
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
};
}
@ -160,6 +175,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
_backTapped() {
history.back();
}
_computeRTL(hass) {
return computeRTL(hass);
}
}
customElements.define("ha-automation-picker", HaAutomationPicker);

22
src/panels/config/entity_registry/ha-config-entity-registry.ts
View File

@ -51,7 +51,11 @@ class HaConfigEntityRegistry extends LitElement {
`;
}
return html`
<hass-subpage header="Entity Registry">
<hass-subpage
header="${this.hass.localize(
"ui.panel.config.entity_registry.caption"
)}"
>
<ha-config-section .isWide=${this.isWide}>
<span slot="header">
${this.hass.localize(
@ -59,14 +63,16 @@ class HaConfigEntityRegistry extends LitElement {
)}
</span>
<span slot="introduction">
Home Assistant keeps a registry of every entity it has ever seen
that can be uniquely identified. Each of these entities will have an
entity ID assigned which will be reserved for just this entity.
${this.hass.localize(
"ui.panel.config.entity_registry.picker.introduction"
)}
<p>
Use the entity registry to override the name, change the entity ID
or remove the entry from Home Assistant. Note, removing the entity
registry entry won't remove the entity. To do that, remove it from
<a href="/config/integrations">the integrations page</a>.
${this.hass.localize(
"ui.panel.config.entity_registry.picker.introduction2"
)}
<a href="/config/integrations"
><ha-icon icon="mdi:link"></ha-icon
></a>
</p>
</span>
<paper-card>

28
src/panels/config/js/automation.js
View File

@ -3,7 +3,6 @@ import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "../ha-config-section";
import "../../../components/ha-markdown";
import Trigger from "./trigger/index";
import Condition from "./condition/index";
@ -68,11 +67,14 @@ export default class Automation extends Component {
{localize("ui.panel.config.automation.editor.triggers.header")}
</span>
<span slot="introduction">
<ha-markdown
content={localize(
<p>
{localize(
"ui.panel.config.automation.editor.triggers.introduction"
)}
/>
</p>
<a href="https://home-assistant.io/docs/automation/trigger/">
<ha-icon icon="mdi:link" />
</a>
</span>
<Trigger
trigger={trigger}
@ -87,11 +89,14 @@ export default class Automation extends Component {
{localize("ui.panel.config.automation.editor.conditions.header")}
</span>
<span slot="introduction">
<ha-markdown
content={localize(
<p>
{localize(
"ui.panel.config.automation.editor.conditions.introduction"
)}
/>
</p>
<a href="https://home-assistant.io/docs/scripts/conditions/">
<ha-icon icon="mdi:link" />
</a>
</span>
<Condition
condition={condition || []}
@ -106,11 +111,14 @@ export default class Automation extends Component {
{localize("ui.panel.config.automation.editor.actions.header")}
</span>
<span slot="introduction">
<ha-markdown
content={localize(
<p>
{localize(
"ui.panel.config.automation.editor.actions.introduction"
)}
/>
</p>
<a href="https://home-assistant.io/docs/automation/action/">
<ha-icon icon="mdi:link" />
</a>
</span>
<Script
script={action}

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

@ -17,6 +17,8 @@ import computeStateName from "../../../common/entity/compute_state_name";
import NavigateMixin from "../../../mixins/navigate-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin";
import { computeRTL } from "../../../common/util/compute_rtl";
function ScriptEditor(mountEl, props, mergeEl) {
return render(h(Script, props), mountEl, mergeEl);
}
@ -82,6 +84,17 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
paper-fab[dirty] {
margin-bottom: 0;
}
paper-fab[rtl] {
right: auto;
left: 16px;
}
paper-fab[rtl][is-wide] {
bottom: 24px;
right: auto;
left: 24px;
}
</style>
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
@ -105,6 +118,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
icon="hass:content-save"
title="Save"
on-click="saveScript"
rtl$="[[rtl]]"
></paper-fab>
</ha-app-layout>
`;
@ -164,6 +178,12 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
type: Boolean,
value: false,
},
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
};
}
@ -287,6 +307,10 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
computeName(script) {
return script && computeStateName(script);
}
_computeRTL(hass) {
return computeRTL(hass);
}
}
customElements.define("ha-script-editor", HaScriptEditor);

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

@ -8,6 +8,8 @@ import "@polymer/paper-item/paper-item";
import { html } from "@polymer/polymer/lib/utils/html-tag";
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";
@ -46,6 +48,17 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
right: 24px;
}
paper-fab[rtl] {
right: auto;
left: 16px;
}
paper-fab[rtl][is-wide] {
bottom: 24px;
right: auto;
left: 24px;
}
a {
color: var(--primary-color);
}
@ -99,6 +112,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
icon="hass:plus"
title="Add Script"
on-click="addScript"
rtl$="[[rtl]]"
></paper-fab>
</ha-app-layout>
`;
@ -126,6 +140,12 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
isWide: {
type: Boolean,
},
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
};
}
@ -152,6 +172,10 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
_backTapped() {
history.back();
}
_computeRTL(hass) {
return computeRTL(hass);
}
}
customElements.define("ha-script-picker", HaScriptPicker);

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

@ -12,6 +12,8 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
import NavigateMixin from "../../../mixins/navigate-mixin";
import EventsMixin from "../../../mixins/events-mixin";
import { computeRTL } from "../../../common/util/compute_rtl";
let registeredDialog = false;
/*
@ -35,6 +37,16 @@ class HaUserPicker extends EventsMixin(
bottom: 24px;
right: 24px;
}
paper-fab[rtl] {
right: auto;
left: 16px;
}
paper-fab[rtl][is-wide] {
bottom: 24px;
right: auto;
left: 24px;
}
paper-card {
display: block;
max-width: 600px;
@ -71,6 +83,7 @@ class HaUserPicker extends EventsMixin(
icon="hass:plus"
title="[[localize('ui.panel.config.users.picker.add_user')]]"
on-click="_addUser"
rtl$="[[rtl]]"
></paper-fab>
</hass-subpage>
`;
@ -80,6 +93,12 @@ class HaUserPicker extends EventsMixin(
return {
hass: Object,
users: Array,
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
};
}
@ -105,6 +124,10 @@ class HaUserPicker extends EventsMixin(
return `/config/users/${user.id}`;
}
_computeRTL(hass) {
return computeRTL(hass);
}
_addUser() {
this.fire("show-add-user", {
hass: this.hass,

12
src/panels/config/users/ha-dialog-add-user.js
View File

@ -31,14 +31,14 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
opened="{{_opened}}"
on-opened-changed="_openedChanged"
>
<h2>Add user</h2>
<h2>[[localize('ui.panel.config.users.add_user.caption')]]</h2>
<div>
<template is="dom-if" if="[[_errorMsg]]">
<div class="error">[[_errorMsg]]</div>
</template>
<paper-input
class="name"
label="Name"
label="[[localize('ui.panel.config.users.add_user.name')]]"
value="{{_name}}"
required
auto-validate
@ -48,7 +48,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
></paper-input>
<paper-input
class="username"
label="Username"
label="[[localize('ui.panel.config.users.add_user.username')]]"
value="{{_username}}"
required
auto-validate
@ -56,7 +56,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
error-message="Required"
></paper-input>
<paper-input
label="Password"
label="[[localize('ui.panel.config.users.add_user.password')]]"
type="password"
value="{{_password}}"
required
@ -71,7 +71,9 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
</div>
</template>
<template is="dom-if" if="[[!_loading]]">
<mwc-button on-click="_createUser">Create</mwc-button>
<mwc-button on-click="_createUser"
>[[localize('ui.panel.config.users.add_user.create')]]</mwc-button
>
</template>
</div>
</paper-dialog>

4
src/panels/config/users/ha-user-editor.js
View File

@ -35,7 +35,9 @@ class HaUserEditor extends EventsMixin(
}
</style>
<hass-subpage header="View user">
<hass-subpage
header="[[localize('ui.panel.config.users.editor.caption')]]"
>
<paper-card heading="[[_computeName(user)]]">
<table class="card-content">
<tr>

12
src/panels/lovelace/hui-view.ts
View File

@ -15,6 +15,7 @@ import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
import { LovelaceViewConfig, LovelaceCardConfig } from "../../data/lovelace";
import { HomeAssistant } from "../../types";
import { classMap } from "lit-html/directives/class-map";
import { Lovelace, LovelaceCard } from "./types";
import { createCardElement } from "./common/create-card-element";
@ -22,6 +23,8 @@ import { computeCardSize } from "./common/compute-card-size";
import { showEditCardDialog } from "./editor/card-editor/show-edit-card-dialog";
import { HuiErrorCard } from "./cards/hui-error-card";
import { computeRTL } from "../../common/util/compute_rtl";
let editCodeLoaded = false;
// Find column with < 5 entities, else column with lowest count
@ -99,6 +102,9 @@ export class HUIView extends LitElement {
"ui.panel.lovelace.editor.edit_card.add"
)}"
@click="${this._addCard}"
class="${classMap({
rtl: computeRTL(this.hass!),
})}"
></paper-fab>
`
: ""}
@ -148,6 +154,12 @@ export class HUIView extends LitElement {
z-index: 1;
}
paper-fab.rtl {
float: left;
right: auto;
left: 16px;
}
@media (max-width: 500px) {
:host {
padding-left: 0;

22
src/translations/en.json
View File

@ -546,7 +546,9 @@
"caption": "Area Registry",
"description": "Overview of all areas in your home.",
"picker": {
"header": "Area Registry"
"header": "Area Registry",
"introduction": "Areas are used to organize where devices are. This information will be used throughout Home Assistant to help you in organizing your interface, permissions and integrations with other systems.",
"introduction2": "To place devices in an area, use the link below to navigate to the integrations page and then click on a configured integration to get to the device cards."
},
"no_areas": "Looks like you have no areas yet!",
"create_area": "CREATE AREA",
@ -601,7 +603,7 @@
"description": "Create and edit automations",
"picker": {
"header": "Automation Editor",
"introduction": "The automation editor allows you to create and edit automations. Please read [the instructions](https://home-assistant.io/docs/automation/editor/) to make sure that you have configured Home Assistant correctly.",
"introduction": "The automation editor allows you to create and edit automations. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
"pick_automation": "Pick automation to edit",
"no_automations": "We couldn’t find any editable automations",
"add_automation": "Add automation"
@ -614,7 +616,7 @@
"alias": "Name",
"triggers": {
"header": "Triggers",
"introduction": "Triggers are what starts the processing of an automation rule. It is possible to specify multiple triggers for the same rule. Once a trigger starts, Home Assistant will validate the conditions, if any, and call the action.\n\n[Learn more about triggers.](https://home-assistant.io/docs/automation/trigger/)",
"introduction": "Triggers are what starts the processing of an automation rule. It is possible to specify multiple triggers for the same rule. Once a trigger starts, Home Assistant will validate the conditions, if any, and call the action. Click the link below to learn more about triggers.",
"add": "Add trigger",
"duplicate": "Duplicate",
"delete": "[%key:ui::panel::mailbox::delete_button%]",
@ -695,7 +697,7 @@
},
"conditions": {
"header": "Conditions",
"introduction": "Conditions are an optional part of an automation rule and can be used to prevent an action from happening when triggered. Conditions look very similar to triggers but are very different. A trigger will look at events happening in the system while a condition only looks at how the system looks right now. A trigger can observe that a switch is being turned on. A condition can only see if a switch is currently on or off.\n\n[Learn more about conditions.](https://home-assistant.io/docs/scripts/conditions/)",
"introduction": "Conditions are an optional part of an automation rule and can be used to prevent an action from happening when triggered. Conditions look very similar to triggers but are very different. A trigger will look at events happening in the system while a condition only looks at how the system looks right now. A trigger can observe that a switch is being turned on. A condition can only see if a switch is currently on or off. Click the link below to learn more about conditions.",
"add": "Add condition",
"duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
"delete": "[%key:ui::panel::mailbox::delete_button%]",
@ -740,7 +742,7 @@
},
"actions": {
"header": "Actions",
"introduction": "The actions are what Home Assistant will do when the automation is triggered.\n\n[Learn more about actions.](https://home-assistant.io/docs/automation/action/)",
"introduction": "The actions are what Home Assistant will do when the automation is triggered. Click the link below to learn more about actions.",
"add": "Add action",
"duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
"delete": "[%key:ui::panel::mailbox::delete_button%]",
@ -787,6 +789,8 @@
"description": "Overview of all known entities.",
"picker": {
"header": "Entity Registry",
"introduction": "Home Assistant keeps a registry of every entity it has ever seen that can be uniquely identified. Each of these entities will have an entity ID assigned which will be reserved for just this entity.",
"introduction2": "Use the entity registry to override the name, change the entity ID or remove the entry from Home Assistant. Note, removing the entity registry entry won't remove the entity. To do that, follow the link below and remove it from the integrations page.",
"unavailable": "(unavailable)"
},
"editor": {
@ -834,11 +838,19 @@
"title": "Users"
},
"editor": {
"caption": "View user",
"rename_user": "Rename user",
"change_password": "Change password",
"activate_user": "Activate user",
"deactivate_user": "Deactivate user",
"delete_user": "Delete user"
},
"add_user": {
"caption": "Add user",
"name": "Name",
"username": "Username",
"password": "Password",
"create": "Create"
}
},
"zha": {