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 { css } from "lit";
@customElement("ha-fab")
export class HaFab extends Fab {
export class HaFab extends FabBase {
protected firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
}
static override styles = Fab.styles.concat([
static override styles = [
styles,
css`
:host-context([style*="direction: rtl;"])
.mdc-fab--extended
.mdc-fab__icon {
margin-left: 12px !important;
margin-right: calc(12px - 20px) !important;
:host .mdc-fab--extended .mdc-fab__icon {
margin-inline-start: -8px;
margin-inline-end: 12px;
direction: var(--direction);
}
`,
]);
];
}
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);
}
:host-context([style*="direction: rtl;"]) mwc-button {
direction: rtl;
mwc-button {
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) {
document.querySelector("html")!.setAttribute("lang", hass.language);
document.dir = computeRTLDirection(hass);
this._applyDirection(hass);
this._loadCoreTranslations(hass.language);
this.__loadedFragmetTranslations = new Set();
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
* @param language language to fetch