writing mode: RTL functionality w/ CSS values debug
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful

This commit is contained in:
Yhëhtozr 2022-12-17 18:51:21 +09:00
parent 5d168fe689
commit f3b1b4de7b
16 changed files with 47 additions and 15 deletions

View file

@ -2,6 +2,7 @@
<div
id="app-loaded"
:style="bgStyle"
:dir="$t('_locale.dir')"
>
<div
id="app_bg_wrapper"

View file

@ -58,6 +58,9 @@
inline-size: max-content;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
[dir="rtl"] & {
transform: translateX(50%);
}
.dialog-modal-heading {
.title {

View file

@ -41,7 +41,7 @@
max-inline-size: 6.5em;
.emoji-icon {
justify-content: right;
justify-content: end;
}
}
}

View file

@ -26,8 +26,7 @@
position: absolute;
inset-inline-end: 0;
inset-inline-start: 0;
margin-block: 0;
margin-inline: !important;
margin: 0 !important;
z-index: 100;
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
@ -192,7 +191,7 @@
align-items: center;
flex-wrap: wrap;
padding-inline-start: 5px;
justify-content: left;
justify-content: start;
&-title {
font-size: 0.85em;

View file

@ -166,6 +166,9 @@
&.-closed {
transform: translateX(100%);
box-shadow: none;
[dir="rtl"] & {
transform: translate(-100%);
}
}
}

View file

@ -53,6 +53,11 @@ const Popover = {
return
}
const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
const isRTL = this.$t('_locale.dir') == "rtl"
const inlineStartOf = (box) => 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 () {

View file

@ -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 {

View file

@ -107,6 +107,9 @@
.popover {
transform: translateX(-64px) translateY(5px);
min-inline-size: 70%;
[dir="rtl"] & {
transform: translateX(64px) translateY(5px);
}
}
}

View file

@ -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 {

View file

@ -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);
> * {

View file

@ -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;

View file

@ -32,7 +32,7 @@
</Popover>
</template>
<script src="./timeline_menu.js" ></script>
<script src="./timeline_menu.js"></script>
<style lang="scss">
@import '../../_variables.scss';

View file

@ -1,4 +1,7 @@
{
"_locale": {
"dir": "rtl"
},
"features_panel": {
"media_proxy": "بروكسي الوسائط",
"scope_options": "",

View file

@ -1,4 +1,7 @@
{
"_locale": {
"dir": "ltr"
},
"about": {
"bubble_instances": "Local Bubble Instances",
"bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",

View file

@ -1,4 +1,7 @@
{
"_locale": {
"dir": "rtl"
},
"about": {
"mrf": {
"federation": "فدراسیون",

View file

@ -1,4 +1,7 @@
{
"_locale": {
"dir": "rtl"
},
"about": {
"mrf": {
"federation": "פדרציה",