mobile breadcrumbs init

daostack · Nov 22, 2023 · 093db5a · 093db5a
1 parent b7ce3c3
commit 093db5a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/...commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx b/...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<FeedItemPreviewModalProps> = (props) => {
     >
       {selectedFeedItem && (
         <>
+          <Breadcrumbs itemsWithMenus={false} />
           {title && <h3 className={styles.itemTitle}>{title}</h3>}
           <FeedItem
             commonId={commonId}

diff --git a/...t/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx b/...t/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx
@@ -1,6 +1,8 @@
 import React, { FC, useRef } from "react";
 import { useHistory } from "react-router";
+import { truncate } from "lodash";
 import { useRoutesContext } from "@/shared/contexts";
+import { useIsPhoneView } from "@/shared/hooks/viewport";
 import { ContextMenuRef } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
@@ -16,6 +18,8 @@ export interface BreadcrumbsItemProps {
   onClick?: () => void;
 }
 
+const MOBILE_MAXIMUM_ITEM_LENGTH = 13;
+
 const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   const {
     activeItem,
@@ -30,6 +34,7 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   const { getCommonPagePath } = useRoutesContext();
   const containerRef = useRef<HTMLLIElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
+  const isPhoneView = useIsPhoneView();
 
   const handleButtonClick = () => {
     if (!withMenu) {
@@ -46,7 +51,12 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   return (
     <li ref={containerRef}>
       <button className={styles.button} onClick={handleButtonClick}>
-        {activeItem.name}
+        {isPhoneView
+          ? truncate(activeItem.name, {
+              length: MOBILE_MAXIMUM_ITEM_LENGTH,
+              omission: "...",
+            })
+          : activeItem.name}
       </button>
       {withMenu && (
         <BreadcrumbsMenu

diff --git a/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useIsPhoneView } from "@/shared/hooks/viewport";
 import {
   commonLayoutActions,
   MultipleSpacesLayoutFeedItemBreadcrumbs,
@@ -22,6 +23,7 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (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<FeedItemBreadcrumbsProps> = (props) => {
     }
   };
 
+  const breadcrumbsItems = isPhoneView
+    ? [breadcrumbs.items[0]]
+    : breadcrumbs.items;
+
   return (
     <ul className={styles.container}>
       {breadcrumbs.areItemsLoading && <LoadingBreadcrumbsItem />}
       {!breadcrumbs.areItemsLoading &&
-        breadcrumbs.items.map((item, index) => (
+        breadcrumbsItems.map((item, index) => (
           <React.Fragment key={item.commonId}>
             {index > 0 && <Separator />}
             <FeedBreadcrumbsItem
@@ -49,6 +55,12 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
             />
           </React.Fragment>
         ))}
+      {isPhoneView && breadcrumbsItems.length < breadcrumbs.items.length && (
+        <>
+          <Separator />
+          ...
+        </>
+      )}
       {breadcrumbs.activeItem && (
         <>
           {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && (