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

feat(RTL): better RTL support #11121

Closed
wants to merge 11 commits into from
Closed

feat(RTL): better RTL support #11121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5655f80
feat(rtl): add text-alignment flip for rtl
AmitMY Apr 7, 2017
7541ec0
feat(pull): add bootstrap style pull attribute support
AmitMY Apr 7, 2017
956e7c3
feat(rtl): add rtl support for pull
AmitMY Apr 7, 2017
6aa6693
style(css): format css to follow code-style
AmitMY Apr 7, 2017
e4cacb4
feat(rtl): flip every icon except for logos and specific icons that a…
AmitMY Apr 7, 2017
cd01025
fix(rtl): flip tabs behavior for rtl on iOS
AmitMY Apr 7, 2017
04bb57f
fix(rtl): flip icon-left/right behavior
AmitMY Apr 7, 2017
44d2577
feat(rtl): add text-start + text-end
AmitMY Apr 9, 2017
0fbd8a8
chore(dev-dependencies): add scss functions for str-replace
AmitMY Apr 12, 2017
89dc966
fix(icons): replace old str-replace with a better one
AmitMY Apr 12, 2017
b8e690a
fix(icons): remove space on rtl icons
AmitMY Apr 12, 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
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
"gulp-uglify": "2.0.0",
"gulp-util": "3.0.7",
"gulp-watch": "4.3.9",
"hail2u-scss-functions": "^1.2.2",
"html-entities": "1.2.0",
"inquirer": "3.0.1",
"ionic-cz-conventional-changelog": "1.0.0",
Expand Down Expand Up @@ -144,4 +145,4 @@
"pre-push#master": [
"test"
]
}
}
30 changes: 29 additions & 1 deletion src/components/app/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,14 @@ ion-footer {
text-align: right;
}

[text-start] {
text-align: start;
}

[text-end] {
text-align: end;
}

[text-justify] {
text-align: justify;
}
Expand All @@ -317,7 +325,6 @@ ion-footer {
white-space: normal;
}


// Text Transformation
// --------------------------------------------------

Expand All @@ -332,3 +339,24 @@ ion-footer {
[text-capitalize] {
text-transform: capitalize;
}

// Float
// --------------------------------------------------

[pull-left],
Copy link
Member

Choose a reason for hiding this comment

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

Could we do pull-left, pull-right, pull-start, and pull-end here and make them work like the text-* attributes do? Or is there a reason not to?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done, moved to a separate PR: #11214

[dir="ltr"] [pull-left] {
float: left;
}

[pull-right],
[dir="ltr"] [pull-right] {
float: right;
}

[dir="rtl"] [pull-left] {
float: right;
}

[dir="rtl"] [pull-right] {
float: left;
}
20 changes: 18 additions & 2 deletions src/components/button/button-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,34 @@
pointer-events: none;
}

[icon-left] ion-icon {
[icon-left] ion-icon,
[dir="ltr"] [icon-left] ion-icon {
@include button-icon;

padding-right: .3em;
}

[icon-right] ion-icon {
[icon-right] ion-icon,
[dir="ltr"] [icon-right] ion-icon {
@include button-icon;

padding-left: .4em;
}

[dir="rtl"] [icon-left] ion-icon {
@include button-icon;

padding-left: .4em;
padding-right: initial;
}

[dir="rtl"] [icon-right] ion-icon {
Copy link
Member

Choose a reason for hiding this comment

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

The same question as above with icon-*.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's gonna be a problem.
icon-left is for CSS, so when you do:

<button ion-button icon-left>
    Button
    <ion-icon name="chatbubbles"></ion-icon>
</button>

It doesn't move the icon to the left, just adds some wrong padding.

@include button-icon;

padding-right: .3em;
padding-left: initial;
}

.button[icon-only] {
padding: 0;

Expand Down
18 changes: 17 additions & 1 deletion src/components/segment/segment.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ $segment-button-ios-toolbar-icon-size: 2.2rem !default;
$segment-button-ios-toolbar-icon-line-height: 2.4rem !default;


.segment-ios .segment-button {
.segment-ios .segment-button,
[dir="ltr"] .segment-ios .segment-button {
flex: 1;

width: 0;
Expand Down Expand Up @@ -130,6 +131,21 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
}
}

[dir="rtl"] .segment-ios .segment-button {
&:first-of-type {
margin-left: 0;

border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
}

&:last-of-type {
margin-right: 0;

border-left-width: $segment-button-ios-border-width;
border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
}
}

.segment-ios.segment-disabled {
opacity: .4;

Expand Down
56 changes: 56 additions & 0 deletions src/fonts/ionicons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $ionicons-font-path: $font-path !default;

@import "ionicons-icons";
@import "ionicons-variables";
@import "~hail2u-scss-functions/string/_str-replace";
Copy link
Member

Choose a reason for hiding this comment

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

I'm not sure about this for icons. I wonder if there is a better way to decide if the icon should or shouldn't be flipped on rtl. We're thinking maybe we could add some metadata to the icon itself and look at it that way? We need to discuss this more but maybe this could be split out from this PR for further discussion.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm.. ok
How about for starters, do:
ion-icon[area-label^="arrow"] { @extends [flip] } ?
To be honest, most of the icons don't matter, its just the arrows that are going the other way..



@font-face {
Expand All @@ -33,3 +34,58 @@ ion-icon {
text-transform: none;
speak: none;
}

// RTL Support
// --------------------------

@mixin notIn($attribute, $operator, $ignoreList...) {
// If only a single value given
@if (length($ignoreList) == 1) {
// It is probably a list variable so set ignore list to the variable
$ignoreList: nth($ignoreList, 1);
}

// Set up an empty $notOutput variable
$notOutput: '';
// For each item in the list
@each $not in $ignoreList {
// Generate a :not([attribute='ignored_item']) segment for each item in the ignore list and put them back to back
$notOutput: #{"#{$notOutput}:not([#{$attribute}#{$operator}='#{str-replace($not, '-', ' ')}'])"};
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
@content;
}
}

[flip] {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

$ltr-begin: "logo";

$ltr-icons: "at", "attach",
"bluetooth",
"checkbox", "checkbox-outline", "checkmark", "checkmark-circle", "checkmark-circle-outline", "chrome",
"closed-captioning",
// Adding cloud because of "cloud-done" & "thunderstorm"
"cloud", "cloud-circle", "cloud-done", "cloud-download", "cloud-outline", "cloud-upload", "thunderstorm",
"done-all",
"help", "help-circle",
"information", "information-circle", "ionic",
"musical-note", "musical-notes",
"no-smoking",
"play",
"timer", "trending-down", "trending-up",
"volume-down", "volume-mute", "volume-off", "volume-up";

[dir="rtl"] ion-icon {
@include notIn("aria-label", "^", $ltr-begin) { // Does not start with
@include notIn("aria-label", "", $ltr-icons) { // Does not equal
@extend [flip];
}
}
}