ShowTimeoutDuration: Simplify tooltip style, allow changing style without reload (#2441)
This commit is contained in:
parent
09f894468a
commit
4281b7a94a
|
@ -9,11 +9,11 @@ import "./styles.css";
|
||||||
import { definePluginSettings } from "@api/Settings";
|
import { definePluginSettings } from "@api/Settings";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
import { Margins } from "@utils/margins";
|
|
||||||
import definePlugin, { OptionType } from "@utils/types";
|
import definePlugin, { OptionType } from "@utils/types";
|
||||||
import { findComponentLazy } from "@webpack";
|
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 { Message } from "discord-types/general";
|
||||||
|
import { FunctionComponent, ReactNode } from "react";
|
||||||
|
|
||||||
const CountDown = findComponentLazy(m => m.prototype?.render?.toString().includes(".MAX_AGE_NEVER"));
|
const CountDown = findComponentLazy(m => m.prototype?.render?.toString().includes(".MAX_AGE_NEVER"));
|
||||||
|
|
||||||
|
@ -26,7 +26,6 @@ const settings = definePluginSettings({
|
||||||
displayStyle: {
|
displayStyle: {
|
||||||
description: "How to display the timeout duration",
|
description: "How to display the timeout duration",
|
||||||
type: OptionType.SELECT,
|
type: OptionType.SELECT,
|
||||||
restartNeeded: true,
|
|
||||||
options: [
|
options: [
|
||||||
{ label: "In the Tooltip", value: DisplayStyle.Tooltip },
|
{ label: "In the Tooltip", value: DisplayStyle.Tooltip },
|
||||||
{ label: "Next to the timeout icon", value: DisplayStyle.Inline, default: true },
|
{ label: "Next to the timeout icon", value: DisplayStyle.Inline, default: true },
|
||||||
|
@ -60,7 +59,7 @@ function renderTimeout(message: Message, inline: boolean) {
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
name: "ShowTimeoutDuration",
|
name: "ShowTimeoutDuration",
|
||||||
description: "Shows how much longer a user's timeout will last, either in the timeout icon tooltip or next to it",
|
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,
|
settings,
|
||||||
|
|
||||||
|
@ -70,33 +69,20 @@ export default definePlugin({
|
||||||
replacement: [
|
replacement: [
|
||||||
{
|
{
|
||||||
match: /(\i)\.Tooltip,{(text:.{0,30}\.Messages\.GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY)/,
|
match: /(\i)\.Tooltip,{(text:.{0,30}\.Messages\.GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY)/,
|
||||||
get replace() {
|
replace: "$self.TooltipWrapper,{message:arguments[0].message,$2"
|
||||||
if (settings.store.displayStyle === DisplayStyle.Inline)
|
|
||||||
return "$self.TooltipWrapper,{vcProps:arguments[0],$2";
|
|
||||||
|
|
||||||
return "$1.Tooltip,{text:$self.renderTimeoutDuration(arguments[0])";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
renderTimeoutDuration: ErrorBoundary.wrap(({ message }: { message: Message; }) => {
|
TooltipWrapper: ErrorBoundary.wrap(({ message, children, text }: { message: Message; children: FunctionComponent<any>; text: ReactNode; }) => {
|
||||||
return (
|
if (settings.store.displayStyle === DisplayStyle.Tooltip) return <Tooltip
|
||||||
<>
|
children={children}
|
||||||
<Forms.FormText>{i18n.Messages.GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}</Forms.FormText>
|
text={renderTimeout(message, false)}
|
||||||
<Forms.FormText className={Margins.top8}>
|
/>;
|
||||||
{renderTimeout(message, false)}
|
|
||||||
</Forms.FormText>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}, { noop: true }),
|
|
||||||
|
|
||||||
TooltipWrapper: ErrorBoundary.wrap(({ vcProps: { message }, ...tooltipProps }: { vcProps: { message: Message; }; }) => {
|
|
||||||
return (
|
return (
|
||||||
<div className="vc-std-wrapper">
|
<div className="vc-std-wrapper">
|
||||||
<Tooltip {...tooltipProps as any} />
|
<Tooltip text={text} children={children} />
|
||||||
|
|
||||||
<Text variant="text-md/normal" color="status-danger">
|
<Text variant="text-md/normal" color="status-danger">
|
||||||
{renderTimeout(message, true)} timeout remaining
|
{renderTimeout(message, true)} timeout remaining
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -2,3 +2,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vc-std-wrapper [class*="communicationDisabled"] {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue