h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

improving part reactions ui

Browse Source
This commit is contained in:
Yen Colon
2021-01-19 23:44:15 -04:00
parent dcf376754b
commit f5e588fbc4
2 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/src/components/PartReactions/PartReactions.js
View File

@@ -13,32 +13,35 @@ const PartReactions = ({ reactions }) => {
} }
return ( return (
<> <div className="bg-gray-100 p-4 min-h-md rounded-lg shadow-lg">
<div className="bg-gray-100 p-4 min-h-md rounded-lg shadow-lg"> <Tabs
<Tabs value={tab}
value={tab} onChange={onTabChange}
onChange={onTabChange} variant="scrollable"
variant="scrollable" scrollButtons="off"
scrollButtons="off" textColor="primary"
textColor="primary" indicatorColor="primary"
indicatorColor="primary" >
> <Tab label="All" style={{ minWidth: 100 }} />
{emotes.map((emote, i) => ( {emotes.map((emote, i) => (
<Tab <Tab
label={`${emote.emoji} ${emote.count}`} label={`${emote.emoji} ${emote.count}`}
key={`${emote.emoji}-${i}}`} key={`${emote.emoji}-${i}}`}
style={{ minWidth: 100 }} style={{ minWidth: 100 }}
/> />
))} ))}
</Tabs> </Tabs>
<ul> <ul>
{reactions {reactions
.filter((reaction) => reaction.emote === emotes[tab].emoji) .filter((reaction) =>
.map((reactionPart, i) => ( tab === 0 ? true : reaction.emote === emotes[tab - 1].emoji
<li )
className="flex flex-row p-2 items-center" .map((reactionPart, i) => (
key={`${reactionPart.emote}-${i}}`} <li
> className="flex flex-row justify-between p-3 items-center"
key={`${reactionPart.emote}-${i}}`}
>
<div className="flex items-center justify-center">
<div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0"> <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0">
<ImageUploader <ImageUploader
className="" className=""
@@ -48,7 +51,7 @@ const PartReactions = ({ reactions }) => {
/> />
</div> </div>
<div className="ml-4 font-roboto"> <div className="ml-4 font-roboto">
<div className="text-gray-800 font-bold text-md mb-1"> <div className="text-gray-800 font-normal text-md mb-1">
<Link <Link
to={routes.user({ to={routes.user({
userName: reactionPart.user?.userName, userName: reactionPart.user?.userName,
@@ -58,11 +61,14 @@ const PartReactions = ({ reactions }) => {
</Link> </Link>
</div> </div>
</div> </div>
</li> </div>
))} <div>
</ul> <span>{reactionPart.emote}</span>
</div> </div>
</> </li>
))}
</ul>
</div>
) )
} }

2
web/src/components/PartReactionsCell/PartReactionsCell.js
View File

@@ -22,5 +22,5 @@ export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div> export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ partReactionsByPartId }) => { export const Success = ({ partReactionsByPartId }) => {
return <PartReactions reactions={partReactionsByPartId} /> //JSON.stringify(partReactions) return <PartReactions reactions={partReactionsByPartId} />
} }