FIX: Correctly detect RTL (#26127)
This commit is contained in:
parent
eba0131561
commit
dcf1c2bc04
|
@ -2,6 +2,7 @@ import Component from "@glimmer/component";
|
||||||
import { hash } from "@ember/helper";
|
import { hash } from "@ember/helper";
|
||||||
import { on } from "@ember/modifier";
|
import { on } from "@ember/modifier";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
||||||
import { prefersReducedMotion } from "discourse/lib/utilities";
|
import { prefersReducedMotion } from "discourse/lib/utilities";
|
||||||
import { isTesting } from "discourse-common/config/environment";
|
import { isTesting } from "discourse-common/config/environment";
|
||||||
import discourseLater from "discourse-common/lib/later";
|
import discourseLater from "discourse-common/lib/later";
|
||||||
|
@ -28,10 +29,7 @@ export default class HamburgerDropdownWrapper extends Component {
|
||||||
) {
|
) {
|
||||||
const panel = document.querySelector(".menu-panel");
|
const panel = document.querySelector(".menu-panel");
|
||||||
const headerCloak = document.querySelector(".header-cloak");
|
const headerCloak = document.querySelector(".header-cloak");
|
||||||
const finishPosition =
|
const finishPosition = isDocumentRTL() ? "340px" : "-340px";
|
||||||
document.querySelector("html").classList["direction"] === "rtl"
|
|
||||||
? "340px"
|
|
||||||
: "-340px";
|
|
||||||
panel
|
panel
|
||||||
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
||||||
duration: 200,
|
duration: 200,
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
import { hash } from "@ember/helper";
|
import { hash } from "@ember/helper";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
||||||
import { prefersReducedMotion } from "discourse/lib/utilities";
|
import { prefersReducedMotion } from "discourse/lib/utilities";
|
||||||
import { isTesting } from "discourse-common/config/environment";
|
import { isTesting } from "discourse-common/config/environment";
|
||||||
import discourseLater from "discourse-common/lib/later";
|
import discourseLater from "discourse-common/lib/later";
|
||||||
|
@ -16,10 +17,7 @@ export default class UserMenuWrapper extends Component {
|
||||||
) {
|
) {
|
||||||
const panel = document.querySelector(".menu-panel");
|
const panel = document.querySelector(".menu-panel");
|
||||||
const headerCloak = document.querySelector(".header-cloak");
|
const headerCloak = document.querySelector(".header-cloak");
|
||||||
const finishPosition =
|
const finishPosition = isDocumentRTL() ? "-340px" : "340px";
|
||||||
document.documentElement.classList["direction"] === "rtl"
|
|
||||||
? "-340px"
|
|
||||||
: "340px";
|
|
||||||
panel
|
panel
|
||||||
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
||||||
duration: 200,
|
duration: 200,
|
||||||
|
|
|
@ -9,6 +9,7 @@ import ItsATrap from "@discourse/itsatrap";
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
import scrollLock from "discourse/lib/scroll-lock";
|
import scrollLock from "discourse/lib/scroll-lock";
|
||||||
import SwipeEvents from "discourse/lib/swipe-events";
|
import SwipeEvents from "discourse/lib/swipe-events";
|
||||||
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
||||||
import { isTesting } from "discourse-common/config/environment";
|
import { isTesting } from "discourse-common/config/environment";
|
||||||
import discourseLater from "discourse-common/lib/later";
|
import discourseLater from "discourse-common/lib/later";
|
||||||
import { bind, debounce } from "discourse-common/utils/decorators";
|
import { bind, debounce } from "discourse-common/utils/decorators";
|
||||||
|
@ -51,7 +52,7 @@ export default class GlimmerSiteHeader extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
get leftMenuClass() {
|
get leftMenuClass() {
|
||||||
if (document.querySelector("html").classList["direction"] === "rtl") {
|
if (isDocumentRTL()) {
|
||||||
return "user-menu";
|
return "user-menu";
|
||||||
} else {
|
} else {
|
||||||
return "hamburger-panel";
|
return "hamburger-panel";
|
||||||
|
|
|
@ -6,6 +6,7 @@ import MountWidget from "discourse/components/mount-widget";
|
||||||
import { topicTitleDecorators } from "discourse/components/topic-title";
|
import { topicTitleDecorators } from "discourse/components/topic-title";
|
||||||
import scrollLock from "discourse/lib/scroll-lock";
|
import scrollLock from "discourse/lib/scroll-lock";
|
||||||
import SwipeEvents from "discourse/lib/swipe-events";
|
import SwipeEvents from "discourse/lib/swipe-events";
|
||||||
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
||||||
import Docking from "discourse/mixins/docking";
|
import Docking from "discourse/mixins/docking";
|
||||||
import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
|
import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
|
||||||
import { isTesting } from "discourse-common/config/environment";
|
import { isTesting } from "discourse-common/config/environment";
|
||||||
|
@ -104,12 +105,8 @@ const SiteHeaderComponent = MountWidget.extend(
|
||||||
this.pxClosed = null;
|
this.pxClosed = null;
|
||||||
},
|
},
|
||||||
|
|
||||||
_isRTL() {
|
|
||||||
return document.querySelector("html").classList["direction"] === "rtl";
|
|
||||||
},
|
|
||||||
|
|
||||||
_leftMenuClass() {
|
_leftMenuClass() {
|
||||||
return this._isRTL() ? "user-menu" : "hamburger-panel";
|
return isDocumentRTL() ? "user-menu" : "hamburger-panel";
|
||||||
},
|
},
|
||||||
|
|
||||||
@bind
|
@bind
|
||||||
|
|
|
@ -8,6 +8,7 @@ import { addExtraUserClasses } from "discourse/helpers/user-avatar";
|
||||||
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
||||||
import scrollLock from "discourse/lib/scroll-lock";
|
import scrollLock from "discourse/lib/scroll-lock";
|
||||||
import { logSearchLinkClick } from "discourse/lib/search";
|
import { logSearchLinkClick } from "discourse/lib/search";
|
||||||
|
import { isDocumentRTL } from "discourse/lib/text-direction";
|
||||||
import DiscourseURL from "discourse/lib/url";
|
import DiscourseURL from "discourse/lib/url";
|
||||||
import { scrollTop } from "discourse/mixins/scroll-top";
|
import { scrollTop } from "discourse/mixins/scroll-top";
|
||||||
import { avatarImg } from "discourse/widgets/post";
|
import { avatarImg } from "discourse/widgets/post";
|
||||||
|
@ -381,10 +382,7 @@ createWidget("hamburger-dropdown-wrapper", {
|
||||||
) {
|
) {
|
||||||
const panel = document.querySelector(".menu-panel");
|
const panel = document.querySelector(".menu-panel");
|
||||||
const headerCloak = document.querySelector(".header-cloak");
|
const headerCloak = document.querySelector(".header-cloak");
|
||||||
const finishPosition =
|
const finishPosition = isDocumentRTL() ? "340px" : "-340px";
|
||||||
document.querySelector("html").classList["direction"] === "rtl"
|
|
||||||
? "340px"
|
|
||||||
: "-340px";
|
|
||||||
panel
|
panel
|
||||||
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
||||||
duration: 200,
|
duration: 200,
|
||||||
|
@ -438,10 +436,7 @@ createWidget("revamped-user-menu-wrapper", {
|
||||||
) {
|
) {
|
||||||
const panel = document.querySelector(".menu-panel");
|
const panel = document.querySelector(".menu-panel");
|
||||||
const headerCloak = document.querySelector(".header-cloak");
|
const headerCloak = document.querySelector(".header-cloak");
|
||||||
const finishPosition =
|
const finishPosition = isDocumentRTL() ? "-340px" : "340px";
|
||||||
document.querySelector("html").classList["direction"] === "rtl"
|
|
||||||
? "-340px"
|
|
||||||
: "340px";
|
|
||||||
panel
|
panel
|
||||||
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
.animate([{ transform: `translate3d(${finishPosition}, 0, 0)` }], {
|
||||||
duration: 200,
|
duration: 200,
|
||||||
|
|
Loading…
Reference in New Issue