mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
implementation: options ui fix
This commit is contained in:
parent
d88d729070
commit
3a6f04ee0f
5 changed files with 54 additions and 47 deletions
|
@ -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);
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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);
|
||||
|
|
|
@ -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,11 +36,22 @@ 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 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} />
|
||||
|
|
Loading…
Reference in a new issue