diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 0ecf31b59d..a6598731eb 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -8,10 +8,11 @@ import React, { import { useDispatch, useSelector } from "react-redux"; import { useUpdateEffect } from "react-use"; import { debounce } from "lodash"; +import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { DiscussionService } from "@/services"; import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components"; -import { DiscussionMessageOwnerType, EntityTypes, InboxItemType } from "@/shared/constants"; +import { DiscussionMessageOwnerType, EntityTypes, InboxItemType, ShareButtonText } from "@/shared/constants"; import { useModal, useNotification } from "@/shared/hooks"; import { FeedItemFollowState, @@ -33,10 +34,9 @@ import { PredefinedTypes, } from "@/shared/models"; import { TextEditorValue } from "@/shared/ui-kit"; -import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage } from "@/shared/utils"; +import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage, generateStaticShareLink } from "@/shared/utils"; import { useChatContext } from "../ChatComponent"; import { FeedCard } from "../FeedCard"; -import { FeedCardShare } from "../FeedCard"; import { FeedItemRef, GetLastMessageOptions, @@ -122,11 +122,6 @@ function DiscussionFeedCard(props, ref) { onOpen: onReportModalOpen, onClose: onReportModalClose, } = useModal(false); - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); const { isShowing: isDeleteModalOpen, onOpen: onDeleteModalOpen, @@ -191,10 +186,16 @@ function DiscussionFeedCard(props, ref) { getNonAllowedItems, feedItemUserMetadata, withoutMenu, + shareText: ShareButtonText.Stream }, { report: onReportModalOpen, - share: () => onShareModalOpen(), + share: () => { + if(discussion) { + copyToClipboard(generateStaticShareLink(StaticLinkType.Discussion, discussion, item.id)); + notify("The link has been copied!"); + } + }, remove: onDeleteModalOpen, linkStream: onLinkStreamModalOpen, unlinkStream: onUnlinkStreamModalOpen, @@ -464,15 +465,6 @@ function DiscussionFeedCard(props, ref) { type={EntityTypes.Discussion} /> )} - {discussion && ( - - )} {isDeleteModalOpen && ( , }, diff --git a/src/pages/common/components/FeedItem/types.ts b/src/pages/common/components/FeedItem/types.ts index 39e24d71d4..c00a97c579 100644 --- a/src/pages/common/components/FeedItem/types.ts +++ b/src/pages/common/components/FeedItem/types.ts @@ -9,6 +9,7 @@ import { CommonFeedObjectUserUnique, } from "@/shared/models"; import { FeedItemMenuItem } from "./constants"; +import { ShareButtonText } from "@/shared/constants"; export type GetNonAllowedItemsOptions = ( type: CommonFeedType, @@ -26,6 +27,7 @@ export interface GetAllowedItemsOptions { getNonAllowedItems?: GetNonAllowedItemsOptions; feedItemUserMetadata: CommonFeedObjectUserUnique | null; withoutMenu?: boolean; + shareText?: ShareButtonText; } export type MenuItemOptions = Omit; diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 8039066b84..050ddf0b9d 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -8,11 +8,12 @@ import React, { import { useSelector } from "react-redux"; import { useUpdateEffect } from "react-use"; import { debounce } from "lodash"; +import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { useCommonMember, useProposalUserVote } from "@/pages/OldCommon/hooks"; import { ProposalService } from "@/services"; import { DeletePrompt, GlobalOverlay } from "@/shared/components"; -import { InboxItemType } from "@/shared/constants"; +import { InboxItemType, ShareButtonText } from "@/shared/constants"; import { useRoutesContext } from "@/shared/contexts"; import { useForceUpdate, useModal, useNotification } from "@/shared/hooks"; import { @@ -34,10 +35,10 @@ import { PredefinedTypes, } from "@/shared/models"; import { TextEditorValue } from "@/shared/ui-kit"; -import { StaticLinkType, getUserName, InternalLinkData } from "@/shared/utils"; +import { StaticLinkType, getUserName, InternalLinkData, generateStaticShareLink } from "@/shared/utils"; import { useChatContext } from "../ChatComponent"; import { useMenuItems } from "../DiscussionFeedCard/hooks"; -import { FeedCard, FeedCardShare } from "../FeedCard"; +import { FeedCard } from "../FeedCard"; import { FeedItemRef, GetLastMessageOptions, @@ -173,11 +174,6 @@ const ProposalFeedCard = forwardRef( setHovering(isMouseEnter); }; const proposalId = item.data.id; - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); const preloadDiscussionMessagesData = usePreloadDiscussionMessagesById({ commonId, discussionId: discussion?.id, @@ -199,10 +195,16 @@ const ProposalFeedCard = forwardRef( getNonAllowedItems, feedItemUserMetadata, withoutMenu, + shareText: ShareButtonText.Stream }, { report: () => {}, - share: () => onShareModalOpen(), + share: () => { + if(discussion) { + copyToClipboard(generateStaticShareLink(StaticLinkType.Proposal, discussion, item.id)); + notify("The link has been copied!"); + } + }, remove: onProposalDeleteModalOpen, markFeedItemAsSeen, markFeedItemAsUnseen, @@ -457,15 +459,6 @@ const ProposalFeedCard = forwardRef( /> )} - {discussion && ( - - )} {isProposalDeleteModalOpen && ( = (props) => { const { common, commonMember, commonFollow, onClick, onSearchClick } = props; - const { - isShowing: isShareModalOpen, - onOpen: onShareModalOpen, - onClose: onShareModalClose, - } = useModal(false); + const { notify } = useNotification(); const { markCommonAsSeen } = useUpdateCommonSeenState(); + const shareLink = generateStaticShareLink(StaticLinkType.Common, common); const items = useMenuItems( { common, commonMember, isFollowInProgress: commonFollow.isFollowInProgress, isSearchActionAvailable: Boolean(onSearchClick), + shareText: ShareButtonText.Space, }, { - share: onShareModalOpen, + share: () => { + copyToClipboard(shareLink); + notify("The link has been copied!"); + }, onFollowToggle: commonFollow.onFollowToggle, onSearchClick, markCommonAsSeen }, ); - const shareLink = generateStaticShareLink(StaticLinkType.Common, common); + const triggerEl = ; return ( <> {items.length > 0 && } - ); }; diff --git a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx index e36c7305e7..d8b72dc396 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx @@ -25,7 +25,7 @@ export const useMenuItems = ( options: GetAllowedItemsOptions, actions: Actions, ): Item[] => { - const { common } = options; + const { common, shareText } = options; const { share, onFollowToggle, onSearchClick, markCommonAsSeen } = actions; const items: Item[] = [ @@ -37,7 +37,7 @@ export const useMenuItems = ( }, { id: CommonFeedMenuItem.Share, - text: "Share", + text: shareText ?? "Share", onClick: share, icon: , }, diff --git a/src/pages/commonFeed/utils/getAllowedItems.ts b/src/pages/commonFeed/utils/getAllowedItems.ts index 8be993be32..4f3d1a3e66 100644 --- a/src/pages/commonFeed/utils/getAllowedItems.ts +++ b/src/pages/commonFeed/utils/getAllowedItems.ts @@ -1,12 +1,14 @@ import { MenuItem as Item } from "@/shared/interfaces"; import { CirclesPermissions, Common, CommonMember } from "@/shared/models"; import { CommonFeedMenuItem } from "../constants"; +import { ShareButtonText } from "@/shared/constants"; export interface Options { common: Common; commonMember: (CommonMember & CirclesPermissions) | null; isFollowInProgress: boolean; isSearchActionAvailable: boolean; + shareText?: ShareButtonText; } const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record< diff --git a/src/shared/components/Dropdown/index.scss b/src/shared/components/Dropdown/index.scss index 145b3bd27b..36dbfd8af0 100644 --- a/src/shared/components/Dropdown/index.scss +++ b/src/shared/components/Dropdown/index.scss @@ -89,7 +89,7 @@ } .custom-dropdown-wrapper__menu-list { - max-height: 16.875rem; + max-height: 18rem; margin: 0; padding: 0; overflow-y: auto; diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx index 1e5c09ef83..a98a795682 100644 --- a/src/shared/components/ElementDropdown/ElementDropdown.tsx +++ b/src/shared/components/ElementDropdown/ElementDropdown.tsx @@ -4,7 +4,7 @@ import classNames from "classnames"; import copyToClipboard from "copy-to-clipboard"; import { selectUser } from "@/pages/Auth/store/selectors"; import { MenuButton, ShareModal } from "@/shared/components"; -import { Orientation, EntityTypes } from "@/shared/constants"; +import { Orientation, EntityTypes, ShareButtonText } from "@/shared/constants"; import { useNotification, useModal } from "@/shared/hooks"; import { CopyIcon, @@ -165,9 +165,10 @@ const ElementDropdown: FC = ({ } if (!isChatMessage) { + const shareText = isDiscussionMessage ? ShareButtonText.Message : "Share"; items.push({ - text: } />, - searchText: "Share", + text: } />, + searchText: shareText, value: ElementDropdownMenuItems.Share, }); } @@ -261,7 +262,12 @@ const ElementDropdown: FC = ({ switch (selectedItem) { case ElementDropdownMenuItems.Share: - onOpen(); + if(isDiscussionMessage) { + copyToClipboard(staticShareLink); + notify("The link has been copied!"); + } else { + onOpen(); + } break; case ElementDropdownMenuItems.Copy: copyToClipboard( @@ -273,7 +279,7 @@ const ElementDropdown: FC = ({ break; case ElementDropdownMenuItems.CopyLink: copyToClipboard(staticShareLink || ""); - notify("The link has copied!"); + notify("The link has been copied!"); break; case ElementDropdownMenuItems.Delete: onOpenDelete(); @@ -312,7 +318,7 @@ const ElementDropdown: FC = ({ const menuInlineStyle = useMemo( () => ({ - height: `${2.5 * (ElementDropdownMenuItemsList.length || 1)}rem`, + height: `${3 * (ElementDropdownMenuItemsList.length || 1)}rem`, }), [ElementDropdownMenuItemsList], ); diff --git a/src/shared/components/ElementDropdown/index.scss b/src/shared/components/ElementDropdown/index.scss index 8eaeca3cc8..0980cdef69 100644 --- a/src/shared/components/ElementDropdown/index.scss +++ b/src/shared/components/ElementDropdown/index.scss @@ -2,8 +2,8 @@ .element-dropdown__menu-wrapper { .element-dropdown__menu { - width: 10rem; - height: 5.625rem; + width: 14rem; + height: 9rem; right: 0; display: flex; flex-direction: column; @@ -16,9 +16,9 @@ display: flex; align-items: center; box-sizing: border-box; - height: 2.5rem; + height: 3rem; padding: 0.65625rem 1.5rem; - font-size: $small; + font-size: $xsmall; box-shadow: inset 0 -0.0625rem 0 var(--drop-shadow); > :first-child { diff --git a/src/shared/components/ShareModal/ShareModal.tsx b/src/shared/components/ShareModal/ShareModal.tsx index 2811daf6cc..f74310a107 100644 --- a/src/shared/components/ShareModal/ShareModal.tsx +++ b/src/shared/components/ShareModal/ShareModal.tsx @@ -37,7 +37,7 @@ const ShareModal: FC> = (props) => { const handleCopyClick = () => { copyToClipboard(sourceUrl); - notify("The link has copied!"); + notify("The link has been copied!"); }; return ( diff --git a/src/shared/constants/index.tsx b/src/shared/constants/index.tsx index 56d585e63f..1a3a2db9b1 100755 --- a/src/shared/constants/index.tsx +++ b/src/shared/constants/index.tsx @@ -36,3 +36,4 @@ export * from "./docChange"; export * from "./files"; export * from "./inboxAction"; export * from "./featureFlags"; +export * from "./shareText"; diff --git a/src/shared/constants/shareText.ts b/src/shared/constants/shareText.ts new file mode 100644 index 0000000000..a8f89626c0 --- /dev/null +++ b/src/shared/constants/shareText.ts @@ -0,0 +1,5 @@ +export enum ShareButtonText { + Space = "Copy space link", + Stream = "Copy link", + Message = "Copy message link" +} \ No newline at end of file