Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(menu): rtl fix for menu #11830

Merged
merged 16 commits into from
Jun 9, 2017
Merged

Conversation

sijav
Copy link
Contributor

@sijav sijav commented May 28, 2017

Short description of what this resolves:

This will fix the menu for rtl direction.

Changes proposed in this pull request:

  • fix min, max values for RTL (it should be exact opposite than LTR)
  • fix the left right in scss (when we say right it must be stay as right)

Ionic Version: 3.x

Fixes: #11211

This will complete after: #11822

@AmitMY
Copy link
Contributor

AmitMY commented May 28, 2017

Add "// scss-lint:disable PropertySpelling" above 'left: auto' so it will pass linting
(Left and right are not allowed to be used except for special cases like this and like fab, this comment makes this a special case)

@AmitMY
Copy link
Contributor

AmitMY commented Jun 6, 2017

Remove the css changes, as they are conflicting, and this will be reviewed soon

@sijav
Copy link
Contributor Author

sijav commented Jun 6, 2017

@AmitMY what multidir mixin does? It just use the same code for both ltr and rtl? Can I use it in my other PRs?

@AmitMY
Copy link
Contributor

AmitMY commented Jun 6, 2017

multi-dir makes it:

[dir="ltr"] selector, [dir="rtl"] selector {
  // something that is direction sensitive
}

Otherwise, specificity rules can override it.

You can and should use it in your PRs, only on directional properties. I have a list of all PRs and correct order to review them, and what relies on what. Your other PRs show as "not ready" for me as of a small dependency. I will update you as soon as that is taken care of

Left side is without it, middle is with, right is differences: http://ionic-snapshot-go.appspot.com/ionic2/snapshots/d4t/hhp/chrome_400x800

@sijav
Copy link
Contributor Author

sijav commented Jun 7, 2017

@AmitMY waiting for another review, I've tested start and end and it worked great as well.

@AmitMY
Copy link
Contributor

AmitMY commented Jun 7, 2017

This goes well with #11336, which is not done becasue of bad animation after changing direction. Mind having a look? (updatePosition method is what changes the animation, but it breaks it if it runs more than once)

@include multi-dir() {
left: 0;
right: auto;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Leave menu.scss unchanged
The correct default is start, and thus 0, auto, 0, 0 is correct
You are correct that there is a need to address left, so #11953

Sorry for all of the mess around this.

Copy link
Contributor Author

@sijav sijav Jun 7, 2017

Choose a reason for hiding this comment

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

@AmitMY Oh ... alright

@sijav
Copy link
Contributor Author

sijav commented Jun 7, 2017

@AmitMY I reverted the commit but if you mind please check the left menu in tablet mode it doesn't open at an appropriate position also about the #11336 commit I'll take a look but there's a lot of things changed which I'm not sure why are these things changed? why we are using a custom animation here? would you mind explaining a bit about your changes?

@AmitMY
Copy link
Contributor

AmitMY commented Jun 7, 2017

@sijav I added an explenation to the body of that PR, as it is more relevant there. About left menu, I think it is fixed with #11953

@@ -57,14 +57,14 @@ export class MenuContentGesture extends SlideEdgeGesture {
}

onSlide(slide: SlideData, ev: any) {
const z = (this.menu.isRightSide ? slide.min : slide.max);
const z = ((this.menu.isRightSide && !this.plt.isRTL) || (!this.menu.isRightSide && this.plt.isRTL) ? slide.min : slide.max);
Copy link
Contributor

Choose a reason for hiding this comment

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

(this.menu.isRightSide && !this.plt.isRTL) || (!this.menu.isRightSide && this.plt.isRTL)
is logically equal to:
this.menu.isRightSide !== this.plt.isRTL

Can you fix this in all of the expressions in this PR?

Copy link
Contributor Author

@sijav sijav Jun 8, 2017

Choose a reason for hiding this comment

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

@AmitMY well technically yes but I put it that way for more readability ...
Ok I will change all of em

@sijav
Copy link
Contributor Author

sijav commented Jun 8, 2017

I can confirm that menu scss problems has been fixed by #11953 Thanks @AmitMY
About the #11336 I cannot understand why such big changes needed for this? the only thing that does not works with start and end is closing and opening them right? does your commit add any extra features that we don't have right now apart from start and end support?

@@ -89,7 +89,7 @@ export class MenuContentGesture extends SlideEdgeGesture {

getElementStartPos(slide: SlideData, ev: any) {
const menu = this.menu;
if (menu.isRightSide) {
if (this.menu.isRightSide !== this.plt.isRTL) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you please change this.menu to menu?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@AmitMY yeah sure sorry my bad

Copy link
Contributor

Choose a reason for hiding this comment

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

I missed it too :) orders from above

@manucorporat manucorporat merged commit 30047f0 into ionic-team:master Jun 9, 2017
@sijav sijav deleted the rtl-fix-menu branch June 16, 2017 13:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants