Skip to content

Commit

Permalink
QDrawer RTL Transition Bug
Browse files Browse the repository at this point in the history 
QDrawer transition translateX animations comes oppositely in RTL
  • Loading branch information
@AbdElRahmanAshraf99
AbdElRahmanAshraf99 authored Aug 1, 2024
1 parent a412a54 commit 1f4c9e4
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion ui/src/components/drawer/QDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default createComponent({
const rightSide = computed(() => props.side === 'right')

const stateDirection = computed(() =>
($q.lang.rtl === true ? -1 : 1) * (rightSide.value === true ? 1 : -1)
$q.lang.rtl === true ? -1 : rightSide.value === true ? 1 : -1
)

const flagBackdropBg = ref(0)
Expand Down

3 comments on commit 1f4c9e4

@AbdElRahmanAshraf99
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an issue when using QDrawer in RTL pages
Those changes will help to solve the problem
The problem is when using QDrawer in RTL pages, transition comes oppositely
Which means when using QDrawer side="left", css will be transition : translateX(300)
That means that it will be come from center of page to left (inside to outside) and right side also works like that and this is the problem.
Fixes show that when I using RTL don't check for side it will be get a correct result for animations and positioning.

@AbdElRahmanAshraf99
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made an issue for that here

@rstoenescu
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello,

Please make sure that you have fully read (and applied the necessary steps) from https://quasar.dev/options/rtl-support
Some thoughts:

  • did you set an RTL Quasar language pack?
  • did you uncomment the require('postcss-rtlcss') from your /postcss.config.cjs?

I have just verified and everything works correctly.

Please sign in to comment.