HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions 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
2 changed files with 127 additions and 109 deletions
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 {

69
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,18 +263,12 @@ export const UserProfile = observer(
</div> </div>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
{tab === "profile" && ( {tab === "profile" &&
<div> (profile?.content ||
{!(
profile?.content ||
badges > 0 || badges > 0 ||
flags > 0 || flags > 0 ||
user.bot user.bot ? (
) && ( <div>
<div className={styles.empty}>
<Text id="app.special.popovers.user_profile.empty" />
</div>
)}
{flags & 1 ? ( {flags & 1 ? (
/** ! FIXME: i18n this area */ /** ! FIXME: i18n this area */
<Overline type="error" block> <Overline type="error" block>
@@ -320,7 +322,10 @@ export const UserProfile = observer(
</div> </div>
)} )}
{badges > 0 && ( {badges > 0 && (
<UserBadges badges={badges} uid={user._id} /> <UserBadges
badges={badges}
uid={user._id}
/>
)} )}
{profile?.content && ( {profile?.content && (
<div className={styles.category}> <div className={styles.category}>
@@ -330,16 +335,22 @@ export const UserProfile = observer(
<Markdown content={profile?.content} /> <Markdown content={profile?.content} />
{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/} {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
</div> </div>
)} ) : (
<div className={styles.empty}>
<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" &&
<div className={styles.entries}> (!mutualServers || mutualServers.length === 0 ? (
{!mutualServers || mutualServers.length === 0 ? (
<div className={styles.empty}> <div className={styles.empty}>
<ListUl size="72" />
<Text id="app.special.popovers.user_profile.no_servers" /> <Text id="app.special.popovers.user_profile.no_servers" />
</div> </div>
) : ( ) : (
mutualServers.map( <div className={styles.entries}>
{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>
); );