From 3391ead51015b44437cf65ec741732458e80776c Mon Sep 17 00:00:00 2001 From: Rishabh Saxena Date: Mon, 5 Jul 2021 12:42:02 +0530 Subject: [PATCH] Minor fixes related to the comments feature (#5551) --- .../src/comments/CommentCard/CommentCard.tsx | 13 +++++--- .../CommentsCarouselModal.tsx | 1 + .../src/components/ads/EmojiReactions.tsx | 4 +++ app/client/src/components/ads/Tooltip.tsx | 2 ++ .../blueprint/ModalComponent.tsx | 3 +- app/client/src/constants/DefaultTheme.tsx | 13 +++++++- app/client/src/globalStyles/popover.ts | 4 +++ .../src/pages/Editor/ToggleModeButton.tsx | 31 +++++++++++++++++-- 8 files changed, 61 insertions(+), 10 deletions(-) diff --git a/app/client/src/comments/CommentCard/CommentCard.tsx b/app/client/src/comments/CommentCard/CommentCard.tsx index af58cb342f..876330e3b6 100644 --- a/app/client/src/comments/CommentCard/CommentCard.tsx +++ b/app/client/src/comments/CommentCard/CommentCard.tsx @@ -204,17 +204,20 @@ const reduceReactions = ( (res: Record, reaction: Reaction) => { const { byUsername, emoji } = reaction; const sameAsCurrent = byUsername === username; - const user = sameAsCurrent ? "You" : byUsername; if (res[reaction.emoji]) { res[reaction.emoji].count++; - res[reaction.emoji].users = Array.from( - new Set([...(res[reaction.emoji].users || []), user]), - ); + if (!sameAsCurrent) { + res[reaction.emoji].users = [ + ...(res[reaction.emoji].users || []), + byUsername, + ]; + } } else { + const users = !sameAsCurrent ? [byUsername] : []; res[emoji] = { count: 1, reactionEmoji: emoji, - users: [user], + users, } as ComponentReaction; } diff --git a/app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx b/app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx index 6992bb9005..066d2418fc 100644 --- a/app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx +++ b/app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx @@ -16,6 +16,7 @@ function ShowcaseCarouselModal({ children }: { children: React.ReactNode }) { // TODO (rishabh) handle close }} overlayClassName="comments-onboarding-carousel" + portalClassName="comments-onboarding-carousel-portal" scrollContents width={325} zIndex={Layers.appComments} diff --git a/app/client/src/components/ads/EmojiReactions.tsx b/app/client/src/components/ads/EmojiReactions.tsx index 1f61aac518..cd57d6f64e 100644 --- a/app/client/src/components/ads/EmojiReactions.tsx +++ b/app/client/src/components/ads/EmojiReactions.tsx @@ -60,6 +60,7 @@ function ReactionsBy(props: { reaction: Reaction }) { const users = reaction?.users.slice(0, 5); if (isSliced) users.push("..."); + if (reaction.active) users.unshift("You"); return {users.join(", ")}; } @@ -117,6 +118,7 @@ function EmojiReactions({ }; if (reactions[emojiData].count === 0) delete reactions[emojiData]; } else { + addOrRemove = ReactionOperation.ADD; reactions[emojiData] = { active: true, reactionEmoji: emojiData, @@ -138,6 +140,7 @@ function EmojiReactions({ addOrRemove as ReactionOperation, ); }; + return ( {!hideReactions && @@ -145,6 +148,7 @@ function EmojiReactions({ } + disabled={!reaction.users || reaction.users.length === 0} key={reaction.reactionEmoji} modifiers={{ preventOverflow: { enabled: true } }} > diff --git a/app/client/src/components/ads/Tooltip.tsx b/app/client/src/components/ads/Tooltip.tsx index 277665dfa2..ce1c37a1b8 100644 --- a/app/client/src/components/ads/Tooltip.tsx +++ b/app/client/src/components/ads/Tooltip.tsx @@ -8,6 +8,7 @@ type Variant = "dark" | "light"; type TooltipProps = CommonComponentProps & { content: JSX.Element | string; + disabled?: boolean; position?: Position; children: JSX.Element | React.ReactNode; variant?: Variant; @@ -30,6 +31,7 @@ function TooltipComponent(props: TooltipProps) { autoFocus={props.autoFocus} boundary={props.boundary || "scrollParent"} content={props.content} + disabled={props.disabled} hoverOpenDelay={props.hoverOpenDelay} isOpen={props.isOpen} minimal={props.minimal} diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx index f38f2617d0..77b62fca83 100644 --- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx @@ -71,6 +71,7 @@ export type ModalComponentProps = { right?: number; hasBackDrop?: boolean; zIndex?: number; + portalClassName?: string; }; /* eslint-disable react/display-name */ @@ -99,7 +100,7 @@ export function ModalComponent(props: ModalComponentProps) { hasBackdrop={false} isOpen={props.isOpen} onClose={props.onClose} - portalClassName="bp3-modal-widget" + portalClassName={`bp3-modal-widget ${props.portalClassName}`} usePortal > { const setShowCommentsButtonToolTip = (value = "") => localStorage.setItem("ShowCommentsButtonToolTip", value); -const ModeButton = styled.div<{ active: boolean }>` +const ModeButton = styled.div<{ active: boolean; type: string }>` position: relative; display: flex; align-items: center; @@ -58,13 +58,32 @@ const ModeButton = styled.div<{ active: boolean }>` : "transparent"}; svg path { + fill: ${(props) => + props.type !== "fill" + ? "transparent" + : props.active + ? props.theme.colors.comments.activeModeIcon + : props.theme.colors.comments.modeIcon}; + stroke: ${(props) => + props.type !== "stroke" + ? "transparent" + : props.active + ? props.theme.colors.comments.activeModeIcon + : props.theme.colors.comments.modeIcon}; + } + + svg rect:not(:first-child) { fill: ${(props) => props.active ? props.theme.colors.comments.activeModeIcon : props.theme.colors.comments.modeIcon}; } + svg circle { - stroke: transparent; + stroke: ${(props) => + props.active + ? props.theme.colors.comments.activeModeIconCircleStroke + : props.theme.colors.comments.modeIconCircleStroke}; } `; @@ -212,7 +231,12 @@ function CommentModeBtn({ const CommentModeIcon = showUnreadIndicator ? CommentModeUnread : CommentMode; return ( - + @@ -273,6 +297,7 @@ function ToggleCommentModeButton() { setCommentModeInUrl(false)} + type="fill" >