From f3b1b4de7b70a84b90aaa0b32d1a3ba777a15edd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yh=C3=ABhtozr?= Date: Sat, 17 Dec 2022 18:51:21 +0900 Subject: [PATCH] writing mode: RTL functionality w/ CSS values debug --- src/App.vue | 1 + src/components/dialog_modal/dialog_modal.vue | 3 +++ .../edit_status_modal/edit_status_modal.vue | 2 +- src/components/emoji_picker/emoji_picker.scss | 5 ++--- src/components/mobile_nav/mobile_nav.vue | 3 +++ src/components/popover/popover.js | 16 +++++++++++----- .../post_status_form/post_status_form.vue | 4 ++-- src/components/react_button/react_button.vue | 3 +++ src/components/side_drawer/side_drawer.vue | 6 ++++++ src/components/status/status.scss | 2 +- src/components/sticker_picker/sticker_picker.vue | 3 +-- src/components/timeline_menu/timeline_menu.vue | 2 +- src/i18n/ar.json | 3 +++ src/i18n/en.json | 3 +++ src/i18n/fa.json | 3 +++ src/i18n/he.json | 3 +++ 16 files changed, 47 insertions(+), 15 deletions(-) diff --git a/src/App.vue b/src/App.vue index 80ebb525..d80bfe93 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,6 +2,7 @@
isRTL ? viewport.width - box.right : box.left + const inlineEndOf = (box) => isRTL ? viewport.width - box.left : box.right + // Popover will be anchored around this element, trigger ref is the container, so // its children are what are inside the slot. Expect only one v-slot:trigger. const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el @@ -61,7 +66,7 @@ const Popover = { const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight const screenBox = anchorEl.getBoundingClientRect() // Screen position of the origin point for popover - const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top } + const origin = { x: inlineStartOf(screenBox) + screenBox.width * 0.5, y: screenBox.top } const content = this.$refs.content // Minor optimization, don't call a slow reflow call if we don't have to const parentBounds = this.boundTo && @@ -73,11 +78,11 @@ const Popover = { // What are the screen bounds for the popover? Viewport vs container // when using viewport, using default margin values to dodge the navbar const xBounds = this.boundTo && this.boundTo.x === 'container' ? { - min: parentBounds.left + (margin.left || 0), - max: parentBounds.right - (margin.right || 0) + min: inlineStartOf(parentBounds) + (margin.left || 0), + max: inlineEndOf(parentBounds) - (margin.right || 0) } : { min: 0 + (margin.left || 10), - max: window.innerWidth - (margin.right || 10) + max: viewport.width - (margin.right || 10) } const yBounds = this.boundTo && this.boundTo.y === 'container' ? { @@ -122,12 +127,13 @@ const Popover = { const xOffset = (this.offset && this.offset.x) || 0 const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset + const translateXLogical = isRTL ? -translateX : translateX // Note, separate translateX and translateY avoids blurry text on chromium, // single translate or translate3d resulted in blurry text. this.styles = { opacity: 1, - transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` + transform: `translateX(${Math.round(translateXLogical)}px) translateY(${Math.round(translateY)}px)` } }, showPopover () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index d18ee3da..afd51cb3 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -471,7 +471,7 @@ // Order is not necessary but a good indicator .media-upload-icon { order: 1; - justify-content: left; + justify-content: start; } .emoji-icon { @@ -481,7 +481,7 @@ .poll-icon { order: 3; - justify-content: right; + justify-content: end; } .error { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index b5fc89d3..482fbf3a 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -107,6 +107,9 @@ .popover { transform: translateX(-64px) translateY(5px); min-inline-size: 70%; + [dir="rtl"] & { + transform: translateX(64px) translateY(5px); + } } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 1c6a3a1b..18475bd9 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -243,6 +243,9 @@ .side-drawer-container-closed { transition-delay: 0.35s; transform: translate(-100%); + [dir="rtl"] & { + transform: translate(200%); + } } .side-drawer-darken { @@ -317,6 +320,9 @@ .side-drawer-closed { transform: translate(-100%); + [dir="rtl"] & { + transform: translate(200%); + } } .side-drawer-heading { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index af44cdf9..30902d05 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -310,7 +310,7 @@ inline-size: 100%; display: flex; flex-wrap: wrap; - justify-content: left; + justify-content: start; margin-block-start: var(--status-margin, $status-margin); > * { diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue index 99d0eec5..fca627e9 100644 --- a/src/components/sticker_picker/sticker_picker.vue +++ b/src/components/sticker_picker/sticker_picker.vue @@ -41,8 +41,7 @@ position: absolute; inset-inline-end: 0; inset-inline-start: 0; - margin-block: 0; - margin-inline: !important; + margin: 0 !important; background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 76379047..16038825 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -32,7 +32,7 @@ - +