dorkbutt/vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

MemberCount: use circle svg instead of css hacks (#3653)

Browse source 
fixes some deformations
This commit is contained in:
thororen 2025-09-08 20:03:12 -04:00 • committed by GitHub
parent c38aac23fd
commit 0f29eab3ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 31 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/plugins/memberCount/CircleIcon.tsx Normal file
View file

@ -0,0 +1,17 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2025 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
export function CircleIcon({ className }: { className?: string; }) {
return (
<svg viewBox="0 0 24 24" className={className}>
<circle
cx="12"
cy="12"
r="8"
/>
</svg>
);
}

5
src/plugins/memberCount/MemberCount.tsx
View file

@ -9,6 +9,7 @@ import { isObjectEmpty } from "@utils/misc";
import { ChannelStore, PermissionsBits, PermissionStore, SelectedChannelStore, Tooltip, useEffect, useStateFromStores, VoiceStateStore } from "@webpack/common"; import { ChannelStore, PermissionsBits, PermissionStore, SelectedChannelStore, Tooltip, useEffect, useStateFromStores, VoiceStateStore } from "@webpack/common";
import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat, settings, ThreadMemberListStore } from "."; import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat, settings, ThreadMemberListStore } from ".";
import { CircleIcon } from "./CircleIcon";
import { OnlineMemberCountStore } from "./OnlineMemberCountStore"; import { OnlineMemberCountStore } from "./OnlineMemberCountStore";
import { VoiceIcon } from "./VoiceIcon"; import { VoiceIcon } from "./VoiceIcon";
@ -80,7 +81,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
<Tooltip text={`${formattedOnlineCount} online in this channel`} position="bottom"> <Tooltip text={`${formattedOnlineCount} online in this channel`} position="bottom">
{props => ( {props => (
<div {...props} className={cl("container")}> <div {...props} className={cl("container")}>
<span className={cl("online-dot")} /> <CircleIcon className={cl("online-count")} />
<span className={cl("online")}>{formattedOnlineCount}</span> <span className={cl("online")}>{formattedOnlineCount}</span>
</div> </div>
)} )}
@ -88,7 +89,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
<Tooltip text={`${numberFormat(totalCount)} total server members`} position="bottom"> <Tooltip text={`${numberFormat(totalCount)} total server members`} position="bottom">
{props => ( {props => (
<div {...props} className={cl("container")}> <div {...props} className={cl("container")}>
<span className={cl("total-dot")} /> <CircleIcon className={cl("total-count")} />
<span className={cl("total")}>{numberFormat(totalCount)}</span> <span className={cl("total")}>{numberFormat(totalCount)}</span>
</div> </div>
)} )}

1
src/plugins/memberCount/index.tsx
View file

@ -36,7 +36,6 @@ export const ThreadMemberListStore = findStoreLazy("ThreadMemberListStore") as F
getMemberListSections(channelId?: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; }; getMemberListSections(channelId?: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; };
}; };
export const settings = definePluginSettings({ export const settings = definePluginSettings({
toolTip: { toolTip: {
type: OptionType.BOOLEAN, type: OptionType.BOOLEAN,

23
src/plugins/memberCount/style.css
View file

@ -18,6 +18,7 @@
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 1em; margin-top: 1em;
padding-inline: 1em; padding-inline: 1em;
line-height: 1.2em;
} }
.vc-membercount-container { .vc-membercount-container {
@ -38,20 +39,18 @@
color: var(--color-voice); color: var(--color-voice);
} }
.vc-membercount-online-dot { .vc-membercount-online-count {
background-color: var(--color-online); fill: var(--status-online);
display: inline-block; width: 18px;
width: 12px; height: 18px;
height: 12px;
border-radius: 50%;
} }
.vc-membercount-total-dot { .vc-membercount-total-count {
display: inline-block; fill: none;
width: 6px; stroke: var(--status-offline);
height: 6px; stroke-width: 4px;
border-radius: 50%; width: 15px;
border: 3px solid var(--color-total); height: 15px;
} }
.vc-membercount-voice-icon { .vc-membercount-voice-icon {