writing mode: RTL functionality w/ CSS values debug
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
This commit is contained in:
parent
5d168fe689
commit
f3b1b4de7b
16 changed files with 47 additions and 15 deletions
|
@ -2,6 +2,7 @@
|
||||||
<div
|
<div
|
||||||
id="app-loaded"
|
id="app-loaded"
|
||||||
:style="bgStyle"
|
:style="bgStyle"
|
||||||
|
:dir="$t('_locale.dir')"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
id="app_bg_wrapper"
|
id="app_bg_wrapper"
|
||||||
|
|
|
@ -58,6 +58,9 @@
|
||||||
inline-size: max-content;
|
inline-size: max-content;
|
||||||
background-color: $fallback--bg;
|
background-color: $fallback--bg;
|
||||||
background-color: var(--bg, $fallback--bg);
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
[dir="rtl"] & {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
|
||||||
.dialog-modal-heading {
|
.dialog-modal-heading {
|
||||||
.title {
|
.title {
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
max-inline-size: 6.5em;
|
max-inline-size: 6.5em;
|
||||||
|
|
||||||
.emoji-icon {
|
.emoji-icon {
|
||||||
justify-content: right;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,8 +26,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-end: 0;
|
inset-inline-end: 0;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
margin-block: 0;
|
margin: 0 !important;
|
||||||
margin-inline: !important;
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background-color: $fallback--bg;
|
background-color: $fallback--bg;
|
||||||
background-color: var(--popover, $fallback--bg);
|
background-color: var(--popover, $fallback--bg);
|
||||||
|
@ -192,7 +191,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-inline-start: 5px;
|
padding-inline-start: 5px;
|
||||||
justify-content: left;
|
justify-content: start;
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
|
|
|
@ -166,6 +166,9 @@
|
||||||
&.-closed {
|
&.-closed {
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
[dir="rtl"] & {
|
||||||
|
transform: translate(-100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,6 +53,11 @@ const Popover = {
|
||||||
return
|
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
|
// 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.
|
// 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
|
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 anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
|
||||||
const screenBox = anchorEl.getBoundingClientRect()
|
const screenBox = anchorEl.getBoundingClientRect()
|
||||||
// Screen position of the origin point for popover
|
// 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
|
const content = this.$refs.content
|
||||||
// Minor optimization, don't call a slow reflow call if we don't have to
|
// Minor optimization, don't call a slow reflow call if we don't have to
|
||||||
const parentBounds = this.boundTo &&
|
const parentBounds = this.boundTo &&
|
||||||
|
@ -73,11 +78,11 @@ const Popover = {
|
||||||
// What are the screen bounds for the popover? Viewport vs container
|
// What are the screen bounds for the popover? Viewport vs container
|
||||||
// when using viewport, using default margin values to dodge the navbar
|
// when using viewport, using default margin values to dodge the navbar
|
||||||
const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
|
const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
|
||||||
min: parentBounds.left + (margin.left || 0),
|
min: inlineStartOf(parentBounds) + (margin.left || 0),
|
||||||
max: parentBounds.right - (margin.right || 0)
|
max: inlineEndOf(parentBounds) - (margin.right || 0)
|
||||||
} : {
|
} : {
|
||||||
min: 0 + (margin.left || 10),
|
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' ? {
|
const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
|
||||||
|
@ -122,12 +127,13 @@ const Popover = {
|
||||||
|
|
||||||
const xOffset = (this.offset && this.offset.x) || 0
|
const xOffset = (this.offset && this.offset.x) || 0
|
||||||
const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
|
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,
|
// Note, separate translateX and translateY avoids blurry text on chromium,
|
||||||
// single translate or translate3d resulted in blurry text.
|
// single translate or translate3d resulted in blurry text.
|
||||||
this.styles = {
|
this.styles = {
|
||||||
opacity: 1,
|
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 () {
|
showPopover () {
|
||||||
|
|
|
@ -471,7 +471,7 @@
|
||||||
// Order is not necessary but a good indicator
|
// Order is not necessary but a good indicator
|
||||||
.media-upload-icon {
|
.media-upload-icon {
|
||||||
order: 1;
|
order: 1;
|
||||||
justify-content: left;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-icon {
|
.emoji-icon {
|
||||||
|
@ -481,7 +481,7 @@
|
||||||
|
|
||||||
.poll-icon {
|
.poll-icon {
|
||||||
order: 3;
|
order: 3;
|
||||||
justify-content: right;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|
|
@ -107,6 +107,9 @@
|
||||||
.popover {
|
.popover {
|
||||||
transform: translateX(-64px) translateY(5px);
|
transform: translateX(-64px) translateY(5px);
|
||||||
min-inline-size: 70%;
|
min-inline-size: 70%;
|
||||||
|
[dir="rtl"] & {
|
||||||
|
transform: translateX(64px) translateY(5px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -243,6 +243,9 @@
|
||||||
.side-drawer-container-closed {
|
.side-drawer-container-closed {
|
||||||
transition-delay: 0.35s;
|
transition-delay: 0.35s;
|
||||||
transform: translate(-100%);
|
transform: translate(-100%);
|
||||||
|
[dir="rtl"] & {
|
||||||
|
transform: translate(200%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-drawer-darken {
|
.side-drawer-darken {
|
||||||
|
@ -317,6 +320,9 @@
|
||||||
|
|
||||||
.side-drawer-closed {
|
.side-drawer-closed {
|
||||||
transform: translate(-100%);
|
transform: translate(-100%);
|
||||||
|
[dir="rtl"] & {
|
||||||
|
transform: translate(200%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-drawer-heading {
|
.side-drawer-heading {
|
||||||
|
|
|
@ -310,7 +310,7 @@
|
||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: left;
|
justify-content: start;
|
||||||
margin-block-start: var(--status-margin, $status-margin);
|
margin-block-start: var(--status-margin, $status-margin);
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
|
@ -41,8 +41,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-end: 0;
|
inset-inline-end: 0;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
margin-block: 0;
|
margin: 0 !important;
|
||||||
margin-inline: !important;
|
|
||||||
background-color: $fallback--bg;
|
background-color: $fallback--bg;
|
||||||
background-color: var(--popover, $fallback--bg);
|
background-color: var(--popover, $fallback--bg);
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
</Popover>
|
</Popover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="./timeline_menu.js" ></script>
|
<script src="./timeline_menu.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
|
"_locale": {
|
||||||
|
"dir": "rtl"
|
||||||
|
},
|
||||||
"features_panel": {
|
"features_panel": {
|
||||||
"media_proxy": "بروكسي الوسائط",
|
"media_proxy": "بروكسي الوسائط",
|
||||||
"scope_options": "",
|
"scope_options": "",
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
|
"_locale": {
|
||||||
|
"dir": "ltr"
|
||||||
|
},
|
||||||
"about": {
|
"about": {
|
||||||
"bubble_instances": "Local Bubble Instances",
|
"bubble_instances": "Local Bubble Instances",
|
||||||
"bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",
|
"bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
|
"_locale": {
|
||||||
|
"dir": "rtl"
|
||||||
|
},
|
||||||
"about": {
|
"about": {
|
||||||
"mrf": {
|
"mrf": {
|
||||||
"federation": "فدراسیون",
|
"federation": "فدراسیون",
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
{
|
{
|
||||||
|
"_locale": {
|
||||||
|
"dir": "rtl"
|
||||||
|
},
|
||||||
"about": {
|
"about": {
|
||||||
"mrf": {
|
"mrf": {
|
||||||
"federation": "פדרציה",
|
"federation": "פדרציה",
|
||||||
|
|
Loading…
Reference in a new issue