Merge pull request #7017 from weseek/imprv/gw7850-implement-expand-and-compress-to-bookmark-list

Implement expand and compress bookmark content on user page

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -155,9 +155,8 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
 
 
   return (
-    <div id={`bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container" onClick={loadChildFolder}
-    >
-      <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center">
+    <div id={`grw-bookmark-folder-item-${folderId}`} className="grw-foldertree-item-container">
+      <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" onClick={loadChildFolder}>
         <div className="grw-triangle-container d-flex justify-content-center">
           {hasChildren() && (
             <button

packages/app/src/components/Icons/CompressIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CompressIcon = ():JSX.Element => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 45 45"
+    >
+      <path
+        fill="currentColor"
+        d="M22.45 44v-7.9l-3.85 3.8-2.1-2.1 7.45-7.4 7.35 7.4-2.1
+            2.1-3.75-3.8V44ZM8.05 27.5v-3H40v3Zm0-6.05v-3H40v3Zm15.9-5.85-7.4-7.4 2.1-2.1
+            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"/>
+    </svg>
+  );
+};
+
+export default CompressIcon;

packages/app/src/components/Icons/ExpandIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ExpandIcon = (): JSX.Element => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 45 45"
+    >
+      <path
+        fill="currentColor"
+        d="M8.1 44v-3h31.8v3Zm16-4.5-7.6-7.6 2.15-2.15
+            3.95 3.95V14.3l-3.95 3.95-2.15-2.15 7.6-7.6 7.6 7.6-2.15
+            2.15-3.95-3.95v19.4l3.95-3.95 2.15 2.15ZM8.1 7V4h31.8v3Z"
+      />
+    </svg>
+  );
+};
+
+export default ExpandIcon;

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -1,4 +1,7 @@
 @use '~/styles/molecules/page_list';
+@use '~/styles/variables' as var;
+$grw-sidebar-content-header-height: 58px;
+$grw-sidebar-content-footer-height: 50px;
 
 .user-page-footer :global {
   .grw-user-page-list-m {
@@ -49,5 +52,23 @@
         height: 18px;
       }
     }
+    .grw-expand-compress-btn {
+      max-height: 40px;
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-bottom: 3px;
+      }
+    }
   }
 }
+
+.grw-bookarks-contents-compressed {
+  max-height: calc(70vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}
+
+.grw-bookarks-contents-expanded {
+  max-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+  overflow-y: scroll;
+}

packages/app/src/components/UsersHomePageFooter.tsx

@@ -15,6 +15,8 @@ import { usePageDeleteModal } from '~/stores/modal';
 
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
 import BookmarkFolderTree from './Bookmarks/BookmarkFolderTree';
+import CompressIcon from './Icons/CompressIcon';
+import ExpandIcon from './Icons/ExpandIcon';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
 import { BookmarkList } from './PageList/BookmarkList';
 
@@ -27,6 +29,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   const { t } = useTranslation();
   const { creatorId } = props;
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
   const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
   const { open: openDeleteModal } = usePageDeleteModal();
@@ -66,7 +69,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
   return (
     <div className={`container-lg user-page-footer py-5 ${styles['user-page-footer']}`}>
       <div className="grw-user-page-list-m d-edit-none">
-        <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3">
+        <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3 d-flex">
           <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
           {t('footer.bookmarks')}
           <span className="pl-2">
@@ -78,6 +81,17 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
               <span className="mx-2 ">{t('bookmark_folder.new_folder')}</span>
             </button>
           </span>
+          <span className="ml-auto pl-2 ">
+            <button
+              className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`}
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              { isExpanded
+                ? <ExpandIcon/>
+                : <CompressIcon />
+              }
+            </button>
+          </span>
         </h2>
         { isCreateAction && (
           <div className="row">
@@ -90,29 +104,30 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
 
           </div>
         )}
-        {
-          <BookmarkFolderTree />
+        <div className={`${isExpanded ? `${styles['grw-bookarks-contents-expanded']}` : `${styles['grw-bookarks-contents-compressed']}`}`}>
+          {
+            <BookmarkFolderTree />
 
-        }
-        <div id="user-bookmark-list" className={`page-list p-3 ${styles['page-list']}`}>
-          <div className="grw-bookmarks-list-container">
-            {currentUserBookmarksData?.length === 0
-              ? t('No bookmarks yet')
-              : <ul className="list-group page-list-ul page-list-ul-flat mb-3">
-                {currentUserBookmarksData?.map(page => (
-                  <BookmarkList
-                    key={page._id}
-                    page={page}
-                    onRenamed={mutateCurrentUserBookmarks}
-                    onUnbookmarked={mutateCurrentUserBookmarks}
-                    onClickDeleteMenuItem={deleteMenuItemClickHandler}
-                  />
-                ))}
-              </ul>
-            }
+          }
+          <div id="user-bookmark-list" className={`page-list p-3 ${styles['page-list']}`}>
+            <div className="grw-bookmarks-list-container">
+              {currentUserBookmarksData?.length === 0
+                ? t('No bookmarks yet')
+                : <ul className="list-group page-list-ul page-list-ul-flat mb-3">
+                  {currentUserBookmarksData?.map(page => (
+                    <BookmarkList
+                      key={page._id}
+                      page={page}
+                      onRenamed={mutateCurrentUserBookmarks}
+                      onUnbookmarked={mutateCurrentUserBookmarks}
+                      onClickDeleteMenuItem={deleteMenuItemClickHandler}
+                    />
+                  ))}
+                </ul>
+              }
+            </div>
           </div>
         </div>
-
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">
         <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">

packages/app/src/styles/theme/_apply-colors.scss

@@ -711,3 +711,17 @@ Emoji picker modal
 .emoji-picker-modal {
   background-color: transparent !important;
 }
+
+/*
+Expand / compress button bookmark list on users page
+*/
+.grw-user-page-list-m {
+  .grw-expand-compress-btn {
+    color: $body-color;
+    background-color: $body-bg;
+    &.active {
+      background-color: darken($body-bg, 12%),
+    }
+  }
+
+}