ryanamay/pint
1
0
Fork 0
mirror of https://github.com/ryanamay/pint.git synced 2024-09-20 01:50:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implementation: options ui fix

Browse source
This commit is contained in:
fuwaa 2022-07-12 12:00:00 +08:00
parent d88d729070
commit 3a6f04ee0f
No known key found for this signature in database
GPG key ID: 2E4F5DC11DE1D654
5 changed files with 54 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/Initial.js
View file

@ -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);
});
});

5
src/components/options/ChangeCard.tsx
View file

@ -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) {

37
src/components/options/Converter.tsx
View file

@ -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 (
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
<div className=" bg-whiteflex-start align-left text-l p-1">
<p>hex-rgba converter</p>
<div className="flex-col">
<div className="flex flex-row justify-between items-center">
<p className="flex-start my-1">view global user pints?</p>
<Switch defaultChecked size="small" />
</div>
<form className="flex flex-row justify-between items-center" action="#">
<label>select color scheme: </label>
<div>
<select name="colorschemes" id="lang" defaultValue="1">
<option value="0">Solarized Dark</option>
<option value="1">Github Dark</option>
<option value="2">Github Light</option>
</select>
</div>
</form>
</div>
</div>
</div>
);
}

21
src/methods/schemeGen.js
View file

@ -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);

30
src/views/Options.tsx
View file

@ -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 (
<div className="relative flex flex-col align justify-center items-center">
@ -27,12 +36,23 @@ export default function Options() {
<div className=" fixed w-[300px]">
<Header/>
<QuickSettings/>
<Converter />
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
<div className=" bg-whiteflex-start align-left text-l p-1">
<p>hex-rgba converter</p>
<div className="flex-col">
<div className="flex flex-row justify-between items-center">
<p className="flex-start my-1">rgb({color.r},{color.g},{color.b},{color.a})</p>
<p className="flex-end my-1">{hexColor}</p>
</div>
</div>
</div>
</div>
<div className="pint flex flex-row mb-2 mt-1 mx-2 text-center">
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
<div className="flex flex-row justify-content text-center justify-center">
<CardTitle name="color picker - " />
</div>
<div className="flex flex-row justify-content text-left justify-center">
<CardTitle name="color picker" />
</div>
<div className="flex justify-content p-1">
<RgbaColorPicker style={{ width: 258, height: 258 }} color={color} onChange={setColor} />
</div>