diff --git a/src/components/left/LeftColumn.tsx b/src/components/left/LeftColumn.tsx index 19cd8f934..f61ebe0bf 100644 --- a/src/components/left/LeftColumn.tsx +++ b/src/components/left/LeftColumn.tsx @@ -6,7 +6,7 @@ import { withGlobal } from '../../lib/teact/teactn'; import { GlobalActions } from '../../global/types'; import { LeftColumnContent, SettingsScreens } from '../../types'; -import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment'; +import { LAYERS_ANIMATION_NAME } from '../../util/environment'; import captureEscKeyListener from '../../util/captureEscKeyListener'; import { pick } from '../../util/iteratees'; @@ -240,7 +240,7 @@ const LeftColumn: FC = ({ return ( = ({ return ( diff --git a/src/components/left/settings/Settings.tsx b/src/components/left/settings/Settings.tsx index 41dd856da..dc546e394 100644 --- a/src/components/left/settings/Settings.tsx +++ b/src/components/left/settings/Settings.tsx @@ -2,7 +2,7 @@ import React, { FC, memo, useCallback } from '../../../lib/teact/teact'; import { SettingsScreens } from '../../../types'; -import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment'; +import { LAYERS_ANIMATION_NAME } from '../../../util/environment'; import useFoldersReducer from '../../../hooks/reducers/useFoldersReducer'; import useTwoFaReducer from '../../../hooks/reducers/useTwoFaReducer'; @@ -213,7 +213,7 @@ const Settings: FC = ({ return ( diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e0bdd1996..1f2e76acf 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -140,6 +140,8 @@ $color-user-8: #faa774; --color-default-shadow: #72727240; --color-light-shadow: #7272722B; + --vh: 1vh; + --border-radius-default: 0.75rem; --border-radius-default-small: 0.625rem; --border-radius-default-tiny: 0.375rem; @@ -201,14 +203,16 @@ $color-user-8: #faa774; --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1); --layer-blackout-opacity: 0.3; - --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); - - --select-transition: 200ms ease-out; - // For some reason these parameters cause worse animation in desktop Chrome @media (max-width: 600px) { --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); } - --vh: 1vh; + --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1); + + body.is-android { + --slide-transition: 200ms ease-in-out; + } + + --select-transition: 200ms ease-out; } diff --git a/src/util/environment.ts b/src/util/environment.ts index 0e6072563..84b4ed5a4 100644 --- a/src/util/environment.ts +++ b/src/util/environment.ts @@ -60,6 +60,7 @@ export const IS_OPUS_SUPPORTED = Boolean((new Audio()).canPlayType('audio/ogg; c export const IS_CANVAS_FILTER_SUPPORTED = ( !IS_TEST && 'filter' in (document.createElement('canvas').getContext('2d') || {}) ); +export const LAYERS_ANIMATION_NAME = IS_ANDROID ? 'slide-fade' : IS_IOS ? 'slide-layers' : 'push-slide'; export const DPR = window.devicePixelRatio || 1;