mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-05-12 01:13:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix folder selector collision in add edit (#1465)

Browse Source
This commit is contained in:
Leendert de Borst
2026-01-21 10:34:57 +01:00
committed by Leendert de Borst
parent 51143861b2
commit d94797d43b
2 changed files with 141 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
apps/mobile-app/components/folders/FolderSelector.tsx
View File

@@ -6,6 +6,7 @@ import {
StyleSheet,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
View,
ScrollView,
} from 'react-native';
@@ -156,76 +157,80 @@ export const FolderSelector: React.FC<IFolderSelectorProps> = ({
animationType="fade"
onRequestClose={() => setShowModal(false)}
>
<View style={styles.backdrop}>
<View style={styles.container}>
<Text style={styles.title}>{t('items.folders.selectFolder')}</Text>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View style={styles.backdrop}>
<TouchableWithoutFeedback>
<View style={styles.container}>
<Text style={styles.title}>{t('items.folders.selectFolder')}</Text>
<TouchableOpacity
style={styles.closeButton}
onPress={() => setShowModal(false)}
>
<MaterialIcons name="close" size={24} color={colors.textMuted} />
</TouchableOpacity>
<ScrollView style={styles.optionsList}>
{/* No folder option */}
<TouchableOpacity
style={[
styles.folderOption,
!selectedFolderId && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(null)}
>
<MaterialIcons
name="folder-open"
size={22}
color={!selectedFolderId ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
!selectedFolderId && styles.folderOptionTextActive,
]}
>
{t('items.folders.noFolder')}
</Text>
{!selectedFolderId && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</TouchableOpacity>
{/* Folder options */}
{folders.map(folder => (
<TouchableOpacity
key={folder.Id}
style={[
styles.folderOption,
selectedFolderId === folder.Id && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(folder.Id)}
style={styles.closeButton}
onPress={() => setShowModal(false)}
>
<MaterialIcons
name="folder"
size={22}
color={selectedFolderId === folder.Id ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
selectedFolderId === folder.Id && styles.folderOptionTextActive,
]}
numberOfLines={1}
>
{folder.Name}
</Text>
{selectedFolderId === folder.Id && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
<MaterialIcons name="close" size={24} color={colors.textMuted} />
</TouchableOpacity>
))}
</ScrollView>
<ScrollView style={styles.optionsList}>
{/* No folder option */}
<TouchableOpacity
style={[
styles.folderOption,
!selectedFolderId && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(null)}
>
<MaterialIcons
name="folder-open"
size={22}
color={!selectedFolderId ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
!selectedFolderId && styles.folderOptionTextActive,
]}
>
{t('items.folders.noFolder')}
</Text>
{!selectedFolderId && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</TouchableOpacity>
{/* Folder options */}
{folders.map(folder => (
<TouchableOpacity
key={folder.Id}
style={[
styles.folderOption,
selectedFolderId === folder.Id && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(folder.Id)}
>
<MaterialIcons
name="folder"
size={22}
color={selectedFolderId === folder.Id ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
selectedFolderId === folder.Id && styles.folderOptionTextActive,
]}
numberOfLines={1}
>
{folder.Name}
</Text>
{selectedFolderId === folder.Id && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</TouchableOpacity>
))}
</ScrollView>
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);

134
apps/mobile-app/components/form/ItemNameField.tsx
View File

@@ -6,6 +6,8 @@ import {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
TouchableWithoutFeedback,
View,
ScrollView,
} from 'react-native';
@@ -204,76 +206,82 @@ export const ItemNameField = forwardRef<ItemNameFieldRef, IItemNameFieldProps>((
animationType="fade"
onRequestClose={() => setShowModal(false)}
>
<View style={styles.backdrop}>
<View style={styles.modalContainer}>
<Text style={styles.title}>{t('items.folders.selectFolder')}</Text>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View style={styles.backdrop}>
<TouchableWithoutFeedback>
<View style={styles.modalContainer}>
<Text style={styles.title}>{t('items.folders.selectFolder')}</Text>
<RobustPressable
style={styles.closeButton}
onPress={() => setShowModal(false)}
>
<MaterialIcons name="close" size={24} color={colors.textMuted} />
</RobustPressable>
<ScrollView style={styles.optionsList}>
{/* No folder option */}
<RobustPressable
style={[
styles.folderOption,
!selectedFolderId && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(null)}
>
<MaterialIcons
name="folder-open"
size={22}
color={!selectedFolderId ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
!selectedFolderId && styles.folderOptionTextActive,
]}
<TouchableOpacity
style={styles.closeButton}
onPress={() => setShowModal(false)}
>
{t('items.folders.noFolder')}
</Text>
{!selectedFolderId && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</RobustPressable>
<MaterialIcons name="close" size={24} color={colors.textMuted} />
</TouchableOpacity>
{/* Folder options */}
{folders.map(folder => (
<RobustPressable
key={folder.Id}
style={[
styles.folderOption,
selectedFolderId === folder.Id && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(folder.Id)}
>
<MaterialIcons
name="folder"
size={22}
color={selectedFolderId === folder.Id ? colors.tint : colors.textMuted}
/>
<Text
<ScrollView style={styles.optionsList}>
{/* No folder option */}
<TouchableOpacity
style={[
styles.folderOptionText,
selectedFolderId === folder.Id && styles.folderOptionTextActive,
styles.folderOption,
!selectedFolderId && styles.folderOptionActive,
]}
numberOfLines={1}
onPress={() => handleSelectFolder(null)}
activeOpacity={0.7}
>
{folder.Name}
</Text>
{selectedFolderId === folder.Id && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</RobustPressable>
))}
</ScrollView>
<MaterialIcons
name="folder-open"
size={22}
color={!selectedFolderId ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
!selectedFolderId && styles.folderOptionTextActive,
]}
>
{t('items.folders.noFolder')}
</Text>
{!selectedFolderId && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</TouchableOpacity>
{/* Folder options */}
{folders.map(folder => (
<TouchableOpacity
key={folder.Id}
style={[
styles.folderOption,
selectedFolderId === folder.Id && styles.folderOptionActive,
]}
onPress={() => handleSelectFolder(folder.Id)}
activeOpacity={0.7}
>
<MaterialIcons
name="folder"
size={22}
color={selectedFolderId === folder.Id ? colors.tint : colors.textMuted}
/>
<Text
style={[
styles.folderOptionText,
selectedFolderId === folder.Id && styles.folderOptionTextActive,
]}
numberOfLines={1}
>
{folder.Name}
</Text>
{selectedFolderId === folder.Id && (
<MaterialIcons name="check" size={20} color={colors.tint} />
)}
</TouchableOpacity>
))}
</ScrollView>
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);