fix backup modal positioning (#1495)

This commit is contained in:
Patrick Loser
2025-05-09 10:34:21 +02:00
committed by GitHub
parent ed215a1d54
commit 03f582da98
3 changed files with 58 additions and 57 deletions
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { ThemeColors } from '@theme/types';
import { StyleSheet, Text, View, Image } from 'react-native';
import { TextInput } from 'react-native-paper';
import { Portal, TextInput } from 'react-native-paper';
import { GoogleSignin, User } from '@react-native-google-signin/google-signin';
import { Button, EmptyView, Modal } from '@components';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
@@ -276,38 +276,40 @@ export default function GoogleDriveModal({
};
return (
<Modal visible={visible} onDismiss={closeModal}>
<>
<View style={styles.titleContainer}>
<Text style={[styles.modalTitle, { color: theme.onSurface }]}>
{getString('backupScreen.drive.googleDriveBackup')}
</Text>
<TouchableOpacity
onLongPress={() => {
if (user?.user.email) {
Clipboard.setStringAsync(user.user.email).then(success => {
if (success) {
showToast(
getString('common.copiedToClipboard', {
name: user.user.email,
}),
);
}
});
}
}}
>
{user ? (
<Image
source={{ uri: user?.user.photo || '' }}
style={styles.avatar}
/>
) : null}
</TouchableOpacity>
</View>
{renderModal()}
</>
</Modal>
<Portal>
<Modal visible={visible} onDismiss={closeModal}>
<>
<View style={styles.titleContainer}>
<Text style={[styles.modalTitle, { color: theme.onSurface }]}>
{getString('backupScreen.drive.googleDriveBackup')}
</Text>
<TouchableOpacity
onLongPress={() => {
if (user?.user.email) {
Clipboard.setStringAsync(user.user.email).then(success => {
if (success) {
showToast(
getString('common.copiedToClipboard', {
name: user.user.email,
}),
);
}
});
}
}}
>
{user ? (
<Image
source={{ uri: user?.user.photo || '' }}
style={styles.avatar}
/>
) : null}
</TouchableOpacity>
</View>
{renderModal()}
</>
</Modal>
</Portal>
);
}
@@ -8,7 +8,7 @@ import { fetchTimeout } from '@utils/fetch/fetch';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { TextInput } from 'react-native-paper';
import { Portal, TextInput } from 'react-native-paper';
enum BackupModal {
SET_HOST,
@@ -265,16 +265,18 @@ export default function SelfHostModal({
};
return (
<Modal visible={visible} onDismiss={closeModal}>
<>
<View style={styles.titleContainer}>
<Text style={[styles.modalTitle, { color: theme.onSurface }]}>
{getString('backupScreen.remote.backup')}
</Text>
</View>
{renderModal()}
</>
</Modal>
<Portal>
<Modal visible={visible} onDismiss={closeModal}>
<>
<View style={styles.titleContainer}>
<Text style={[styles.modalTitle, { color: theme.onSurface }]}>
{getString('backupScreen.remote.backup')}
</Text>
</View>
{renderModal()}
</>
</Modal>
</Portal>
);
}
@@ -1,7 +1,6 @@
import React from 'react';
import { useTheme } from '@hooks/persisted';
import { Appbar, List, SafeAreaView } from '@components';
import { Portal } from 'react-native-paper';
import { useBoolean } from '@hooks';
import { BackupSettingsScreenProps } from '@navigators/types';
import GoogleDriveModal from './Components/GoogleDriveModal';
@@ -81,18 +80,16 @@ const BackupSettings = ({ navigation }: BackupSettingsScreenProps) => {
/>
</List.Section>
</ScrollView>
<Portal>
<GoogleDriveModal
visible={googleDriveModalVisible}
theme={theme}
closeModal={closeGoogleDriveModal}
/>
<SelfHostModal
theme={theme}
visible={selfHostModalVisible}
closeModal={closeSelfHostModal}
/>
</Portal>
<GoogleDriveModal
visible={googleDriveModalVisible}
theme={theme}
closeModal={closeGoogleDriveModal}
/>
<SelfHostModal
theme={theme}
visible={selfHostModalVisible}
closeModal={closeSelfHostModal}
/>
</SafeAreaView>
);
};