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

Feat/80324 adjust design for left pane

packages/app/src/components/SearchPage.jsx

@@ -30,7 +30,7 @@ class SearchPage extends React.Component {
       searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
-      selectedPage: {},
+      focusedPage: {},
       selectedPages: new Set(),
       searchResultCount: 0,
       activePage: 1,
@@ -152,7 +152,7 @@ class SearchPage extends React.Component {
           searchedPages: res.data,
           searchResultMeta: res.meta,
           searchResultCount: res.meta.total,
-          selectedPage: res.data[0],
+          focusedPage: res.data[0],
           // reset active page if keyword changes, otherwise set the current state
           activePage: this.state.searchedKeyword === keyword ? this.state.activePage : 1,
         });
@@ -163,7 +163,7 @@ class SearchPage extends React.Component {
           searchedPages: [],
           searchResultMeta: {},
           searchResultCount: 0,
-          selectedPage: {},
+          focusedPage: {},
           activePage: 1,
         });
       }
@@ -178,7 +178,7 @@ class SearchPage extends React.Component {
       return page._id === pageId;
     });
     this.setState({
-      selectedPage: this.state.searchedPages[index],
+      focusedPage: this.state.searchedPages[index],
     });
   }
 
@@ -196,7 +196,7 @@ class SearchPage extends React.Component {
       <SearchResultContent
         appContainer={this.props.appContainer}
         searchingKeyword={this.state.searchingKeyword}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
       >
       </SearchResultContent>
     );
@@ -207,7 +207,7 @@ class SearchPage extends React.Component {
       <SearchResultList
         pages={this.state.searchedPages}
         deletionMode={false}
-        selectedPage={this.state.selectedPage}
+        focusedPage={this.state.focusedPage}
         selectedPages={this.state.selectedPages}
         searchResultCount={this.state.searchResultCount}
         activePage={this.state.activePage}

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

@@ -37,7 +37,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         id="check-all-pages"
         type="checkbox"
         name="check-all-pages"
-        className="custom-control custom-checkbox"
+        className="custom-control custom-checkbox ml-1"
         onChange={changeCheckboxStateHandler}
         checked={checkboxState === CheckboxType.INDETERMINATE || checkboxState === CheckboxType.ALL_CHECKED}
       />

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

@@ -7,7 +7,7 @@ import AppContainer from '../../client/services/AppContainer';
 type Props ={
   appContainer: AppContainer,
   searchingKeyword:string,
-  selectedPage : any,
+  focusedPage : any,
 }
 const SearchResultContent: FC<Props> = (props: Props) => {
   // Temporaly workaround for lint error
@@ -39,7 +39,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
       </div>
     );
   };
-  const content = renderPage(props.selectedPage);
+  const content = renderPage(props.focusedPage);
   return (
 
     <div>{content}</div>

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -6,6 +6,8 @@ import PaginationWrapper from '../PaginationWrapper';
 class SearchResultList extends React.Component {
 
   render() {
+    const { focusedPage } = this.props;
+    const focusedPageId = focusedPage != null && focusedPage.id != null ? focusedPage.id : '';
     return (
       <>
         {this.props.pages.map((page) => {
@@ -14,8 +16,10 @@ class SearchResultList extends React.Component {
         // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
           return (
             <SearchResultListItem
+              key={page._id}
               page={page}
               onClickInvoked={this.props.onClickInvoked}
+              isSelected={page._id === focusedPageId || false}
               noLink
             />
           );
@@ -39,6 +43,7 @@ class SearchResultList extends React.Component {
 SearchResultList.propTypes = {
   pages: PropTypes.array.isRequired,
   deletionMode: PropTypes.bool.isRequired,
+  focusedPage: PropTypes.object,
   selectedPages: PropTypes.array.isRequired,
   searchResultCount: PropTypes.number,
   activePage: PropTypes.number.isRequired,

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

@@ -17,12 +17,13 @@ type Props ={
       snippet: string,
     }
   },
-  onClickInvoked: (data: string) => void,
+  isSelected: boolean,
+  onClickInvoked?: (data: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, onClickInvoked } = props;
+  const { page, isSelected, onClickInvoked } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -35,7 +36,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
 
   return (
-    <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
+    <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}
@@ -51,7 +52,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
       >
         <div className="d-flex">
           {/* checkbox */}
-          <div className="form-check my-auto mx-2">
+          <div className="form-check my-auto mr-3">
             <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
           </div>
           <div className="w-100">

packages/app/src/styles/_search.scss

@@ -163,10 +163,10 @@
     overflow-y: scroll;
 
     .nav.nav-pills {
-      > li {
+      > .page-list-li {
         > a {
           height: 123px;
-          padding: 2px 8px;
+          padding: 2px 4px;
           word-break: break-all;
           border-radius: 0;
 

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

@@ -17,6 +17,8 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: $grw-marker-yellow !default;
+$bordercolor-search-item-left-active: $primary;
+$bgcolor-search-item-active: lighten($bordercolor-search-item-left-active, 76%);
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -591,16 +593,10 @@ body.pathname-sidebar {
         background-color: $bgcolor-keyword-highlighted;
       }
       .page-list-ul {
-        > li.nav-item > a.nav-link {
-          color: inherit;
-        }
-        a {
-          &.hover {
-            background-color: darken($bgcolor-global, 4%);
-          }
+        .page-list-li {
           &.active {
-            background-color: darken($bgcolor-global, 8%);
-            border-color: theme-color('primary');
+            background-color: $bgcolor-search-item-active;
+            border-color: $bordercolor-search-item-left-active;
           }
         }
       }