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 */}
<input
type="color"
value={styling.color}
onChange={(e) => {
const color = e.target.value;
handleStylingChange({ ...styling, color });
}}
className="w-10 h-10 border rounded-md cursor-pointer"
/>
<div className="relative inline-block">
<input
type="color"
value={styling.color}
onChange={(e) => {
const color = e.target.value;
handleStylingChange({ ...styling, color });
}}
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>
</Menu.Section>

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

@ -168,19 +168,25 @@ export function CaptionsPart(props: {
/>
))}
{/* Add Color Picker */}
<input
type="color"
value={props.styling.color}
onChange={(e) => {
const color = e.target.value;
handleStylingChange({ ...props.styling, color });
subtitleStore.updateStyling({
...props.styling,
color,
});
}}
className="w-10 h-10 border rounded-md cursor-pointer"
/>
<div className="relative">
<input
type="color"
value={props.styling.color}
onChange={(e) => {
const color = e.target.value;
handleStylingChange({ ...props.styling, color });
subtitleStore.updateStyling({
...props.styling,
color,
});
}}
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>