From e349029e53abd7cdf5f03f7ee5c749b1086a3b21 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Tue, 6 Jun 2023 00:39:52 +0200 Subject: [PATCH] [feature] Add hex color input in color picker --- .../edit-version-modal.component.tsx | 2 +- .../setting-color-chooser.component.tsx | 17 ++++--- .../shared/bsm-button.component.tsx | 11 +++-- src/renderer/helpers/correct-text-color.ts | 2 +- src/renderer/hooks/use-theme-color.hook.ts | 44 +++++-------------- 5 files changed, 32 insertions(+), 44 deletions(-) diff --git a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx b/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx index f12048bf..de259e81 100644 --- a/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/edit-version-modal.component.tsx @@ -41,7 +41,7 @@ export const EditVersionModal: ModalComponent<{name: string, color: string}, {ve
{t("modals.clone-version.inputs.color.label")}
- +
diff --git a/src/renderer/components/settings/setting-color-chooser.component.tsx b/src/renderer/components/settings/setting-color-chooser.component.tsx index 3079b0f4..ad506785 100644 --- a/src/renderer/components/settings/setting-color-chooser.component.tsx +++ b/src/renderer/components/settings/setting-color-chooser.component.tsx @@ -1,22 +1,27 @@ import { useRef, useState } from "react"; -import { HexColorPicker } from "react-colorful"; +import { HexColorPicker, HexColorInput } from "react-colorful"; import { motion, AnimatePresence } from "framer-motion" import { useClickOutside } from "renderer/hooks/use-click-outside.hook"; +import { BsmButton } from "../shared/bsm-button.component"; export default function SettingColorChooser({color, onChange, pickerClassName}: {color?: string, onChange?: (color: string) => void, pickerClassName?: string}) { const [colorVisible, setColorVisible] = useState(false); const ref = useRef(null); - useClickOutside(ref, (e) => setColorVisible(false)); + useClickOutside(ref, (e) => setColorVisible(() => false)); return ( -
+
setColorVisible(!colorVisible)} style={{backgroundColor: color}}/> {colorVisible && - -
- + +
+ +
+ + setColorVisible(() => false)}/> +
} diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx index 1598718d..797e7961 100644 --- a/src/renderer/components/shared/bsm-button.component.tsx +++ b/src/renderer/components/shared/bsm-button.component.tsx @@ -32,19 +32,22 @@ type Props = { export function BsmButton({className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName}: Props) { const t = useTranslation(); - const secondColor = useThemeColor("second-color"); + const {firstColor, secondColor} = useThemeColor(); const ref = useRef(null); + useClickOutside(ref, onClickOutside); - const primaryColor = typeColor === "primary" ? useThemeColor("first-color") : typeColor === "secondary" ? secondColor : undefined; + const primaryColor = typeColor === "primary" ? firstColor : typeColor === "secondary" ? secondColor : undefined; const textColor = (() => { - if(primaryColor){ return getCorrectTextColor(primaryColor); } + if(primaryColor){ + console.log(getCorrectTextColor(primaryColor), text); + return getCorrectTextColor(primaryColor); + } return typeColor ? "white" : undefined; })(); const renderTypeColor = (() => { - if(typeColor === "primary"){ return ""; } if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${(!withBar && !disabled) && "hover:brightness-125"}`; } if(typeColor === "cancel"){ return "bg-gray-500"; } if(typeColor === "error"){ return "bg-red-500"; } diff --git a/src/renderer/helpers/correct-text-color.ts b/src/renderer/helpers/correct-text-color.ts index f6aa325e..aeef92ab 100644 --- a/src/renderer/helpers/correct-text-color.ts +++ b/src/renderer/helpers/correct-text-color.ts @@ -8,5 +8,5 @@ import Color from "color"; export function getCorrectTextColor(bgHex: string): string{ if(!bgHex){ return "#000"; } const color = Color(bgHex); - return color.isLight() ? "#000" : "fff"; + return color.isLight() ? "#000" : "#fff"; } \ No newline at end of file diff --git a/src/renderer/hooks/use-theme-color.hook.ts b/src/renderer/hooks/use-theme-color.hook.ts index 1375d7bc..0fba5a03 100644 --- a/src/renderer/hooks/use-theme-color.hook.ts +++ b/src/renderer/hooks/use-theme-color.hook.ts @@ -1,44 +1,24 @@ -import { useEffect, useState } from "react"; import { DefaultConfigKey } from "renderer/config/default-configuration.config"; import { ConfigurationService } from "renderer/services/configuration.service"; +import { useObservable } from "./use-observable.hook"; +import { useService } from "./use-service.hook"; +import { of, throttleTime } from "rxjs"; export function useThemeColor(): {firstColor: string, secondColor: string}; export function useThemeColor(themeColor: ThemeColor): string; export function useThemeColor(themeColor?: ThemeColor): string|{firstColor: string, secondColor: string}{ - const configService = ConfigurationService.getInstance(); - - if(themeColor){ - const [color, setColor] = useState(""); - - useEffect(() => { - const sub = configService.watch(themeColor).subscribe(color => { - setColor(color); - }) - return () => { - sub.unsubscribe(); - } - }, []); - - return color; - } - const [firstColor, setFirstColor] = useState(""); - const [secondColor, setSecondColor] = useState(""); + const configService = useService(ConfigurationService); - useEffect(() => { - const sub1 = configService.watch("first-color" as DefaultConfigKey).subscribe(color => { - setFirstColor(color); - }); - const sub2 = configService.watch("second-color" as DefaultConfigKey).subscribe(color => { - setSecondColor(color); - }); - return () => { - sub1.unsubscribe(); - sub2.unsubscribe(); - } - }, []); + + const firstColor = useObservable(!themeColor ? configService.watch("first-color" as DefaultConfigKey).pipe(throttleTime(16)) : configService.watch(themeColor).pipe(throttleTime(16))); + const secondColor = useObservable(!themeColor ? configService.watch("second-color" as DefaultConfigKey).pipe(throttleTime(16)) : of("")); - return {firstColor, secondColor} + if(themeColor){ + return firstColor; + } + + return {firstColor, secondColor} }