Skip to content

Commit

Permalink
fix: style of account switcher modals.
Browse files Browse the repository at this point in the history
  • Loading branch information
richardo2016x committed Nov 29, 2024
1 parent 6a6b93f commit a0abfdf
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 31 deletions.
13 changes: 5 additions & 8 deletions apps/mobile/src/components/AccountSwitcher/AccountsPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import {
Dimensions,
ScrollView,
StyleProp,
StyleSheet,
Text,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native';
Expand All @@ -20,14 +18,11 @@ import {
} from '@/hooks/accountsSwitcher';
import { AccountSwitcherAopProps, useAccountSceneVisible } from './hooks';
import React, { useCallback, useEffect, useMemo } from 'react';
import { AddressItem } from '@/components2024/AddressItem/AddressItem';
import { ICONS_COMMON_2024 } from '@/assets2024/icons/common';
import RcIconCorrectCC from './icons/correct-cc.svg';
import { Account } from '@/core/services/preference';
import { trigger } from 'react-native-haptic-feedback';
import { LinearGradientContainer } from '@/components2024/ScreenContainer/LinearGradientContainer';
import { AddressItemInPanel, AddressItemSizes } from './AddressItemInPanel';
import { UseAllAccountsItemInPanel } from './AddressItemUseAll';
import { ScreenWithAccountSwitcherLayouts } from '@/constant/layout';

const SectionCollapsableNav = function ({
isCollapsed = false,
Expand Down Expand Up @@ -287,15 +282,17 @@ AccountSwitcherAopProps<{
}

export function getAccountsPanelInModalMaxHeight() {
return Dimensions.get('window').height - 133;
const winInfo = Dimensions.get('window');

return winInfo.height - ScreenWithAccountSwitcherLayouts.modalBottomSpace;
}
const getPanelStyle = createGetStyles2024(ctx => {
return {
panel: {
position: 'relative',
width: '100%',
minHeight: '50%',
maxHeight: getAccountsPanelInModalMaxHeight(),
height: '100%',
flexDirection: 'column',
},
scrollViewContainer: {
Expand Down
54 changes: 33 additions & 21 deletions apps/mobile/src/components/AccountSwitcher/Modal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dimensions, TouchableOpacity, View } from 'react-native';
import { TouchableOpacity, View } from 'react-native';
import { AccountSwitcherAopProps, useAccountSceneVisible } from './hooks';
import {
createGetStyles2024,
Expand All @@ -16,7 +16,7 @@ import {
getAccountsPanelInModalMaxHeight,
} from './AccountsPanel';
import AutoLockView from '../AutoLockView';
import { useLayoutEffect } from 'react';
import { useCallback, useLayoutEffect } from 'react';
import { useDappCurrentAccount } from '@/hooks/useDapps';
import { DappInfo } from '@/core/services/dappService';
import { IS_ANDROID } from '@/core/native/utils';
Expand All @@ -36,7 +36,8 @@ export function AccountSwitcherModal({
const { styles } = useTheme2024({ getStyle: getModalStyle });

const { topValue, offScreen } = useSafeOffTop({
modalBackgroundHeight: ScreenWithAccountSwitcherLayouts.screenHeaderHeight,
modalBackgroundHeight:
ScreenWithAccountSwitcherLayouts.screenHeaderHeight /* + ScreenWithAccountSwitcherLayouts.modalBottomSpace */,
});

useLayoutEffect(() => {
Expand All @@ -45,6 +46,10 @@ export function AccountSwitcherModal({
};
}, [forScene, toggleSceneVisible]);

const handlePressToClose = useCallback(() => {
toggleSceneVisible(forScene, false);
}, [forScene, toggleSceneVisible]);

if (!isVisible) return null;

const absoluteStyle = {
Expand All @@ -61,17 +66,19 @@ export function AccountSwitcherModal({
absoluteStyle,
]}>
<TouchableOpacity
onPressIn={() => {
toggleSceneVisible(forScene, false);
}}
onPressIn={handlePressToClose}
style={[styles.bgMask, { height: absoluteStyle.maxHeight }]}
delayLongPress={1000}
/>
<View
style={[styles.panelContainer, { maxHeight: absoluteStyle.maxHeight }]}>
<AccountsPanelInModal
linearContainerProps={panelLinearGradientProps}
containerStyle={{ height: '100%' }}
containerStyle={{
maxHeight:
getAccountsPanelInModalMaxHeight() -
ScreenWithAccountSwitcherLayouts.screenHeaderHeight,
}}
forScene={forScene}
/>
</View>
Expand All @@ -97,10 +104,12 @@ const getModalStyle = createGetStyles2024(ctx => {
panelContainer: {
position: 'relative',
width: '100%',
height: getAccountsPanelInModalMaxHeight(),
// ...makeDevOnlyStyle({
// backgroundColor: 'blue',
// }),
height:
getAccountsPanelInModalMaxHeight() -
ScreenWithAccountSwitcherLayouts.screenHeaderHeight,
...makeDevOnlyStyle({
backgroundColor: 'blue',
}),
},
bgMask: {
position: 'absolute',
Expand Down Expand Up @@ -139,6 +148,10 @@ export function AccountSwitcherModalInDappWebView({

const { setDappCurrentAccount } = useDappCurrentAccount();

const handlePressToClose = useCallback(() => {
toggleSceneVisible(forScene, false);
}, [forScene, toggleSceneVisible]);

if (!isVisible) return null;

const absoluteStyle = IS_ANDROID
Expand All @@ -158,19 +171,16 @@ export function AccountSwitcherModalInDappWebView({
<AutoLockView
style={[
styles.container,
inScreen && { zIndex: 19 },
// inScreen && { zIndex: 19 },
!isVisible && { display: 'none' },
absoluteStyle,
]}>
<TouchableOpacity
onPressIn={() => {
toggleSceneVisible(forScene, false);
}}
onPressIn={handlePressToClose}
style={[styles.bgMask, { height: absoluteStyle.maxHeight }]}
delayLongPress={1000}
/>
<View
style={[styles.panelContainer, { maxHeight: absoluteStyle.maxHeight }]}>
<View style={[styles.panelContainer]}>
<AccountsPanelInModal
forScene={forScene}
onSwitchSceneAccount={ctx => {
Expand Down Expand Up @@ -202,10 +212,12 @@ const getModalInDappWebViewStyle = createGetStyles2024(ctx => {
panelContainer: {
position: 'relative',
width: '100%',
height: getAccountsPanelInModalMaxHeight(),
// ...makeDevOnlyStyle({
// backgroundColor: 'blue',
// }),
height:
getAccountsPanelInModalMaxHeight() -
ScreenWithAccountSwitcherLayouts.screenHeaderHeight,
...makeDevOnlyStyle({
backgroundColor: 'blue',
}),
},
bgMask: {
position: 'absolute',
Expand Down
3 changes: 2 additions & 1 deletion apps/mobile/src/components/AccountSwitcher/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,9 @@ export function useAccountSceneVisible(forScene?: AccountSwitcherScene) {
const [scenes, setScenes] = useAtom(screenHeaderAccountSwitcherAtom);

const toggleSceneVisible = useCallback(
(scene: AccountSwitcherScene, nextVisible: boolean) => {
(scene: AccountSwitcherScene, nextVisible?: boolean) => {
setScenes(prev => {
nextVisible = nextVisible ?? !!prev[scene]?.collapsed;
return {
...prev,
[scene]: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function WebViewHeaderRight({
},
]}
onPress={() => {
toggleSceneVisible('@ActiveDappWebViewModal', true);
toggleSceneVisible('@ActiveDappWebViewModal');
}}>
<WalletIcon
type={lastUsedAccount?.type}
Expand Down
2 changes: 2 additions & 0 deletions apps/mobile/src/constant/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ export const ScreenWithAccountSwitcherLayouts = {
* see details apps/mobile/node_modules/@react-navigation/elements/src/Header/getDefaultHeaderHeight.tsx
*/
screenHeaderHeight: 56,

modalBottomSpace: 133,
};

export const ScreenColors = {
Expand Down

0 comments on commit a0abfdf

Please sign in to comment.