nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

profile changes

Browse Source
This commit is contained in:
Layne 2021-08-22 02:37:03 -04:00
parent 27d7083440
commit f0af5c8ead
5 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/user-profile/UserProfileVew.scss
View File

@ -1,10 +1,10 @@
.user-profile { .user-profile {
width: 560px;
.content-area { .content-area {
color: black; color: black;
} }
.user-container .user-container {
{
border-right: 1px solid gray; border-right: 1px solid gray;
.avatar-image { .avatar-image {
@ -17,23 +17,21 @@
} }
} }
.badge-container .badge-container {
{
min-height: 50px; min-height: 50px;
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
margin: 0px; margin: 0px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.rooms-button-container .rooms-button-container {
{
border-top: 1px solid gray; border-top: 1px solid gray;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
padding: 1px; padding: 1px;
.rooms-button { .rooms-button {
display:inline-block; display: inline-block;
text-align: center; text-align: center;
height: 100%; height: 100%;
text-decoration: underline; text-decoration: underline;
@ -41,10 +39,9 @@
} }
} }
.friends-container .friends-container {
{
height: 100%; height: 100%;
} }
} }
@import './views/relationships-container/RelationshipsContainerView'; @import "./views/relationships-container/RelationshipsContainerView";

16
src/views/user-profile/UserProfileView.tsx
View File

@ -60,23 +60,22 @@ export const UserProfileView: FC = props =>
if(!userProfile) return null; if(!userProfile) return null;
return ( return (
<div className="user-profile"> <NitroCardView simple={ true } className="user-profile">
<NitroCardView>
<NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} /> <NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
<NitroCardContentView> <NitroCardContentView>
<div className="row"> <div className="row">
<div className="col-sm-6 user-container"> <div className="col-sm-7 user-container">
<UserContainerView id={userProfile.id} username={userProfile.username} motto={userProfile.motto} figure={userProfile.figure} secondsSinceLastLogin={userProfile.secondsSinceLastVisit} creation={userProfile.registration} achievementScore={userProfile.achievementPoints} isFriend={userProfile.isMyFriend} isOnline={userProfile.isOnline} requestSent={userProfile.requestSent} /> <UserContainerView id={userProfile.id} username={userProfile.username} motto={userProfile.motto} figure={userProfile.figure} secondsSinceLastLogin={userProfile.secondsSinceLastVisit} creation={userProfile.registration} achievementScore={userProfile.achievementPoints} isFriend={userProfile.isMyFriend} isOnline={userProfile.isOnline} requestSent={userProfile.requestSent} />
<BadgesContainerView badges={userBadges} /> <BadgesContainerView badges={userBadges} />
</div> </div>
<div className="col-sm-6"> <div className="col-sm-5">
{ {
userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} /> userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
} }
</div> </div>
</div> </div>
<div className="row rooms-button-container align-items-center"> <div className="d-flex rooms-button-container align-items-center py-1">
<div className="col-sm-12 d-flex align-content-center w-100"> <div className="d-flex align-items-center w-100">
<i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span> <i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span>
</div> </div>
</div> </div>
@ -88,8 +87,7 @@ export const UserProfileView: FC = props =>
group info goes here group info goes here
</div> </div>
</div> </div>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
</div>
) )
} }

6
src/views/user-profile/views/friends-container/FriendsContainerView.tsx
View File

@ -8,10 +8,12 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
const { relationships = null, friendsCount = null } = props; const { relationships = null, friendsCount = null } = props;
return ( return (
<div className="friends-container h-100"> <div className="friends-container h-100 d-flex flex-column">
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.friends.count', ['count'], [friendsCount.toString()]) }} /> <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.friends.count', ['count'], [friendsCount.toString()]) }} />
<div className="mb-1"><b>{LocalizeText('extendedprofile.relstatus')}</b></div> <div className="mb-1"><b>{LocalizeText('extendedprofile.relstatus')}</b></div>
<RelationshipsContainerView relationships={relationships} /> <div className="h-100 d-flex flex-column justify-content-between">
<RelationshipsContainerView relationships={relationships} />
</div>
</div> </div>
) )
} }

57
src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx
View File

@ -24,37 +24,38 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase(); const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
return ( return (
<div className="relationship-container row row-cols-2 d-flex align-items-center"> <div className="relationship-container d-flex flex-row align-items-center w-100">
<i className={`icon icon-relationship-${relationshipName} col-2`} /> <i className={`icon icon-relationship-${relationshipName} flex-shrink-0 align-self-baseline mt-2`} />
<span className={'relationship col-10' + (!simple ? ' advanced' : '')}> <div className="w-100 d-flex flex-column">
<span className="cursor-pointer relationship-text" onClick={() => OnUserClick(relationshipInfo)}> <span className={'relationship w-100' + (!simple ? ' advanced' : '')}>
<span className="cursor-pointer relationship-text" onClick={() => OnUserClick(relationshipInfo)}>
{
(relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends')
}
</span>
{ {
(relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends') (simple && relationshipInfo && relationshipInfo.friendCount > 1) &&
<span>
{' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])}
</span>
} }
</span> {
{ (!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
(simple && relationshipInfo && relationshipInfo.friendCount > 1) && <AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
<span> }
{' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])} </span>
</span>
}
{
(!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
<AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
}
</span>
{
!simple && <div className="others-text">
{
(relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : ''
}
{
(relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : ''
}
</div>
}
{
!simple && <div className="others-text">
{
(relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : ''
}
{
(relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : ''
}
</div>
}
</div>
</div> </div>
); );
}, [OnUserClick, relationships, simple]); }, [OnUserClick, relationships, simple]);

12
src/views/user-profile/views/user-container/UserContainerView.tsx
View File

@ -27,18 +27,20 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
return ( return (
<div className="row"> <div className="row">
<div className="col-sm-4"> <div className="col-sm-3 px-0 d-flex align-items-center">
<AvatarImageView figure={figure} direction={2} /> <AvatarImageView figure={figure} direction={2} />
</div> </div>
<div className="col-sm-8"> <div className="col-sm-8">
<div className="user-info-container"> <div className="user-info-container">
<h5>{username}</h5> <div className="fw-bold">{username}</div>
<div className="mb-1">{motto}</div> <div className="mb-1 fst-italic">{motto}</div>
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [creation]) }} /> <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [creation]) }} />
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(secondsSinceLastLogin, '.ago', 2)]) }} /> <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(secondsSinceLastLogin, '.ago', 2)]) }} />
<div className="mb-1"><b>{LocalizeText('extendedprofile.achievementscore')}</b> {achievementScore}</div> <div className="mb-1"><b>{LocalizeText('extendedprofile.achievementscore')}</b> {achievementScore}</div>
<OnlineIcon /> <div className="d-flex flex-row align-items-center">
<FriendRequestComponent /> <OnlineIcon />
<FriendRequestComponent />
</div>
</div> </div>
</div> </div>
</div> </div>