thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: custom theming color picker position (#1846)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-11 19:17:59 +05:30 committed by GitHub
parent c6eea9c7a9
commit 079a5b28d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/app/components/core/theme/color-picker-input.tsx
View File

@ -21,13 +21,21 @@ import { ICustomTheme } from "types";
type Props = {
name: keyof ICustomTheme;
position?: "left" | "right";
watch: UseFormWatch<any>;
setValue: UseFormSetValue<any>;
error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
register: UseFormRegister<any>;
};
export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error, register }) => {
export const ColorPickerInput: React.FC<Props> = ({
name,
position = "left",
watch,
setValue,
error,
register,
}) => {
const handleColorChange = (newColor: ColorResult) => {
const { hex } = newColor;
setValue(name, hex);
@ -104,7 +112,11 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute bottom-8 right-0 z-20 mt-1 max-w-xs px-2 sm:px-0">
<Popover.Panel
className={`absolute bottom-8 z-20 mt-1 max-w-xs px-2 sm:px-0 ${
position === "right" ? "left-0" : "right-0"
}`}
>
<SketchPicker color={watch(name)} onChange={handleColorChange} />
</Popover.Panel>
</Transition>

2
apps/app/components/core/theme/custom-theme-selector.tsx
View File

@ -83,6 +83,7 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
</h3>
<ColorPickerInput
name="background"
position="right"
error={errors.background}
watch={watch}
setValue={setValue}
@ -120,6 +121,7 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
</h3>
<ColorPickerInput
name="sidebarBackground"
position="right"
error={errors.sidebarBackground}
watch={watch}
setValue={setValue}