Move computeRTL to a separate file and add RTL support in state-info (#2165)

* RTL support (POC)

* restore yarn.lock

* Move computeRTL to a separate file and add RTL support in state-info

* Move import to top after failed CI

* Replace var to const

* Change HassEntity to HomeAssistant object

* Support RTL in state info and state card display

* Support for RTL in more-info-controls:

* Update src/common/util/compute_rtl.ts

Co-Authored-By: rhayun <ronen.hayun@gmail.com>

* remove default from export

* prefix all computeRTL with underscroe for privately uses
This commit is contained in:
Ronen Hayun 2018-12-03 11:54:29 +02:00 committed by Paulus Schoutsen
parent d015fe5160
commit 57b5db4f43
5 changed files with 69 additions and 7 deletions

View File

@ -0,0 +1,9 @@
import { HomeAssistant } from "../../types";
export function computeRTL(hass: HomeAssistant) {
const lang = hass.language || "en";
if (hass.translationMetadata.translations[lang]) {
return hass.translationMetadata.translations[lang].isRTL || false;
}
return false;
}

View File

@ -4,6 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../ha-relative-time"; import "../ha-relative-time";
import "./state-badge"; import "./state-badge";
import computeStateName from "../../common/entity/compute_state_name"; import computeStateName from "../../common/entity/compute_state_name";
import { computeRTL } from "../../common/util/compute_rtl";
class StateInfo extends PolymerElement { class StateInfo extends PolymerElement {
static get template() { static get template() {
@ -25,10 +26,20 @@ class StateInfo extends PolymerElement {
float: left; float: left;
} }
:host([rtl]) state-badge {
float: right;
}
.info { .info {
margin-left: 56px; margin-left: 56px;
} }
:host([rtl]) .info {
margin-right: 56px;
margin-left: 0;
text-align: right;
}
.name { .name {
@apply --paper-font-common-nowrap; @apply --paper-font-common-nowrap;
color: var(--primary-text-color); color: var(--primary-text-color);
@ -87,12 +98,21 @@ class StateInfo extends PolymerElement {
hass: Object, hass: Object,
stateObj: Object, stateObj: Object,
inDialog: Boolean, inDialog: Boolean,
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "computeRTL(hass)",
},
}; };
} }
computeStateName(stateObj) { computeStateName(stateObj) {
return computeStateName(stateObj); return computeStateName(stateObj);
} }
computeRTL(hass) {
return computeRTL(hass);
}
} }
customElements.define("state-info", StateInfo); customElements.define("state-info", StateInfo);

View File

@ -16,6 +16,7 @@ import computeStateDomain from "../../common/entity/compute_state_domain";
import isComponentLoaded from "../../common/config/is_component_loaded"; import isComponentLoaded from "../../common/config/is_component_loaded";
import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const"; import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
import EventsMixin from "../../mixins/events-mixin"; import EventsMixin from "../../mixins/events-mixin";
import { computeRTL } from "../../common/util/compute_rtl";
const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"]; const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
/* /*
@ -58,6 +59,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
:host([domain="camera"]) paper-dialog-scrollable { :host([domain="camera"]) paper-dialog-scrollable {
margin: 0 -24px -21px; margin: 0 -24px -21px;
} }
:host([rtl]) app-toolbar {
direction: rtl;
text-align: right;
}
</style> </style>
<app-toolbar> <app-toolbar>
@ -147,6 +153,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
hoursToShow: 24, hoursToShow: 24,
}, },
}, },
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
}; };
} }
@ -190,5 +201,9 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
_gotoSettings() { _gotoSettings() {
this.fire("more-info-page", { page: "settings" }); this.fire("more-info-page", { page: "settings" });
} }
_computeRTL(hass) {
return computeRTL(hass);
}
} }
customElements.define("more-info-controls", MoreInfoControls); customElements.define("more-info-controls", MoreInfoControls);

View File

@ -12,6 +12,7 @@ import "./partial-cards";
import "./partial-panel-resolver"; import "./partial-panel-resolver";
import EventsMixin from "../mixins/events-mixin"; import EventsMixin from "../mixins/events-mixin";
import NavigateMixin from "../mixins/navigate-mixin"; import NavigateMixin from "../mixins/navigate-mixin";
import { computeRTL } from "../common/util/compute_rtl";
import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar"); import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog"); import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog");
@ -115,7 +116,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
rtl: { rtl: {
type: Boolean, type: Boolean,
reflectToAttribute: true, reflectToAttribute: true,
computed: "computeRTL(hass)", computed: "_computeRTL(hass)",
}, },
}; };
} }
@ -175,12 +176,8 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
return NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; return NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
} }
computeRTL(hass) { _computeRTL(hass) {
var lang = hass.selectedLanguage || hass.language; return computeRTL(hass);
if (hass.translationMetadata.translations[lang]) {
return hass.translationMetadata.translations[lang].isRTL || false;
}
return false;
} }
} }

View File

@ -7,6 +7,7 @@ import LocalizeMixin from "../mixins/localize-mixin";
import computeStateDisplay from "../common/entity/compute_state_display"; import computeStateDisplay from "../common/entity/compute_state_display";
import attributeClassNames from "../common/entity/attribute_class_names"; import attributeClassNames from "../common/entity/attribute_class_names";
import { computeRTL } from "../common/util/compute_rtl";
/* /*
* @appliesMixin LocalizeMixin * @appliesMixin LocalizeMixin
@ -21,6 +22,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
@apply --layout-baseline; @apply --layout-baseline;
} }
:host([rtl]) {
direction: rtl;
text-align: right;
}
state-info { state-info {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0; min-width: 0;
@ -33,6 +39,12 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
max-width: 40%; max-width: 40%;
flex: 0 0 auto; flex: 0 0 auto;
} }
:host([rtl]) .state {
margin-right: 16px;
margin-left: 0;
text-align: left;
}
.state.has-unit_of_measurement { .state.has-unit_of_measurement {
white-space: nowrap; white-space: nowrap;
} }
@ -63,6 +75,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
type: Boolean, type: Boolean,
value: false, value: false,
}, },
rtl: {
type: Boolean,
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
}; };
} }
@ -77,5 +94,9 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
]; ];
return classes.join(" "); return classes.join(" ");
} }
_computeRTL(hass) {
return computeRTL(hass);
}
} }
customElements.define("state-card-display", StateCardDisplay); customElements.define("state-card-display", StateCardDisplay);