ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): replace blocking modal with inline live inspector for instantaneous visual editing feedback

Browse Source
This commit is contained in:
AyrisAI
2026-08-21 01:04:03 +03:00
parent 2c3599839b
commit b0645c0ac3
2 changed files with 298 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/src/app/menu/qr.tsx
+129 -221
View File
@@ -410,44 +410,78 @@ export default function QrScreen() {
</ViewShot> </ViewShot>
</View> </View>
{/* Hızlı Katman Seçici (Tıklayınca Modal Açar) */} {/* Hızlı Katman Seçici (Canlı Seçim) */}
<View style={{ width: "100%", marginBottom: 16 }}> <View style={{ width: "100%", marginBottom: 12 }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700", marginBottom: 8, letterSpacing: 0.5 }}> <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
DÜZENLEMEK VE KONUMUNU DEĞİŞTİRMEK İÇİN TIKLAYIN: <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "800", letterSpacing: 0.5 }}>
CANLI DÜZENLENECEK ALANI SEÇİN:
</Text> </Text>
{selectedEditField && (
<Pressable
onPress={() => setSelectedEditField(null)}
style={{
backgroundColor: "rgba(255,255,255,0.08)",
paddingHorizontal: 8,
paddingVertical: 3,
borderRadius: 6,
}}
>
<Text style={{ color: "#A1A1AA", fontSize: 11, fontWeight: "600" }}>Kapat</Text>
</Pressable>
)}
</View>
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}> <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
{FIELD_DEFINITIONS.map(({ key, label, icon }) => { {FIELD_DEFINITIONS.map(({ key, label, icon }) => {
const item = fields[key]; const item = fields[key];
const isSelected = selectedEditField === key;
return ( return (
<Pressable <Pressable
key={key} key={key}
onPress={() => setSelectedEditField(key)} onPress={() => setSelectedEditField(isSelected ? null : key)}
style={({ pressed }) => ({ style={({ pressed }) => ({
backgroundColor: item.visible ? "#242429" : "#1A1A1E", backgroundColor: isSelected ? "#D4AF37" : item.visible ? "#242429" : "#1A1A1E",
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 9, paddingVertical: 9,
borderRadius: 12, borderRadius: 12,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: item.visible ? "rgba(212, 175, 55, 0.4)" : "#2B2B32", borderColor: isSelected ? "#D4AF37" : item.visible ? "rgba(212, 175, 55, 0.3)" : "#2B2B32",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: 6, gap: 6,
opacity: pressed ? 0.8 : 1, opacity: pressed ? 0.8 : 1,
})} })}
> >
<Ionicons name={icon as any} size={14} color={item.visible ? "#D4AF37" : "#71717A"} /> <Ionicons
name={icon as any}
size={14}
color={isSelected ? "#0C0C0E" : item.visible ? "#D4AF37" : "#71717A"}
/>
<Text <Text
style={{ style={{
color: item.visible ? "#FFFFFF" : "#71717A", color: isSelected ? "#0C0C0E" : item.visible ? "#FFFFFF" : "#71717A",
fontSize: 12, fontSize: 12,
fontWeight: "700", fontWeight: isSelected ? "800" : "700",
}} }}
> >
{label} {label}
</Text> </Text>
{item.offsetY ? ( {item.offsetY ? (
<View style={{ backgroundColor: "#D4AF37", borderRadius: 6, paddingHorizontal: 4, paddingVertical: 1 }}> <View
<Text style={{ color: "#0C0C0E", fontSize: 9, fontWeight: "800" }}> style={{
backgroundColor: isSelected ? "#0C0C0E" : "#D4AF37",
borderRadius: 6,
paddingHorizontal: 4,
paddingVertical: 1,
}}
>
<Text
style={{
color: isSelected ? "#D4AF37" : "#0C0C0E",
fontSize: 9,
fontWeight: "800",
}}
>
{item.offsetY > 0 ? `+${item.offsetY}` : item.offsetY}px {item.offsetY > 0 ? `+${item.offsetY}` : item.offsetY}px
</Text> </Text>
</View> </View>
@@ -458,121 +492,7 @@ export default function QrScreen() {
</ScrollView> </ScrollView>
</View> </View>
{/* Metin & Font & Boyut Özelleştirme Kartı (Açılır/Kapanır Liste) */} {/* CANLI DÜZENLEYİCİ KARTI (Sayfa İçinde Anında Görsel Geri Bildirim) */}
<View
style={{
backgroundColor: "#18181B",
borderRadius: 20,
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.08)",
padding: 16,
marginBottom: 20,
}}
>
<Pressable
onPress={() => setShowCustomizePanel(!showCustomizePanel)}
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
<View
style={{
width: 34,
height: 34,
borderRadius: 10,
backgroundColor: "rgba(212, 175, 55, 0.15)",
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name="text-outline" size={19} color="#D4AF37" />
</View>
<View>
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "700" }}>
Tüm Katmanları Listele
</Text>
<Text style={{ color: "#A1A1AA", fontSize: 12 }}>
Tıkla & Düzenle, dikey konum kaydırma ve font ayarı
</Text>
</View>
</View>
<Ionicons
name={showCustomizePanel ? "chevron-up" : "chevron-down"}
size={20}
color="#A1A1AA"
/>
</Pressable>
{showCustomizePanel && (
<View style={{ marginTop: 16, gap: 12, borderTopWidth: 1, borderTopColor: "rgba(255,255,255,0.06)", paddingTop: 16 }}>
{FIELD_DEFINITIONS.map(({ key, label, icon }) => {
const item = fields[key];
return (
<Pressable
key={key}
onPress={() => setSelectedEditField(key)}
style={({ pressed }) => ({
backgroundColor: "#141417",
borderRadius: 14,
padding: 12,
borderWidth: 1,
borderColor: "rgba(255,255,255,0.06)",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
opacity: pressed ? 0.8 : 1,
})}
>
<View style={{ flexDirection: "row", alignItems: "center", gap: 10, flex: 1 }}>
<Ionicons name={icon as any} size={18} color="#D4AF37" />
<View style={{ flex: 1 }}>
<Text style={{ color: "#FFFFFF", fontSize: 13, fontWeight: "700" }}>
{label}
</Text>
<Text style={{ color: "#A1A1AA", fontSize: 11 }} numberOfLines={1}>
{item.text || "Boş"}
</Text>
</View>
</View>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<View
style={{
backgroundColor: "#242429",
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 8,
}}
>
<Text style={{ color: "#D4AF37", fontSize: 10, fontWeight: "700" }}>
{item.fontSize || 12}px
</Text>
</View>
<Ionicons name="create-outline" size={18} color="#D4AF37" />
</View>
</Pressable>
);
})}
</View>
)}
</View>
{/* Modal: Tıklanan Metin Katmanını Detaylı Düzenleme */}
<Modal
visible={!!selectedEditField}
animationType="slide"
transparent
onRequestClose={() => setSelectedEditField(null)}
>
<View
style={{
flex: 1,
backgroundColor: "rgba(0,0,0,0.75)",
justifyContent: "flex-end",
}}
>
{selectedEditField && (() => { {selectedEditField && (() => {
const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!; const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!;
const item = fields[selectedEditField]; const item = fields[selectedEditField];
@@ -580,53 +500,45 @@ export default function QrScreen() {
return ( return (
<View <View
style={{ style={{
width: "100%",
backgroundColor: "#18181B", backgroundColor: "#18181B",
borderTopLeftRadius: 28, borderRadius: 20,
borderTopRightRadius: 28, borderWidth: 1.5,
padding: 20, borderColor: "#D4AF37",
maxHeight: "85%", padding: 16,
gap: 16, marginBottom: 20,
borderTopWidth: 1, gap: 14,
borderColor: "rgba(212, 175, 55, 0.3)", shadowColor: "#D4AF37",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 10,
elevation: 4,
}} }}
> >
{/* Modal Başlığı & Kapat Butonu */} {/* Başlık & Görünürlük */}
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}> <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}> <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Ionicons name={def.icon as any} size={20} color="#D4AF37" /> <View
<Text style={{ color: "#FFFFFF", fontSize: 17, fontWeight: "800" }}>
{def.label}
</Text>
</View>
<Pressable
onPress={() => setSelectedEditField(null)}
style={{ style={{
width: 32, width: 28,
height: 32, height: 28,
borderRadius: 16, borderRadius: 8,
backgroundColor: "#242429", backgroundColor: "#D4AF37",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<Ionicons name="close" size={18} color="#FFFFFF" /> <Ionicons name={def.icon as any} size={16} color="#0C0C0E" />
</Pressable> </View>
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "800" }}>
{def.label}
</Text>
</View> </View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ gap: 16, paddingBottom: 20 }}> {/* Stantta Göster / Gizle */}
{/* Görünürlük Anahtarı */} <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<View <Text style={{ color: item.visible ? "#10B981" : "#71717A", fontSize: 11, fontWeight: "700" }}>
style={{ {item.visible ? "Görünür" : "Gizli"}
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#121215",
padding: 12,
borderRadius: 14,
}}
>
<Text style={{ color: "#FFFFFF", fontSize: 13, fontWeight: "700" }}>
Stantta Göster
</Text> </Text>
<Switch <Switch
value={item.visible} value={item.visible}
@@ -641,11 +553,14 @@ export default function QrScreen() {
ios_backgroundColor="#27272A" ios_backgroundColor="#27272A"
/> />
</View> </View>
</View>
{/* Metin Girişi (Multiline / Enter Destekli) */} {item.visible && (
<View style={{ gap: 6 }}> <>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}> {/* Metin Girişi (Enter ile alt satır destekli) */}
METİN İÇERİĞİ (ENTER İLE YENİ SATIR) <View style={{ gap: 4 }}>
<Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
METİN İÇERİĞİ (ENTER İLE YENİ SATIRA GEÇEBİLİR):
</Text> </Text>
<TextInput <TextInput
value={item.text} value={item.text}
@@ -662,23 +577,23 @@ export default function QrScreen() {
backgroundColor: "#121215", backgroundColor: "#121215",
borderWidth: 1, borderWidth: 1,
borderColor: "rgba(255,255,255,0.12)", borderColor: "rgba(255,255,255,0.12)",
borderRadius: 14, borderRadius: 12,
paddingHorizontal: 14, paddingHorizontal: 12,
paddingVertical: 12, paddingVertical: 10,
color: "#FFFFFF", color: "#FFFFFF",
fontSize: 14, fontSize: 14,
minHeight: 60, minHeight: 46,
}} }}
/> />
</View> </View>
{/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */} {/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */}
<View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}> <View style={{ gap: 6, backgroundColor: "#121215", padding: 12, borderRadius: 12 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}> <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}> <Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
DİKEY KONUM (YUKARI / AŞAĞI) DİKEY KONUM (YUKARI / AŞAĞI TAŞIMA)
</Text> </Text>
<Text style={{ color: "#E5C378", fontSize: 12, fontWeight: "800" }}> <Text style={{ color: "#E5C378", fontSize: 11, fontWeight: "800" }}>
{item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"} {item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"}
</Text> </Text>
</View> </View>
@@ -696,8 +611,8 @@ export default function QrScreen() {
style={{ style={{
flex: 1, flex: 1,
backgroundColor: "#242429", backgroundColor: "#242429",
paddingVertical: 10, paddingVertical: 8,
borderRadius: 10, borderRadius: 8,
alignItems: "center", alignItems: "center",
flexDirection: "row", flexDirection: "row",
justifyContent: "center", justifyContent: "center",
@@ -721,8 +636,8 @@ export default function QrScreen() {
style={{ style={{
flex: 1, flex: 1,
backgroundColor: "#242429", backgroundColor: "#242429",
paddingVertical: 10, paddingVertical: 8,
borderRadius: 10, borderRadius: 8,
alignItems: "center", alignItems: "center",
flexDirection: "row", flexDirection: "row",
justifyContent: "center", justifyContent: "center",
@@ -747,8 +662,8 @@ export default function QrScreen() {
style={{ style={{
backgroundColor: "#3A2A2A", backgroundColor: "#3A2A2A",
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 8,
borderRadius: 10, borderRadius: 8,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
@@ -759,12 +674,12 @@ export default function QrScreen() {
</View> </View>
</View> </View>
{/* YAZI TİPİ (FONT) SEÇİMİ */} {/* YAZI TİPİ (FONT) & BOYUT YAN YANA */}
<View style={{ gap: 8 }}> <View style={{ gap: 6 }}>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}> <Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
YAZI TİPİ (TÜRKÇE DESTEKLİ FONT) YAZI TİPİ (TÜRKÇE DESTEKLİ FONT)
</Text> </Text>
<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}> <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6 }}>
{FONT_OPTIONS.map((f) => { {FONT_OPTIONS.map((f) => {
const isSelected = item.fontId === f.id; const isSelected = item.fontId === f.id;
return ( return (
@@ -778,9 +693,9 @@ export default function QrScreen() {
} }
style={{ style={{
backgroundColor: isSelected ? "#D4AF37" : "#242429", backgroundColor: isSelected ? "#D4AF37" : "#242429",
paddingHorizontal: 14, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 7,
borderRadius: 12, borderRadius: 10,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)", borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)",
}} }}
@@ -788,8 +703,8 @@ export default function QrScreen() {
<Text <Text
style={{ style={{
color: isSelected ? "#0C0C0E" : "#FFFFFF", color: isSelected ? "#0C0C0E" : "#FFFFFF",
fontSize: 12, fontSize: 11.5,
fontWeight: isSelected ? "800" : "500", fontWeight: isSelected ? "800" : "600",
}} }}
> >
{f.label} {f.label}
@@ -797,15 +712,24 @@ export default function QrScreen() {
</Pressable> </Pressable>
); );
})} })}
</View> </ScrollView>
</View> </View>
{/* YAZI BOYUTU (FONT SIZE) */} {/* YAZI BOYUTU (FONT SIZE) */}
<View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}> <View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
backgroundColor: "#121215",
padding: 10,
borderRadius: 12,
}}
>
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}> <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
YAZI BOYUTU YAZI BOYUTU:
</Text> </Text>
<View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}> <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
<Pressable <Pressable
onPress={() => onPress={() =>
setFields((prev) => ({ setFields((prev) => ({
@@ -818,15 +742,15 @@ export default function QrScreen() {
} }
style={{ style={{
backgroundColor: "#242429", backgroundColor: "#242429",
paddingHorizontal: 16, paddingHorizontal: 14,
paddingVertical: 10, paddingVertical: 6,
borderRadius: 10, borderRadius: 8,
}} }}
> >
<Ionicons name="remove" size={18} color="#FFFFFF" /> <Ionicons name="remove" size={16} color="#FFFFFF" />
</Pressable> </Pressable>
<Text style={{ color: "#D4AF37", fontSize: 18, fontWeight: "800" }}> <Text style={{ color: "#D4AF37", fontSize: 16, fontWeight: "800", minWidth: 40, textAlign: "center" }}>
{item.fontSize || 12} px {item.fontSize || 12} px
</Text> </Text>
@@ -842,37 +766,21 @@ export default function QrScreen() {
} }
style={{ style={{
backgroundColor: "#242429", backgroundColor: "#242429",
paddingHorizontal: 16, paddingHorizontal: 14,
paddingVertical: 10, paddingVertical: 6,
borderRadius: 10, borderRadius: 8,
}} }}
> >
<Ionicons name="add" size={18} color="#FFFFFF" /> <Ionicons name="add" size={16} color="#FFFFFF" />
</Pressable> </Pressable>
</View> </View>
</View> </View>
</>
{/* Kaydet & Tamamla Butonu */} )}
<Pressable
onPress={() => setSelectedEditField(null)}
style={{
backgroundColor: "#D4AF37",
borderRadius: 14,
paddingVertical: 14,
alignItems: "center",
marginTop: 6,
}}
>
<Text style={{ color: "#0C0C0E", fontSize: 15, fontWeight: "800" }}>
Tamamla & Uygula
</Text>
</Pressable>
</ScrollView>
</View> </View>
); );
})()} })()}
</View>
</Modal>
apps/mobile/svgcomponentlist/7.tsx
View File