mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
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:
parent
d015fe5160
commit
57b5db4f43
9
src/common/util/compute_rtl.ts
Normal file
9
src/common/util/compute_rtl.ts
Normal 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;
|
||||
}
|
@ -4,6 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "../ha-relative-time";
|
||||
import "./state-badge";
|
||||
import computeStateName from "../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../common/util/compute_rtl";
|
||||
|
||||
class StateInfo extends PolymerElement {
|
||||
static get template() {
|
||||
@ -25,10 +26,20 @@ class StateInfo extends PolymerElement {
|
||||
float: left;
|
||||
}
|
||||
|
||||
:host([rtl]) state-badge {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 56px;
|
||||
}
|
||||
|
||||
:host([rtl]) .info {
|
||||
margin-right: 56px;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.name {
|
||||
@apply --paper-font-common-nowrap;
|
||||
color: var(--primary-text-color);
|
||||
@ -87,12 +98,21 @@ class StateInfo extends PolymerElement {
|
||||
hass: Object,
|
||||
stateObj: Object,
|
||||
inDialog: Boolean,
|
||||
rtl: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
computed: "computeRTL(hass)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
computeStateName(stateObj) {
|
||||
return computeStateName(stateObj);
|
||||
}
|
||||
|
||||
computeRTL(hass) {
|
||||
return computeRTL(hass);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("state-info", StateInfo);
|
||||
|
@ -16,6 +16,7 @@ import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
import isComponentLoaded from "../../common/config/is_component_loaded";
|
||||
import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
|
||||
import EventsMixin from "../../mixins/events-mixin";
|
||||
import { computeRTL } from "../../common/util/compute_rtl";
|
||||
|
||||
const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
|
||||
/*
|
||||
@ -58,6 +59,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
|
||||
:host([domain="camera"]) paper-dialog-scrollable {
|
||||
margin: 0 -24px -21px;
|
||||
}
|
||||
|
||||
:host([rtl]) app-toolbar {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<app-toolbar>
|
||||
@ -147,6 +153,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
|
||||
hoursToShow: 24,
|
||||
},
|
||||
},
|
||||
rtl: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
computed: "_computeRTL(hass)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -190,5 +201,9 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
|
||||
_gotoSettings() {
|
||||
this.fire("more-info-page", { page: "settings" });
|
||||
}
|
||||
|
||||
_computeRTL(hass) {
|
||||
return computeRTL(hass);
|
||||
}
|
||||
}
|
||||
customElements.define("more-info-controls", MoreInfoControls);
|
||||
|
@ -12,6 +12,7 @@ import "./partial-cards";
|
||||
import "./partial-panel-resolver";
|
||||
import EventsMixin from "../mixins/events-mixin";
|
||||
import NavigateMixin from "../mixins/navigate-mixin";
|
||||
import { computeRTL } from "../common/util/compute_rtl";
|
||||
|
||||
import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
|
||||
import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog");
|
||||
@ -115,7 +116,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) {
|
||||
rtl: {
|
||||
type: Boolean,
|
||||
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;
|
||||
}
|
||||
|
||||
computeRTL(hass) {
|
||||
var lang = hass.selectedLanguage || hass.language;
|
||||
if (hass.translationMetadata.translations[lang]) {
|
||||
return hass.translationMetadata.translations[lang].isRTL || false;
|
||||
}
|
||||
return false;
|
||||
_computeRTL(hass) {
|
||||
return computeRTL(hass);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -7,6 +7,7 @@ import LocalizeMixin from "../mixins/localize-mixin";
|
||||
|
||||
import computeStateDisplay from "../common/entity/compute_state_display";
|
||||
import attributeClassNames from "../common/entity/attribute_class_names";
|
||||
import { computeRTL } from "../common/util/compute_rtl";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
@ -21,6 +22,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
|
||||
@apply --layout-baseline;
|
||||
}
|
||||
|
||||
:host([rtl]) {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
state-info {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
@ -33,6 +39,12 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
|
||||
max-width: 40%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
:host([rtl]) .state {
|
||||
margin-right: 16px;
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.state.has-unit_of_measurement {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -63,6 +75,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
rtl: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
computed: "_computeRTL(hass)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -77,5 +94,9 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
|
||||
];
|
||||
return classes.join(" ");
|
||||
}
|
||||
|
||||
_computeRTL(hass) {
|
||||
return computeRTL(hass);
|
||||
}
|
||||
}
|
||||
customElements.define("state-card-display", StateCardDisplay);
|
||||
|
Loading…
x
Reference in New Issue
Block a user