From a742cc2b53f358a522cb36b28ea0c43bad9778d2 Mon Sep 17 00:00:00 2001 From: sadan <117494111+sadan4@users.noreply.github.com> Date: Sat, 29 Jun 2024 03:04:30 -0400 Subject: [PATCH] complete settings overhaul, still needs work. see FIXME: --- src/plugins/customFolderIcons/components.tsx | 121 +++++++++++++ src/plugins/customFolderIcons/index.tsx | 172 ++----------------- src/plugins/customFolderIcons/settings.tsx | 7 + src/plugins/customFolderIcons/util.tsx | 32 ++++ 4 files changed, 173 insertions(+), 159 deletions(-) create mode 100644 src/plugins/customFolderIcons/components.tsx create mode 100644 src/plugins/customFolderIcons/util.tsx diff --git a/src/plugins/customFolderIcons/components.tsx b/src/plugins/customFolderIcons/components.tsx new file mode 100644 index 000000000..e13807050 --- /dev/null +++ b/src/plugins/customFolderIcons/components.tsx @@ -0,0 +1,121 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; +import { Button, Menu, Slider, TextInput, useState } from "@webpack/common"; + +import { folderProp } from "."; +import settings, { folderIconsData } from "./settings"; +import { int2rgba, setFolderUrl } from "./util"; + +export function ImageModal(folderProps: folderProp) { + const [data, setData] = useState(""); + const [size, setSize] = useState(100); + return ( + <> + { + setData(val); + }} + placeholder="https://example.com/image.png" + > + + + {data && <> +
Change the size of the folder icon
+ { + setSize(v); + }} + maxValue={200} + minValue={25} + markers={Array.apply(0, Array(176)).map((_, i) => i + 25)} + stickToMarkers={true} + keyboardStep={1} + renderMarker={() => null} /> + } + +
+ +
+ + ); +} +export function RenderPreview({ folderProps, url, size }: { folderProps: folderProp; url: string; size: number; }) { + if (!url) return null; + return ( +
+ +
+ ); +} + +export function makeContextItem(a: folderProp) { + return ( + { + openModalLazy(async () => { + return props => ( + + +
+ Set a New Icon. +
+ + + + +
+ You might have to hover the folder after setting in order for it to refresh. +
+ + ); + }, + { + modalKey: "custom-folder-icon" + }); + }}/> + ); +} diff --git a/src/plugins/customFolderIcons/index.tsx b/src/plugins/customFolderIcons/index.tsx index 12c9e6bdf..f6e2772ae 100644 --- a/src/plugins/customFolderIcons/index.tsx +++ b/src/plugins/customFolderIcons/index.tsx @@ -4,31 +4,19 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { DataStore } from "@api/index"; import { showNotification } from "@api/Notifications"; import { Devs } from "@utils/constants"; -import { closeModal, ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal"; import definePlugin from "@utils/types"; -import { Button, Menu, Slider, TextInput, useState } from "@webpack/common"; -import settings from "./settings"; -const DATA_STORE_NAME = "CFI_DATA"; -interface folderIcon{ - url: string, - size: number, -} -interface folderStoredData { - [key: string]: folderIcon | undefined -} -interface folderProp { + +import { makeContextItem } from "./components"; +import settings, { folderIconsData } from "./settings"; +import { int2rgba } from "./util"; +export interface folderProp { folderId: string; folderColor: number; } -let folderData: folderStoredData; export default definePlugin({ settings, - start: async ()=>{ - folderData = await DataStore.get(DATA_STORE_NAME).catch(e => handleUpdateError(e)) || {} as folderStoredData; - }, name: "CustomFolderIcons", description: "Customize folder icons with any png", authors: [ @@ -49,15 +37,14 @@ export default definePlugin({ menuItems.push(makeContextItem(props)); } }, - shouldReplace(props: any){ - return folderData - && props.folderNode.id in folderData - && folderData[props.folderNode.id] - && folderData[props.folderNode.id]?.url; + shouldReplace(props: any): boolean{ + const folderSettings = (settings.store.folderIcons as folderIconsData); + return !!(folderSettings?.[props.folderNode.id]?.url); }, replace(props: any){ - if(folderData && folderData[props.folderNode.id]){ - const data = folderData[props.folderNode.id]; + const folderSettings = (settings.store.folderIcons as folderIconsData); + if(folderSettings && folderSettings[props.folderNode.id]){ + const data = folderSettings[props.folderNode.id]; return (
-
); } } }); -/** - * @param rgbVal RGB value - * @param alpha alpha bewteen zero and 1 - */ -function int2rgba(rgbVal: number, alpha: number = 1) { - const b = rgbVal & 0xFF, - g = (rgbVal & 0xFF00) >>> 8, - r = (rgbVal & 0xFF0000) >>> 16; - return `rgba(${[r, g, b].join(",")},${alpha})`; -} -async function setFolderUrl(props: folderProp, url: string, size: number) { - DataStore.get(DATA_STORE_NAME).then(data => { - data = data ?? {} as folderStoredData; - data[props.folderId] = { - url: url, - size: size - }; - DataStore.set(DATA_STORE_NAME, data).then(() => { folderData = data; }).catch(e => { - handleUpdateError(e); - }); - } - ) - .catch(e => { - handleUpdateError(e); - }); -} -function RenderPreview({ folderProps, url, size }: {folderProps: folderProp, url: string, size: number}){ - if (!url) return null; - return( -
- -
- ); -} -function ImageModal(folderProps: folderProp){ - const [data, setData]= useState(""); - const [size, setSize] = useState(100); - return( - <> - { - setData(val); - }} - placeholder="https://example.com/image.png" - > - - - {data && <> -
Change the size of the folder icon
- { - setSize(v); - }} - maxValue={200} - minValue={25} - markers={Array.apply(0, Array(176)).map((v, i) => i+25)} - stickToMarkers = {true} - keyboardStep={1} - renderMarker={() => null} - /> - } - -
- -
- - ); -} -function makeContextItem(a: folderProp) { - return ( - { - openModalLazy(async () => { - return props => ( - - -
- Set a New Icon. -
- - - - -
- You might have to hover the folder after setting in order for it to refresh. -
- - ); - }, - { - modalKey: "custom-folder-icon" - }); - }}/> - ); -} -function handleUpdateError(e: any) { +export function handleUpdateError(e: any) { showNotification({ title: "CustomFolderIcons: Error", body: "An error has occurred. Check the console for more info." diff --git a/src/plugins/customFolderIcons/settings.tsx b/src/plugins/customFolderIcons/settings.tsx index 00d041d9d..ab8fec38c 100644 --- a/src/plugins/customFolderIcons/settings.tsx +++ b/src/plugins/customFolderIcons/settings.tsx @@ -7,9 +7,16 @@ import { definePluginSettings } from "@api/Settings"; import { IPluginOptionComponentProps, OptionType } from "@utils/types"; +export interface folderIcon{ + url: string, + size: number, +} +export type folderIconsData = Record; + const settings = definePluginSettings({ folderIcons: { type: OptionType.COMPONENT, + hidden: true, description: "guh", component: props => <> >> 8, + r = (rgbVal & 0xFF0000) >>> 16; + return `rgba(${[r, g, b].join(",")},${alpha})`; +}