From 2cc250f2f2bb35b1e12806cf0149565630a83fa2 Mon Sep 17 00:00:00 2001 From: fuwaa Date: Wed, 3 Aug 2022 08:13:30 +0800 Subject: [PATCH] feat: all settings improvement --- src/components/global/CardTitle.tsx | 4 +- src/components/options/ChangeCard.tsx | 22 +- src/components/options/Header.tsx | 42 +- src/components/options/QuickChange.tsx | 34 -- src/components/options/Sidebar.tsx | 547 +++++++++++++++++++++++++ src/components/popup/Header.tsx | 12 +- src/components/popup/QuickChange.tsx | 1 - src/views/Options.tsx | 54 +-- 8 files changed, 604 insertions(+), 112 deletions(-) delete mode 100644 src/components/options/QuickChange.tsx create mode 100644 src/components/options/Sidebar.tsx diff --git a/src/components/global/CardTitle.tsx b/src/components/global/CardTitle.tsx index 09bbe92..2228bf4 100644 --- a/src/components/global/CardTitle.tsx +++ b/src/components/global/CardTitle.tsx @@ -1,5 +1,5 @@ import "../../assets/styles/App.css"; - +import chroma from "chroma-js"; interface Props { name: string; color?: string; @@ -12,7 +12,7 @@ export default function CardTitle(props: Props) { return (

{name} {color} diff --git a/src/components/options/ChangeCard.tsx b/src/components/options/ChangeCard.tsx index 20e5fe8..39a4dc3 100644 --- a/src/components/options/ChangeCard.tsx +++ b/src/components/options/ChangeCard.tsx @@ -11,12 +11,7 @@ var defaultValue = "#c0ffee"; interface Props { settingName: string; - colorPickerColor: { - r: number; - g: number; - b: number; - a: number; - }; + colorPickerColor: string; } export default function ChangeCard(props: Props) { @@ -34,9 +29,8 @@ export default function ChangeCard(props: Props) { const [current, setCurrent] = react.useState(`${defaultValue}`); function updateColor() { - var stringifiedColor = `rgba(${colorPickerColor.r},${colorPickerColor.g},${colorPickerColor.b},${colorPickerColor.a})`; - setCurrent(stringifiedColor); - pintSetNoReload(settingName, stringifiedColor); + setCurrent(colorPickerColor); + pintSetNoReload(settingName, colorPickerColor); } function updateColorExplicitly(value: string) { @@ -46,22 +40,22 @@ export default function ChangeCard(props: Props) { return (

-
+
- +
updateColorExplicitly(e.target.value)} />
+ +
); } diff --git a/src/components/options/QuickChange.tsx b/src/components/options/QuickChange.tsx deleted file mode 100644 index 740c824..0000000 --- a/src/components/options/QuickChange.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import react from "react"; -import "../../assets/styles/App.css"; -import { HexColorInput, HexColorPicker } from "react-colorful"; -import CardTitle from "../global/CardTitle"; - -var defaultValue = "#c0ffee"; - -export default function QuickChange() { - react.useLayoutEffect(() => {}); - - const [color, setColor] = react.useState(`${defaultValue}`); - - return ( -
-
-
- - -
-
- -
-
-
- ); -} diff --git a/src/components/options/Sidebar.tsx b/src/components/options/Sidebar.tsx new file mode 100644 index 0000000..2e95dec --- /dev/null +++ b/src/components/options/Sidebar.tsx @@ -0,0 +1,547 @@ +import react from "react"; +import "../../assets/styles/App.css"; +import "../../assets/styles/RC.css"; +import { HexColorPicker, HexColorInput } from "react-colorful"; +import updateScale, { updateSpecific } from "../../methods/helpers/scaleHelper"; +import * as scaleHelper from "../../methods/helpers/scaleHelper"; +import { + pintGetUpdate, + pintSetNoReload, + updateMultiple, +} from "../../methods/helpers/storageHelper"; +import { + BsFillBrushFill, + BsFillCalendar3WeekFill, + BsFillPaletteFill, + BsMenuButtonWideFill, +} from "react-icons/bs"; +import { + AiFillCheckCircle, + AiFillCiCircle, + AiFillClockCircle, + AiFillCloseCircle, + AiFillHeart, +} from "react-icons/ai"; +import { MdFormatColorText, MdTextSnippet } from "react-icons/md"; +import * as settings from "../../methods/config/colorGroups.js"; +import * as scales from "../../methods/helpers/scaleHelper.js"; +import chroma from "chroma-js"; +import { FcIdea } from "react-icons/fc"; + +var defaultValue = "#c0ffee"; + +var defaultScheme = "analogic"; +var defaultVariation = "default"; + +var quickScheme: string[] = []; + +interface Props { + color: string; + setColor: (type: string) => void; +} + +export default function Sidebar(props: Props) { + var { color, setColor } = props; + + react.useLayoutEffect(() => { + pintGetUpdate(settings.cg46_6e7681[0], setScaleGray); + pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow); + pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue); + pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen); + pintGetUpdate(settings.cg89_f85149[0], setScaleRed); + pintGetUpdate(settings.cg77_db61a2[0], setScalePink); + pintGetUpdate(settings.cg60_a371f7[0], setScalePurple); + pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar); + pintGetUpdate(settings.cg106_ffffff[0], setScaleText); + pintGetUpdate("variation", setVariation); + pintGetUpdate("scheme", setScheme); + pintGetUpdate("hiddenQS", setHiddenQS); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + }); + + // scale colors + const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`); + + const [scheme, setScheme] = react.useState(`${defaultScheme}`); + const [variation, setVariation] = react.useState(`${defaultVariation}`); + const [hiddenQS, setHiddenQS] = react.useState("true"); + + function paintGray() { + updateSpecific(color, 0, 0, scales.gray); + setScaleGray(color); + } + + const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`); + + function paintYellow() { + updateSpecific(color, 0, 0, scales.yellow); + setScaleGray(color); + } + + const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`); + + function paintBlue() { + updateSpecific(color, 0, 0, scales.blue); + setScaleGray(color); + } + + const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`); + + function paintGreen() { + updateSpecific(color, 0, 0, scales.green); + setScaleGray(color); + } + + const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`); + + function paintRed() { + updateSpecific(color, 0, 0, scales.red); + setScaleGray(color); + } + + const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`); + + function paintPurple() { + updateSpecific(color, 0, 0, scales.purple); + setScaleGray(color); + } + + const [scalePink, setScalePink] = react.useState(`${defaultValue}`); + + function paintPink() { + updateSpecific(color, 0, 0, scales.pink); + setScaleGray(color); + } + + const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`); + + function paintCalendar() { + updateSpecific(color, 0, 0, scales.calendar); + setScaleGray(color); + } + + const [scaleText, setScaleText] = react.useState(`${defaultValue}`); + + function paintText() { + updateMultiple(settings.cg106_ffffff, chroma(color).hex()); + setScaleGray(color); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setDefault() { + pintSetNoReload("variation", "default"); + setVariation("default"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setPastel() { + pintSetNoReload("variation", "pastel"); + setVariation("pastel"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setSoft() { + pintSetNoReload("variation", "soft"); + setVariation("soft"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setLight() { + pintSetNoReload("variation", "light"); + setVariation("light"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setHard() { + pintSetNoReload("variation", "hard"); + setVariation("hard"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setPale() { + pintSetNoReload("variation", "pale"); + setVariation("pale"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setTriade() { + pintSetNoReload("scheme", "triade"); + setScheme("triade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setTetrade() { + pintSetNoReload("scheme", "tetrade"); + setScheme("tetrade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function setAnalogic() { + pintSetNoReload("scheme", "analogic"); + setScheme("analogic"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function paintAll() { + updateScale(color); + pintGetUpdate(settings.cg46_6e7681[0], setScaleGray); + pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow); + pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue); + pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen); + pintGetUpdate(settings.cg89_f85149[0], setScaleRed); + pintGetUpdate(settings.cg77_db61a2[0], setScalePink); + pintGetUpdate(settings.cg60_a371f7[0], setScalePurple); + pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar); + pintGetUpdate(settings.cg106_ffffff[0], setScaleText); + } + + function updateColor(color: string) { + setColor(color); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } + + function hideQS() { + if (hiddenQS === "true") { + pintSetNoReload("hiddenQS", "false"); + setHiddenQS("false"); + } else { + pintSetNoReload("hiddenQS", "true"); + setHiddenQS("true"); + } + } + + return ( + + ); +} diff --git a/src/components/popup/Header.tsx b/src/components/popup/Header.tsx index e8cf4e7..60e34ea 100644 --- a/src/components/popup/Header.tsx +++ b/src/components/popup/Header.tsx @@ -3,14 +3,8 @@ import "../../assets/styles/App.css"; import { IoMdSettings } from "react-icons/io"; import { AiFillGithub, - AiFillCloseCircle, - AiFillClockCircle, - AiFillCheckCircle, - AiFillCiCircle, - AiFillHeart, } from "react-icons/ai"; -import { BsFillCalendar3WeekFill, BsMenuButtonWideFill } from "react-icons/bs"; -import { MdTextSnippet, MdFormatColorText } from "react-icons/md"; + export default function Header() { function openOptions() { chrome.runtime.openOptionsPage(); @@ -37,14 +31,14 @@ export default function Header() {