StatusPresets Use A Better Close Icon

This commit is contained in:
thororen1234 2025-02-02 11:25:25 -05:00
parent b8fa19310d
commit 49647cf6af
2 changed files with 44 additions and 23 deletions

View file

@ -47,7 +47,7 @@ interface Emoji {
name: string; name: string;
} }
const CircleXIcon = findComponentByCodeLazy("22Zm4.7-15.7a1"); const PlusSmallIcon = findComponentByCodeLazy("0-2h-5V6Z");
interface DiscordStatus { interface DiscordStatus {
emojiInfo: Emoji | null; emojiInfo: Emoji | null;
@ -91,11 +91,11 @@ function setStatus(status: DiscordStatus) {
}); });
} }
const ClearStatusButton = () => <Clickable className={StatusStyles.clearCustomStatusHint} onClick={e => { e.stopPropagation(); CustomStatusSettings?.updateSetting(null); }}><CircleXIcon /></Clickable>; const ClearStatusButton = () => <Clickable className={StatusStyles.clearCustomStatusHint} onClick={e => { e.stopPropagation(); CustomStatusSettings?.updateSetting(null); }}><PlusSmallIcon className={"vc-sp-icon"} /></Clickable>;
function StatusIcon({ isHovering, status }: { isHovering: boolean; status: DiscordStatus; }) { function StatusIcon({ isHovering, status }: { isHovering: boolean; status: DiscordStatus; }) {
return <div className={StatusStyles.status}>{isHovering ? return <div className={StatusStyles.status}>{isHovering ?
<CircleXIcon /> <PlusSmallIcon className={"vc-sp-icon"} />
: (status.emojiInfo != null ? <EmojiComponent emoji={status.emojiInfo} animate={false} hideTooltip={false} /> : <div className={StatusStyles.customEmojiPlaceholder} />)}</div>; : (status.emojiInfo != null ? <EmojiComponent emoji={status.emojiInfo} animate={false} hideTooltip={false} /> : <div className={StatusStyles.customEmojiPlaceholder} />)}</div>;
} }
@ -173,15 +173,21 @@ export default definePlugin({
], ],
render() { render() {
const status = CustomStatusSettings.getSetting(); const status = CustomStatusSettings.getSetting();
return <ErrorBoundary> return (
<ErrorBoundary>
<div className={StatusStyles.menuDivider} /> <div className={StatusStyles.menuDivider} />
{status == null ? {status == null ?
<PMenu <PMenu
id="sp-custom/presets-status" id="sp-custom/presets-status"
action="PRESS_SET_STATUS" action="PRESS_SET_STATUS"
onClick={openCustomStatusModalLazy} onClick={openCustomStatusModalLazy}
icon={() => <div className={StatusStyles.customEmojiPlaceholder} />} icon={
label="Set Custom Status" renderSubmenu={StatusSubMenuComponent} () => <div
className={StatusStyles.customEmojiPlaceholder}
/>
}
label="Set Custom Status"
renderSubmenu={StatusSubMenuComponent}
/> />
: :
<PMenu <PMenu
@ -189,10 +195,20 @@ export default definePlugin({
action="PRESS_EDIT_CUSTOM_STATUS" action="PRESS_EDIT_CUSTOM_STATUS"
onClick={openCustomStatusModalLazy} onClick={openCustomStatusModalLazy}
hint={<ClearStatusButton />} hint={<ClearStatusButton />}
icon={() => status.emoji != null ? <EmojiComponent emoji={status.emoji} animate={false} hideTooltip={false} /> : null} icon={
label="Edit Custom Status" renderSubmenu={StatusSubMenuComponent} () => status.emoji != null ? (
<EmojiComponent
emoji={status.emoji}
animate={false}
hideTooltip={false}
/>
) : null
}
label="Edit Custom Status"
renderSubmenu={StatusSubMenuComponent}
/>} />}
</ErrorBoundary>; </ErrorBoundary>
);
}, },
renderRememberButton(statue: DiscordStatus) { renderRememberButton(statue: DiscordStatus) {
return <Button return <Button

View file

@ -6,3 +6,8 @@
background-color: var(--menu-item-default-hover-bg) !important; background-color: var(--menu-item-default-hover-bg) !important;
color: var(--white) !important; color: var(--white) !important;
} }
.vc-sp-icon {
transform: rotate(45deg);
margin-top: 4px;
}