From 3a6f04ee0f313a21bcdb4f8b806c61b607adabb6 Mon Sep 17 00:00:00 2001 From: fuwaa Date: Tue, 12 Jul 2022 12:00:00 +0800 Subject: [PATCH] implementation: options ui fix --- public/Initial.js | 8 +++--- src/components/options/ChangeCard.tsx | 5 ++-- src/components/options/Converter.tsx | 37 --------------------------- src/methods/schemeGen.js | 21 +++++++++++++++ src/views/Options.tsx | 30 ++++++++++++++++++---- 5 files changed, 54 insertions(+), 47 deletions(-) delete mode 100644 src/components/options/Converter.tsx diff --git a/public/Initial.js b/public/Initial.js index d5cacd3..3ec6041 100644 --- a/public/Initial.js +++ b/public/Initial.js @@ -1,6 +1,6 @@ -const key = "pintScheme"; +key = "pintScheme"; userScheme = {}; -const defaultColorScheme = { +defaultColorScheme = { "__color_canvas_default_transparent" : "rgba(13, 17, 23, 0)", "__color_page_header_bg" : "#0d1117", "__color_marketing_icon_primary" : "#79c0ff", @@ -442,6 +442,7 @@ const defaultColorScheme = { "__color_calendar_halloween_graph_day_L3_bg" : "#fa7a18", "__color_calendar_halloween_graph_day_L4_bg" : "#fddf68", "__color_calendar_graph_day_border" : "rgba(27, 31, 35, 0.06)", + "__color_calendar_graph_day_bg" : "rgba(0,0,0,0.1)", "__color_calendar_graph_day_L1_bg" : "#0e4429", "__color_calendar_graph_day_L2_bg" : "#006d32", "__color_calendar_graph_day_L3_bg" : "#26a641", @@ -452,7 +453,7 @@ const defaultColorScheme = { "__color_calendar_graph_day_L4_border" : "rgba(255, 255, 255, 0.05)", }; -var colorSettings = Object.keys(defaultColorScheme); +colorSettings = Object.keys(defaultColorScheme); // function initialize() { console.log(`Pulling Data from Local Storage`); @@ -483,3 +484,4 @@ var colorSettings = Object.keys(defaultColorScheme); }); }); + diff --git a/src/components/options/ChangeCard.tsx b/src/components/options/ChangeCard.tsx index fffdd5a..db1c4bb 100644 --- a/src/components/options/ChangeCard.tsx +++ b/src/components/options/ChangeCard.tsx @@ -46,8 +46,9 @@ export default function ChangeCard(props: Props) { const [current, setCurrent] = react.useState(`${defaultValue}`); function updateColor() { - setCurrent(JSON.stringify(colorPickerColor)); - pintSetNoReload(settingName, colorPickerColor); + var stringifiedColor = `rgba(${colorPickerColor.r},${colorPickerColor.g},${colorPickerColor.b},${colorPickerColor.a})` + setCurrent(stringifiedColor); + pintSetNoReload(settingName, stringifiedColor); } function updateColorExplicitly(value: string) { diff --git a/src/components/options/Converter.tsx b/src/components/options/Converter.tsx deleted file mode 100644 index 66934da..0000000 --- a/src/components/options/Converter.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { - FormControl, - InputLabel, - MenuItem, - NativeSelect, - Select, - Switch, -} from "@mui/material"; -import react from "react"; -import "../../assets/styles/App.css"; -import Preview from "../global/Preview"; - -export default function Converter() { - return ( -
-
-

hex-rgba converter

-
-
-

view global user pints?

- -
-
- -
- -
-
-
-
-
- ); -} diff --git a/src/methods/schemeGen.js b/src/methods/schemeGen.js index 9eede18..a951bff 100644 --- a/src/methods/schemeGen.js +++ b/src/methods/schemeGen.js @@ -20,6 +20,27 @@ export function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } +export function rgba2hex(orig) { + var a, isPercent, + rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i), + alpha = (rgb && rgb[4] || "").trim(), + hex = rgb ? + (rgb[1] | 1 << 8).toString(16).slice(1) + + (rgb[2] | 1 << 8).toString(16).slice(1) + + (rgb[3] | 1 << 8).toString(16).slice(1) : orig; + + if (alpha !== "") { + a = alpha; + } else { + a = 1; + } + // multiply before convert to HEX + a = ((a * 255) | 1 << 8).toString(16).slice(1) + hex = hex + a; + + return hex; +} + // generate array of hex color gradients given a single hex color export function generateHexGradients(hex) { var rgb = hexToRgb(hex); diff --git a/src/views/Options.tsx b/src/views/Options.tsx index 48aeabd..da93e27 100644 --- a/src/views/Options.tsx +++ b/src/views/Options.tsx @@ -6,18 +6,27 @@ import QuickSettings from '../components/popup/QuickSettings'; import '../methods/settings.js'; import { settings } from '../methods/settings'; import ChangeCard from '../components/options/ChangeCard'; -import Converter from '../components/options/Converter'; import react from 'react'; import { HexColorInput, HexColorPicker, RgbaColorPicker } from 'react-colorful'; import CardTitle from '../components/global/CardTitle'; +import { rgba2hex } from '../methods/schemeGen'; var settingsList = Object.keys(settings); var defaultValue = { r: 200, g: 150, b: 35, a: 0.5 } +var stringifiedColor = `rgba(${defaultValue.r},${defaultValue.g},${defaultValue.b},${defaultValue.a})` +var defaultHexValue = rgba2hex(stringifiedColor); export default function Options() { const [color, setColor] = react.useState(defaultValue); + const [hexColor, setHexColor] = react.useState() + + react.useLayoutEffect(() => { + stringifiedColor = `rgba(${color.r},${color.g},${color.b},${color.a})` + setHexColor(rgba2hex(stringifiedColor)); + + }); return (
@@ -27,12 +36,23 @@ export default function Options() {
- +
+
+

hex-rgba converter

+
+
+

rgb({color.r},{color.g},{color.b},{color.a})

+

{hexColor}

+
+ +
+
+
-
- -
+
+ +