javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): swipe to go back now works in rtl mode (#24866)

Browse Source 
resolves #19488
This commit is contained in:
Liam DeBeasi
2022-03-07 08:59:21 -05:00
committed by GitHub
parent 331ce6d676
commit 2ac9105796
6 changed files with 179 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
core/src/components/content/content.scss
View File

@ -164,7 +164,7 @@
*/
top: 0;
bottom: 0;
margin-top: calc(var(--offset-top) * -1);
margin-bottom: calc(var(--offset-bottom) * -1);
}
@ -173,10 +173,6 @@
display: none;
position: absolute;
/* stylelint-disable property-disallowed-list */
left: -100%;
/* stylelint-enable property-disallowed-list */
width: 100%;
height: 100vh;
@ -185,6 +181,18 @@
pointer-events: none;
}
:host(.content-ltr) .transition-effect {
/* stylelint-disable property-disallowed-list */
left: -100%;
/* stylelint-enable property-disallowed-list */
}
:host(.content-rtl) .transition-effect {
/* stylelint-disable property-disallowed-list */
right: -100%;
/* stylelint-enable property-disallowed-list */
}
.transition-cover {
position: absolute;
@ -204,10 +212,6 @@
display: block;
position: absolute;
/* stylelint-disable property-disallowed-list */
right: 0;
/* stylelint-enable property-disallowed-list */
width: 10px;
height: 100%;
@ -216,6 +220,20 @@
background-size: 10px 16px;
}
:host(.content-ltr) .transition-shadow {
/* stylelint-disable property-disallowed-list */
right: 0;
/* stylelint-enable property-disallowed-list */
}
:host(.content-rtl) .transition-shadow {
/* stylelint-disable property-disallowed-list */
left: 0;
/* stylelint-enable property-disallowed-list */
transform: scaleX(-1);
}
// Content: Fixed
// --------------------------------------------------

7
core/src/components/content/content.tsx
View File

@ -4,6 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, ScrollBaseDetail, ScrollDetail } from '../../interface';
import { componentOnReady } from '../../utils/helpers';
import { isPlatform } from '../../utils/platform';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
@ -311,7 +312,8 @@ export class Content implements ComponentInterface {
}
render() {
const { isMainContent, scrollX, scrollY } = this;
const { isMainContent, scrollX, scrollY, el } = this;
const rtl = isRTL(el) ? 'rtl' : 'ltr';
const mode = getIonMode(this);
const forceOverscroll = this.shouldForceOverscroll();
const transitionShadow = mode === 'ios';
@ -325,6 +327,7 @@ export class Content implements ComponentInterface {
[mode]: true,
'content-sizing': hostContext('ion-popover', this.el),
'overscroll': forceOverscroll,
[`content-${rtl}`]: true
})}
style={{
'--offset-top': `${this.cTop}px`,
@ -339,7 +342,7 @@ export class Content implements ComponentInterface {
'scroll-y': scrollY,
'overscroll': (scrollX || scrollY) && forceOverscroll
}}
ref={(el: HTMLElement) => this.scrollEl = el!}
ref={(scrollEl: HTMLElement) => this.scrollEl = scrollEl!}
onScroll={(this.scrollEvents) ? (ev: UIEvent) => this.onScroll(ev) : undefined}
part="scroll"
>