Jannik/Schnappix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: multiple UX issues (black camera screen, layout proportions, sticker delete button scaling, save without reset)

Browse Source
This commit is contained in:
Jannik
2026-06-11 12:10:00 +02:00
parent 815a3ef111
commit 95c58cfae6
3 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+1 -1
View File
@@ -150,7 +150,7 @@ export default function App() {
<View <View
style={[ style={[
StyleSheet.absoluteFill, StyleSheet.absoluteFill,
(currentScreen === 'preview' || currentScreen === 'admin') && { opacity: 0, zIndex: -10, transform: [{ translateX: -10000 }] } (currentScreen === 'preview' || currentScreen === 'admin') && { zIndex: -10 }
]} ]}
pointerEvents={(currentScreen === 'preview' || currentScreen === 'admin') ? 'none' : 'auto'} pointerEvents={(currentScreen === 'preview' || currentScreen === 'admin') ? 'none' : 'auto'}
> >
src/components/DraggableSticker.tsx
+28 -14
View File
@@ -121,6 +121,13 @@ export default function DraggableSticker({
], ],
})); }));
const deleteBtnStyle = useAnimatedStyle(() => ({
transform: [
{ scale: 1 / scale.value },
{ rotate: `-${rotation.value}rad` }, // keep it upright
],
}));
const isText = sticker.type === 'text'; const isText = sticker.type === 'text';
return ( return (
@@ -134,13 +141,15 @@ export default function DraggableSticker({
<Text style={styles.emojiText}>{sticker.content}</Text> <Text style={styles.emojiText}>{sticker.content}</Text>
)} )}
{isSelected && ( {isSelected && (
<TouchableOpacity <Animated.View style={[styles.deleteBtnWrapper, deleteBtnStyle]}>
style={styles.deleteBtn} <TouchableOpacity
onPress={() => onDelete(sticker.id)} style={styles.deleteBtn}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} onPress={() => onDelete(sticker.id)}
> hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
<Text style={styles.deleteBtnText}>×</Text> >
</TouchableOpacity> <Text style={styles.deleteBtnText}>×</Text>
</TouchableOpacity>
</Animated.View>
)} )}
</Animated.View> </Animated.View>
</GestureDetector> </GestureDetector>
@@ -177,17 +186,22 @@ const styles = StyleSheet.create({
textShadowOffset: { width: 0, height: 0 }, textShadowOffset: { width: 0, height: 0 },
textShadowRadius: 6, textShadowRadius: 6,
}, },
deleteBtn: { deleteBtnWrapper: {
position: 'absolute', position: 'absolute',
top: 15, top: 5,
right: 15, right: 5,
width: 24, zIndex: 200,
height: 24, elevation: 25,
borderRadius: 12, },
deleteBtn: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: THEME.colors.error, backgroundColor: THEME.colors.error,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
zIndex: 200, borderWidth: 2,
borderColor: '#fff',
}, },
deleteBtnText: { deleteBtnText: {
color: '#fff', color: '#fff',
src/screens/PreviewScreen.tsx
+3 -4
View File
@@ -297,7 +297,6 @@ export default function PreviewScreen({
setTimeout(() => { setTimeout(() => {
if (!mountedRef.current) return; if (!mountedRef.current) return;
setIsProcessing(false); setIsProcessing(false);
onReset();
}, 1500); }, 1500);
} catch (error: any) { } catch (error: any) {
if (!mountedRef.current) return; if (!mountedRef.current) return;
@@ -393,7 +392,7 @@ export default function PreviewScreen({
key={idx} key={idx}
source={{ uri }} source={{ uri }}
style={styles.stripImage} style={styles.stripImage}
resizeMode="cover" resizeMode="contain"
resizeMethod="resize" resizeMethod="resize"
onLoad={() => logger.log(`Image loaded successfully: ${uri}`)} onLoad={() => logger.log(`Image loaded successfully: ${uri}`)}
onError={(e) => logger.error(`Image load failed: ${uri}`, e.nativeEvent?.error || e)} onError={(e) => logger.error(`Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -415,7 +414,7 @@ export default function PreviewScreen({
key={idx} key={idx}
source={{ uri }} source={{ uri }}
style={styles.gridImage} style={styles.gridImage}
resizeMode="cover" resizeMode="contain"
resizeMethod="resize" resizeMethod="resize"
onLoad={() => logger.log(`Grid Image loaded successfully: ${uri}`)} onLoad={() => logger.log(`Grid Image loaded successfully: ${uri}`)}
onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e.nativeEvent?.error || e)} onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -436,7 +435,7 @@ export default function PreviewScreen({
key={idx} key={idx}
source={{ uri }} source={{ uri }}
style={styles.duoImage} style={styles.duoImage}
resizeMode="cover" resizeMode="contain"
resizeMethod="resize" resizeMethod="resize"
onLoad={() => logger.log(`Duo Image loaded successfully: ${uri}`)} onLoad={() => logger.log(`Duo Image loaded successfully: ${uri}`)}
onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e.nativeEvent?.error || e)} onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e.nativeEvent?.error || e)}