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(View): Fix shadow on iOS swipe back #5804

Merged
merged 7 commits into from
Sep 29, 2023
Merged

fix(View): Fix shadow on iOS swipe back #5804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8e29e6d
Add swipe back shadow on the next panel
mendrew Sep 14, 2023
87af491
Add opacity transition on swipe back end
mendrew Sep 14, 2023
c58169a
Move panel fade overlay from Panel component to View
mendrew Sep 14, 2023
28a5b11
Don't affect Tabbar by overlay
mendrew Sep 18, 2023
6532e26
Don't set swipe back has tabbar to false
mendrew Sep 18, 2023
ff54d10
Render overlay only on iOS platform
mendrew Sep 19, 2023
d396506
Remove z-index change of Tabbar during swipe back
mendrew Sep 19, 2023
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
4 changes: 0 additions & 4 deletions packages/vkui/src/components/Panel/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import * as React from 'react';
import { classNames } from '@vkontakte/vkjs';
import { useAdaptivity } from '../../hooks/useAdaptivity';
import { usePlatform } from '../../hooks/usePlatform';
import { SizeType } from '../../lib/adaptivity';
import { NavIdProps } from '../../lib/getNavId';
import { Platform } from '../../lib/platform';
import { HTMLAttributesWithRootRef } from '../../types';
import { AppRootContext } from '../AppRoot/AppRootContext';
import { NavPanelIdContext } from '../NavIdContext/NavIdContext';
Expand All @@ -27,7 +25,6 @@ export interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, N
* @see https://vkcom.github.io/VKUI/#/Panel
*/
export const Panel = ({ centered = false, children, nav, ...restProps }: PanelProps) => {
const platform = usePlatform();
const { sizeX = 'none' } = useAdaptivity();
const { layout } = React.useContext(AppRootContext);

Expand All @@ -48,7 +45,6 @@ export const Panel = ({ centered = false, children, nav, ...restProps }: PanelPr
>
<div className={styles['Panel__in-before']} />
{centered ? <div className={styles['Panel__centered']}>{children}</div> : children}
{platform === Platform.IOS && <div className="vkuiInternalPanel__fade" />}
<div className={styles['Panel__in-after']} />
</Touch>
</RootComponent>
Expand Down
100 changes: 54 additions & 46 deletions packages/vkui/src/components/View/View.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,55 @@
overflow: hidden;
}

.View__panel-overlay {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000;
pointer-events: none;
z-index: var(--vkui_internal--z_index_panel_header_fade);
}

/**
* Panel swipe back
*/

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(100%, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(-50%, 0, 0);
}

.View--ios .View__panel--swipe-back-next .View__panel-overlay {
background-color: rgba(0, 0, 0, 0.1);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success .View__panel-overlay,
.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed .View__panel-overlay {
transition: opacity 0.3s var(--vkui--animation_easing_platform);
}

/**
* Panel transition
*/

.View__panel--next ~ .View__panel--prev {
animation: animation-view-prev-back 0.3s var(--vkui--animation_easing_platform) forwards;
}
Expand Down Expand Up @@ -80,37 +126,6 @@
}
}

/**
* Panel swipe back
*/

.View--ios .View__panel--swipe-back-prev {
box-shadow: -2px 0 12px rgba(0, 0, 0, 0.3);
}

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-success {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(100%, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-prev.View__panel--swipe-back-failed {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(0, 0, 0);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed {
transition: transform 0.3s var(--vkui--animation_easing_platform);
transform: translate3d(-50%, 0, 0);
}

/**
* Panel transition
*/
.View--ios .View__panel--prev {
animation: animation-ios-prev-forward 0.6s var(--vkui--animation_easing_platform);
}
Expand All @@ -127,28 +142,21 @@
animation: animation-ios-prev-back 0.6s var(--vkui--animation_easing_platform) forwards;
}

.View--ios .View__panel--prev :global(.vkuiInternalPanel__fade),
.View--ios .View__panel--next :global(.vkuiInternalPanel__fade) {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
pointer-events: none;
z-index: var(--vkui_internal--z_index_panel_header_fade);
.View--ios .View__panel--prev .View__panel-overlay,
.View--ios .View__panel--next .View__panel-overlay {
display: block;
}

.View--ios .View__panel--prev :global(.vkuiInternalPanel__fade) {
.View--ios .View__panel--prev .View__panel-overlay {
animation: animation-ios-fade-in 0.6s var(--vkui--animation_easing_platform);
}

.View--ios .View__panel--next :global(.vkuiInternalPanel__fade) {
.View--ios .View__panel--next .View__panel-overlay {
animation: animation-ios-fade-out 0.6s var(--vkui--animation_easing_platform) forwards;
}

.View--ios .View__panel--prev ~ .View__panel--next :global(.vkuiInternalPanel__fade),
.View--ios .View__panel--next ~ .View__panel--prev :global(.vkuiInternalPanel__fade) {
.View--ios .View__panel--prev ~ .View__panel--next .View__panel-overlay,
.View--ios .View__panel--next ~ .View__panel--prev .View__panel-overlay {
display: none;
}

Expand All @@ -160,7 +168,7 @@
/**
* Active panel
*/
.View--ios .View__panel--active :global(.vkuiInternalPanel__fade) {
.View--ios .View__panel--active .View__panel-overlay {
display: none;
}

Expand Down
36 changes: 30 additions & 6 deletions packages/vkui/src/components/View/View.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,11 +353,6 @@

let prevPanelTranslate = `${swipeBackShift}px`;
let nextPanelTranslate = `${-50 + (swipeBackShift * 100) / window.innerWidth / 2}%`;
let prevPanelShadow = (0.3 * (window.innerWidth - swipeBackShift)) / window.innerWidth;

if (swipeBackResult) {
return isPrev ? { boxShadow: `-2px 0 12px rgba(0, 0, 0, ${prevPanelShadow})` } : {};
}

if (isNext) {
return {
Expand All @@ -369,13 +364,36 @@
return {
transform: `translate3d(${prevPanelTranslate}, 0, 0)`,
WebkitTransform: `translate3d(${prevPanelTranslate}, 0, 0)`,
boxShadow: `-2px 0 12px rgba(0, 0, 0, ${prevPanelShadow})`,
};
}

return {};
};

const calcPanelSwipeBackOverlayStyles = (panelId?: string): React.CSSProperties => {
if (!canUseDOM || !window) {
return {};

Check warning on line 375 in packages/vkui/src/components/View/View.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/View/View.tsx#L375 

Added line #L375 was not covered by tests
}

const isNext = panelId === swipeBackNextPanel;
if (!isNext) {
return {};
}

const calculatedOpacity = 1 - swipeBackShift / window.innerWidth;
const opacityOnSwipeEnd =
swipeBackResult === SwipeBackResults.success
? 0
: swipeBackResult === SwipeBackResults.fail
? 1
: null;

return {
display: 'block',
opacity: opacityOnSwipeEnd === null ? calculatedOpacity : opacityOnSwipeEnd,
};
};

React.useEffect(() => {
// Нужен переход
if (
Expand Down Expand Up @@ -533,6 +551,12 @@
style={calcPanelSwipeStyles(panelId)}
key={panelId}
>
{platform === Platform.IOS && (
<div
className={styles['View__panel-overlay']}
style={calcPanelSwipeBackOverlayStyles(panelId)}
/>
)}
<div
className={styles['View__panel-in']}
style={{
Expand Down
Loading