Merge pull request #7886 from weseek/imprv/122419-bookmark-sidebar-design

imprv: Improved Design for Bookmarks Sidebar

apps/app/src/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -64,7 +64,7 @@ $grw-bookmark-item-padding-left: 35px;
 
     .grw-bookmark-item-list{
       min-width: 30px;
-      height: 35px;
+      height: 50px;
 
       .picture {
         width: 16px;

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -161,7 +161,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
               validationTarget={ValidationTarget.PAGE}
             />
           )
-          : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle} />}
+          : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle} isNarrowView />}
 
         <div className='grw-foldertree-control'>
           <PageItemControl

apps/app/src/components/PageList/PageListItemS.module.scss

@@ -0,0 +1,4 @@
+.page-title {
+  flex: 1;
+  line-height: 1.2;
+}

apps/app/src/components/PageList/PageListItemS.tsx

@@ -4,20 +4,26 @@ import { PageListMeta } from '@growi/ui/dist/components/PagePath/PageListMeta';
 import { PagePathLabel } from '@growi/ui/dist/components/PagePath/PagePathLabel';
 import { UserPicture } from '@growi/ui/dist/components/User/UserPicture';
 import Link from 'next/link';
+import Clamp from 'react-multiline-clamp';
 
 import { IPageHasId } from '~/interfaces/page';
 
+import styles from './PageListItemS.module.scss';
 
 type PageListItemSProps = {
   page: IPageHasId,
   noLink?: boolean,
-  pageTitle?: string,
+  pageTitle?: string
+  isNarrowView?: boolean,
 }
 
 export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
 
   const {
-    page, noLink = false, pageTitle,
+    page,
+    noLink = false,
+    pageTitle,
+    isNarrowView = false,
   } = props;
 
   const path = pageTitle != null ? pageTitle : page.path;
@@ -30,9 +36,17 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
   return (
     <>
       <UserPicture user={page.lastUpdateUser} noLink={noLink} />
-      {pagePathElement}
+      {isNarrowView ? (
+        <Clamp lines={2}>
+          <div className={`mx-2 ${styles['page-title']} ${noLink ? 'text-break' : ''}`}>
+            {pagePathElement}
+          </div>
+        </Clamp>
+      ) : (
+        pagePathElement
+      )}
       <span className="ml-2">
-        <PageListMeta page={page} />
+        <PageListMeta page={page} shouldSpaceOutIcon />
       </span>
     </>
   );

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import assert from 'assert';
 
@@ -45,7 +45,7 @@ const SeenUsersCount = (props: SeenUsersCountProps): JSX.Element => {
   const strengthClass = `strength-${strengthLevel}`; // strength-{0, 1, 2, 3, 4}
 
   return (
-    <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-3' : ''} ${strengthClass}`}>
+    <span className={`seen-users-count ${shouldSpaceOutIcon ? 'mr-2' : ''} ${strengthClass}`}>
       <i className="footstamp-icon"><FootstampIcon /></i>
       {count}
     </span>
@@ -69,40 +69,40 @@ export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) =>
   // top check
   let topLabel;
   if (isTopPage(page.path)) {
-    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''} top-label`}>TOP</span>;
+    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-2' : ''} top-label`}>TOP</span>;
   }
 
   // template check
   let templateLabel;
   if (checkTemplatePath(page.path)) {
-    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''}`}>TMPL</span>;
+    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-2' : ''}`}>TMPL</span>;
   }
 
   let commentCount;
   if (page.commentCount > 0) {
-    commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
+    commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
   }
 
   let likerCount;
   if (props.likerCount != null && props.likerCount > 0) {
-    likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-heart-o" />{props.likerCount}</span>;
+    likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="fa fa-heart-o" />{props.likerCount}</span>;
   }
 
   let locked;
   if (page.grant !== 1) {
-    locked = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-lock" /></span>;
+    locked = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="icon-lock" /></span>;
   }
 
   let bookmarkCount;
   if (props.bookmarkCount != null && props.bookmarkCount > 0) {
-    bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
+    bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-2' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
   }
 
   return (
     <span className="page-list-meta">
       {topLabel}
       {templateLabel}
-      <SeenUsersCount count={page.seenUsers.length} basisViewersCount={basisViewersCount} />
+      <SeenUsersCount count={page.seenUsers.length} basisViewersCount={basisViewersCount} shouldSpaceOutIcon={shouldSpaceOutIcon} />
       {commentCount}
       {likerCount}
       {locked}