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.

Sign up for GitHub

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(item-sliding): RTL fix for item sliding #11825

Merged
merged 16 commits into from
Jun 9, 2017
Merged

fix(item-sliding): RTL fix for item sliding #11825

Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
39909d0
Merge remote-tracking branch 'refs/remotes/driftyco/master'
sijav May 28, 2017
e526ce1
Merge remote-tracking branch 'refs/remotes/driftyco/master'
sijav May 28, 2017
dc9a0d4
fix(item-sliding): fix item-sliding RTL
sijav May 28, 2017
8b63901
wrong class
sijav May 28, 2017
3d52694
revert back ts changes
sijav May 30, 2017
71b6791
create scss fixes
sijav May 30, 2017
cf2ed87
correct order of rule set
sijav May 30, 2017
3496767
Right is right and left is left
sijav May 31, 2017
7113f65
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rt…
sijav Jun 5, 2017
5ece981
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rt…
sijav Jun 7, 2017
9a65746
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rt…
sijav Jun 8, 2017
cda8ed5
using multi-dir and ltr mixins
sijav Jun 8, 2017
2cf17df
Currect order on RTL using ltr and rtl specific mixins
sijav Jun 8, 2017
cb129de
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rt…
sijav Jun 8, 2017
f8a55d7
Merge remote-tracking branch 'refs/remotes/ionic-team/master' into rt…
sijav Jun 8, 2017
57a43bc
dupplicate the comment to disable PropertySpelling
sijav Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 67 additions & 16 deletions src/components/item/item-sliding.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,52 @@ ion-item-sliding .item {
}

ion-item-options {
@include position(0, 0, null, null);

// scss-lint:disable PropertySpelling
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 move this comment to inside the mixin?

Copy link
Contributor Author

@sijav sijav Jun 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

@AmitMY so I should put it at two places? multi-dir and rtl mixin at the same main selector?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be better, yes. Just so it is more specific.

position: absolute;

z-index: $z-index-item-options;
display: none;

justify-content: flex-end;

height: 100%;

font-size: 14px;

visibility: hidden;

@include multi-dir() {
top: 0;

right: 0;
}

@include ltr() {
justify-content: flex-end;
}

@include rtl() {
justify-content: flex-start;

&:not([side=right]) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

these :not([side=right]) are here for default side (when side is not defined in sliding option item) in RTL mode.
In LTR mode there should be positioned on right by default but on RTL they need to be placed left...
In another word when side is not defined it should be placed on end

justify-content: flex-end;

right: auto;
left: 0;
}
}
}

ion-item-options[side=left] {
@include position-horizontal(0, auto);
@include multi-dir() {
// scss-lint:disable PropertySpelling
right: auto;
left: 0;
}

justify-content: flex-start;
@include ltr() {
justify-content: flex-start;
}

@include rtl() {
justify-content: flex-end;
}
}

ion-item-options .button {
Expand All @@ -63,6 +89,13 @@ ion-item-options:not([icon-start]) .button:not([icon-only]) {
}

ion-item-sliding.active-slide {
@include rtl() {
&.active-options-left ion-item-options:not([side=right]) {
width: 100%;

visibility: visible;
}
}

.item,
.item.activated {
Expand Down Expand Up @@ -101,19 +134,37 @@ button[expandable] {
}

ion-item-sliding.active-swipe-right button[expandable] {
@include padding-horizontal(90%, null);

order: 1;

transition-duration: .6s;
transition-property: padding-left;
}

ion-item-sliding.active-swipe-left button[expandable] {
@include padding-horizontal(null, 90%);
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-left: 90%;
}

order: -1;
@include ltr() {
order: 1;
}

@include rtl() {
order: -1;
}
}

ion-item-sliding.active-swipe-left button[expandable] {
transition-duration: .6s;
transition-property: padding-right;

@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-right: 90%;
}

@include ltr() {
order: -1;
}

@include rtl() {
order: 1;
}
}