Merge pull request #4871 from weseek/feat/80324-adjust-design-for-left-pane

Feat/80324 adjust design for left pane

packages/app/src/components/SearchPage.jsx

@@ -35,7 +35,7 @@ class SearchPage extends React.Component {
       selectedPagesIdList: new Set(),
       searchResultCount: 0,
       activePage: 1,
-      pagingLimit: this.props.appContainer.config.pageLimitationL,
+      pagingLimit: this.props.appContainer.config.pageLimitationL || 50,
       excludeUserPages: true,
       excludeTrashPages: true,
       sort: SORT_AXIS.RELATION_SCORE,
@@ -330,7 +330,8 @@ class SearchPage extends React.Component {
           searchResultMeta={this.state.searchResultMeta}
           searchingKeyword={this.state.searchedKeyword}
           onPagingLimitChanged={this.onPagingLimitChanged}
-          initialPagingLimit={this.props.appContainer.config.pageLimitationL || 50}
+          pagingLimit={this.state.pagingLimit}
+          activePage={this.state.activePage}
         >
         </SearchPageLayout>
         <PageDeleteModal

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -80,7 +80,7 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   return (
-    <>
+    <div className="position-sticky fixed-top">
       <div className="search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny
@@ -98,8 +98,8 @@ const SearchControl: FC <Props> = (props: Props) => {
         </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
-      <div className="d-flex align-items-center py-3 border-bottom border-gray">
-        <div className="d-flex mr-auto ml-3">
+      <div className="search-control d-flex align-items-center py-2 border-bottom border-gray">
+        <div className="d-flex mr-auto ml-4">
           {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
           <DeleteSelectedPageGroup
             isSelectAllCheckboxDisabled={searchResultCount === 0}
@@ -118,9 +118,9 @@ const SearchControl: FC <Props> = (props: Props) => {
             <i className="icon-equalizer"></i>
           </button>
         </div>
-        <div className="d-none d-lg-flex align-items-center mr-3">
+        <div className="d-none d-lg-flex align-items-center mr-4">
           <div className="border border-gray mr-3">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckDefault">
               <input
                 className="mr-2"
                 type="checkbox"
@@ -131,7 +131,7 @@ const SearchControl: FC <Props> = (props: Props) => {
             </label>
           </div>
           <div className="border border-gray">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckChecked">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckChecked">
               <input
                 className="mr-2"
                 type="checkbox"
@@ -144,7 +144,7 @@ const SearchControl: FC <Props> = (props: Props) => {
         </div>
       </div>
       {rednerSearchOptionModal()}
-    </>
+    </div>
   );
 };
 

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -2,9 +2,9 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type SearchResultMeta = {
-  took : number,
-  total : number,
-  results: number
+  took?: number,
+  total?: number,
+  results?: number
 }
 
 type Props = {
@@ -13,46 +13,56 @@ type Props = {
   SearchResultContent: React.FunctionComponent,
   searchResultMeta: SearchResultMeta,
   searchingKeyword: string,
-  initialPagingLimit: number,
+  pagingLimit: number,
+  activePage: number,
   onPagingLimitChanged: (limit: number) => void
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
   const {
-    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword,
+    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword, pagingLimit, activePage,
   } = props;
 
+  const renderShowingPageCountInfo = () => {
+    if (searchResultMeta.total == null || searchResultMeta.total === 0) return;
+    const leftNum = pagingLimit * (activePage - 1) + 1;
+    const rightNum = (leftNum - 1) + (searchResultMeta.results || 0);
+    return <span className="ml-3">{`${leftNum}-${rightNum}`} / {searchResultMeta.total || 0}</span>;
+  };
+
   return (
     <div className="content-main">
-      <div className="search-result row" id="search-result">
-        <div className="col-lg-6 page-list border boder-gray search-result-list px-0" id="search-result-list">
-          <nav><SearchControl></SearchControl></nav>
+      <div className="search-result d-flex" id="search-result">
+        <div className="flex-grow-1 flex-basis-0 page-list border boder-gray search-result-list" id="search-result-list">
+
+          <SearchControl></SearchControl>
           <div className="search-result-list-scroll">
-            <div className="d-flex align-items-center justify-content-between mt-1 mb-3">
-              <div className="search-result-meta text-nowrap mr-3">
+            <div className="d-flex align-items-center justify-content-between my-3 ml-4">
+              <div className="search-result-meta text-nowrap">
                 <span className="font-weight-light">{t('search_result.result_meta')} </span>
                 <span className="h5">{`"${searchingKeyword}"`}</span>
                 {/* Todo: replace "1-10" to the appropriate value */}
-                <span className="ml-3">1-10 / {searchResultMeta.total || 0}</span>
+                {renderShowingPageCountInfo()}
               </div>
-              <div className="input-group search-result-select-group">
+              <div className="input-group search-result-select-group ml-4">
                 <div className="input-group-prepend">
                   <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
                 </div>
                 <select className="custom-select" id="inputGroupSelect01" onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}>
                   {[20, 50, 100, 200].map((limit) => {
-                    return <option selected={limit === props.initialPagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+                    return <option selected={limit === props.pagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
                   })}
                 </select>
               </div>
             </div>
+
             <div className="page-list">
-              <ul className="page-list-ul page-list-ul-flat nav nav-pills"><SearchResultList></SearchResultList></ul>
+              <ul className="page-list-ul page-list-ul-flat pl-4 nav nav-pills"><SearchResultList></SearchResultList></ul>
             </div>
           </div>
         </div>
-        <div className="col-lg-6 d-none d-lg-block search-result-content">
+        <div className="flex-grow-1 flex-basis-0 d-none d-lg-block search-result-content">
           <SearchResultContent></SearchResultContent>
         </div>
       </div>

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -39,9 +39,9 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   );
 
   return (
-    <li key={pageData._id} className={`page-list-li search-page-item w-100 border-bottom px-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <li key={pageData._id} className={`page-list-li search-page-item w-100 list-group-item-action pl-2 ${isSelected ? 'active' : ''}`}>
       <a
-        className="d-block pt-3"
+        className="d-block py-4 h-100"
         href={pageId}
         onClick={() => onClickSearchResultItem != null && onClickSearchResultItem(pageData._id)}
       >
@@ -70,7 +70,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               {/* page title */}
               <h3 className="mb-0">
                 <UserPicture user={pageData.lastUpdateUser} />
-                <span className="mx-2">{dPagePath.latter}</span>
+                <span className="mx-2 search-result-page-title">{dPagePath.latter}</span>
               </h3>
               {/* page meta */}
               <div className="d-flex mx-2">
@@ -81,7 +81,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
                 <PageItemControl page={pageData} onClickDeleteButton={props.onClickDeleteButton} isEnableActions={isEnableActions} />
               </div>
             </div>
-            <div className="my-2">
+            <div className="my-2 search-result-list-snippet">
               {
                 pageMeta.elasticSearchResult != null && (
                   <Clamp lines={2}>

packages/app/src/server/views/search.html

@@ -11,16 +11,14 @@
   data-target="#search-result-list"
 {% endblock %}
 
+<!-- add .on-search to body tag class in layout -->
+{% set additionalBodyClass = 'on-search' %}
+
 {% block layout_main %}
 <div id="grw-fav-sticky-trigger" class="sticky-top"></div>
 
-<div class="container-fluid">
-
-  <div class="row">
-    <div id="main" class="main col-lg-12 search-page mt-0">
-      <div class="" id="search-page"></div>
-    </div>
+  <div id="main" class="main search-page mt-0">
+    <div id="search-page"></div>
   </div>
 
-</div><!-- /.container-fluid -->
 {% endblock %} {# layout_main #}

packages/app/src/styles/_override-bootstrap.scss

@@ -153,7 +153,10 @@
 
   // label
   label {
-    font-weight: 700;
+    // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
+    :not(.with-no-font-weight) {
+      font-weight: 700;
+    }
   }
 
   // disabled button (reproduction from bootstrap3.)

packages/app/src/styles/_search.scss

@@ -168,31 +168,33 @@
   }
 }
 
+// TODO : keep the selected list in the same positino as other lists
+// TASK : https://redmine.weseek.co.jp/issues/82470
 .search-result {
   .search-result-list {
     position: sticky;
     top: 0px;
 
     .search-result-list-scroll {
-      height: calc(100vh - 125px); // subtract the height of SearchControl component
+      // subtract the height of SearchControl component + a gap made above #page-wrapper and below #main
+      height: calc(100vh - 117px);
       overflow-y: scroll;
     }
     .nav.nav-pills {
       > .page-list-li {
+        &.active {
+          // add this negative margin to avoid inner elements of .page-list-li.active
+          // moving to right side by border-left's px size.
+          margin-left: -3px;
+          border-left: solid 3px transparent;
+        }
         > a {
-          height: 123px;
-          padding: 2px 4px;
           word-break: break-all;
-          border-radius: 0;
 
           &:hover {
             color: inherit;
             text-decoration: none;
           }
-          &.active {
-            padding-right: 5px;
-            border-left: solid 3px transparent;
-          }
           > * {
             margin-right: 3px;
           }
@@ -249,6 +251,18 @@
   }
 }
 
+// class to add to .grw-navbar to hide its navbar above the displaying page
+body.on-search {
+  .grw-navbar {
+    position: fixed !important;
+    width: 100vw;
+  }
+  .page-wrapper {
+    position: relative;
+    top: $grw-navbar-border-width;
+  }
+}
+
 // 2021/9/22 TODO: Remove after moving to SearchResult
 .search-page-input {
   position: sticky;

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

@@ -20,6 +20,8 @@ $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
 $bordercolor-search-item-left-active: $primary;
 $bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%) !default;
 $color-search-item-pagelist-meta: $gray-500 !default;
+$color-search-page-list-title: $color-global !default;
+$color-search-page-list-snippet: $gray-600 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -599,6 +601,9 @@ body.pathname-sidebar {
  */
 .search-result {
   .search-result-list {
+    .search-control {
+      background-color: $bgcolor-global;
+    }
     .page-list {
       .highlighted-keyword {
         background-color: $bgcolor-keyword-highlighted;
@@ -619,6 +624,14 @@ body.pathname-sidebar {
       }
     }
   }
+
+  .search-result-page-title {
+    color: $color-search-page-list-title;
+  }
+
+  .search-result-list-snippet {
+    color: $color-search-page-list-snippet;
+  }
 }
 
 /*