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

Fix drawer in RTL (#16039

Browse Source 
* Fix drawer in RTL

* format

* make it update when lang changes

* Update ha-drawer.ts

* Update ha-drawer.ts
This commit is contained in:
Bram Kragten 2023-04-03 20:55:38 +02:00 committed by GitHub
parent 423709dd23
commit 890be2c177
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,21 @@
import { DIRECTION_LEFT, Manager, Swipe } from "@egjs/hammerjs"; import {
DIRECTION_LEFT,
DIRECTION_RIGHT,
Manager,
Swipe,
} from "@egjs/hammerjs";
import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base"; import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
import { styles } from "@material/mwc-drawer/mwc-drawer.css"; import { styles } from "@material/mwc-drawer/mwc-drawer.css";
import { css, PropertyValues } from "lit"; import { css, PropertyValues } from "lit";
import { customElement } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
const blockingElements = (document as any).$blockingElements; const blockingElements = (document as any).$blockingElements;
@customElement("ha-drawer") @customElement("ha-drawer")
export class HaDrawer extends DrawerBase { export class HaDrawer extends DrawerBase {
@property() public direction: "ltr" | "rtl" = "ltr";
private _mc?: HammerManager; private _mc?: HammerManager;
protected createAdapter() { protected createAdapter() {
@ -29,16 +36,20 @@ export class HaDrawer extends DrawerBase {
protected updated(changedProps: PropertyValues) { protected updated(changedProps: PropertyValues) {
super.updated(changedProps); super.updated(changedProps);
if (changedProps.has("direction")) {
this.mdcRoot.dir = this.direction;
}
if (changedProps.has("open") && this.open && this.type === "modal") { if (changedProps.has("open") && this.open && this.type === "modal") {
this._mc = new Manager(document, { this._mc = new Manager(document, {
touchAction: "pan-y", touchAction: "pan-y",
}); });
this._mc.add( this._mc.add(
new Swipe({ new Swipe({
direction: DIRECTION_LEFT, direction:
this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT,
}) })
); );
this._mc.on("swipeleft", () => { this._mc.on("swipeleft swiperight", () => {
fireEvent(this, "hass-toggle-menu", { open: false }); fireEvent(this, "hass-toggle-menu", { open: false });
}); });
} else if (this._mc) { } else if (this._mc) {

2
src/layouts/home-assistant-main.ts
View File

@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../common/dom/fire_event"; import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
import { listenMediaQuery } from "../common/dom/media_query"; import { listenMediaQuery } from "../common/dom/media_query";
import { toggleAttribute } from "../common/dom/toggle_attribute"; import { toggleAttribute } from "../common/dom/toggle_attribute";
import { computeRTLDirection } from "../common/util/compute_rtl";
import "../components/ha-drawer"; import "../components/ha-drawer";
import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer"; import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
import type { HomeAssistant, Route } from "../types"; import type { HomeAssistant, Route } from "../types";
@ -61,6 +62,7 @@ export class HomeAssistantMain extends LitElement {
<ha-drawer <ha-drawer
.type=${sidebarNarrow ? "modal" : ""} .type=${sidebarNarrow ? "modal" : ""}
.open=${sidebarNarrow ? this._drawerOpen : undefined} .open=${sidebarNarrow ? this._drawerOpen : undefined}
.direction=${computeRTLDirection(this.hass)}
@MDCDrawer:closed=${this._drawerClosed} @MDCDrawer:closed=${this._drawerClosed}
> >
<ha-sidebar <ha-sidebar