feat(mobile): replace blocking modal with inline live inspector for instantaneous visual editing feedback
This commit is contained in:
AyrisAI
+298
-390
@@ -410,44 +410,78 @@ export default function QrScreen() {
|
||||
</ViewShot>
|
||||
</View>
|
||||
|
||||
{/* Hızlı Katman Seçici (Tıklayınca Modal Açar) */}
|
||||
<View style={{ width: "100%", marginBottom: 16 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700", marginBottom: 8, letterSpacing: 0.5 }}>
|
||||
DÜZENLEMEK VE KONUMUNU DEĞİŞTİRMEK İÇİN TIKLAYIN:
|
||||
</Text>
|
||||
{/* Hızlı Katman Seçici (Canlı Seçim) */}
|
||||
<View style={{ width: "100%", marginBottom: 12 }}>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "800", letterSpacing: 0.5 }}>
|
||||
CANLI DÜZENLENECEK ALANI SEÇİN:
|
||||
</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 }}>
|
||||
{FIELD_DEFINITIONS.map(({ key, label, icon }) => {
|
||||
const item = fields[key];
|
||||
const isSelected = selectedEditField === key;
|
||||
return (
|
||||
<Pressable
|
||||
key={key}
|
||||
onPress={() => setSelectedEditField(key)}
|
||||
onPress={() => setSelectedEditField(isSelected ? null : key)}
|
||||
style={({ pressed }) => ({
|
||||
backgroundColor: item.visible ? "#242429" : "#1A1A1E",
|
||||
backgroundColor: isSelected ? "#D4AF37" : item.visible ? "#242429" : "#1A1A1E",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 9,
|
||||
borderRadius: 12,
|
||||
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",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
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
|
||||
style={{
|
||||
color: item.visible ? "#FFFFFF" : "#71717A",
|
||||
color: isSelected ? "#0C0C0E" : item.visible ? "#FFFFFF" : "#71717A",
|
||||
fontSize: 12,
|
||||
fontWeight: "700",
|
||||
fontWeight: isSelected ? "800" : "700",
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{item.offsetY ? (
|
||||
<View style={{ backgroundColor: "#D4AF37", borderRadius: 6, paddingHorizontal: 4, paddingVertical: 1 }}>
|
||||
<Text style={{ color: "#0C0C0E", fontSize: 9, fontWeight: "800" }}>
|
||||
<View
|
||||
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
|
||||
</Text>
|
||||
</View>
|
||||
@@ -458,421 +492,295 @@ export default function QrScreen() {
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Metin & Font & Boyut Özelleştirme Kartı (Açılır/Kapanır Liste) */}
|
||||
<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>
|
||||
{/* CANLI DÜZENLEYİCİ KARTI (Sayfa İçinde Anında Görsel Geri Bildirim) */}
|
||||
{selectedEditField && (() => {
|
||||
const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!;
|
||||
const item = fields[selectedEditField];
|
||||
|
||||
{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",
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
backgroundColor: "#18181B",
|
||||
borderRadius: 20,
|
||||
borderWidth: 1.5,
|
||||
borderColor: "#D4AF37",
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
gap: 14,
|
||||
shadowColor: "#D4AF37",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 10,
|
||||
elevation: 4,
|
||||
}}
|
||||
>
|
||||
{/* Başlık & Görünürlük */}
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#D4AF37",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
opacity: pressed ? 0.8 : 1,
|
||||
})}
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<Ionicons name={def.icon as any} size={16} color="#0C0C0E" />
|
||||
</View>
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "800" }}>
|
||||
{def.label}
|
||||
</Text>
|
||||
</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 && (() => {
|
||||
const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!;
|
||||
const item = fields[selectedEditField];
|
||||
{/* Stantta Göster / Gizle */}
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
||||
<Text style={{ color: item.visible ? "#10B981" : "#71717A", fontSize: 11, fontWeight: "700" }}>
|
||||
{item.visible ? "Görünür" : "Gizli"}
|
||||
</Text>
|
||||
<Switch
|
||||
value={item.visible}
|
||||
onValueChange={(v) =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: { ...prev[selectedEditField], visible: v },
|
||||
}))
|
||||
}
|
||||
trackColor={{ false: "#27272A", true: "#D4AF37" }}
|
||||
thumbColor="#FFFFFF"
|
||||
ios_backgroundColor="#27272A"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#18181B",
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
padding: 20,
|
||||
maxHeight: "85%",
|
||||
gap: 16,
|
||||
borderTopWidth: 1,
|
||||
borderColor: "rgba(212, 175, 55, 0.3)",
|
||||
}}
|
||||
>
|
||||
{/* Modal Başlığı & Kapat Butonu */}
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
||||
<Ionicons name={def.icon as any} size={20} color="#D4AF37" />
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 17, fontWeight: "800" }}>
|
||||
{def.label}
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={() => setSelectedEditField(null)}
|
||||
{item.visible && (
|
||||
<>
|
||||
{/* Metin Girişi (Enter ile alt satır destekli) */}
|
||||
<View style={{ gap: 4 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
|
||||
METİN İÇERİĞİ (ENTER İLE YENİ SATIRA GEÇEBİLİR):
|
||||
</Text>
|
||||
<TextInput
|
||||
value={item.text}
|
||||
onChangeText={(t) =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: { ...prev[selectedEditField], text: t },
|
||||
}))
|
||||
}
|
||||
placeholder={def.placeholder}
|
||||
placeholderTextColor="#71717A"
|
||||
multiline
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#242429",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#121215",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
color: "#FFFFFF",
|
||||
fontSize: 14,
|
||||
minHeight: 46,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="close" size={18} color="#FFFFFF" />
|
||||
</Pressable>
|
||||
/>
|
||||
</View>
|
||||
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ gap: 16, paddingBottom: 20 }}>
|
||||
{/* Görünürlük Anahtarı */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#121215",
|
||||
padding: 12,
|
||||
borderRadius: 14,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 13, fontWeight: "700" }}>
|
||||
Stantta Göster
|
||||
{/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */}
|
||||
<View style={{ gap: 6, backgroundColor: "#121215", padding: 12, borderRadius: 12 }}>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
|
||||
DİKEY KONUM (YUKARI / AŞAĞI TAŞIMA)
|
||||
</Text>
|
||||
<Text style={{ color: "#E5C378", fontSize: 11, fontWeight: "800" }}>
|
||||
{item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"}
|
||||
</Text>
|
||||
<Switch
|
||||
value={item.visible}
|
||||
onValueChange={(v) =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: { ...prev[selectedEditField], visible: v },
|
||||
}))
|
||||
}
|
||||
trackColor={{ false: "#27272A", true: "#D4AF37" }}
|
||||
thumbColor="#FFFFFF"
|
||||
ios_backgroundColor="#27272A"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Metin Girişi (Multiline / Enter Destekli) */}
|
||||
<View style={{ gap: 6 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
|
||||
METİN İÇERİĞİ (ENTER İLE YENİ SATIR)
|
||||
</Text>
|
||||
<TextInput
|
||||
value={item.text}
|
||||
onChangeText={(t) =>
|
||||
<View style={{ flexDirection: "row", gap: 8 }}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: { ...prev[selectedEditField], text: t },
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: (prev[selectedEditField].offsetY || 0) - 3,
|
||||
},
|
||||
}))
|
||||
}
|
||||
placeholder={def.placeholder}
|
||||
placeholderTextColor="#71717A"
|
||||
multiline
|
||||
style={{
|
||||
backgroundColor: "#121215",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
color: "#FFFFFF",
|
||||
fontSize: 14,
|
||||
minHeight: 60,
|
||||
flex: 1,
|
||||
backgroundColor: "#242429",
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Ionicons name="arrow-up" size={14} color="#D4AF37" />
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Yukarı (-3px)</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: (prev[selectedEditField].offsetY || 0) + 3,
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#242429",
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="arrow-down" size={14} color="#D4AF37" />
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Aşağı (+3px)</Text>
|
||||
</Pressable>
|
||||
|
||||
{item.offsetY ? (
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: 0,
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#3A2A2A",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "#EF4444", fontSize: 11, fontWeight: "700" }}>Sıfırla</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */}
|
||||
<View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
|
||||
DİKEY KONUM (YUKARI / AŞAĞI)
|
||||
</Text>
|
||||
<Text style={{ color: "#E5C378", fontSize: 12, fontWeight: "800" }}>
|
||||
{item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: "row", gap: 8 }}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: (prev[selectedEditField].offsetY || 0) - 3,
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#242429",
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="arrow-up" size={14} color="#D4AF37" />
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Yukarı (-3px)</Text>
|
||||
</Pressable>
|
||||
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: (prev[selectedEditField].offsetY || 0) + 3,
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#242429",
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="arrow-down" size={14} color="#D4AF37" />
|
||||
<Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Aşağı (+3px)</Text>
|
||||
</Pressable>
|
||||
|
||||
{item.offsetY ? (
|
||||
{/* YAZI TİPİ (FONT) & BOYUT YAN YANA */}
|
||||
<View style={{ gap: 6 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
|
||||
YAZI TİPİ (TÜRKÇE DESTEKLİ FONT)
|
||||
</Text>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6 }}>
|
||||
{FONT_OPTIONS.map((f) => {
|
||||
const isSelected = item.fontId === f.id;
|
||||
return (
|
||||
<Pressable
|
||||
key={f.id}
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
offsetY: 0,
|
||||
},
|
||||
[selectedEditField]: { ...prev[selectedEditField], fontId: f.id },
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#3A2A2A",
|
||||
backgroundColor: isSelected ? "#D4AF37" : "#242429",
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
paddingVertical: 7,
|
||||
borderRadius: 10,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderWidth: 1.5,
|
||||
borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)",
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "#EF4444", fontSize: 11, fontWeight: "700" }}>Sıfırla</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* YAZI TİPİ (FONT) SEÇİMİ */}
|
||||
<View style={{ gap: 8 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
|
||||
YAZI TİPİ (TÜRKÇE DESTEKLİ FONT)
|
||||
</Text>
|
||||
<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
|
||||
{FONT_OPTIONS.map((f) => {
|
||||
const isSelected = item.fontId === f.id;
|
||||
return (
|
||||
<Pressable
|
||||
key={f.id}
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: { ...prev[selectedEditField], fontId: f.id },
|
||||
}))
|
||||
}
|
||||
<Text
|
||||
style={{
|
||||
backgroundColor: isSelected ? "#D4AF37" : "#242429",
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1.5,
|
||||
borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)",
|
||||
color: isSelected ? "#0C0C0E" : "#FFFFFF",
|
||||
fontSize: 11.5,
|
||||
fontWeight: isSelected ? "800" : "600",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: isSelected ? "#0C0C0E" : "#FFFFFF",
|
||||
fontSize: 12,
|
||||
fontWeight: isSelected ? "800" : "500",
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
{f.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* YAZI BOYUTU (FONT SIZE) */}
|
||||
<View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
|
||||
YAZI BOYUTU
|
||||
{/* YAZI BOYUTU (FONT SIZE) */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
backgroundColor: "#121215",
|
||||
padding: 10,
|
||||
borderRadius: 12,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
|
||||
YAZI BOYUTU:
|
||||
</Text>
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
fontSize: Math.max(def.min, (prev[selectedEditField].fontSize || 12) - 1),
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#242429",
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="remove" size={16} color="#FFFFFF" />
|
||||
</Pressable>
|
||||
|
||||
<Text style={{ color: "#D4AF37", fontSize: 16, fontWeight: "800", minWidth: 40, textAlign: "center" }}>
|
||||
{item.fontSize || 12} px
|
||||
</Text>
|
||||
<View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
fontSize: Math.max(def.min, (prev[selectedEditField].fontSize || 12) - 1),
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#242429",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="remove" size={18} color="#FFFFFF" />
|
||||
</Pressable>
|
||||
|
||||
<Text style={{ color: "#D4AF37", fontSize: 18, fontWeight: "800" }}>
|
||||
{item.fontSize || 12} px
|
||||
</Text>
|
||||
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
fontSize: Math.min(def.max, (prev[selectedEditField].fontSize || 12) + 1),
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#242429",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="add" size={18} color="#FFFFFF" />
|
||||
</Pressable>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setFields((prev) => ({
|
||||
...prev,
|
||||
[selectedEditField]: {
|
||||
...prev[selectedEditField],
|
||||
fontSize: Math.min(def.max, (prev[selectedEditField].fontSize || 12) + 1),
|
||||
},
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
backgroundColor: "#242429",
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="add" size={16} color="#FFFFFF" />
|
||||
</Pressable>
|
||||
</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>
|
||||
</Modal>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user