ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

fix: colorpicker (sorta)

Browse source 
this now uses the lazy-loaded colorpicker, but this only works if said
colorpicker has already been loaded. need to force load before anything.
This commit is contained in:
Lewis Crichton 2023-11-25 17:00:10 +00:00
parent cbdaf7daa6
commit c981325fb3
No known key found for this signature in database
2 changed files with 5 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/ThemeSettings/components/SettingColorComponent.tsx
View file

@ -7,61 +7,21 @@
import "./colorStyles.css";
import { classNameFactory } from "@api/Styles";
import { LazyComponent } from "@utils/react";
import { find, findByCodeLazy } from "@webpack";
import { Forms, Popout, useMemo, useState } from "@webpack/common";
import { findByCodeLazy, findComponentByCodeLazy } from "@webpack";
import { Forms, useMemo, useState } from "@webpack/common";
interface ColorPickerProps {
value: number | null;
color: number | null;
showEyeDropper?: boolean;
onChange(value: number | null): void;
onClose?(): void;
}
const ColorPickerModal = LazyComponent<ColorPickerProps>(() => find(m => m?.type?.toString?.().includes(".showEyeDropper")));
const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR");
// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
const cl = classNameFactory("vc-usercss-settings-color-");
// const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
function EditPencil({ className, color }) {
return (
<svg viewBox="0 0 24 24" className={className}>
<path fillRule="evenodd" clipRule="evenodd" d="M19.2929 9.8299L19.9409 9.18278C21.353 7.77064 21.353 5.47197 19.9409 4.05892C18.5287 2.64678 16.2292 2.64678 14.817 4.05892L14.1699 4.70694L19.2929 9.8299ZM12.8962 5.97688L5.18469 13.6906L10.3085 18.813L18.0201 11.0992L12.8962 5.97688ZM4.11851 20.9704L8.75906 19.8112L4.18692 15.239L3.02678 19.8796C2.95028 20.1856 3.04028 20.5105 3.26349 20.7337C3.48669 20.9569 3.8116 21.046 4.11851 20.9704Z" fill={color}></path>
</svg>
);
}
function ColorPicker(props: ColorPickerProps & { width: number; height: number; }) {
const [color, setColor] = useState(props.value);
const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
return (
<Popout
renderPopout={() => (
<ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
)}
>
{popoutProps => (
<div {...popoutProps} className={cl("swatch")} style={{
backgroundColor: correctedColor,
borderColor: correctedColor,
width: props.width,
height: props.height
}}>
<EditPencil
className={cl("swatch-pencil")}
color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
/>
</div>
)}
</Popout>
);
}
interface Props {
label: string;
name: string;
@ -86,10 +46,8 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
<div className={cl("swatch-row")}>
<span>{label}</span>
<ColorPicker
width={80} /* same as a switch */
height={48}
key={name}
value={normalizedValue}
color={normalizedValue}
onChange={handleChange}
/>
</div>

23
src/components/ThemeSettings/components/colorStyles.css
View file

@ -1,22 +1,3 @@
.vc-usercss-settings-color-swatch {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
border: 1px solid;
border-radius: 4px;
cursor: pointer;
}
.vc-usercss-settings-color-swatch-pencil {
position: absolute;
top: 4px;
right: 4px;
width: 14px;
height: 14px;
}
.vc-usercss-settings-color-swatch-row {
display: flex;
flex-direction: row;
@ -36,7 +17,3 @@
font-weight: 500;
word-wrap: break-word;
}
.vc-usercss-settings-color-swatch-row > .vc-usercss-settings-color-swatch {
flex: 0 0 auto;
}