mirror of
https://github.com/Equicord/Equicord.git
synced 2025-02-21 15:48:52 -05:00
feat(ServerListIndicators): toggle compact and optimization (#27)
This commit is contained in:
verysillycat
parent
ec1a78f42f
commit
946c9bddf3
2 changed files with 83 additions and 78 deletions
|
|
@ -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 (
|
||||
<div id="vc-friendcount">
|
||||
<svg
|
||||
id="vc-friendcount-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
|
||||
<path
|
||||
{!settings.store.useCompact &&
|
||||
<svg
|
||||
id="vc-friendcount-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
fill="currentColor"
|
||||
d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z">
|
||||
</path></svg>
|
||||
<span id="vc-friendcount-text">
|
||||
{onlineFriends}
|
||||
</span>
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z">
|
||||
</path>
|
||||
</svg>
|
||||
}
|
||||
<span id="vc-friendcount-text">{onlineFriends}</span>
|
||||
{!!settings.store.useCompact &&
|
||||
<span id="vc-friendcount-text-compact">Friends</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -67,7 +72,7 @@ function ServersIndicator() {
|
|||
|
||||
return (
|
||||
<div id="vc-guildcount">
|
||||
<div id="vc-guildcount-dot">
|
||||
{!settings.store.useCompact &&
|
||||
<svg
|
||||
id="vc-guildcount-icon"
|
||||
aria-hidden="true"
|
||||
|
|
@ -80,11 +85,13 @@ function ServersIndicator() {
|
|||
<path
|
||||
fill="currentColor"
|
||||
d="M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z">
|
||||
</path></svg>
|
||||
</div>
|
||||
<span id="vc-guildcount-text">
|
||||
{guildCount}
|
||||
</span>
|
||||
</path>
|
||||
</svg>
|
||||
}
|
||||
<span id="vc-guildcount-text">{guildCount}</span>
|
||||
{!!settings.store.useCompact &&
|
||||
<span id="vc-guildcount-text-compact">Servers</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 <ErrorBoundary noop>
|
||||
<div id="vc-indicators-container">
|
||||
<div id={cl("-container")}>
|
||||
<Tooltip text={text} position="right">
|
||||
{({ onMouseEnter, onMouseLeave }) => (
|
||||
<div
|
||||
id="vc-serverlist-indicators"
|
||||
id={cl("-indicator-items")}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}>
|
||||
{!!(mode & IndicatorType.FRIEND) && <FriendsIndicator />}
|
||||
|
|
@ -159,7 +183,6 @@ export default definePlugin({
|
|||
GUILD_DELETE: handleGuildUpdate,
|
||||
},
|
||||
|
||||
|
||||
start() {
|
||||
addServerListElement(ServerListRenderPosition.Above, this.renderIndicator);
|
||||
handlePresenceUpdate();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue