From 7977e917a11f71bc2c1ce22df5e6cc24b6f472af Mon Sep 17 00:00:00 2001 From: SeaswimmerTheFsh Date: Wed, 24 Apr 2024 14:44:47 -0400 Subject: [PATCH] updated DiscordColorways --- .../components/CreatorModal.tsx | 19 +---- .../DiscordColorways/components/InfoModal.tsx | 17 +---- .../components/SelectorModal.tsx | 16 ++-- .../SettingsTabs/ManageColorwaysPage.tsx | 30 ++++++++ .../components/SettingsTabs/SelectorPage.tsx | 73 ++++++++++--------- src/userplugins/DiscordColorways/css.ts | 6 +- src/userplugins/DiscordColorways/index.tsx | 4 +- src/userplugins/DiscordColorways/style.css | 8 -- src/userplugins/DiscordColorways/utils.ts | 17 +++++ 9 files changed, 107 insertions(+), 83 deletions(-) diff --git a/src/userplugins/DiscordColorways/components/CreatorModal.tsx b/src/userplugins/DiscordColorways/components/CreatorModal.tsx index b63e2655..748df6a8 100644 --- a/src/userplugins/DiscordColorways/components/CreatorModal.tsx +++ b/src/userplugins/DiscordColorways/components/CreatorModal.tsx @@ -29,7 +29,7 @@ import { ColorPicker } from ".."; import { knownThemeVars } from "../constants"; import { generateCss, getPreset } from "../css"; import { Colorway } from "../types"; -import { getHex, hexToString, hslToHex, rgbToHex } from "../utils"; +import { colorToHex, getHex, hexToString } from "../utils"; import ConflictingColorsModal from "./ConflictingColorsModal"; import ThemePreviewCategory from "./ThemePreview"; export default function ({ @@ -355,22 +355,7 @@ export default function ({ setSecondaryColor, setTertiaryColor ]; - hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => { - var colorType = "hex"; - if (color.includes("hsl")) { - colorType = "hsl"; - } else if (color.includes("rgb")) { - colorType = "rgb"; - } - color = color.replaceAll(",", "").replace(/.+?\(/, "").replace(")", "").replaceAll(/[ \t]+\/[ \t]+/g, " ").replaceAll("%", ""); - if (colorType === "hsl") { - color = hslToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2])); - } - if (colorType === "rgb") { - color = rgbToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2])); - } - setColor[i](color.replace("#", "")); - }); + hexToString(colorwayID).split(/,#/).forEach((color: string, i: number) => setColor[i](colorToHex(color))); props.onClose(); } }} diff --git a/src/userplugins/DiscordColorways/components/InfoModal.tsx b/src/userplugins/DiscordColorways/components/InfoModal.tsx index 24d7bdd1..eb5fac1c 100644 --- a/src/userplugins/DiscordColorways/components/InfoModal.tsx +++ b/src/userplugins/DiscordColorways/components/InfoModal.tsx @@ -18,6 +18,7 @@ import { Button, Clipboard, Forms, Text, Toasts } from "@webpack/common"; import { ColorwayCSS } from ".."; import { generateCss } from "../css"; import { Colorway } from "../types"; +import { colorToHex } from "../utils"; import ThemePreviewCategory from "./ThemePreview"; export default function ({ @@ -187,12 +188,11 @@ export default function ({ look={Button.Looks.FILLED} onClick={async () => { const customColorways = await DataStore.get("customColorways"); - const actveColorwayID = await DataStore.get("actveColorwayID"); const customColorwaysArray: Colorway[] = []; customColorways.map((color: Colorway, i: number) => { if (customColorways.length > 0) { if (color.name === colorwayProps.name) { - color["dc-import"] = generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true); + color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true); customColorwaysArray.push(color); } else { customColorwaysArray.push(color); @@ -200,11 +200,6 @@ export default function ({ if (++i === customColorways.length) { DataStore.set("customColorways", customColorwaysArray); } - if (actveColorwayID === colorwayProps.name) { - DataStore.set("actveColorway", color["dc-import"]); - DataStore.set("actveColorwayID", color.name); - ColorwayCSS.set(color["dc-import"]); - } modalProps.onClose(); loadUIProps(); } @@ -233,23 +228,17 @@ export default function ({ const colorways = data.flatMap(json => json.colorways); const customColorways = await DataStore.get("customColorways"); - const actveColorwayID = await DataStore.get("actveColorwayID"); const customColorwaysArray: Colorway[] = []; colorways.map((color: Colorway, i: number) => { if (colorways.length > 0) { if (color.name === colorwayProps.name) { color.name += " (Custom)"; - color["dc-import"] = generateCss(color.primary.split("#")[1] || "313338", color.secondary.split("#")[1] || "2b2d31", color.tertiary.split("#")[1] || "1e1f22", color.accent.split("#")[1] || "5865f2", true, true); + color["dc-import"] = generateCss(colorToHex(color.primary) || "313338", colorToHex(color.secondary) || "2b2d31", colorToHex(color.tertiary) || "1e1f22", colorToHex(color.accent) || "5865f2", true, true); customColorwaysArray.push(color); } if (++i === colorways.length) { DataStore.set("customColorways", [...customColorways, ...customColorwaysArray]); } - if (actveColorwayID === colorwayProps.name) { - DataStore.set("actveColorway", color["dc-import"]); - DataStore.set("actveColorwayID", color.name); - ColorwayCSS.set(color["dc-import"]); - } modalProps.onClose(); loadUIProps(); } diff --git a/src/userplugins/DiscordColorways/components/SelectorModal.tsx b/src/userplugins/DiscordColorways/components/SelectorModal.tsx index e20b0da4..2c1e42d0 100644 --- a/src/userplugins/DiscordColorways/components/SelectorModal.tsx +++ b/src/userplugins/DiscordColorways/components/SelectorModal.tsx @@ -8,6 +8,7 @@ import * as DataStore from "@api/DataStore"; import { ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal"; +import { findByPropsLazy } from "@webpack"; import { Button, Forms, @@ -27,12 +28,14 @@ import { ColorwayCSS } from ".."; import { defaultColorwaySource, fallbackColorways } from "../constants"; import { generateCss } from "../css"; import { Colorway } from "../types"; -import { getHex } from "../utils"; +import { colorToHex } from "../utils"; import ColorPickerModal from "./ColorPicker"; import CreatorModal from "./CreatorModal"; import { CloseIcon } from "./Icons"; import ColorwayInfoModal from "./InfoModal"; +const { SelectionCircle } = findByPropsLazy("SelectionCircle"); + export default function ({ modalProps, }: { @@ -362,7 +365,7 @@ export default function ({ return ( {({ onMouseEnter, onMouseLeave }) =>
)}
+ {currentColorway === color.name && } } ); diff --git a/src/userplugins/DiscordColorways/components/SettingsTabs/ManageColorwaysPage.tsx b/src/userplugins/DiscordColorways/components/SettingsTabs/ManageColorwaysPage.tsx index 6ce92213..ec376ea8 100644 --- a/src/userplugins/DiscordColorways/components/SettingsTabs/ManageColorwaysPage.tsx +++ b/src/userplugins/DiscordColorways/components/SettingsTabs/ManageColorwaysPage.tsx @@ -125,5 +125,35 @@ export default function () { + + + + ; } diff --git a/src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx b/src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx index 9f0fc3e1..b932959c 100644 --- a/src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx +++ b/src/userplugins/DiscordColorways/components/SettingsTabs/SelectorPage.tsx @@ -10,6 +10,7 @@ import * as DataStore from "@api/DataStore"; import { Flex } from "@components/Flex"; import { SettingsTab } from "@components/VencordSettings/shared"; import { openModal } from "@utils/modal"; +import { findByPropsLazy } from "@webpack"; import { Button, Forms, @@ -25,11 +26,15 @@ import { import { ColorwayCSS } from "../.."; import { defaultColorwaySource, fallbackColorways } from "../../constants"; +import { generateCss } from "../../css"; import { Colorway } from "../../types"; +import { colorToHex } from "../../utils"; import ColorPickerModal from "../ColorPicker"; import CreatorModal from "../CreatorModal"; import ColorwayInfoModal from "../InfoModal"; +const { SelectionCircle } = findByPropsLazy("SelectionCircle"); + export default function ({ visibleTabProps = "all", }: { @@ -321,7 +326,7 @@ export default function ({ {({ onMouseEnter, onMouseLeave }) => { return (
{ - if ( - currentColorway === - color.name - ) { - DataStore.set( - "actveColorwayID", - null - ); - DataStore.set( - "actveColorway", - null - ); + onClick={async () => { + const [ + onDemandWays, + onDemandWaysTintedText, + onDemandWaysDiscordSaturation + ] = await DataStore.getMany([ + "onDemandWays", + "onDemandWaysTintedText", + "onDemandWaysDiscordSaturation" + ]); + if (currentColorway === color.name) { + DataStore.set("actveColorwayID", null); + DataStore.set("actveColorway", null); ColorwayCSS.remove(); } else { - DataStore.set( - "actveColorwayID", - color.name - ); - DataStore.set( - "actveColorway", - color["dc-import"] - ); - ColorwayCSS.set( - color["dc-import"] - ); + DataStore.set("activeColorwayColors", color.colors); + DataStore.set("actveColorwayID", color.name); + if (onDemandWays) { + const demandedColorway = generateCss( + colorToHex(color.primary), + colorToHex(color.secondary), + colorToHex(color.tertiary), + colorToHex(color.accent), + onDemandWaysTintedText, + onDemandWaysDiscordSaturation + ); + DataStore.set("actveColorway", demandedColorway); + ColorwayCSS.set(demandedColorway); + } else { + DataStore.set("actveColorway", color["dc-import"]); + ColorwayCSS.set(color["dc-import"]); + } } - DataStore.get( - "actveColorwayID" - ).then( - ( - actveColorwayID: string - ) => - setCurrentColorway( - actveColorwayID - ) - ); + setCurrentColorway(await DataStore.get("actveColorwayID") as string); }} > {colors.map((colorItm) => { @@ -429,6 +431,7 @@ export default function ({ ); })}
+ {currentColorway === color.name && }
); }} diff --git a/src/userplugins/DiscordColorways/css.ts b/src/userplugins/DiscordColorways/css.ts index 0d90db78..c21e6e13 100644 --- a/src/userplugins/DiscordColorways/css.ts +++ b/src/userplugins/DiscordColorways/css.ts @@ -6,7 +6,7 @@ import { Plugins } from "Vencord"; -import { HexToHSL } from "./utils"; +import { colorToHex, HexToHSL } from "./utils"; export const colorVariables: string[] = [ "brand-100", @@ -405,6 +405,10 @@ function gradientBase(accentColor?: string, discordSaturation = false) { } export function generateCss(primaryColor: string, secondaryColor: string, tertiaryColor: string, accentColor: string, tintedText: boolean, discordSaturation: boolean) { + primaryColor = colorToHex(primaryColor); + secondaryColor = colorToHex(secondaryColor); + tertiaryColor = colorToHex(tertiaryColor); + accentColor = colorToHex(accentColor); const colorwayCss = `/*Automatically Generated - Colorway Creator V${(Plugins.plugins.DiscordColorways as any).creatorVersion}*/ :root:root { --brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${discordSaturation ? Math.round(((HexToHSL("#" + accentColor)[1] / 100) * (100 + BrandSatDiffs[100])) * 10) / 10 : HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[100]) * 10) / 10, 0)}; diff --git a/src/userplugins/DiscordColorways/index.tsx b/src/userplugins/DiscordColorways/index.tsx index 04db2cab..189f20d2 100644 --- a/src/userplugins/DiscordColorways/index.tsx +++ b/src/userplugins/DiscordColorways/index.tsx @@ -95,8 +95,8 @@ export const ColorwayCSS = { }; export const versionData = { - pluginVersion: "5.6.1", - creatorVersion: "1.18", + pluginVersion: "5.6.2", + creatorVersion: "1.18.1", }; export default definePlugin({ diff --git a/src/userplugins/DiscordColorways/style.css b/src/userplugins/DiscordColorways/style.css index da4d66b1..3245294c 100644 --- a/src/userplugins/DiscordColorways/style.css +++ b/src/userplugins/DiscordColorways/style.css @@ -268,18 +268,10 @@ max-height: unset !important; } -.colorwayCreator-colorPreviews:has(>.colorways-creator-module-warning) { - background-color: transparent; -} - .colorways-creator-module-warning { color: var(--brand-500); } -.colorways-creator-module-warning~.colorways-creator-module-warning { - display: none; -} - .colorwayCreator-colorPreviews>[class^="colorSwatch"], .colorwayCreator-colorPreviews>[class^="colorSwatch"]>[class^="swatch"] { width: 100%; diff --git a/src/userplugins/DiscordColorways/utils.ts b/src/userplugins/DiscordColorways/utils.ts index 2b163b0c..62e3859e 100644 --- a/src/userplugins/DiscordColorways/utils.ts +++ b/src/userplugins/DiscordColorways/utils.ts @@ -131,3 +131,20 @@ export function rgbToHex(r: number, g: number, b: number) { }; return `#${toHex(r)}${toHex(g)}${toHex(b)}`; } + +export function colorToHex(color: string) { + var colorType = "hex"; + if (color.includes("hsl")) { + colorType = "hsl"; + } else if (color.includes("rgb")) { + colorType = "rgb"; + } + color = color.replaceAll(",", "").replace(/.+?\(/, "").replace(")", "").replaceAll(/[ \t]+\/[ \t]+/g, " ").replaceAll("%", "").replaceAll("/", ""); + if (colorType === "hsl") { + color = hslToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2])); + } + if (colorType === "rgb") { + color = rgbToHex(Number(color.split(" ")[0]), Number(color.split(" ")[1]), Number(color.split(" ")[2])); + } + return color.replace("#", ""); +}