cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(profile): finished modal design

Browse source
This commit is contained in:
trashtemp 2021-12-21 13:26:47 +01:00
parent 9ab7e5718f
commit 8eabc47915
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 127 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/context/intermediate/popovers/UserProfile.module.scss
View file

@ -86,12 +86,13 @@
.content { .content {
gap: 8px; gap: 8px;
min-height: 240px;
max-height: 240px;
height: 100%; height: 100%;
display: flex; display: flex;
padding: 1em 1.5em; padding: 1em 1.5em;
max-width: 560px; max-width: 560px;
max-height: 240px;
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
@ -100,8 +101,14 @@
.empty { .empty {
display: flex; display: flex;
justify-content: center; gap: 10px;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
opacity: 0.5;
flex-grow: 1;
font-weight: 500;
} }
.category { .category {

225
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -1,4 +1,11 @@
import { Envelope, Edit, UserPlus } from "@styled-icons/boxicons-solid"; import { ListUl } from "@styled-icons/boxicons-regular";
import {
Envelope,
Edit,
UserPlus,
Group,
InfoCircle,
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { Profile, RelationshipStatus } from "revolt-api/types/Users"; import { Profile, RelationshipStatus } from "revolt-api/types/Users";
@ -150,6 +157,7 @@ export const UserProfile = observer(
backgroundImage: backgroundImage:
backgroundURL && backgroundURL &&
`linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`, `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
paddingBottom: "1px",
}}> }}>
<div className={styles.profile}> <div className={styles.profile}>
<UserIcon <UserIcon
@ -255,91 +263,94 @@ export const UserProfile = observer(
</div> </div>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
{tab === "profile" && ( {tab === "profile" &&
<div> (profile?.content ||
{!( badges > 0 ||
profile?.content || flags > 0 ||
badges > 0 || user.bot ? (
flags > 0 || <div>
user.bot {flags & 1 ? (
) && ( /** ! FIXME: i18n this area */
<div className={styles.empty}> <Overline type="error" block>
<Text id="app.special.popovers.user_profile.empty" /> User is suspended
</div> </Overline>
)} ) : undefined}
{flags & 1 ? ( {flags & 2 ? (
/** ! FIXME: i18n this area */ <Overline type="error" block>
<Overline type="error" block> User deleted their account
User is suspended </Overline>
</Overline> ) : undefined}
) : undefined} {flags & 4 ? (
{flags & 2 ? ( <Overline type="error" block>
<Overline type="error" block> User is banned
User deleted their account </Overline>
</Overline> ) : undefined}
) : undefined} {user.bot ? (
{flags & 4 ? ( <>
<Overline type="error" block> <div className={styles.category}>
User is banned bot owner
</Overline> </div>
) : undefined} <div
{user.bot ? ( onClick={() =>
<> user.bot &&
<div className={styles.category}> openScreen({
bot owner id: "profile",
</div> user_id: user.bot.owner,
<div })
onClick={() => }
user.bot && className={styles.entry}
openScreen({ key={user.bot.owner}>
id: "profile", <UserIcon
user_id: user.bot.owner, size={32}
}) target={client.users.get(
}
className={styles.entry}
key={user.bot.owner}>
<UserIcon
size={32}
target={client.users.get(
user.bot.owner,
)}
/>
<span>
<Username
user={client.users.get(
user.bot.owner, user.bot.owner,
)} )}
/> />
</span> <span>
<Username
user={client.users.get(
user.bot.owner,
)}
/>
</span>
</div>
</>
) : undefined}
{badges > 0 && (
<div className={styles.category}>
<Text id="app.special.popovers.user_profile.sub.badges" />
</div> </div>
</> )}
) : undefined} {badges > 0 && (
{badges > 0 && ( <UserBadges
<div className={styles.category}> badges={badges}
<Text id="app.special.popovers.user_profile.sub.badges" /> uid={user._id}
</div> />
)} )}
{badges > 0 && ( {profile?.content && (
<UserBadges badges={badges} uid={user._id} /> <div className={styles.category}>
)} <Text id="app.special.popovers.user_profile.sub.information" />
{profile?.content && ( </div>
<div className={styles.category}> )}
<Text id="app.special.popovers.user_profile.sub.information" /> <Markdown content={profile?.content} />
</div> {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
)} </div>
<Markdown content={profile?.content} /> ) : (
{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/} <div className={styles.empty}>
</div> <InfoCircle size={72} />
)} <Text id="app.special.popovers.user_profile.empty" />
</div>
))}
{tab === "friends" && {tab === "friends" &&
(users ? ( (users ? (
<div className={styles.entries}> users.length === 0 ? (
{users.length === 0 ? ( <div className={styles.empty}>
<div className={styles.empty}> <UserPlus size={72} />
<Text id="app.special.popovers.user_profile.no_users" /> <Text id="app.special.popovers.user_profile.no_users" />
</div> </div>
) : ( ) : (
users.map( <div className={styles.entries}>
{users.map(
(x) => (x) =>
x && ( x && (
<div <div
@ -358,20 +369,21 @@ export const UserProfile = observer(
<span>{x.username}</span> <span>{x.username}</span>
</div> </div>
), ),
) )}
)} </div>
</div> )
) : ( ) : (
<Preloader type="ring" /> <Preloader type="ring" />
))} ))}
{tab === "groups" && ( {tab === "groups" &&
<div className={styles.entries}> (mutualGroups.length === 0 ? (
{mutualGroups.length === 0 ? ( <div className={styles.empty}>
<div className={styles.empty}> <Group size="72" />
<Text id="app.special.popovers.user_profile.no_groups" /> <Text id="app.special.popovers.user_profile.no_groups" />
</div> </div>
) : ( ) : (
mutualGroups.map( <div className={styles.entries}>
{mutualGroups.map(
(x) => (x) =>
x?.channel_type === "Group" && ( x?.channel_type === "Group" && (
<Link to={`/channel/${x._id}`}> <Link to={`/channel/${x._id}`}>
@ -386,18 +398,18 @@ export const UserProfile = observer(
</div> </div>
</Link> </Link>
), ),
) )}
)} </div>
</div> ))}
)} {tab === "servers" &&
{tab === "servers" && ( (!mutualServers || mutualServers.length === 0 ? (
<div className={styles.entries}> <div className={styles.empty}>
{!mutualServers || mutualServers.length === 0 ? ( <ListUl size="72" />
<div className={styles.empty}> <Text id="app.special.popovers.user_profile.no_servers" />
<Text id="app.special.popovers.user_profile.no_servers" /> </div>
</div> ) : (
) : ( <div className={styles.entries}>
mutualServers.map( {mutualServers.map(
(x) => (x) =>
x && ( x && (
<Link to={`/server/${x._id}`}> <Link to={`/server/${x._id}`}>
@ -412,10 +424,9 @@ export const UserProfile = observer(
</div> </div>
</Link> </Link>
), ),
) )}
)} </div>
</div> ))}
)}
</div> </div>
</Modal> </Modal>
); );