mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

prettier color picker

Browse source
This commit is contained in:
Ivan Evans 2024-09-09 23:41:23 -06:00
parent 07daebdf86
commit 61238a7081
2 changed files with 34 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -328,15 +328,21 @@ export function CaptionSettingsView({
/> />
))} ))}
{/* Add Color Picker */} {/* Add Color Picker */}
<input <div className="relative inline-block">
type="color" <input
value={styling.color} type="color"
onChange={(e) => { value={styling.color}
const color = e.target.value; onChange={(e) => {
handleStylingChange({ ...styling, color }); const color = e.target.value;
}} handleStylingChange({ ...styling, color });
className="w-10 h-10 border rounded-md cursor-pointer" }}
/> className="absolute opacity-0 cursor-pointer w-10 h-10"
/>
<div
className="w-10 h-10 border-2 border-gray-300 rounded-full"
style={{ backgroundColor: styling.color }}
/>
</div>
</div> </div>
</div> </div>
</Menu.Section> </Menu.Section>

32
src/pages/parts/settings/CaptionsPart.tsx
View file

@ -168,19 +168,25 @@ export function CaptionsPart(props: {
/> />
))} ))}
{/* Add Color Picker */} {/* Add Color Picker */}
<input <div className="relative">
type="color" <input
value={props.styling.color} type="color"
onChange={(e) => { value={props.styling.color}
const color = e.target.value; onChange={(e) => {
handleStylingChange({ ...props.styling, color }); const color = e.target.value;
subtitleStore.updateStyling({ handleStylingChange({ ...props.styling, color });
...props.styling, subtitleStore.updateStyling({
color, ...props.styling,
}); color,
}} });
className="w-10 h-10 border rounded-md cursor-pointer" }}
/> className="absolute opacity-0 cursor-pointer w-8 h-8"
/>
<div
className="w-8 h-8 border-2 border-gray-300 rounded-full"
style={{ backgroundColor: props.styling.color }}
/>
</div>
</div> </div>
</div> </div>
</div> </div>