Thirdshop/Kazier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve chips

Browse Source
This commit is contained in:
m
2026-07-14 08:58:52 +02:00
parent 18bd08a919
commit 6761141fed
1 changed files with 35 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/app/index.tsx
+35 -47
View File
@@ -1,5 +1,5 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react'; import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, KeyboardAvoidingView, Platform, Keyboard, Alert, Modal, TextInput } from 'react-native'; import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, KeyboardAvoidingView, Platform, Keyboard, Alert, Modal, TextInput, ScrollView } from 'react-native';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -345,43 +345,47 @@ export function HomeScreen() {
<Text style={styles.selectAllText}>Tout</Text> <Text style={styles.selectAllText}>Tout</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.selectionActions}> <ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.selectionActions}
>
<TouchableOpacity <TouchableOpacity
style={[styles.selectionActionBtn, styles.deleteActionBtn]} style={[styles.selectionChip, styles.deleteChip]}
onPress={handleDelete} onPress={handleDelete}
> >
<MaterialIcons name="delete" size={20} color="#F44336" /> <MaterialIcons name="delete" size={18} color="#E53935" />
<Text style={[styles.selectionActionText, { color: '#F44336' }]}>Supprimer</Text> <Text style={[styles.chipText, { color: '#E53935' }]}>Supprimer</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.selectionActionBtn, styles.editActionBtn]} style={[styles.selectionChip, styles.editChip]}
onPress={handleEdit} onPress={handleEdit}
> >
<MaterialIcons name="edit" size={20} color="#1976D2" /> <MaterialIcons name="edit" size={18} color="#1E88E5" />
<Text style={[styles.selectionActionText, { color: '#1976D2' }]}>Éditer</Text> <Text style={[styles.chipText, { color: '#1E88E5' }]}>Éditer</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.selectionActionBtn, styles.tagActionBtn]} style={[styles.selectionChip, styles.tagChip]}
onPress={() => openTagModal('tag')} onPress={() => openTagModal('tag')}
> >
<MaterialIcons name="label" size={20} color="#7B1FA2" /> <MaterialIcons name="label" size={18} color="#8E24AA" />
<Text style={[styles.selectionActionText, { color: '#7B1FA2' }]}>Tags</Text> <Text style={[styles.chipText, { color: '#8E24AA' }]}>Tags</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.selectionActionBtn, styles.folderActionBtn]} style={[styles.selectionChip, styles.folderChip]}
onPress={() => openTagModal('folder')} onPress={() => openTagModal('folder')}
> >
<MaterialIcons name="create-new-folder" size={20} color="#F57C00" /> <MaterialIcons name="create-new-folder" size={18} color="#F57C00" />
<Text style={[styles.selectionActionText, { color: '#F57C00' }]}>Folder</Text> <Text style={[styles.chipText, { color: '#F57C00' }]}>Folder</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.selectionActionBtn, styles.moveActionBtn]} style={[styles.selectionChip, styles.moveChip]}
onPress={() => setMoveModalVisible(true)} onPress={() => setMoveModalVisible(true)}
> >
<MaterialIcons name="drive-file-move" size={20} color="#00897B" /> <MaterialIcons name="drive-file-move" size={18} color="#00897B" />
<Text style={[styles.selectionActionText, { color: '#00897B' }]}>Déplacer</Text> <Text style={[styles.chipText, { color: '#00897B' }]}>Déplacer</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </ScrollView>
</View> </View>
) : ( ) : (
<View style={styles.bottomNav}> <View style={styles.bottomNav}>
@@ -600,42 +604,26 @@ const styles = StyleSheet.create({
}, },
selectionActions: { selectionActions: {
flexDirection: 'row', flexDirection: 'row',
gap: 12, gap: 8,
paddingVertical: 4,
}, },
selectionActionBtn: { selectionChip: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', paddingHorizontal: 14,
paddingVertical: 12, paddingVertical: 8,
borderRadius: 8, borderRadius: 20,
gap: 6, gap: 6,
borderWidth: 1.5,
}, },
deleteActionBtn: { chipText: {
borderColor: '#F44336', fontSize: 13,
backgroundColor: 'transparent',
},
editActionBtn: {
borderColor: '#1976D2',
backgroundColor: 'transparent',
},
selectionActionText: {
fontSize: 15,
fontWeight: '600', fontWeight: '600',
}, },
tagActionBtn: { deleteChip: { backgroundColor: '#FFEBEE' },
borderColor: '#7B1FA2', editChip: { backgroundColor: '#E3F2FD' },
backgroundColor: 'transparent', tagChip: { backgroundColor: '#F3E5F5' },
}, folderChip: { backgroundColor: '#FFF3E0' },
folderActionBtn: { moveChip: { backgroundColor: '#E0F2F1' },
borderColor: '#F57C00',
backgroundColor: 'transparent',
},
moveActionBtn: {
borderColor: '#00897B',
backgroundColor: 'transparent',
},
folderOption: { folderOption: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',