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

Merge pull request #12620 from yosilevy/RTL-no-host-context

Browse Source 
Replace host-context with css properties - after session with Bram
This commit is contained in:
Yosi Levy 2022-05-11 16:30:21 +03:00 committed by GitHub
commit c9c3be71cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ha-fab.ts
View File

@ -1,24 +1,25 @@
import { Fab } from "@material/mwc-fab"; import { FabBase } from "@material/mwc-fab/mwc-fab-base";
import { styles } from "@material/mwc-fab/mwc-fab.css";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import { css } from "lit"; import { css } from "lit";
@customElement("ha-fab") @customElement("ha-fab")
export class HaFab extends Fab { export class HaFab extends FabBase {
protected firstUpdated(changedProperties) { protected firstUpdated(changedProperties) {
super.firstUpdated(changedProperties); super.firstUpdated(changedProperties);
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)"); this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
} }
static override styles = Fab.styles.concat([ static override styles = [
styles,
css` css`
:host-context([style*="direction: rtl;"]) :host .mdc-fab--extended .mdc-fab__icon {
.mdc-fab--extended margin-inline-start: -8px;
.mdc-fab__icon { margin-inline-end: 12px;
margin-left: 12px !important; direction: var(--direction);
margin-right: calc(12px - 20px) !important;
} }
`, `,
]); ];
} }
declare global { declare global {

4
src/panels/config/logs/error-log-card.ts
View File

@ -235,8 +235,8 @@ class ErrorLogCard extends LitElement {
color: var(--warning-color); color: var(--warning-color);
} }
:host-context([style*="direction: rtl;"]) mwc-button { mwc-button {
direction: rtl; direction: var(--direction);
} }
`; `;
} }

9
src/state/translations-mixin.ts
View File

@ -180,12 +180,19 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
private _applyTranslations(hass: HomeAssistant) { private _applyTranslations(hass: HomeAssistant) {
document.querySelector("html")!.setAttribute("lang", hass.language); document.querySelector("html")!.setAttribute("lang", hass.language);
document.dir = computeRTLDirection(hass); this._applyDirection(hass);
this._loadCoreTranslations(hass.language); this._loadCoreTranslations(hass.language);
this.__loadedFragmetTranslations = new Set(); this.__loadedFragmetTranslations = new Set();
this._loadFragmentTranslations(hass.language, hass.panelUrl); this._loadFragmentTranslations(hass.language, hass.panelUrl);
} }
private _applyDirection(hass: HomeAssistant) {
const direction = computeRTLDirection(hass);
this.style.direction = direction;
document.dir = direction;
this.style.setProperty("--direction", direction);
}
/** /**
* Load translations from the backend * Load translations from the backend
* @param language language to fetch * @param language language to fetch