external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: conditional to show user content section based on visibility

Browse source
This commit is contained in:
Zamitto 2024-08-14 19:12:26 -03:00
parent 6806787ca0
commit 7e6b9ca825
4 changed files with 173 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/locales/en/translation.json
View file

@ -266,6 +266,7 @@
"public": "Public", "public": "Public",
"private": "Private", "private": "Private",
"friends_only": "Friends only", "friends_only": "Friends only",
"privacy": "Privacy" "privacy": "Privacy",
"blocked_users": "Blocked users"
} }
} }

3
src/locales/pt/translation.json
View file

@ -266,6 +266,7 @@
"privacy": "Privacidade", "privacy": "Privacidade",
"private": "Privado", "private": "Privado",
"friends_only": "Apenas amigos", "friends_only": "Apenas amigos",
"public": "Público" "public": "Público",
"blocked_users": "Usuários bloqueados"
} }
} }

324
src/renderer/src/pages/user/user-content.tsx
View file

@ -160,6 +160,11 @@ export function UserContent({
}; };
const showFriends = isMe || userProfile.totalFriends > 0; const showFriends = isMe || userProfile.totalFriends > 0;
const showProfileContent =
isMe ||
userProfile.profileVisibility === "PUBLIC" ||
(userProfile.relation?.status === "ACCEPTED" &&
userProfile.profileVisibility === "FRIENDS");
const getProfileActions = () => { const getProfileActions = () => {
if (isMe) { if (isMe) {
@ -362,125 +367,73 @@ export function UserContent({
</div> </div>
</section> </section>
<div className={styles.profileContent}> {showProfileContent && (
<div className={styles.profileGameSection}> <div className={styles.profileContent}>
<h2>{t("activity")}</h2>
{!userProfile.recentGames.length ? (
<div className={styles.noDownloads}>
<div className={styles.telescopeIcon}>
<TelescopeIcon size={24} />
</div>
<h2>{t("no_recent_activity_title")}</h2>
{isMe && (
<p style={{ fontFamily: "Fira Sans" }}>
{t("no_recent_activity_description")}
</p>
)}
</div>
) : (
<div
style={{
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT * 2}px`,
}}
>
{userProfile.recentGames.map((game) => (
<button
key={game.objectID}
className={cn(styles.feedItem, styles.profileContentBox)}
onClick={() => handleGameClick(game)}
>
<img
className={styles.feedGameIcon}
src={game.cover}
alt={game.title}
/>
<div className={styles.gameInformation}>
<h4>{game.title}</h4>
<small>
{t("last_time_played", {
period: formatDistance(
game.lastTimePlayed!,
new Date(),
{
addSuffix: true,
}
),
})}
</small>
</div>
</button>
))}
</div>
)}
</div>
<div className={styles.contentSidebar}>
<div className={styles.profileGameSection}> <div className={styles.profileGameSection}>
<div <h2>{t("activity")}</h2>
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: `${SPACING_UNIT * 2}px`,
}}
>
<h2>{t("library")}</h2>
{!userProfile.recentGames.length ? (
<div className={styles.noDownloads}>
<div className={styles.telescopeIcon}>
<TelescopeIcon size={24} />
</div>
<h2>{t("no_recent_activity_title")}</h2>
{isMe && (
<p style={{ fontFamily: "Fira Sans" }}>
{t("no_recent_activity_description")}
</p>
)}
</div>
) : (
<div <div
style={{ style={{
flex: 1, display: "flex",
backgroundColor: vars.color.border, flexDirection: "column",
height: "1px", gap: `${SPACING_UNIT * 2}px`,
}} }}
/> >
<h3 style={{ fontWeight: "400" }}> {userProfile.recentGames.map((game) => (
{userProfile.libraryGames.length} <button
</h3> key={game.objectID}
</div> className={cn(styles.feedItem, styles.profileContentBox)}
<small>{t("total_play_time", { amount: formatPlayTime() })}</small> onClick={() => handleGameClick(game)}
<div >
style={{
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gap: `${SPACING_UNIT}px`,
}}
>
{userProfile.libraryGames.map((game) => (
<button
key={game.objectID}
className={cn(styles.gameListItem, styles.profileContentBox)}
onClick={() => handleGameClick(game)}
title={game.title}
>
{game.iconUrl ? (
<img <img
className={styles.libraryGameIcon} className={styles.feedGameIcon}
src={game.iconUrl} src={game.cover}
alt={game.title} alt={game.title}
/> />
) : ( <div className={styles.gameInformation}>
<SteamLogo className={styles.libraryGameIcon} /> <h4>{game.title}</h4>
)} <small>
</button> {t("last_time_played", {
))} period: formatDistance(
</div> game.lastTimePlayed!,
new Date(),
{
addSuffix: true,
}
),
})}
</small>
</div>
</button>
))}
</div>
)}
</div> </div>
{showFriends && ( <div className={styles.contentSidebar}>
<div className={styles.friendsSection}> <div className={styles.profileGameSection}>
<button <div
className={styles.friendsSectionHeader} style={{
onClick={() => display: "flex",
showFriendsModal( alignItems: "center",
UserFriendModalTab.FriendsList, justifyContent: "space-between",
userProfile.id gap: `${SPACING_UNIT * 2}px`,
) }}
}
> >
<h2>{t("friends")}</h2> <h2>{t("library")}</h2>
<div <div
style={{ style={{
@ -490,64 +443,123 @@ export function UserContent({
}} }}
/> />
<h3 style={{ fontWeight: "400" }}> <h3 style={{ fontWeight: "400" }}>
{userProfile.totalFriends} {userProfile.libraryGames.length}
</h3> </h3>
</button> </div>
<small>
{t("total_play_time", { amount: formatPlayTime() })}
</small>
<div <div
style={{ style={{
display: "flex", display: "grid",
flexDirection: "column", gridTemplateColumns: "repeat(4, 1fr)",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
}} }}
> >
{userProfile.friends.map((friend) => { {userProfile.libraryGames.map((game) => (
return ( <button
<button key={game.objectID}
key={friend.id} className={cn(
className={cn( styles.gameListItem,
styles.profileContentBox, styles.profileContentBox
styles.friendListContainer )}
)} onClick={() => handleGameClick(game)}
onClick={() => handleOnClickFriend(friend.id)} title={game.title}
>
<div className={styles.friendAvatarContainer}>
{friend.profileImageUrl ? (
<img
className={styles.friendProfileIcon}
src={friend.profileImageUrl}
alt={friend.displayName}
/>
) : (
<PersonIcon size={24} />
)}
</div>
<p className={styles.friendListDisplayName}>
{friend.displayName}
</p>
</button>
);
})}
{isMe && (
<Button
theme="outline"
onClick={() =>
showFriendsModal(
UserFriendModalTab.AddFriend,
userProfile.id
)
}
> >
<PlusIcon /> {t("add")} {game.iconUrl ? (
</Button> <img
)} className={styles.libraryGameIcon}
src={game.iconUrl}
alt={game.title}
/>
) : (
<SteamLogo className={styles.libraryGameIcon} />
)}
</button>
))}
</div> </div>
</div> </div>
)}
{showFriends && (
<div className={styles.friendsSection}>
<button
className={styles.friendsSectionHeader}
onClick={() =>
showFriendsModal(
UserFriendModalTab.FriendsList,
userProfile.id
)
}
>
<h2>{t("friends")}</h2>
<div
style={{
flex: 1,
backgroundColor: vars.color.border,
height: "1px",
}}
/>
<h3 style={{ fontWeight: "400" }}>
{userProfile.totalFriends}
</h3>
</button>
<div
style={{
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT}px`,
}}
>
{userProfile.friends.map((friend) => {
return (
<button
key={friend.id}
className={cn(
styles.profileContentBox,
styles.friendListContainer
)}
onClick={() => handleOnClickFriend(friend.id)}
>
<div className={styles.friendAvatarContainer}>
{friend.profileImageUrl ? (
<img
className={styles.friendProfileIcon}
src={friend.profileImageUrl}
alt={friend.displayName}
/>
) : (
<PersonIcon size={24} />
)}
</div>
<p className={styles.friendListDisplayName}>
{friend.displayName}
</p>
</button>
);
})}
{isMe && (
<Button
theme="outline"
onClick={() =>
showFriendsModal(
UserFriendModalTab.AddFriend,
userProfile.id
)
}
>
<PlusIcon /> {t("add")}
</Button>
)}
</div>
</div>
)}
</div>
</div> </div>
</div> )}
</> </>
); );
} }

2
src/renderer/src/pages/user/user-profile-settings-modal/user-profile-settings-modal.tsx
View file

@ -20,7 +20,7 @@ export const UserProfileSettingsModal = ({
}: UserEditProfileModalProps) => { }: UserEditProfileModalProps) => {
const { t } = useTranslation("user_profile"); const { t } = useTranslation("user_profile");
const tabs = [t("edit_profile"), "Ban list"]; const tabs = [t("edit_profile"), t("blocked_users")];
const [currentTabIndex, setCurrentTabIndex] = useState(0); const [currentTabIndex, setCurrentTabIndex] = useState(0);