mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
feat: all settings improvement
This commit is contained in:
fuwaa
parent
b328d27574
commit
2cc250f2f2
8 changed files with 604 additions and 112 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
|
import chroma from "chroma-js";
|
||||||
interface Props {
|
interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
|
|
@ -12,7 +12,7 @@ export default function CardTitle(props: Props) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ backgroundColor: textcolor }}
|
style={{ backgroundColor: textcolor }}
|
||||||
className="flex-start align-left text-l p-1 rounded-t-lg"
|
className={`flex-start align-left text-white text-l p-1 rounded-t-[6px]`}
|
||||||
>
|
>
|
||||||
<p className="text-bold">
|
<p className="text-bold">
|
||||||
{name} {color}
|
{name} {color}
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,7 @@ var defaultValue = "#c0ffee";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
settingName: string;
|
settingName: string;
|
||||||
colorPickerColor: {
|
colorPickerColor: string;
|
||||||
r: number;
|
|
||||||
g: number;
|
|
||||||
b: number;
|
|
||||||
a: number;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChangeCard(props: Props) {
|
export default function ChangeCard(props: Props) {
|
||||||
|
|
@ -34,9 +29,8 @@ export default function ChangeCard(props: Props) {
|
||||||
const [current, setCurrent] = react.useState(`${defaultValue}`);
|
const [current, setCurrent] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function updateColor() {
|
function updateColor() {
|
||||||
var stringifiedColor = `rgba(${colorPickerColor.r},${colorPickerColor.g},${colorPickerColor.b},${colorPickerColor.a})`;
|
setCurrent(colorPickerColor);
|
||||||
setCurrent(stringifiedColor);
|
pintSetNoReload(settingName, colorPickerColor);
|
||||||
pintSetNoReload(settingName, stringifiedColor);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColorExplicitly(value: string) {
|
function updateColorExplicitly(value: string) {
|
||||||
|
|
@ -46,22 +40,22 @@ export default function ChangeCard(props: Props) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pint flex flex-row w-[260px] text-center">
|
<div className="pint flex flex-row w-[260px] text-center">
|
||||||
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
|
<div className="flex-1 flex-col rounded-[6px] m-1 p-1 bg-[#010409] border-solid border-[#30363d] border-2">
|
||||||
<CardTitle name={current} textcolor={current} />
|
<CardTitle name={current} textcolor={current} />
|
||||||
<CardTitle name={settingReadable} />
|
<CardTitle name={settingReadable} textcolor="#010409" />
|
||||||
<div className="flex flex-row justify-center justify-items-center">
|
<div className="flex flex-row justify-center justify-items-center">
|
||||||
<div className="flex align-middle justify-content p-1">
|
<div className="flex align-middle justify-content p-1">
|
||||||
<input
|
<input
|
||||||
id="aaa"
|
id="aaa"
|
||||||
type="text"
|
type="text"
|
||||||
className="p-2 text-center w-full"
|
className="p-2 text-center text-white w-full bg-[#010409]"
|
||||||
placeholder="insert replacement value"
|
placeholder="insert custom value/css"
|
||||||
onChange={(e) => updateColorExplicitly(e.target.value)}
|
onChange={(e) => updateColorExplicitly(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
title="updateColor"
|
title="updateColor"
|
||||||
className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mx-2 my-1 rounded-full text-white"
|
className="bg-[#0041c4] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mx-2 my-1 rounded-full text-white"
|
||||||
onClick={updateColor}
|
onClick={updateColor}
|
||||||
>
|
>
|
||||||
<IoIosBrush className="text-xl p-1 text-white" />
|
<IoIosBrush className="text-xl p-1 text-white" />
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,47 @@
|
||||||
import logo from "../../assets/images/pint.svg";
|
import logo from "../../assets/images/pint.svg";
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
|
import { IoMdSettings } from "react-icons/io";
|
||||||
|
import { AiFillGithub } from "react-icons/ai";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
|
function openOptions() {
|
||||||
|
chrome.runtime.openOptionsPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openGithub() {
|
||||||
|
chrome.tabs.create({
|
||||||
|
url: "https://github.com/fuwaa/pint",
|
||||||
|
selected: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1 justify-between items-center">
|
<div className="sticky top-0 z-30 w-screen flex flex-row mb-2 p-1 justify-between items-center bg-[#161b22] h-[64px] px-3 px-md-4 px-lg-5 ">
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
<img src={logo} className="flex-none w-12" alt="logo" />
|
<img src={logo} className="flex-none w-10" alt="logo" />
|
||||||
<div className="flex-col p-1 text-white">
|
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
||||||
<p className="flex-1 self-center text-xl"> pint for github </p>
|
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
||||||
<p className="flex-1 self-center text-l">2.0-dev - advanced mode</p>
|
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||||
|
sign in to broadcast your palette
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div>
|
||||||
|
<button
|
||||||
|
title="Advanced"
|
||||||
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
|
onClick={openGithub}
|
||||||
|
>
|
||||||
|
<AiFillGithub />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Advanced"
|
||||||
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
|
onClick={openOptions}
|
||||||
|
>
|
||||||
|
<IoMdSettings />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
|
||||||
<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 - " />
|
|
||||||
<HexColorInput
|
|
||||||
style={{ width: 40, textAlign: "center" }}
|
|
||||||
color={color}
|
|
||||||
onChange={setColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content p-1">
|
|
||||||
<HexColorPicker
|
|
||||||
style={{ width: 258, height: 258 }}
|
|
||||||
color={color}
|
|
||||||
onChange={setColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
547
src/components/options/Sidebar.tsx
Normal file
547
src/components/options/Sidebar.tsx
Normal file
|
|
@ -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 (
|
||||||
|
<aside className="w-[428px] sticky flex left-0 top-0 flex-col h-screen ">
|
||||||
|
<div className="w-[410px] pint flex flex-row mx-2 mt-2 mb-1 pt-[80px]">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
|
<BsFillPaletteFill className="mx-1" size={15} />
|
||||||
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
|
<p className="text-semibold">color picker </p>
|
||||||
|
</div>
|
||||||
|
<HexColorInput
|
||||||
|
style={{
|
||||||
|
width: 40,
|
||||||
|
textAlign: "left",
|
||||||
|
color: "#b2b2b2",
|
||||||
|
backgroundColor: "#161b22",
|
||||||
|
}}
|
||||||
|
color={color}
|
||||||
|
onChange={updateColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-content p-1">
|
||||||
|
<HexColorPicker
|
||||||
|
className="custom-layout"
|
||||||
|
color={color}
|
||||||
|
onChange={updateColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow flex-col align-center m-1 text-white flex-1 rounded-[6px] bg-[#010409] border-solid border-[#30363d] border-2 justify-center">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
|
<p className="text-semibold"> color painter </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
||||||
|
<div className="flex-start align-left text-l rounded-t-lg">
|
||||||
|
<p className="">Click a button to set a color</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-wrap flex flex-row justify-content text-center text-white justify-center items-center p-1">
|
||||||
|
<button
|
||||||
|
title="Paint Canvas"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintGray}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleGray,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdTextSnippet className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Text Colors"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintText}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleText,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdFormatColorText className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Primary Accents"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintBlue}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleBlue,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BsMenuButtonWideFill className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint GitHub Calendar"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintCalendar}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleCalendar,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BsFillCalendar3WeekFill className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint CI/CD Tasks"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintPurple}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scalePurple,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCiCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Checks and Successors"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintGreen}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleGreen,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCheckCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Warnings and Waits"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintYellow}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleYellow,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillClockCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Errors and Dangers"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintRed}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleRed,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCloseCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint GitHub Sponsors"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintPink}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scalePink,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillHeart className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Everything"
|
||||||
|
className="bg-[#30363d] hover:bg-[#40363d] active:bg-[#676767] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] w-[132px] border-solid border-[#40363d] flex justify-center m-1"
|
||||||
|
onClick={paintAll}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p className=" self-center text-center text-md p-1 text-white">
|
||||||
|
Update All
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* <div className="flex-start align-left text-l mb-1 rounded-t-lg text-blue">
|
||||||
|
<p className="">Not Enough Settings?</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-start align-left text-l mb-2 rounded-t-lg text-blue-600 ">
|
||||||
|
<p className="">All Settings</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 justify-center mt-2">
|
||||||
|
<p className="text-center">Made with ❤️ - fuwa</p>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col rounded-lg mb-3 mx-3">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 ">
|
||||||
|
<button
|
||||||
|
className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2"
|
||||||
|
onClick={hideQS}
|
||||||
|
>
|
||||||
|
<FcIdea className="mx-1" />
|
||||||
|
<p className="text-semibold">
|
||||||
|
{hiddenQS === "true"
|
||||||
|
? "Need ideas? Click me to show similar colors!"
|
||||||
|
: "Showing similar colors. Click me to hide!"}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
<div className={`${hiddenQS === "true" ? "hidden" : ""}`}>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Scheme Variations</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2">
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "triade"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setTriade}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
triade{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "tetrade"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setTetrade}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
tetrade{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "analogic"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setAnalogic}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
analogic{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Color Variations</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2">
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "default"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setDefault}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
default{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "pastel"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setPastel}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
pastel{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "soft"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setSoft}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
soft{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "light"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setLight}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
light{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "hard"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setHard}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
hard{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "pale"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setPale}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
pale{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Generated Colors</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2 mb-2">
|
||||||
|
{quickScheme.map((qsColor) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
title={qsColor}
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[15px] w-[15px] border-solid border-[#163e6d] flex justify-between mr-1"
|
||||||
|
onClick={() => {
|
||||||
|
setColor(qsColor);
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: chroma(qsColor).hex(),
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -3,14 +3,8 @@ import "../../assets/styles/App.css";
|
||||||
import { IoMdSettings } from "react-icons/io";
|
import { IoMdSettings } from "react-icons/io";
|
||||||
import {
|
import {
|
||||||
AiFillGithub,
|
AiFillGithub,
|
||||||
AiFillCloseCircle,
|
|
||||||
AiFillClockCircle,
|
|
||||||
AiFillCheckCircle,
|
|
||||||
AiFillCiCircle,
|
|
||||||
AiFillHeart,
|
|
||||||
} from "react-icons/ai";
|
} from "react-icons/ai";
|
||||||
import { BsFillCalendar3WeekFill, BsMenuButtonWideFill } from "react-icons/bs";
|
|
||||||
import { MdTextSnippet, MdFormatColorText } from "react-icons/md";
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
function openOptions() {
|
function openOptions() {
|
||||||
chrome.runtime.openOptionsPage();
|
chrome.runtime.openOptionsPage();
|
||||||
|
|
@ -37,14 +31,14 @@ export default function Header() {
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
title="Advanced"
|
title="Advanced"
|
||||||
className="flex-none p-1 rounded-lg text-xl text-white p-2"
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
onClick={openGithub}
|
onClick={openGithub}
|
||||||
>
|
>
|
||||||
<AiFillGithub />
|
<AiFillGithub />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
title="Advanced"
|
title="Advanced"
|
||||||
className="flex-none p-1 rounded-lg text-xl text-white p-2"
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
onClick={openOptions}
|
onClick={openOptions}
|
||||||
>
|
>
|
||||||
<IoMdSettings />
|
<IoMdSettings />
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import {
|
||||||
pintSetNoReload,
|
pintSetNoReload,
|
||||||
updateMultiple,
|
updateMultiple,
|
||||||
} from "../../methods/helpers/storageHelper";
|
} from "../../methods/helpers/storageHelper";
|
||||||
import { updateOpacity } from "../../methods/helpers/opacityHelper";
|
|
||||||
import {
|
import {
|
||||||
BsFillBrushFill,
|
BsFillBrushFill,
|
||||||
BsFillCalendar3WeekFill,
|
BsFillCalendar3WeekFill,
|
||||||
|
|
|
||||||
|
|
@ -5,65 +5,27 @@ import "../methods/config/settings.js";
|
||||||
import { settings } from "../methods/config/settings";
|
import { settings } from "../methods/config/settings";
|
||||||
import ChangeCard from "../components/options/ChangeCard";
|
import ChangeCard from "../components/options/ChangeCard";
|
||||||
import react from "react";
|
import react from "react";
|
||||||
import { RgbaColorPicker } from "react-colorful";
|
|
||||||
import CardTitle from "../components/global/CardTitle";
|
|
||||||
import chroma from "chroma-js";
|
import chroma from "chroma-js";
|
||||||
|
import Sidebar from "../components/options/Sidebar";
|
||||||
|
|
||||||
var settingsList = Object.keys(settings);
|
var settingsList = Object.keys(settings);
|
||||||
|
|
||||||
var defaultValue = { r: 200, g: 150, b: 35, a: 0.5 };
|
var defaultValue = "#c0ffee";
|
||||||
var stringifiedColor = `rgba(${defaultValue.r},${defaultValue.g},${defaultValue.b},${defaultValue.a})`;
|
|
||||||
|
|
||||||
export default function Options() {
|
export default function Options() {
|
||||||
const [color, setColor] = react.useState(defaultValue);
|
const [color, setColor] = react.useState(defaultValue);
|
||||||
const [hexColor, setHexColor] = react.useState(
|
|
||||||
chroma(stringifiedColor).hex()
|
|
||||||
);
|
|
||||||
|
|
||||||
react.useLayoutEffect(() => {
|
|
||||||
setHexColor(chroma(stringifiedColor).hex());
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex flex-col align justify-center items-center">
|
<div className="relative inline-flex flex-col align justify-center">
|
||||||
<div className="relative max-w-7xl flex flex-row">
|
|
||||||
<div className=" w-[300px]"></div>
|
|
||||||
<div className=" fixed w-[300px]">
|
|
||||||
<Header />
|
<Header />
|
||||||
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
|
<div className="relative inline-flex flex-row self-center">
|
||||||
<div className=" bg-whiteflex-start align-left text-l p-1">
|
<Sidebar color={color} setColor={setColor} />
|
||||||
<p>hex-rgba converter</p>
|
<div className="inline-flex flex-col">
|
||||||
<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-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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
||||||
<p className="text-l text-white p-1 mb-2">
|
<p className="text-l text-white p-1 mb-2">
|
||||||
customise everything from every text to every div
|
customise everything from every text to every div
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-3 gap-1">
|
<div className="grid xl:grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-1">
|
||||||
{settingsList.map((setting) => {
|
{settingsList.map((setting) => {
|
||||||
return (
|
return (
|
||||||
<ChangeCard settingName={setting} colorPickerColor={color} />
|
<ChangeCard settingName={setting} colorPickerColor={color} />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue