From aff1b68d6b480ecf25d03ee11ee7ca2fb04d945c Mon Sep 17 00:00:00 2001 From: Nickyux <30734036+nmsturcke@users.noreply.github.com> Date: Fri, 23 Dec 2022 03:17:19 +0100 Subject: Add a "NEW" Badge for New Plugins (V2)! (#234) Co-authored-by: Ven Co-authored-by: Justice Almanzar Co-authored-by: ArjixWasTaken <53124886+ArjixWasTaken@users.noreply.github.com> --- package.json | 1 + pnpm-lock.yaml | 6 +++ .../PluginSettings/components/BadgeComponent.tsx | 30 +++++++++++++++ src/components/PluginSettings/components/index.ts | 1 + src/components/PluginSettings/index.tsx | 43 ++++++++++++++++++---- src/components/PluginSettings/styles.ts | 13 ++++++- src/globals.d.ts | 2 + 7 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 src/components/PluginSettings/components/BadgeComponent.tsx diff --git a/package.json b/package.json index fe83c6a..35c4aaf 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "devDependencies": { "@types/diff": "^5.0.2", + "@types/lodash": "^4.14.0", "@types/node": "^18.11.9", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bca41ba..02c2ea6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,7 @@ patchedDependencies: specifiers: '@types/diff': ^5.0.2 + '@types/lodash': ^4.14.0 '@types/node': ^18.11.9 '@types/react': ^18.0.25 '@types/react-dom': ^18.0.9 @@ -41,6 +42,7 @@ dependencies: devDependencies: '@types/diff': 5.0.2 + '@types/lodash': 4.14.189 '@types/node': 18.11.9 '@types/react': 18.0.25 '@types/react-dom': 18.0.9 @@ -152,6 +154,10 @@ packages: resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} dev: true + /@types/lodash/4.14.189: + resolution: {integrity: sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==} + dev: true + /@types/node/18.11.9: resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==} dev: true diff --git a/src/components/PluginSettings/components/BadgeComponent.tsx b/src/components/PluginSettings/components/BadgeComponent.tsx new file mode 100644 index 0000000..059376f --- /dev/null +++ b/src/components/PluginSettings/components/BadgeComponent.tsx @@ -0,0 +1,30 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2022 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +import { BadgeStyle } from "@components/PluginSettings/styles"; + +export function Badge({ text, color }): JSX.Element { + return ( +
{text}
+ ); +} diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts index 9e75068..d44fb38 100644 --- a/src/components/PluginSettings/components/index.ts +++ b/src/components/PluginSettings/components/index.ts @@ -29,6 +29,7 @@ export interface ISettingElementProps { onError(hasError: boolean): void; } +export * from "./BadgeComponent"; export * from "./SettingBooleanComponent"; export * from "./SettingCustomComponent"; export * from "./SettingNumericComponent"; diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 5ee9cc9..93bb489 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -16,26 +16,27 @@ * along with this program. If not, see . */ +import * as DataStore from "@api/DataStore"; import { showNotice } from "@api/Notices"; import { Settings, useSettings } from "@api/settings"; import ErrorBoundary from "@components/ErrorBoundary"; import { ErrorCard } from "@components/ErrorCard"; import { Flex } from "@components/Flex"; import { handleComponentFailed } from "@components/handleComponentFailed"; +import { Badge } from "@components/PluginSettings/components"; +import PluginModal from "@components/PluginSettings/PluginModal"; +import * as styles from "@components/PluginSettings/styles"; import { ChangeList } from "@utils/ChangeList"; import Logger from "@utils/Logger"; -import { classes, LazyComponent } from "@utils/misc"; +import { classes, LazyComponent, useAwaiter } from "@utils/misc"; import { openModalLazy } from "@utils/modal"; import { Plugin } from "@utils/types"; import { findByCode, findByPropsLazy } from "@webpack"; import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, TextInput, Toasts, Tooltip } from "@webpack/common"; +import { startDependenciesRecursive, startPlugin, stopPlugin } from "plugins"; import Plugins from "~plugins"; -import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins"; -import PluginModal from "./PluginModal"; -import * as styles from "./styles"; - const logger = new Logger("PluginSettings", "#a6d189"); const InputStyles = findByPropsLazy("inputDefault", "inputWrapper"); @@ -78,9 +79,10 @@ interface PluginCardProps extends React.HTMLProps { plugin: Plugin; disabled: boolean; onRestartNeeded(name: string): void; + isNew?: boolean; } -function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave }: PluginCardProps) { +function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) { const settings = useSettings(); const pluginSettings = settings.plugins[plugin.name]; @@ -162,8 +164,15 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe } hideBorder={true} > - - {plugin.name} + + + {plugin.name}{(isNew) && } +