From 4281b7a94a97b2b9d930116779f37f3e293b7b64 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 16 May 2024 15:21:52 +1200 Subject: [PATCH] ShowTimeoutDuration: Simplify tooltip style, allow changing style without reload (#2441) --- src/plugins/showTimeoutDuration/index.tsx | 34 +++++++--------------- src/plugins/showTimeoutDuration/styles.css | 4 +++ 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/src/plugins/showTimeoutDuration/index.tsx b/src/plugins/showTimeoutDuration/index.tsx index f57ee0fc9..bfe806802 100644 --- a/src/plugins/showTimeoutDuration/index.tsx +++ b/src/plugins/showTimeoutDuration/index.tsx @@ -9,11 +9,11 @@ import "./styles.css"; import { definePluginSettings } from "@api/Settings"; import ErrorBoundary from "@components/ErrorBoundary"; import { Devs } from "@utils/constants"; -import { Margins } from "@utils/margins"; import definePlugin, { OptionType } from "@utils/types"; import { findComponentLazy } from "@webpack"; -import { ChannelStore, Forms, GuildMemberStore, i18n, Text, Tooltip } from "@webpack/common"; +import { ChannelStore, GuildMemberStore, i18n, Text, Tooltip } from "@webpack/common"; import { Message } from "discord-types/general"; +import { FunctionComponent, ReactNode } from "react"; const CountDown = findComponentLazy(m => m.prototype?.render?.toString().includes(".MAX_AGE_NEVER")); @@ -26,7 +26,6 @@ const settings = definePluginSettings({ displayStyle: { description: "How to display the timeout duration", type: OptionType.SELECT, - restartNeeded: true, options: [ { label: "In the Tooltip", value: DisplayStyle.Tooltip }, { label: "Next to the timeout icon", value: DisplayStyle.Inline, default: true }, @@ -60,7 +59,7 @@ function renderTimeout(message: Message, inline: boolean) { export default definePlugin({ name: "ShowTimeoutDuration", description: "Shows how much longer a user's timeout will last, either in the timeout icon tooltip or next to it", - authors: [Devs.Ven], + authors: [Devs.Ven, Devs.Sqaaakoi], settings, @@ -70,33 +69,20 @@ export default definePlugin({ replacement: [ { match: /(\i)\.Tooltip,{(text:.{0,30}\.Messages\.GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY)/, - get replace() { - if (settings.store.displayStyle === DisplayStyle.Inline) - return "$self.TooltipWrapper,{vcProps:arguments[0],$2"; - - return "$1.Tooltip,{text:$self.renderTimeoutDuration(arguments[0])"; - } + replace: "$self.TooltipWrapper,{message:arguments[0].message,$2" } ] } ], - renderTimeoutDuration: ErrorBoundary.wrap(({ message }: { message: Message; }) => { - return ( - <> - {i18n.Messages.GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY} - - {renderTimeout(message, false)} - - - ); - }, { noop: true }), - - TooltipWrapper: ErrorBoundary.wrap(({ vcProps: { message }, ...tooltipProps }: { vcProps: { message: Message; }; }) => { + TooltipWrapper: ErrorBoundary.wrap(({ message, children, text }: { message: Message; children: FunctionComponent; text: ReactNode; }) => { + if (settings.store.displayStyle === DisplayStyle.Tooltip) return ; return (
- - + {renderTimeout(message, true)} timeout remaining diff --git a/src/plugins/showTimeoutDuration/styles.css b/src/plugins/showTimeoutDuration/styles.css index 70a826e10..a6f830c38 100644 --- a/src/plugins/showTimeoutDuration/styles.css +++ b/src/plugins/showTimeoutDuration/styles.css @@ -2,3 +2,7 @@ display: flex; align-items: center; } + +.vc-std-wrapper [class*="communicationDisabled"] { + margin-right: 0; +}