From f26214e6e7c1343c979b0c69f808b47cb5fbefe4 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 30 Oct 2023 12:26:23 -0400 Subject: [PATCH 1/6] inbox items avatar clickable --- .../common/components/FeedItem/context.ts | 1 + .../components/FeedLayout/FeedLayout.tsx | 1 - .../ChatChannelItem/ChatChannelItem.tsx | 1 + .../FeedItemBaseContent.tsx | 32 +++++++++++++------ 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index 67cf765193..f7f7c2f35d 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/src/pages/common/components/FeedItem/context.ts @@ -42,6 +42,7 @@ export interface FeedItemBaseContentProps { hasImages?: boolean; isLoading?: boolean; shouldHideBottomContent?: boolean; + dmUserId?: string; } export interface GetLastMessageOptions { diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 1ad096f4b4..93441ebc08 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -63,7 +63,6 @@ import { import { InfiniteScroll, TextEditorValue } from "@/shared/ui-kit"; import { addQueryParam, - checkIsProject, deleteQueryParam, getParamsFromOneOfRoutes, getUserName, diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx index 86b964072f..9d9880c345 100644 --- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx +++ b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx @@ -129,6 +129,7 @@ export const ChatChannelItem: FC = (props) => { ownerId={userId} renderImage={renderImage} isImageRounded + dmUserId={dmUserId} /> ); }; diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 04238c3472..438a80d52f 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -1,7 +1,11 @@ import React, { FC, MouseEventHandler, useRef, useState } from "react"; import classNames from "classnames"; import { useLongPress } from "use-long-press"; -import { FeedCardTags, FeedItemBaseContentProps } from "@/pages/common"; +import { + FeedCardTags, + FeedItemBaseContentProps, + useFeedItemContext, +} from "@/pages/common"; import { PredefinedTypes } from "@/shared/models"; import { ContextMenu, @@ -36,10 +40,12 @@ export const FeedItemBaseContent: FC = (props) => { isImageRounded, isProject, discussionPredefinedType, + dmUserId, } = props; const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); const [isLongPressed, setIsLongPressed] = useState(false); + const { onUserSelect } = useFeedItemContext(); const isContextMenuEnabled = Boolean(menuItems && menuItems.length > 0); const finalTitle = discussionPredefinedType === PredefinedTypes.General && commonName @@ -97,6 +103,12 @@ export const FeedItemBaseContent: FC = (props) => { } }; + const handleAvatarClick = () => { + if (onUserSelect && dmUserId) { + onUserSelect(dmUserId); + } + }; + return (
= (props) => { onContextMenu={handleContextMenu} {...getLongPressProps()} > - {renderImage?.(imageClassName) || ( - - )} +
+ {renderImage?.(imageClassName) || ( + + )} +

Date: Mon, 30 Oct 2023 12:45:11 -0400 Subject: [PATCH 2/6] inbox feed item common/space avatar click now redirects to the common/space --- .../components/DiscussionFeedCard/DiscussionFeedCard.tsx | 1 + src/pages/common/components/FeedCard/FeedCard.tsx | 3 +++ src/pages/common/components/FeedItem/context.ts | 1 + .../components/ProposalFeedCard/ProposalFeedCard.tsx | 1 + .../components/FeedItemBaseContent/FeedItemBaseContent.tsx | 7 +++++++ 5 files changed, 13 insertions(+) diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 4e2641abd4..721c6102c3 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -321,6 +321,7 @@ const DiscussionFeedCard = forwardRef( isPreviewMode={isPreviewMode} isPinned={isPinned} commonName={commonName} + commonId={commonId} image={commonImage} imageAlt={`${commonName}'s image`} isProject={isProject} diff --git a/src/pages/common/components/FeedCard/FeedCard.tsx b/src/pages/common/components/FeedCard/FeedCard.tsx index 84011cb894..b2d428e9a0 100644 --- a/src/pages/common/components/FeedCard/FeedCard.tsx +++ b/src/pages/common/components/FeedCard/FeedCard.tsx @@ -31,6 +31,7 @@ type FeedCardProps = PropsWithChildren<{ lastMessage?: TextEditorValue; isPreviewMode?: boolean; commonName?: string; + commonId?: string; image?: string; imageAlt?: string; isProject?: boolean; @@ -69,6 +70,7 @@ export const FeedCard = forwardRef((props, ref) => { lastMessage, isPreviewMode = true, commonName, + commonId, image, imageAlt, isProject, @@ -192,6 +194,7 @@ export const FeedCard = forwardRef((props, ref) => { lastMessage: !isLoading ? lastMessage : undefined, menuItems, commonName, + commonId, image, imageAlt, isProject, diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index f7f7c2f35d..db388eb6fb 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/src/pages/common/components/FeedItem/context.ts @@ -29,6 +29,7 @@ export interface FeedItemBaseContentProps { seen?: boolean; ownerId?: string; commonName?: string; + commonId?: string; renderImage?: (className?: string) => ReactNode; renderLeftContent?: () => ReactNode; image?: string; diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 934cd0720d..6259c659ef 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -458,6 +458,7 @@ const ProposalFeedCard = forwardRef( seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched} menuItems={menuItems} ownerId={item.userId} + commonId={commonId} > {renderContent()} diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 438a80d52f..56055f4658 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -1,4 +1,5 @@ import React, { FC, MouseEventHandler, useRef, useState } from "react"; +import { useHistory } from "react-router-dom"; import classNames from "classnames"; import { useLongPress } from "use-long-press"; import { @@ -6,6 +7,7 @@ import { FeedItemBaseContentProps, useFeedItemContext, } from "@/pages/common"; +import { useRoutesContext } from "@/shared/contexts"; import { PredefinedTypes } from "@/shared/models"; import { ContextMenu, @@ -41,7 +43,10 @@ export const FeedItemBaseContent: FC = (props) => { isProject, discussionPredefinedType, dmUserId, + commonId, } = props; + const history = useHistory(); + const { getCommonPagePath } = useRoutesContext(); const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); const [isLongPressed, setIsLongPressed] = useState(false); @@ -106,6 +111,8 @@ export const FeedItemBaseContent: FC = (props) => { const handleAvatarClick = () => { if (onUserSelect && dmUserId) { onUserSelect(dmUserId); + } else if (commonId) { + history.push(getCommonPagePath(commonId)); } }; From 3c8bd777364d4ed71e5075b150c0ceb3d635d0e8 Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Fri, 3 Nov 2023 18:52:01 +0100 Subject: [PATCH 3/6] Implemented chat improvements --- .../components/ChatComponent/ChatComponent.module.scss | 8 +++----- .../common/components/ChatComponent/ChatComponent.tsx | 2 +- .../components/ChatContent/ChatContent.module.scss | 1 - .../components/DesktopChat/DesktopChat.module.scss | 8 +++++++- .../FeedLayout/components/DesktopChat/DesktopChat.tsx | 6 +++++- src/shared/components/Chat/ChatMessage/ChatMessage.tsx | 4 ++-- 6 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 32838bd7c3..69b30c903e 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -6,7 +6,7 @@ flex-direction: column; flex: 1; width: inherit; - height: calc(100% - #{$container-desktop-header-height}); + height: calc(100% - var(--chat-header-height, 0rem)); background-color: $white; box-sizing: border-box; --chat-input-wrapper-height: 3.125rem; @@ -18,15 +18,13 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem 0; - padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); + padding: 0.5rem 2rem var(--chat-input-wrapper-height) 2rem; } .emptyChat { display: flex; justify-content: center; - padding: 0.5rem 2rem 0; - padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); + align-self: center; } .bottomChatContainer { diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 0abf8d3382..d0c3b30add 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -189,7 +189,7 @@ export default function ChatComponent({ isScrolling, chatContentRect: chatContainerRef.current?.getBoundingClientRect(), }), - [isScrolling], + [isScrolling, chatContainerRef.current], ); const [message, setMessage] = useState( diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss index fd9cd3d746..3ec76095c6 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss @@ -26,7 +26,6 @@ .noMessagesText { align-self: flex-start; max-width: 17.5rem; - margin: 3.375rem 0 0; padding: 0.5rem 1rem; font-size: $xsmall; line-height: 143%; diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss index 9e0e494642..9f5a8cc971 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss @@ -1,7 +1,11 @@ @import "../../../../../../constants"; +.rightPaneContainerWithHeader { + --chat-header-height: #{$container-desktop-header-height}; +} + .titleWrapper { - height: $container-desktop-header-height; + height: var(--chat-header-height); padding: 0 1.25rem; display: flex; align-items: center; @@ -9,6 +13,7 @@ border-bottom: 0.0625rem solid $c-light-gray; box-sizing: border-box; } + .title { margin: 0; display: -webkit-box; @@ -22,6 +27,7 @@ overflow-wrap: break-word; text-overflow: ellipsis; } + .titleRTL { text-align: right; direction: rtl; diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx index fe4b34d81d..38828ab262 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx @@ -82,7 +82,11 @@ const DesktopChat: FC = (props) => { }, [dmUserId]); return ( - + {withTitle && (

{dmUser?.photoURL && ( diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx index e49ce29b03..39e8c46f29 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx @@ -213,7 +213,7 @@ export default function ChatMessage({ }, ); - const handleContextMenu: MouseEventHandler = (event) => { + const handleContextMenu: MouseEventHandler = (event) => { if (!isTabletView) { event.preventDefault(); setIsMenuOpen(true); @@ -330,7 +330,6 @@ export default function ChatMessage({
  • Date: Fri, 3 Nov 2023 17:07:13 -0400 Subject: [PATCH 4/6] messages ballons design update --- .../common/components/ChatComponent/ChatComponent.module.scss | 4 ++-- .../components/Chat/ChatMessage/ChatMessage.module.scss | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 32838bd7c3..d7f3103421 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -18,14 +18,14 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem 0; + padding: 0.5rem 1.375rem 0; padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); } .emptyChat { display: flex; justify-content: center; - padding: 0.5rem 2rem 0; + padding: 0.5rem 1.375rem 0; padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); } diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index d9cd0d7295..5fda3bf717 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -60,6 +60,7 @@ text-align: start; font-size: $small; color: $secondary-blue; + max-width: 33.563rem; &:hover { .menuArrowButton { @@ -90,6 +91,7 @@ .messageTextCurrentUser { background-color: $c-pink-active-feed-cards; + margin-left: 2.8rem; } .systemMessageContainer { From 429f84013bbc94e37199884ecf1569837d401215 Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Mon, 6 Nov 2023 23:24:01 +0100 Subject: [PATCH 5/6] fix issue with displaying message menu in mobile chat --- .../components/ChatComponent/ChatComponent.module.scss | 7 ++++++- .../common/components/ChatComponent/ChatComponent.tsx | 6 +++--- .../components/MobileChat/MobileChat.module.scss | 2 ++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 69b30c903e..a6b857552c 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -18,7 +18,12 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem var(--chat-input-wrapper-height) 2rem; + padding: 0.5rem 2rem 0 2rem; + margin-bottom: var(--chat-input-wrapper-height); + + @include big-phone { + margin-bottom: 0; + } } .emptyChat { diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index d0c3b30add..b5f881624c 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -183,7 +183,7 @@ export default function ChatComponent({ const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []); const chatInputWrapperRef = useRef(null); const chatContainerRef = useRef(null); - const [isScrolling, setScrolling] = useState(false); + const [isScrolling, setIsScrolling] = useState(false); const chatContentContextValue: ChatContentData = useMemo( () => ({ isScrolling, @@ -603,11 +603,11 @@ export default function ChatComponent({ useEffect(() => { const deactivateScrollingFlag = debounce(() => { - setScrolling(false); + setIsScrolling(false); }, 300); function handleScroll() { - setScrolling(true); + setIsScrolling(true); deactivateScrollingFlag(); } diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss index 34d7a6a3fc..b326d84cff 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss @@ -1,6 +1,8 @@ @import "../../../../../../constants"; .modal { + height: 90vh; + .modalHeaderWrapper { padding: 0; From 51e305f84071789a3ac7dd1042022c7720053864 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 7 Nov 2023 08:07:44 -0500 Subject: [PATCH 6/6] added margins to others messages and system messages --- src/shared/components/Chat/ChatMessage/ChatMessage.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index 5fda3bf717..0c49ea1085 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -61,6 +61,7 @@ font-size: $small; color: $secondary-blue; max-width: 33.563rem; + margin-right: 2.8rem; &:hover { .menuArrowButton { @@ -92,6 +93,7 @@ .messageTextCurrentUser { background-color: $c-pink-active-feed-cards; margin-left: 2.8rem; + margin-right: unset; } .systemMessageContainer { @@ -105,6 +107,7 @@ font-size: $xxsmall-2; color: $c-gray-60; direction: ltr; + margin: 0 4.25rem; } .messageName {