nicer modal
This commit is contained in:
parent
49bc6b8fd6
commit
3fd2fc1d61
@ -7,16 +7,22 @@
|
|||||||
import "./styles.css";
|
import "./styles.css";
|
||||||
|
|
||||||
import { classNameFactory } from "@api/Styles";
|
import { classNameFactory } from "@api/Styles";
|
||||||
|
import { openImageModal } from "@utils/discord";
|
||||||
|
import { classes } from "@utils/misc";
|
||||||
import { ModalRoot, ModalSize, openModal } from "@utils/modal";
|
import { ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||||
import { useAwaiter } from "@utils/react";
|
import { useAwaiter } from "@utils/react";
|
||||||
|
import { findByPropsLazy } from "@webpack";
|
||||||
import { Forms, Parser, SnowflakeUtils, TabBar, UserUtils, useState } from "@webpack/common";
|
import { Forms, Parser, SnowflakeUtils, TabBar, UserUtils, useState } from "@webpack/common";
|
||||||
import { Guild } from "discord-types/general";
|
import { Guild } from "discord-types/general";
|
||||||
|
|
||||||
|
const GuildIconStore = findByPropsLazy("getGuildBannerURL");
|
||||||
|
const IconClasses = findByPropsLazy("icon", "acronym", "childWrapper");
|
||||||
|
|
||||||
const cl = classNameFactory("vc-gp-");
|
const cl = classNameFactory("vc-gp-");
|
||||||
|
|
||||||
export function openGuildProfileModal(guild: Guild) {
|
export function openGuildProfileModal(guild: Guild) {
|
||||||
openModal(props =>
|
openModal(props =>
|
||||||
<ModalRoot {...props} size={ModalSize.LARGE}>
|
<ModalRoot {...props} size={ModalSize.MEDIUM}>
|
||||||
<GuildProfileModal guild={guild} />
|
<GuildProfileModal guild={guild} />
|
||||||
</ModalRoot>
|
</ModalRoot>
|
||||||
);
|
);
|
||||||
@ -48,8 +54,45 @@ function GuildProfileModal({ guild }: GuildProps) {
|
|||||||
|
|
||||||
const Tab = Tabs[currentTab].component;
|
const Tab = Tabs[currentTab].component;
|
||||||
|
|
||||||
|
const bannerUrl = guild.banner && GuildIconStore.getGuildBannerURL({
|
||||||
|
id: guild.id,
|
||||||
|
banner: guild.banner
|
||||||
|
}, true).replace(/\?size=\d+$/, "?size=1024");
|
||||||
|
|
||||||
|
const iconUrl = guild.icon && GuildIconStore.getGuildIconURL({
|
||||||
|
id: guild.id,
|
||||||
|
icon: guild.icon,
|
||||||
|
canAnimate: true,
|
||||||
|
size: 512
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cl("root")}>
|
<div className={cl("root")}>
|
||||||
|
{bannerUrl && currentTab === "ServerInfo" && (
|
||||||
|
<img
|
||||||
|
className={cl("banner")}
|
||||||
|
src={bannerUrl}
|
||||||
|
alt=""
|
||||||
|
onClick={() => openImageModal(bannerUrl)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={cl("header")}>
|
||||||
|
{guild.icon
|
||||||
|
? <img
|
||||||
|
src={iconUrl}
|
||||||
|
alt=""
|
||||||
|
onClick={() => openImageModal(iconUrl)}
|
||||||
|
/>
|
||||||
|
: <div aria-hidden className={classes(IconClasses.childWrapper, IconClasses.acronym)}>{guild.acronym}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className={cl("name-and-description")}>
|
||||||
|
<Forms.FormTitle tag="h5" className={cl("name")}>{guild.name}</Forms.FormTitle>
|
||||||
|
{guild.description && <Forms.FormText>{guild.description}</Forms.FormText>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<TabBar
|
<TabBar
|
||||||
type="top"
|
type="top"
|
||||||
look="brand"
|
look="brand"
|
||||||
@ -82,6 +125,7 @@ function renderTimestampFromId(id: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ServerInfoTab({ guild }: GuildProps) {
|
function ServerInfoTab({ guild }: GuildProps) {
|
||||||
|
// FIXME: This doesn't rerender the mention correctly
|
||||||
useAwaiter(() => UserUtils.fetchUser(guild.ownerId), {
|
useAwaiter(() => UserUtils.fetchUser(guild.ownerId), {
|
||||||
deps: [guild.ownerId],
|
deps: [guild.ownerId],
|
||||||
fallbackValue: null
|
fallbackValue: null
|
||||||
@ -91,9 +135,11 @@ function ServerInfoTab({ guild }: GuildProps) {
|
|||||||
"Server Owner": Parser.parse(`<@${guild.ownerId}>`),
|
"Server Owner": Parser.parse(`<@${guild.ownerId}>`),
|
||||||
"Created At": renderTimestampFromId(guild.id),
|
"Created At": renderTimestampFromId(guild.id),
|
||||||
"Joined At": dateFormat.format(guild.joinedAt),
|
"Joined At": dateFormat.format(guild.joinedAt),
|
||||||
"Vanity Link": guild.vanityURLCode ? Parser.parse(`https://discord.gg/${guild.vanityURLCode}`) : "-",
|
"Vanity Link": guild.vanityURLCode ? `discord.gg/${guild.vanityURLCode}` : "-",
|
||||||
"Preferred Locale": guild.preferredLocale || "-",
|
"Preferred Locale": guild.preferredLocale || "-",
|
||||||
"Verification Level": ["Low", "Medium", "High", "Highest"][guild.verificationLevel] || "?"
|
"Verification Level": ["None", "Low", "Medium", "High", "Highest"][guild.verificationLevel] || "?",
|
||||||
|
"Nitro Boosts": guild.premiumSubscriberCount ?? 0,
|
||||||
|
"Nitro Boost Level": guild.premiumTier ?? 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -1,5 +1,35 @@
|
|||||||
.vc-gp-root {
|
.vc-gp-root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-gp-banner {
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-gp-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-gp-header img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-gp-name-and-description {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-gp-name {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vc-gp-tab-bar {
|
.vc-gp-tab-bar {
|
||||||
|
Loading…
Reference in New Issue
Block a user