diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 4167ff693ef..91d4df93ffd 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -54,7 +54,10 @@ export default class ColumnsArea extends ImmutablePureComponent { if (!this.props.singleColumn) { this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false); } - this.lastIndex = getIndex(this.context.router.history.location.pathname); + + this.lastIndex = getIndex(this.context.router.history.location.pathname); + this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); + this.setState({ shouldAnimate: true }); } @@ -80,7 +83,8 @@ export default class ColumnsArea extends ImmutablePureComponent { handleChildrenContentChange() { if (!this.props.singleColumn) { - this._interruptScrollAnimation = scrollRight(this.node, this.node.scrollWidth - window.innerWidth); + const modifier = this.isRtlLayout ? -1 : 1; + this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier); } } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index 67bfa8a3857..f4c566936f4 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -7,9 +7,9 @@ body.rtl { margin-left: 5px; } - .character-counter__wrapper { - margin-right: 8px; - margin-left: 16px; + .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { + margin-right: 0px; + margin-left: 4px; } .navigation-bar__profile { @@ -30,6 +30,22 @@ body.rtl { .column-header__buttons { left: 0; right: auto; + margin-left: -15px; + margin-right: 0; + } + + .column-inline-form .icon-button { + margin-left: 0; + margin-right: 5px; + } + + .column-header__links .text-btn { + margin-left: 10px; + margin-right: 0; + } + + .account__avatar-wrapper { + float: right; } .column-header__back-button { @@ -41,10 +57,6 @@ body.rtl { float: left; } - .compose-form__modifiers { - border-radius: 0 0 0 4px; - } - .setting-toggle { margin-left: 0; margin-right: 8px;