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

Applied Extra Changes/Fixes to the UI

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 11:08:58 +02:00
parent cb2c5c6aba
commit 115c3773ef
3 changed files with 331 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/melodies/MelodyForm.jsx
View File

@@ -432,12 +432,6 @@ export default function MelodyForm() {
: "transparent",
}}
/>
<input
type="color"
value={information.color ? normalizeColor(information.color) : "#000000"}
onChange={(e) => updateInfo("color", e.target.value)}
className="w-8 h-8 cursor-pointer border border-gray-300 rounded flex-shrink-0"
/>
<input
type="text"
value={information.color}
@@ -446,24 +440,37 @@ export default function MelodyForm() {
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
/>
</div>
{quickColors.length > 0 && (
<div className="flex flex-wrap gap-2">
{quickColors.map((color) => (
<button
key={color}
type="button"
onClick={() => updateInfo("color", color)}
className={`w-6 h-6 rounded border-2 transition-all ${
information.color === color
? "border-blue-500 ring-2 ring-blue-200"
: "border-gray-200 hover:border-gray-400"
}`}
style={{ backgroundColor: normalizeColor(color) }}
title={color}
/>
))}
</div>
)}
<div className="flex flex-wrap gap-2 items-center">
{quickColors.map((color) => (
<button
key={color}
type="button"
onClick={() => updateInfo("color", color)}
className={`w-7 h-7 rounded-md border-2 transition-all cursor-pointer ${
information.color === color
? "border-blue-500 ring-2 ring-blue-200"
: "border-gray-200 hover:border-gray-400"
}`}
style={{ backgroundColor: normalizeColor(color) }}
title={color}
/>
))}
<label
className="relative inline-flex items-center gap-1.5 px-3 py-1.5 border-2 border-dashed border-gray-300 rounded-md text-xs text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer"
title="Pick a custom color"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
Custom
<input
type="color"
value={information.color ? normalizeColor(information.color) : "#000000"}
onChange={(e) => updateInfo("color", e.target.value)}
className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
/>
</label>
</div>
</div>
<div className="flex items-center gap-2 pt-2">
@@ -482,19 +489,6 @@ export default function MelodyForm() {
</label>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
Notes (comma-separated integers)
</label>
<input
type="text"
value={information.notes.join(", ")}
onChange={(e) => updateInfo("notes", parseIntList(e.target.value))}
placeholder="e.g. 1, 2, 3, 4"
className={inputClass}
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
Custom Tags
@@ -725,8 +719,8 @@ export default function MelodyForm() {
{ length: information.totalNotes },
(_, i) => (
<div key={i}>
<label className="block text-xs text-gray-400 mb-0.5 text-center">
N{i + 1}
<label className="block text-xs text-gray-400 mb-0.5 text-left">
Note #{i + 1}
</label>
<input
type="number"