mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
feat: add reset feature
This commit is contained in:
parent
2cc250f2f2
commit
4c544170f7
8 changed files with 92 additions and 48 deletions
|
@ -469,12 +469,6 @@ chrome.runtime.onInstalled.addListener(() => {
|
|||
let key = {};
|
||||
key[`${initialSetting}`] = defaultColorScheme[initialSetting];
|
||||
chrome.storage.local.set(key);
|
||||
console.log(
|
||||
"Setup: Configuring " +
|
||||
initialSetting +
|
||||
" >> " +
|
||||
defaultColorScheme[initialSetting]
|
||||
);
|
||||
});
|
||||
chrome.tabs.create({ url: "https://pint.sh/success" });
|
||||
});
|
||||
|
|
|
@ -12,7 +12,7 @@ export default function CardTitle(props: Props) {
|
|||
return (
|
||||
<div
|
||||
style={{ backgroundColor: textcolor }}
|
||||
className={`flex-start align-left text-white text-l p-1 rounded-t-[6px]`}
|
||||
className={`flex-start align-left text-white text-l p-1 rounded-t-[4px]`}
|
||||
>
|
||||
<p className="text-bold">
|
||||
{name} {color}
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
import react from "react";
|
||||
import "../../assets/styles/App.css";
|
||||
import { IoIosBrush } from "react-icons/io";
|
||||
import { BiReset } from "react-icons/bi";
|
||||
import CardTitle from "../global/CardTitle";
|
||||
import {
|
||||
pintSetNoReload,
|
||||
pintGetUpdate,
|
||||
} from "../../methods/helpers/storageHelper";
|
||||
import { settings } from "../../methods/config/settings";
|
||||
|
||||
var defaultValue = "#c0ffee";
|
||||
|
||||
var settingsList = Object.entries(settings);
|
||||
|
||||
interface Props {
|
||||
settingName: string;
|
||||
colorPickerColor: string;
|
||||
|
@ -38,6 +42,15 @@ export default function ChangeCard(props: Props) {
|
|||
pintSetNoReload(settingName, value);
|
||||
}
|
||||
|
||||
function resetDefaults() {
|
||||
// get default value from settingsList
|
||||
var defaults = settingsList.find(
|
||||
(setting) => setting[0] === settingName
|
||||
)[1];
|
||||
setCurrent(defaults);
|
||||
pintSetNoReload(settingName, defaults);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pint flex flex-row w-[260px] text-center">
|
||||
<div className="flex-1 flex-col rounded-[6px] m-1 p-1 bg-[#010409] border-solid border-[#30363d] border-2">
|
||||
|
@ -55,11 +68,18 @@ export default function ChangeCard(props: Props) {
|
|||
</div>
|
||||
<button
|
||||
title="updateColor"
|
||||
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"
|
||||
className="bg-[#0041c4] hover:bg-[#004de5] active:bg-[#0035A0]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1 rounded-full text-white"
|
||||
onClick={updateColor}
|
||||
>
|
||||
<IoIosBrush className="text-xl p-1 text-white" />
|
||||
</button>
|
||||
<button
|
||||
title="Reset to defaults"
|
||||
className="bg-[#3a3a3a] hover:bg-[#585858] active:bg-[#272727]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1 rounded-full text-white"
|
||||
onClick={resetDefaults}
|
||||
>
|
||||
<BiReset className="text-xl p-1 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,13 +1,9 @@
|
|||
import logo from "../../assets/images/pint.svg";
|
||||
import "../../assets/styles/App.css";
|
||||
import { IoMdSettings } from "react-icons/io";
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { SiGithubsponsors } from "react-icons/si";
|
||||
|
||||
export default function Header() {
|
||||
function openOptions() {
|
||||
chrome.runtime.openOptionsPage();
|
||||
}
|
||||
|
||||
function openGithub() {
|
||||
chrome.tabs.create({
|
||||
url: "https://github.com/fuwaa/pint",
|
||||
|
@ -15,6 +11,13 @@ export default function Header() {
|
|||
});
|
||||
}
|
||||
|
||||
function supportProject() {
|
||||
chrome.tabs.create({
|
||||
url: "https://github.com/sponsors/fuwaa",
|
||||
selected: true,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<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">
|
||||
|
@ -22,25 +25,26 @@ export default function Header() {
|
|||
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
||||
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
||||
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||
sign in to broadcast your palette
|
||||
advanced settings
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-row">
|
||||
<button
|
||||
title="Advanced"
|
||||
title="Support this project"
|
||||
className=" hover:bg-[#40363d] active:bg-[#5b5b5b] focus:outline-none focus:ring focus:bg-[#444444] p-2 rounded-[6px] h-[30px] border-solid border-2 border-[#404040] hover:border-[#ffffff] flex flex-row justify-between m-1"
|
||||
onClick={supportProject}
|
||||
>
|
||||
<SiGithubsponsors className="self-center text-xl p-1 text-[#db61a2]" />
|
||||
<p className="self-center p-1 text-white"> Support this project </p>
|
||||
</button>
|
||||
<button
|
||||
title="View the Source"
|
||||
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>
|
||||
);
|
||||
|
|
|
@ -27,6 +27,8 @@ 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";
|
||||
import { BiReset } from "react-icons/bi";
|
||||
import * as baseSettings from "../../methods/config/settings";
|
||||
|
||||
var defaultValue = "#c0ffee";
|
||||
|
||||
|
@ -35,6 +37,8 @@ var defaultVariation = "default";
|
|||
|
||||
var quickScheme: string[] = [];
|
||||
|
||||
var defaultSettings = Object.entries(baseSettings.settings);
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
setColor: (type: string) => void;
|
||||
|
@ -69,6 +73,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintGray() {
|
||||
updateSpecific(color, 0, 0, scales.gray);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
|
||||
|
@ -76,6 +81,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintYellow() {
|
||||
updateSpecific(color, 0, 0, scales.yellow);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
|
||||
|
@ -83,6 +89,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintBlue() {
|
||||
updateSpecific(color, 0, 0, scales.blue);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
|
||||
|
@ -90,6 +97,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintGreen() {
|
||||
updateSpecific(color, 0, 0, scales.green);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
|
||||
|
@ -97,6 +105,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintRed() {
|
||||
updateSpecific(color, 0, 0, scales.red);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
|
||||
|
@ -104,6 +113,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintPurple() {
|
||||
updateSpecific(color, 0, 0, scales.purple);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
|
||||
|
@ -111,6 +121,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintPink() {
|
||||
updateSpecific(color, 0, 0, scales.pink);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
|
||||
|
@ -118,6 +129,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintCalendar() {
|
||||
updateSpecific(color, 0, 0, scales.calendar);
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
|
||||
|
@ -125,6 +137,7 @@ export default function Sidebar(props: Props) {
|
|||
function paintText() {
|
||||
updateMultiple(settings.cg106_ffffff, chroma(color).hex());
|
||||
setScaleGray(color);
|
||||
setColor(color);
|
||||
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||
}
|
||||
|
||||
|
@ -193,6 +206,7 @@ export default function Sidebar(props: Props) {
|
|||
pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
|
||||
pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
|
||||
pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
|
||||
setColor(color);
|
||||
}
|
||||
|
||||
function updateColor(color: string) {
|
||||
|
@ -210,9 +224,16 @@ export default function Sidebar(props: Props) {
|
|||
}
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
defaultSettings.forEach((setting) => {
|
||||
pintSetNoReload(setting[0], setting[1]);
|
||||
});
|
||||
chrome.tabs.reload();
|
||||
}
|
||||
|
||||
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="w-[410px] pint flex flex-row mx-2 mt-2 mb-1 pt-[78px]">
|
||||
<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} />
|
||||
|
@ -383,15 +404,17 @@ export default function Sidebar(props: Props) {
|
|||
</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-2 mx-3">
|
||||
<div className="flex-1 flex-col rounded-[6px] bg-[#3a0606] border-solid border-[#6d1616] border-2 ">
|
||||
<button
|
||||
className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2"
|
||||
onClick={resetAll}
|
||||
>
|
||||
<BiReset className="mx-1" />
|
||||
<p className="text-semibold">Reset everything to defaults</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col rounded-lg mb-3 mx-3">
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import logo from "../../assets/images/pint.svg";
|
||||
import "../../assets/styles/App.css";
|
||||
import { IoMdSettings } from "react-icons/io";
|
||||
import {
|
||||
AiFillGithub,
|
||||
} from "react-icons/ai";
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { SiGithubsponsors } from "react-icons/si";
|
||||
|
||||
export default function Header() {
|
||||
function openOptions() {
|
||||
|
@ -17,6 +16,13 @@ export default function Header() {
|
|||
});
|
||||
}
|
||||
|
||||
function supportProject() {
|
||||
chrome.tabs.create({
|
||||
url: "https://github.com/sponsors/fuwaa",
|
||||
selected: true,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
|
||||
<div className="flex flex-row">
|
||||
|
@ -24,13 +30,20 @@ export default function Header() {
|
|||
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
||||
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
||||
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||
sign in to broadcast your palette
|
||||
quick settings
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
title="Advanced"
|
||||
title="Support this project"
|
||||
className="flex-none rounded-lg text-xl text-[#db61a2] p-2"
|
||||
onClick={supportProject}
|
||||
>
|
||||
<SiGithubsponsors />
|
||||
</button>
|
||||
<button
|
||||
title="View the Source"
|
||||
className="flex-none rounded-lg text-xl text-white p-2"
|
||||
onClick={openGithub}
|
||||
>
|
||||
|
|
|
@ -378,15 +378,6 @@ export default function QuickChange() {
|
|||
</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">
|
||||
|
|
|
@ -5,7 +5,6 @@ import "../methods/config/settings.js";
|
|||
import { settings } from "../methods/config/settings";
|
||||
import ChangeCard from "../components/options/ChangeCard";
|
||||
import react from "react";
|
||||
import chroma from "chroma-js";
|
||||
import Sidebar from "../components/options/Sidebar";
|
||||
|
||||
var settingsList = Object.keys(settings);
|
||||
|
|
Loading…
Reference in a new issue