fix(spinner): RTL fix for Spinner

[sijav]

Short description of what this resolves:

This will make sure that the spinners will go anti-clockwise in RTL mode
This will also fix bubbles and circles spinner on rtl

Changes proposed in this pull request:

• import platform and add it to spinner class
• put SPINNERS const variable in spinner class's load function and add RTL support to it's functions.
• add spinner-rotate-rtl keyframes animation and assign rtl mixins to related selector

Ionic Version: 3.x

Fixes: #11211

[AmitMY]

Wow I didn't even notice, on a phone are they actually reversed?

This seems overly complicated, perhaps it can be simplified to just on RTL have "transform: scaleX(-1)"?

Not sure, and I can't test it today, but I think it would work, like range & progress bar.

Or perhaps, we can just make the rotate into the transform mixin. On ltr X is (360-X) on rtl. That seems like a general solution for all of the rotation animations that exist.

I will properly review this tomorrow night.

[sijav]

@AmitMY I just checked android's Play Store on RTL it was not anti clockwise so I guess this thing is not necessary.
Though we still have problems with bubbles and circles spinner when on RTL I'll create another PR asap.
Thanks.

[AmitMY]

Ok good to know
If you are looking for something to fix, can you take a look at animated search bar on iOS RTL? It does weird things

[sijav]

@AmitMY we are using include padding and include margin-horizontal in searchbar I thought you know it yourself they are not working correctly, not even background position mixin or transform thing. It's nothing that I can understand or have enough information about to handle it. sorry. if it were simple scss, fixing it would take less than an hour :D

[AmitMY]

I was not aware padding and margin horizontal don't work correctly. Can you explain a bit more?

Current state is that search bar works great, other than animated search bar which breaks the view

[sijav]

@AmitMY for instance we have =>

.searchbar-ios .searchbar-ios-cancel {
  @include padding(0, 0, 0, 8px);
  @include margin-horizontal(0, null);
  ...
}

what it will be compiled is =>

.searchbar-ios .searchbar-ios-cancel {
    padding: 0 0 0 8px;
    margin-left: 0;

see? no specified [rtl] or [ltr] attribute added in it
EDIT: I made it once with following scss
EDIT 2: the whole searchbar does not seem to have rtl or ltr specified compiled css

[AmitMY]

Make sure $app-direction is set to "multi".
V3.4.1/3.4.2 changed the default to ltr, because the [dir=..] breaks some specificity rules for users

[AmitMY]

Weird, I'll check the bundle with no multi.
iOS searchbar - great. Last time I checked it really sucked. I'll verify. Thanks!

[sijav]

@AmitMY I've removed my comment, I'm checking it again something is wierd I'll let you know

[sijav]

@AmitMY nothing is wrong, it was chrome bug with rtl where it place the scroll bar at left instead of right in rtl mode and when we switch to phone view chrome still keeps the scroll bar intact which is not alright. nothing that we can do though

[sijav]

@AmitMY please check with no multi no ltr and rtl no nothing we will face many [dir=...] in the compiled main.css but not all which might breaks the view.

[AmitMY]

About the segment, you are correct. it is a non-issue then.
About direction - if I keep it default (ltr) there are 2 manual rtl selectors added, for border width on segment. these are fixed in a PR.

If I set it to nothing (can't nothing, so 0 for example), it has no directional behaviour at all. no ltr, nor rtl.

I'm just now adding a check for "is the current direction loaded"