From 093db5a075a675427b8c62cdbf58a4578decded1 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 22 Nov 2023 13:30:34 -0500 Subject: [PATCH 1/9] mobile breadcrumbs init --- .../FeedItemPreviewModal/FeedItemPreviewModal.tsx | 2 ++ .../components/BreadcrumbsItem/BreadcrumbsItem.tsx | 12 +++++++++++- .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx | 14 +++++++++++++- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx index 1725a65876..28c7d2ccea 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx @@ -4,6 +4,7 @@ import { useChatContext } from "@/pages/common/components/ChatComponent"; import { Modal } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces"; +import { Breadcrumbs } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components"; import { Circles, CommonFeed } from "@/shared/models"; import styles from "./FeedItemPreviewModal.module.scss"; @@ -72,6 +73,7 @@ const FeedItemPreviewModal: FC = (props) => { > {selectedFeedItem && ( <> + {title &&

{title}

} void; } +const MOBILE_MAXIMUM_ITEM_LENGTH = 13; + const BreadcrumbsItem: FC = (props) => { const { activeItem, @@ -30,6 +34,7 @@ const BreadcrumbsItem: FC = (props) => { const { getCommonPagePath } = useRoutesContext(); const containerRef = useRef(null); const contextMenuRef = useRef(null); + const isPhoneView = useIsPhoneView(); const handleButtonClick = () => { if (!withMenu) { @@ -46,7 +51,12 @@ const BreadcrumbsItem: FC = (props) => { return (
  • {withMenu && ( = (props) => { const dispatch = useDispatch(); const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId); const goToCreateCommon = useGoToCreateCommon(); + const isPhoneView = useIsPhoneView(); const handleItemClick = (item: ProjectsStateItem) => { if ( @@ -34,11 +36,15 @@ const FeedItemBreadcrumbs: FC = (props) => { } }; + const breadcrumbsItems = isPhoneView + ? [breadcrumbs.items[0]] + : breadcrumbs.items; + return (
      {breadcrumbs.areItemsLoading && } {!breadcrumbs.areItemsLoading && - breadcrumbs.items.map((item, index) => ( + breadcrumbsItems.map((item, index) => ( {index > 0 && } = (props) => { /> ))} + {isPhoneView && breadcrumbsItems.length < breadcrumbs.items.length && ( + <> + + ... + + )} {breadcrumbs.activeItem && ( <> {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && ( From 09859423ab26d5b43f79a5174c45be305b115bfb Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 22 Nov 2023 16:35:04 -0500 Subject: [PATCH 2/9] truncateBreadcrumbName util --- .../ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx | 7 ++++++- .../components/BreadcrumbsItem/BreadcrumbsItem.tsx | 9 ++------- .../components/Header/components/Breadcrumbs/utils.ts | 11 +++++++++++ 3 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx index d2e3235c9b..734ef30533 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx @@ -1,8 +1,10 @@ import React, { FC, useRef } from "react"; import { ButtonIcon, UserAvatar } from "@/shared/components"; +import { useIsPhoneView } from "@/shared/hooks/viewport"; import { RightArrowThinIcon } from "@/shared/icons"; import { ContextMenuRef } from "@/shared/ui-kit"; import { ProjectsStateItem } from "@/store/states"; +import { truncateBreadcrumbName } from "../../utils"; import { BreadcrumbsMenu } from "../BreadcrumbsMenu"; import styles from "./ActiveBreadcrumbsItem.module.scss"; @@ -26,6 +28,7 @@ const ActiveBreadcrumbsItem: FC = (props) => { } = props; const itemsButtonRef = useRef(null); const contextMenuRef = useRef(null); + const isPhoneView = useIsPhoneView(); const handleButtonClick = () => { if (itemsButtonRef.current) { @@ -44,7 +47,9 @@ const ActiveBreadcrumbsItem: FC = (props) => { userName={name} /> )} - {name} + + {isPhoneView ? truncateBreadcrumbName(name) : name} + {(items.length > 0 || commonIdToAddProject) && withMenu && ( void; } -const MOBILE_MAXIMUM_ITEM_LENGTH = 13; - const BreadcrumbsItem: FC = (props) => { const { activeItem, @@ -52,10 +50,7 @@ const BreadcrumbsItem: FC = (props) => {
    • {withMenu && ( diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts new file mode 100644 index 0000000000..14e906694d --- /dev/null +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts @@ -0,0 +1,11 @@ +import { truncate } from "lodash"; + +const OMISSION = "..."; +const MOBILE_MAXIMUM_ITEM_LENGTH = 10 + OMISSION.length; + +export const truncateBreadcrumbName = (itemName: string) => { + return truncate(itemName, { + length: MOBILE_MAXIMUM_ITEM_LENGTH, + omission: OMISSION, + }); +}; From 4c24551c6318b1cb0f1af454c3829ac01bc2f7ff Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 23 Nov 2023 15:05:28 -0500 Subject: [PATCH 3/9] updated isMobileView --- .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx index f9b85038ef..44ba176a00 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx @@ -1,6 +1,7 @@ import React, { FC } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { useIsPhoneView } from "@/shared/hooks/viewport"; +import { ScreenSize } from "@/shared/constants"; +import { getScreenSize } from "@/shared/store/selectors"; import { commonLayoutActions, MultipleSpacesLayoutFeedItemBreadcrumbs, @@ -23,7 +24,8 @@ const FeedItemBreadcrumbs: FC = (props) => { const dispatch = useDispatch(); const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId); const goToCreateCommon = useGoToCreateCommon(); - const isPhoneView = useIsPhoneView(); + const screenSize = useSelector(getScreenSize()); + const isMobileView = screenSize === ScreenSize.Mobile; const handleItemClick = (item: ProjectsStateItem) => { if ( @@ -36,7 +38,7 @@ const FeedItemBreadcrumbs: FC = (props) => { } }; - const breadcrumbsItems = isPhoneView + const breadcrumbsItems = isMobileView ? [breadcrumbs.items[0]] : breadcrumbs.items; @@ -55,7 +57,7 @@ const FeedItemBreadcrumbs: FC = (props) => { /> ))} - {isPhoneView && breadcrumbsItems.length < breadcrumbs.items.length && ( + {isMobileView && breadcrumbsItems.length < breadcrumbs.items.length && ( <> ... From 246e1ee000ba264e27de1bd114c20778c23ec985 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 23 Nov 2023 15:11:51 -0500 Subject: [PATCH 4/9] . --- .../ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx | 9 ++++++--- .../components/BreadcrumbsItem/BreadcrumbsItem.tsx | 9 ++++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx index 734ef30533..992ab9b25f 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx @@ -1,7 +1,9 @@ import React, { FC, useRef } from "react"; +import { useSelector } from "react-redux"; import { ButtonIcon, UserAvatar } from "@/shared/components"; -import { useIsPhoneView } from "@/shared/hooks/viewport"; +import { ScreenSize } from "@/shared/constants"; import { RightArrowThinIcon } from "@/shared/icons"; +import { getScreenSize } from "@/shared/store/selectors"; import { ContextMenuRef } from "@/shared/ui-kit"; import { ProjectsStateItem } from "@/store/states"; import { truncateBreadcrumbName } from "../../utils"; @@ -28,7 +30,8 @@ const ActiveBreadcrumbsItem: FC = (props) => { } = props; const itemsButtonRef = useRef(null); const contextMenuRef = useRef(null); - const isPhoneView = useIsPhoneView(); + const screenSize = useSelector(getScreenSize()); + const isMobileView = screenSize === ScreenSize.Mobile; const handleButtonClick = () => { if (itemsButtonRef.current) { @@ -48,7 +51,7 @@ const ActiveBreadcrumbsItem: FC = (props) => { /> )} - {isPhoneView ? truncateBreadcrumbName(name) : name} + {isMobileView ? truncateBreadcrumbName(name) : name} {(items.length > 0 || commonIdToAddProject) && withMenu && ( = (props) => { const { getCommonPagePath } = useRoutesContext(); const containerRef = useRef(null); const contextMenuRef = useRef(null); - const isPhoneView = useIsPhoneView(); + const screenSize = useSelector(getScreenSize()); + const isMobileView = screenSize === ScreenSize.Mobile; const handleButtonClick = () => { if (!withMenu) { @@ -49,7 +52,7 @@ const BreadcrumbsItem: FC = (props) => { return (
    • From 82781c15f3dc64818ad254e506562708debcfbea Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Sun, 26 Nov 2023 19:08:06 -0500 Subject: [PATCH 5/9] don't show the current item in the breadcrumb ; no left padding to first element in the breadcrumb --- .../BreadcrumbsItem/BreadcrumbsItem.module.scss | 11 +++++++++++ .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx | 14 ++++++++------ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss index 90e53e79cb..f526399b8f 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss @@ -1,4 +1,5 @@ @import "../../../../../../../../../constants"; +@import "../../../../../../../../..//styles/sizes.scss"; .button { --breadcrumbs-color: #{$c-gray-40}; @@ -27,3 +28,13 @@ --breadcrumbs-bg-color: #{$c-gray-20}; } } + +@include big-phone { + li { + &:first-child { + button { + padding-left: 0; + } + } + } +} diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx index 44ba176a00..e43c25d110 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx @@ -68,12 +68,14 @@ const FeedItemBreadcrumbs: FC = (props) => { {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && ( )} - + {!isMobileView && ( + + )} )}
    From f3ae4f4b1151f2d52f937c9b939e628e6b217508 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 28 Nov 2023 18:15:55 -0500 Subject: [PATCH 6/9] show 2 items in mobile breadcrumbs (not including the current) --- .../FeedItemBreadcrumbs.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx index e43c25d110..94ab8ad661 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx @@ -38,8 +38,10 @@ const FeedItemBreadcrumbs: FC = (props) => { } }; - const breadcrumbsItems = isMobileView - ? [breadcrumbs.items[0]] + const shouldTruncateBreadcrumb = + isMobileView && breadcrumbs.items.length >= 3; + const breadcrumbsItems = shouldTruncateBreadcrumb + ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]] : breadcrumbs.items; return ( @@ -49,6 +51,12 @@ const FeedItemBreadcrumbs: FC = (props) => { breadcrumbsItems.map((item, index) => ( {index > 0 && } + {shouldTruncateBreadcrumb && index === 1 && ( + <> + ... + + + )} = (props) => { /> ))} - {isMobileView && breadcrumbsItems.length < breadcrumbs.items.length && ( - <> - - ... - - )} {breadcrumbs.activeItem && ( <> {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && ( From 98ad6c45826e1d583c2fa9f3bdaf267119404e7f Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Thu, 30 Nov 2023 17:13:40 +0400 Subject: [PATCH 7/9] add truncate prop to breadcrumbs item components --- .../ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx | 9 +++------ .../components/BreadcrumbsItem/BreadcrumbsItem.tsx | 11 +++-------- .../ChatChannelBreadcrumbs/ChatChannelBreadcrumbs.tsx | 3 +++ .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx | 8 ++++---- .../ActiveFeedBreadcrumbsItem.tsx | 5 ++++- .../FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx | 2 +- 6 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx index 992ab9b25f..dc398e1e43 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx @@ -1,9 +1,6 @@ import React, { FC, useRef } from "react"; -import { useSelector } from "react-redux"; import { ButtonIcon, UserAvatar } from "@/shared/components"; -import { ScreenSize } from "@/shared/constants"; import { RightArrowThinIcon } from "@/shared/icons"; -import { getScreenSize } from "@/shared/store/selectors"; import { ContextMenuRef } from "@/shared/ui-kit"; import { ProjectsStateItem } from "@/store/states"; import { truncateBreadcrumbName } from "../../utils"; @@ -17,6 +14,7 @@ export interface ActiveBreadcrumbsItemProps { commonIdToAddProject?: string | null; withMenu?: boolean; isLoading?: boolean; + truncate?: boolean; } const ActiveBreadcrumbsItem: FC = (props) => { @@ -27,11 +25,10 @@ const ActiveBreadcrumbsItem: FC = (props) => { commonIdToAddProject, withMenu = true, isLoading = false, + truncate = false, } = props; const itemsButtonRef = useRef(null); const contextMenuRef = useRef(null); - const screenSize = useSelector(getScreenSize()); - const isMobileView = screenSize === ScreenSize.Mobile; const handleButtonClick = () => { if (itemsButtonRef.current) { @@ -51,7 +48,7 @@ const ActiveBreadcrumbsItem: FC = (props) => { /> )} - {isMobileView ? truncateBreadcrumbName(name) : name} + {truncate ? truncateBreadcrumbName(name) : name} {(items.length > 0 || commonIdToAddProject) && withMenu && ( void; withMenu?: boolean; isLoading?: boolean; + truncate?: boolean; onClick?: () => void; } @@ -28,14 +26,13 @@ const BreadcrumbsItem: FC = (props) => { onCommonCreate, withMenu = true, isLoading = false, + truncate = false, onClick, } = props; const history = useHistory(); const { getCommonPagePath } = useRoutesContext(); const containerRef = useRef(null); const contextMenuRef = useRef(null); - const screenSize = useSelector(getScreenSize()); - const isMobileView = screenSize === ScreenSize.Mobile; const handleButtonClick = () => { if (!withMenu) { @@ -52,9 +49,7 @@ const BreadcrumbsItem: FC = (props) => { return (
  • {withMenu && ( = (props) => { const { breadcrumbs } = props; + const isMobileView = useIsTabletView(); return (
    ); diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx index 41d95d5096..33657f1a95 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx @@ -2,8 +2,7 @@ import React, { FC, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { CommonEvent, CommonEventEmitter } from "@/events"; import { CommonService } from "@/services"; -import { ScreenSize } from "@/shared/constants"; -import { getScreenSize } from "@/shared/store/selectors"; +import { useIsTabletView } from "@/shared/hooks/viewport"; import { commonLayoutActions, MultipleSpacesLayoutFeedItemBreadcrumbs, @@ -25,8 +24,7 @@ const FeedItemBreadcrumbs: FC = (props) => { const dispatch = useDispatch(); const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId); const goToCreateCommon = useGoToCreateCommon(); - const screenSize = useSelector(getScreenSize()); - const isMobileView = screenSize === ScreenSize.Mobile; + const isMobileView = useIsTabletView(); const shouldTruncateBreadcrumb = isMobileView && breadcrumbs.items.length >= 3; const breadcrumbsItems = shouldTruncateBreadcrumb @@ -82,6 +80,7 @@ const FeedItemBreadcrumbs: FC = (props) => { activeItem={item} onCommonCreate={index === 0 ? goToCreateCommon : undefined} withMenu={itemsWithMenus} + truncate={isMobileView} onClick={() => handleItemClick(item)} /> @@ -97,6 +96,7 @@ const FeedItemBreadcrumbs: FC = (props) => { name={breadcrumbs.activeItem.name} image={breadcrumbs.activeItem.image} withMenu={itemsWithMenus} + truncate={isMobileView} /> )} diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx index 59095f3c9d..0536fecbb6 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx @@ -10,7 +10,10 @@ import { } from "../../../ActiveBreadcrumbsItem"; interface ActiveFeedBreadcrumbsItemProps - extends Pick { + extends Pick< + ActiveBreadcrumbsItemProps, + "name" | "image" | "withMenu" | "truncate" + > { activeItemId: string; } diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx index e28802c99f..6daa302210 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx @@ -12,7 +12,7 @@ import { type FeedBreadcrumbsItemProps = Pick< BreadcrumbsItemProps, - "activeItem" | "onCommonCreate" | "withMenu" | "onClick" + "activeItem" | "onCommonCreate" | "withMenu" | "onClick" | "truncate" >; const getItemsByParentId = ( From 713c362a0a7c536454a4a4fd7301dec6c55583bc Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Thu, 30 Nov 2023 17:15:06 +0400 Subject: [PATCH 8/9] fix mobile styles wrapper for breadcrumbs item --- .../components/BreadcrumbsItem/BreadcrumbsItem.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss index f526399b8f..2b02071deb 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss @@ -1,5 +1,5 @@ @import "../../../../../../../../../constants"; -@import "../../../../../../../../..//styles/sizes.scss"; +@import "../../../../../../../../../styles/sizes"; .button { --breadcrumbs-color: #{$c-gray-40}; @@ -29,7 +29,7 @@ } } -@include big-phone { +@include tablet { li { &:first-child { button { From 678e0c31ab7d841527db1d5ad50b0476ff8c0fc4 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 30 Nov 2023 09:09:52 -0500 Subject: [PATCH 9/9] code review updates --- .../Header/components/Breadcrumbs/Breadcrumbs.tsx | 4 ++++ .../BreadcrumbsItem/BreadcrumbsItem.module.scss | 4 ++-- .../components/BreadcrumbsItem/BreadcrumbsItem.tsx | 2 +- .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss | 7 +++++++ .../FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx | 9 ++++----- 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx index a8f1f7cb59..4be44d4474 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,6 +1,7 @@ import React, { FC } from "react"; import { useSelector } from "react-redux"; import { InboxItemType } from "@/shared/constants"; +import { useIsTabletView } from "@/shared/hooks/viewport"; import { selectMultipleSpacesLayoutBreadcrumbs } from "@/store/states"; import { ChatChannelBreadcrumbs, FeedItemBreadcrumbs } from "./components"; @@ -11,15 +12,18 @@ interface BreadcrumbsProps { const Breadcrumbs: FC = (props) => { const { itemsWithMenus = true } = props; const breadcrumbs = useSelector(selectMultipleSpacesLayoutBreadcrumbs); + const isMobileView = useIsTabletView(); if (breadcrumbs?.type === InboxItemType.ChatChannel) { return ; } if (breadcrumbs?.type === InboxItemType.FeedItemFollow) { + const truncate = isMobileView && breadcrumbs.items.length >= 3; return ( ); } diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss index 2b02071deb..90044b468d 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss @@ -30,9 +30,9 @@ } @include tablet { - li { + .li { &:first-child { - button { + .button { padding-left: 0; } } diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx index e70a5f5a8a..2839262254 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx @@ -47,7 +47,7 @@ const BreadcrumbsItem: FC = (props) => { }; return ( -
  • +
  • diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss index 8b08ef67bd..2c18a1abbb 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss @@ -1,4 +1,5 @@ @import "../../../../../../../../../constants"; +@import "../../../../../../../../../styles/sizes"; .container { margin: 0; @@ -10,3 +11,9 @@ overflow-x: auto; overflow-y: hidden; } + +@include tablet { + .container { + overflow: hidden; + } +} diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx index 33657f1a95..4e77edcce6 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx @@ -17,17 +17,16 @@ import styles from "./FeedItemBreadcrumbs.module.scss"; interface FeedItemBreadcrumbsProps { breadcrumbs: MultipleSpacesLayoutFeedItemBreadcrumbs; itemsWithMenus: boolean; + truncate: boolean; } const FeedItemBreadcrumbs: FC = (props) => { - const { breadcrumbs, itemsWithMenus } = props; + const { breadcrumbs, itemsWithMenus, truncate } = props; const dispatch = useDispatch(); const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId); const goToCreateCommon = useGoToCreateCommon(); const isMobileView = useIsTabletView(); - const shouldTruncateBreadcrumb = - isMobileView && breadcrumbs.items.length >= 3; - const breadcrumbsItems = shouldTruncateBreadcrumb + const breadcrumbsItems = truncate ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]] : breadcrumbs.items; @@ -70,7 +69,7 @@ const FeedItemBreadcrumbs: FC = (props) => { breadcrumbsItems.map((item, index) => ( {index > 0 && } - {shouldTruncateBreadcrumb && index === 1 && ( + {truncate && index === 1 && ( <> ...