diff --git a/src/plugins/serverListIndicators/index.tsx b/src/plugins/serverListIndicators/index.tsx index d5044ac4..66fb42c4 100644 --- a/src/plugins/serverListIndicators/index.tsx +++ b/src/plugins/serverListIndicators/index.tsx @@ -19,7 +19,8 @@ import "./styles.css"; import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList"; -import { Settings } from "@api/Settings"; +import { definePluginSettings } from "@api/Settings"; +import { classNameFactory } from "@api/Styles"; import ErrorBoundary from "@components/ErrorBoundary"; import { Devs, EquicordDevs } from "@utils/constants"; import { useForceUpdater } from "@utils/react"; @@ -42,22 +43,26 @@ function FriendsIndicator() { return (
- - - - - - {onlineFriends} - + viewBox="0 0 24 24"> + + + + + } + {onlineFriends} + {!!settings.store.useCompact && + Friends + }
); } @@ -67,7 +72,7 @@ function ServersIndicator() { return (
-
+ {!settings.store.useCompact && -
- - {guildCount} - + + + } + {guildCount} + {!!settings.store.useCompact && + Servers + }
); } @@ -107,41 +114,58 @@ function handleGuildUpdate() { forceUpdateGuildCount?.(); } +export const settings = definePluginSettings({ + mode: { + description: "Mode", + type: OptionType.SELECT, + options: [ + { label: "Only online friend count", value: IndicatorType.FRIEND, default: true }, + { label: "Only server count", value: IndicatorType.SERVER }, + { label: "Both server and online friend counts", value: IndicatorType.BOTH }, + ], + restartNeeded: true // Restart needed just to force update + }, + useCompact: { + description: "Makes the indicator appear with only text", + type: OptionType.BOOLEAN, + default: false, + restartNeeded: true // Restart needed just to force update + } +}); + export default definePlugin({ name: "ServerListIndicators", description: "Add online friend count or server count in the server list", authors: [Devs.dzshn, EquicordDevs.Panniku], dependencies: ["ServerListAPI"], - - options: { - mode: { - description: "mode", - type: OptionType.SELECT, - options: [ - { label: "Only online friend count", value: IndicatorType.FRIEND, default: true }, - { label: "Only server count", value: IndicatorType.SERVER }, - { label: "Both server and online friend counts", value: IndicatorType.BOTH }, - ] - } - }, + settings, renderIndicator: () => { - const { mode } = Settings.plugins.ServerListIndicators; + const { mode, useCompact } = settings.store; let text; - if (!!(mode & IndicatorType.FRIEND) && !!(mode & IndicatorType.SERVER)) { - text = `${onlineFriends} Friends, ${guildCount} Servers`; - } else if (!!(mode & IndicatorType.FRIEND)) { - text = `${onlineFriends} Friends`; - } else if (!!(mode & IndicatorType.SERVER)) { - text = `${guildCount} Servers`; + // switch is simply better + switch (mode) { + case IndicatorType.BOTH: + text = `${onlineFriends} Friends, ${guildCount} Servers`; + break; + case IndicatorType.FRIEND: + text = `${onlineFriends} Friends`; + break; + case IndicatorType.SERVER: + text = `${onlineFriends} Friends, ${guildCount} Servers`; + break; } + let cl; + if (useCompact) cl = classNameFactory("vc-indicators-compact"); + else cl = classNameFactory("vc-indicators"); + return -
+
{({ onMouseEnter, onMouseLeave }) => (
{!!(mode & IndicatorType.FRIEND) && } @@ -159,7 +183,6 @@ export default definePlugin({ GUILD_DELETE: handleGuildUpdate, }, - start() { addServerListElement(ServerListRenderPosition.Above, this.renderIndicator); handlePresenceUpdate(); diff --git a/src/plugins/serverListIndicators/styles.css b/src/plugins/serverListIndicators/styles.css index 1fb95a0b..6fe2ef3b 100644 --- a/src/plugins/serverListIndicators/styles.css +++ b/src/plugins/serverListIndicators/styles.css @@ -1,4 +1,5 @@ -#vc-indicators-container { +#vc-indicators-container, +#vc-indicators-compact-container { width: 100%; display: flex; align-items: center; @@ -6,7 +7,7 @@ margin-bottom: 8px; } -#vc-serverlist-indicators { +#vc-indicators-indicator-items { display: flex; flex-direction: column; align-items: center; @@ -18,38 +19,23 @@ transition: border-radius 0.15s ease-out, background-color 0.15s ease-out; } -#vc-serverlist-indicators:hover { +#vc-indicators-compact-indicator-items { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#vc-indicators-indicator-items:hover { border-radius: 34%; background-color: var(--brand-500); } -#vc-serverlist-indicators::before { - content: ""; - display: block; - position: absolute; - /* stylelint-disable-next-line length-zero-no-unit */ - width: 0px; - /* stylelint-disable-next-line length-zero-no-unit */ - height: 0px; - /* stylelint-disable-next-line length-zero-no-unit */ - left: 0px; - border-radius: 0 4px 4px 0; - background-color: var(--header-primary); - opacity: 0; - transition: width 0.15s ease-out, height 0.15s ease-out, - opacity 0.15s ease-out; -} - -#vc-serverlist-indicators:hover::before { - width: 4px; - height: 20px; - opacity: 1; -} - #vc-friendcount, #vc-guildcount { display: flex; align-items: center; + justify-content: center; font-size: 12px; font-weight: 600; width: 100%; @@ -58,17 +44,13 @@ #vc-friendcount-icon, #vc-guildcount-icon { - padding-left: 8px; padding-right: 2px; width: 14px; height: 14px; } -#vc-guildcount-icon { - padding-top: 2px; -} - -#vc-friendcount-text, -#vc-guildcount-text { - width: auto; +#vc-indicators-compact-container #vc-friendcount-text-compact, +#vc-indicators-compact-container #vc-guildcount-text-compact { + display: block; + padding-left: 4px; }