thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: add tooltip for user info

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-06 12:04:18 +05:30
parent 60c3d1a6e9
commit ac4127c93d
1 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
space/components/issues/peek-overview/comment/comment-reactions.tsx
View File

@ -6,7 +6,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { ReactionSelector } from "components/ui"; import { ReactionSelector, Tooltip } from "components/ui";
// helpers // helpers
import { groupReactions, renderEmoji } from "helpers/emoji.helper"; import { groupReactions, renderEmoji } from "helpers/emoji.helper";
@ -77,41 +77,55 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
size="md" size="md"
/> />
{Object.keys(groupedReactions || {}).map( {Object.keys(groupedReactions || {}).map((reaction) => {
(reaction) => const reactions = groupedReactions?.[reaction] ?? [];
groupedReactions?.[reaction]?.length && const REACTIONS_LIMIT = 1000;
groupedReactions[reaction].length > 0 && (
<button if (reactions.length > 0)
type="button" return (
onClick={() => { <Tooltip
userStore.requiredLogin(() => {
handleReactionClick(reaction);
});
}}
key={reaction} key={reaction}
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${ tooltipContent={
commentReactions?.some( <div>
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction {reactions
) .map((r) => r.actor_detail.display_name)
? "bg-custom-primary-100/10" .splice(0, REACTIONS_LIMIT)
: "bg-custom-background-80" .join(", ")}
}`} {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
</div>
}
> >
<span>{renderEmoji(reaction)}</span> <button
<span type="button"
className={ onClick={() => {
userStore.requiredLogin(() => {
handleReactionClick(reaction);
});
}}
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
commentReactions?.some( commentReactions?.some(
(r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
) )
? "text-custom-primary-100" ? "bg-custom-primary-100/10"
: "" : "bg-custom-background-80"
} }`}
> >
{groupedReactions?.[reaction].length}{" "} <span>{renderEmoji(reaction)}</span>
</span> <span
</button> className={
) commentReactions?.some(
)} (r) => r.actor_detail.id === userStore.currentUser?.id && r.reaction === reaction
)
? "text-custom-primary-100"
: ""
}
>
{groupedReactions?.[reaction].length}{" "}
</span>
</button>
</Tooltip>
);
})}
</div> </div>
); );
}); });