Skip to content

Commit

Permalink
fix: updated long buttons to be less prone to incorrect presses
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vali-98
Vali-98 committed Jul 3, 2024
1 parent 43abd72 commit f916879
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 114 deletions.
85 changes: 43 additions & 42 deletions app/CharMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,49 +198,45 @@ const CharMenu = () => {
fade={0}
fduration={500}>
<TouchableOpacity
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}
style={styles.longButton}
disabled={nowLoading}
onPress={() => setCurrentCharacter(character.id)}>
<View style={styles.longButton}>
<Image
source={{
uri: Characters.getImageDir(character.image_id),
}}
style={styles.avatar}
/>
<View style={{ flex: 1 }}>
<Text style={styles.nametag}>{character.name}</Text>
<View
style={{
paddingLeft: 16,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
{character.tags.map((item, index) => (
<Text
style={{
color: Style.getColor('primary-text2'),
fontSize: 12,
backgroundColor:
Style.getColor('primary-surface4'),
marginHorizontal: 2,
marginVertical: 2,
paddingHorizontal: 4,
paddingVertical: 2,
borderRadius: 4,
}}
key={index}>
{item}
</Text>
))}
</View>
<Image
source={{
uri: Characters.getImageDir(character.image_id),
}}
style={styles.avatar}
/>
<View>
<Text style={styles.nametag}>{character.name}</Text>
<View
style={{
paddingLeft: 16,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
{character.tags.map((item, index) => (
<Text
style={{
color: Style.getColor('primary-text2'),
fontSize: 12,
backgroundColor:
Style.getColor('primary-surface4'),
paddingHorizontal: 4,
paddingVertical: 2,
borderRadius: 4,
rowGap: 2,
columnGap: 4,
}}
key={index}>
{item}
</Text>
))}
</View>
</View>
</TouchableOpacity>
<View>
{nowLoading && character.id === loadedCharId ? (
<ActivityIndicator
color={Style.getColor('primary-text2')}
Expand All @@ -249,6 +245,7 @@ const CharMenu = () => {
/>
) : (
<TouchableOpacity
style={styles.secondaryButton}
onPress={async () => {
setCurrentCharacter(character.id, true)
}}
Expand All @@ -260,7 +257,7 @@ const CharMenu = () => {
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
</AnimatedView>
))}
</ScrollView>
Expand All @@ -282,6 +279,7 @@ const styles = StyleSheet.create({
longButton: {
flexDirection: 'row',
flex: 1,
padding: 8,
},

longButtonContainer: {
Expand All @@ -293,8 +291,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 8,
paddingVertical: 8,
padding: 8,
flex: 1,
},

Expand All @@ -312,6 +308,11 @@ const styles = StyleSheet.create({
flex: 1,
},

secondaryButton: {
paddingHorizontal: 8,
paddingVertical: 20,
},

avatar: {
width: 48,
height: 48,
Expand Down
67 changes: 37 additions & 30 deletions app/ChatSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,39 +116,45 @@ const ChatSelector = () => {
}}
/>
{chats.reverse().map((item, index) => (
<TouchableOpacity
<View
key={index}
onPress={() => handleSelectChat(item.id)}
style={
item.id === currentChatId
? styles.longButtonSelectedContainer
: styles.longButtonContainer
}>
<Image
source={{ uri: Characters.getImageDir(imageId ?? -1) }}
style={styles.avatar}
/>
<Text style={styles.chatname}>{item.createDate.toLocaleTimeString()}</Text>

<TouchableOpacity
style={styles.button}
onPress={() => handleExportChat(item.id)}>
<FontAwesome
name="download"
size={32}
color={Style.getColor('primary-text1')}
style={styles.selectorButton}
onPress={() => handleSelectChat(item.id)}>
<Image
source={{ uri: Characters.getImageDir(imageId ?? -1) }}
style={styles.avatar}
/>
<Text style={styles.chatname}>
{item.createDate.toLocaleTimeString()}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleDeleteChat(item.id)}>
<FontAwesome
name="trash"
size={32}
color={Style.getColor('primary-text1')}
/>
</TouchableOpacity>
</TouchableOpacity>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={styles.button}
onPress={() => handleExportChat(item.id)}>
<FontAwesome
name="download"
size={32}
color={Style.getColor('primary-text1')}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleDeleteChat(item.id)}>
<FontAwesome
name="trash"
size={32}
color={Style.getColor('primary-text1')}
/>
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
</AnimatedView>
Expand All @@ -166,6 +172,11 @@ const styles = StyleSheet.create({
chatname: {
color: Style.getColor('primary-text2'),
marginLeft: 8,
},

selectorButton: {
flexDirection: 'row',
padding: 8,
flex: 1,
},

Expand All @@ -178,8 +189,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 8,
paddingVertical: 8,
padding: 8,
flex: 1,
},

Expand All @@ -192,8 +201,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 8,
paddingVertical: 8,
padding: 8,
flex: 1,
},

Expand All @@ -206,7 +213,7 @@ const styles = StyleSheet.create({
},

button: {
marginRight: 8,
marginLeft: 16,
paddingHorizontal: 12,
paddingVertical: 20,
},
})
3 changes: 2 additions & 1 deletion app/Instruct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,8 @@ const Instruct = () => {
step={1}
showInput={false}
/>
<Text style={{ color: Style.getColor('primary-text2') }}>
<Text
style={{ color: Style.getColor('primary-text2'), marginLeft: 16 }}>
Mode: {currentInstruct.format_type} -
{' ' +
[
Expand Down
58 changes: 30 additions & 28 deletions app/UserSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,33 +102,31 @@ const UserSelector = () => {
/>

<Text style={styles.username}>{info.name}</Text>

<TouchableOpacity
onPress={() => {
Alert.alert(
`Delete Persona`,
`Are you sure you want to delete '${info.name}'?`,
[
{ text: `Cancel`, style: `cancel` },
{
text: `Confirm`,
style: `destructive`,
onPress: async () => {
await Characters.db.mutate.deleteCard(
info.id
)
loadUserList()
},
</TouchableOpacity>
<TouchableOpacity
style={styles.secondaryButton}
onPress={() => {
Alert.alert(
`Delete Persona`,
`Are you sure you want to delete '${info.name}'?`,
[
{ text: `Cancel`, style: `cancel` },
{
text: `Confirm`,
style: `destructive`,
onPress: async () => {
await Characters.db.mutate.deleteCard(info.id)
loadUserList()
},
]
)
}}>
<FontAwesome
size={28}
name="trash"
color={Style.getColor('primary-text1')}
/>
</TouchableOpacity>
},
]
)
}}>
<FontAwesome
size={28}
name="trash"
color={Style.getColor('primary-text1')}
/>
</TouchableOpacity>
</View>
))}
Expand Down Expand Up @@ -193,14 +191,18 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 8,
paddingVertical: 8,
padding: 8,
flex: 1,
},

secondaryButton: {
paddingHorizontal: 12,
paddingVertical: 22,
},

useritembutton: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
padding: 8,
},
})
30 changes: 17 additions & 13 deletions components/ChatMenu/Recents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ const Recents = () => {
)}
{showRecents &&
[...recentMessages].reverse()?.map((item, index) => (
<View key={index} style={{ flexDirection: 'row' }}>
<View
key={index}
style={{ flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity
style={styles.longButton}
onPress={async () => {
Expand All @@ -73,14 +75,15 @@ const Recents = () => {
{item.lastModified}
</Text>
</View>
<TouchableOpacity
onPress={() => RecentMessages.deleteEntry(item.chatId)}>
<FontAwesome
color={Style.getColor('primary-text2')}
name="trash"
size={28}
/>
</TouchableOpacity>
</TouchableOpacity>
<TouchableOpacity
style={styles.secondaryButton}
onPress={() => RecentMessages.deleteEntry(item.chatId)}>
<FontAwesome
color={Style.getColor('primary-text2')}
name="trash"
size={28}
/>
</TouchableOpacity>
</View>
))}
Expand Down Expand Up @@ -111,7 +114,6 @@ const Recents = () => {
const styles = StyleSheet.create({
welcometext: {
justifyContent: 'center',

fontSize: 20,
color: Style.getColor('primary-text1'),
},
Expand Down Expand Up @@ -148,13 +150,15 @@ const styles = StyleSheet.create({
marginLeft: 12,
},

secondaryButton: {
paddingHorizontal: 16,
paddingVertical: 18,
},

longButton: {
alignItems: 'center',
flex: 1,
backgroundColor: Style.getColor('primary-surface3'),
flexDirection: 'row',
paddingHorizontal: 12,
borderRadius: 8,
marginVertical: 4,
justifyContent: 'space-between',
shadowColor: Style.getColor('primary-shadow'),
Expand Down

0 comments on commit f916879

Please sign in to comment.