From d13cd50671c62de8418707b5e8e7863a4c8ab3ac Mon Sep 17 00:00:00 2001 From: fuwaa Date: Mon, 1 Aug 2022 13:47:46 +0800 Subject: [PATCH] chore: implement options handling --- public/Initial.js | 1 + public/background.js | 1 + src/App.tsx | 2 +- src/assets/styles/index.css | 2 +- src/components/popup/QuickChange.tsx | 267 +++++++++++++++++++-------- src/methods/helpers/scaleHelper.js | 17 +- 6 files changed, 205 insertions(+), 85 deletions(-) diff --git a/public/Initial.js b/public/Initial.js index a6b068b..ea09f01 100644 --- a/public/Initial.js +++ b/public/Initial.js @@ -456,6 +456,7 @@ defaultColorScheme = { __color_text_disabled: "#6e7681", scheme: "analogic", variation: "default", + hiddenQS: "true", }; colorSettings = Object.keys(defaultColorScheme); diff --git a/public/background.js b/public/background.js index e8e59e4..95366d1 100644 --- a/public/background.js +++ b/public/background.js @@ -456,6 +456,7 @@ defaultColorScheme = { __color_text_disabled: "#6e7681", scheme: "analogic", variation: "default", + hiddenQS: "true", }; initialSettings = Object.keys(defaultColorScheme); diff --git a/src/App.tsx b/src/App.tsx index 5397bda..8622741 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import Popup from "./views/Popup"; import Options from "./views/Options"; export default function App() { - const [isOptionsUi, setOptionsUI] = useState(window.innerWidth > 375); + const [isOptionsUi, setOptionsUI] = useState(window.innerWidth > 475); const updateMedia = () => { setOptionsUI(window.innerWidth > 475); diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 6e2d48d..7a75630 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -4,7 +4,7 @@ html, body { - /* width: 375px; */ + width: 428px; margin: 0; background-color: #010409; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx index 677f6c1..35893ec 100644 --- a/src/components/popup/QuickChange.tsx +++ b/src/components/popup/QuickChange.tsx @@ -49,6 +49,7 @@ export default function QuickChange() { pintGetUpdate(settings.cg106_ffffff[0], setScaleText); pintGetUpdate("variation", setVariation); pintGetUpdate("scheme", setScheme); + pintGetUpdate("hiddenQS", setHiddenQS); quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); }); @@ -59,6 +60,7 @@ export default function QuickChange() { 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); @@ -119,54 +121,62 @@ export default function QuickChange() { 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"); - } + 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"); - } + 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"); - setVariation("triade"); - } + setScheme("triade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setTetrade() { pintSetNoReload("scheme", "tetrade"); - setVariation("tetrade"); - } + setScheme("tetrade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setAnalogic() { pintSetNoReload("scheme", "analogic"); - setVariation("analogic"); - } - - + setScheme("analogic"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function paintAll() { updateScale(color); @@ -186,66 +196,19 @@ export default function QuickChange() { 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 (
-
-
-
- -

- Need ideas? These colors compliment your current pick! -

-
-
-

- Scheme Variations -

-
-
- - - -
-
-

- Color Variations -

-
-
- - - - - - -
-
-

- Generated Colors -

-
-
- {quickScheme.map((qsColor) => { - return ( - - ); - })} -
-
-
-
+
@@ -279,7 +242,7 @@ export default function QuickChange() {
-
+

Click a button to set a color

@@ -427,6 +390,154 @@ export default function QuickChange() {
*/}
+
+
+ +
+
+

Scheme Variations

+
+
+ + + +
+
+

Color Variations

+
+
+ + + + + + +
+
+

Generated Colors

+
+
+ {quickScheme.map((qsColor) => { + return ( + + ); + })} +
+
+
+
); } diff --git a/src/methods/helpers/scaleHelper.js b/src/methods/helpers/scaleHelper.js index 21df753..b41c36f 100644 --- a/src/methods/helpers/scaleHelper.js +++ b/src/methods/helpers/scaleHelper.js @@ -225,11 +225,18 @@ export function updateAccent(color) { export function generateScheme(color, scheme, variation, distance) { let s = new ColorScheme(); - s.from_hex(chroma(color).hex().slice(-6)) - .scheme(scheme) - .variation(variation) - .add_complement(true) - .distance(distance); + if (scheme === "analogic") { + s.from_hex(chroma(color).hex().slice(-6)) + .scheme(scheme) + .variation(variation) + .add_complement(true) + .distance(distance); + } else { + s.from_hex(chroma(color).hex().slice(-6)) + .scheme(scheme) + .variation(variation) + .distance(distance); + } return s.colors(); }