bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes to Add Melody Page, minor UI Tweaks

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 18:11:04 +02:00
parent dff1ec921d
commit bec0e606e6
21 changed files with 863 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/melodies/TranslationModal.jsx
View File

@@ -1,17 +1,6 @@
import { useState, useEffect } from "react";
import { getLanguageName } from "./melodyUtils";
/**
* Modal for editing translations of a field (Name or Description).
* Props:
* open - boolean
* onClose - function
* field - string label ("Name" or "Description")
* value - dict { lang_code: text }
* onChange - function(updatedDict)
* languages - array of lang codes ["en", "el", "sr"]
* multiline - boolean (use textarea instead of input)
*/
export default function TranslationModal({
open,
onClose,
@@ -42,18 +31,24 @@ export default function TranslationModal({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto">
<div className="fixed inset-0 bg-black/60" onClick={onClose} />
<div
className="relative rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto border"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
<div className="p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
<h3 className="text-lg font-semibold mb-4" style={{ color: "var(--text-heading)" }}>
Translations — {field}
</h3>
<div className="space-y-3">
{languages.map((lang) => (
<div key={lang}>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
{getLanguageName(lang)}{" "}
<span className="text-gray-400 font-mono text-xs uppercase">
<span className="font-mono text-xs uppercase" style={{ color: "var(--text-muted)" }}>
({lang})
</span>
</label>
@@ -62,14 +57,14 @@ export default function TranslationModal({
value={draft[lang] || ""}
onChange={(e) => updateDraft(lang, e.target.value)}
rows={2}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
className="w-full px-3 py-2 rounded-md text-sm border"
/>
) : (
<input
type="text"
value={draft[lang] || ""}
onChange={(e) => updateDraft(lang, e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
className="w-full px-3 py-2 rounded-md text-sm border"
/>
)}
</div>
@@ -79,14 +74,16 @@ export default function TranslationModal({
<button
type="button"
onClick={onClose}
className="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)" }}
>
Cancel
</button>
<button
type="button"
onClick={handleSave}
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
>
Save Translations
</button>