From 4c544170f785332f092a40d8a7892be423c28f37 Mon Sep 17 00:00:00 2001 From: fuwaa Date: Wed, 3 Aug 2022 09:13:25 +0800 Subject: [PATCH] feat: add reset feature --- public/background.js | 6 ---- src/components/global/CardTitle.tsx | 2 +- src/components/options/ChangeCard.tsx | 22 +++++++++++++- src/components/options/Header.tsx | 34 +++++++++++---------- src/components/options/Sidebar.tsx | 43 ++++++++++++++++++++------- src/components/popup/Header.tsx | 23 ++++++++++---- src/components/popup/QuickChange.tsx | 9 ------ src/views/Options.tsx | 1 - 8 files changed, 92 insertions(+), 48 deletions(-) diff --git a/public/background.js b/public/background.js index 95366d1..532cad9 100644 --- a/public/background.js +++ b/public/background.js @@ -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" }); }); diff --git a/src/components/global/CardTitle.tsx b/src/components/global/CardTitle.tsx index 2228bf4..e0f79d8 100644 --- a/src/components/global/CardTitle.tsx +++ b/src/components/global/CardTitle.tsx @@ -12,7 +12,7 @@ export default function CardTitle(props: Props) { return (

{name} {color} diff --git a/src/components/options/ChangeCard.tsx b/src/components/options/ChangeCard.tsx index 39a4dc3..0be8e5e 100644 --- a/src/components/options/ChangeCard.tsx +++ b/src/components/options/ChangeCard.tsx @@ -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 (

@@ -55,11 +68,18 @@ export default function ChangeCard(props: Props) {
+
diff --git a/src/components/options/Header.tsx b/src/components/options/Header.tsx index a5f249c..5141dab 100644 --- a/src/components/options/Header.tsx +++ b/src/components/options/Header.tsx @@ -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 (
@@ -22,25 +25,26 @@ export default function Header() {

pint for github

- sign in to broadcast your palette + advanced settings

-
+
+ -
); diff --git a/src/components/options/Sidebar.tsx b/src/components/options/Sidebar.tsx index 2e95dec..7b3aa59 100644 --- a/src/components/options/Sidebar.tsx +++ b/src/components/options/Sidebar.tsx @@ -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 (