Merge pull request #4613 from weseek/feat/80324-80533-select-background-of-parent

feat: select background of parent

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

@@ -32,7 +32,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
 
 
   return (
-    <>
+    <div className="d-flex align-items-center">
       <input
         id="check-all-pages"
         type="checkbox"
@@ -43,7 +43,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
       />
       <button
         type="button"
-        className="btn text-danger font-weight-light p-0 ml-3"
+        className="btn text-danger font-weight-light p-0 ml-2"
         onClick={() => {
           if (onClickInvoked == null) { logger.error('onClickInvoked is null') }
           else { onClickInvoked() }
@@ -52,7 +52,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         <i className="icon-trash"></i>
         {t('search_result.delete_all_selected_page')}
       </button>
-    </>
+    </div>
   );
 
 };

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

@@ -47,44 +47,56 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   return (
-    <div className="">
-      <div className="search-page-input sps sps--abv">
-        <SearchPageFormTypeAny
-          keyword={props.searchingKeyword}
-          appContainer={props.appContainer}
-          onSearchFormChanged={props.onSearchInvoked}
-        />
+    <>
+      <div className="search-page-nav d-flex py-3 align-items-center">
+        <div className="flex-grow-1 mx-4">
+          <SearchPageFormTypeAny
+            keyword={props.searchingKeyword}
+            appContainer={props.appContainer}
+            onSearchFormChanged={props.onSearchInvoked}
+          />
+        </div>
+        <div className="mr-4">
+          {/* TODO: replace the following button */}
+          <button type="button">related pages</button>
+        </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
-      <div className="d-flex my-4">
-        {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
-        <DeleteSelectedPageGroup
-          checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
-          onClickInvoked={onDeleteSelectedPageHandler}
-          onCheckInvoked={onCheckAllPagesInvoked}
-        />
-        <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
-          <label className="my-0 mr-2" htmlFor="flexCheckDefault">
-            {t('Include Subordinated Target Page', { target: '/user' })}
-          </label>
-          <input
-            type="checkbox"
-            id="flexCheckDefault"
-            onClick={() => onExcludeUsersHome()}
+      <div className="d-flex align-items-center py-3 border-bottom border-gray">
+        <div className="d-flex mr-auto ml-3">
+          {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
+          <DeleteSelectedPageGroup
+            checkboxState={'' || CheckboxType.NONE_CHECKED} // Todo: change the left value to appropriate value
+            onClickInvoked={onDeleteSelectedPageHandler}
+            onCheckInvoked={onCheckAllPagesInvoked}
           />
         </div>
-        <div className="d-flex align-items-center border rounded border-gray px-2 mr-3">
-          <label className="my-0 mr-2" htmlFor="flexCheckChecked">
-            {t('Include Subordinated Target Page', { target: '/trash' })}
-          </label>
-          <input
-            type="checkbox"
-            id="flexCheckChecked"
-            onClick={() => onExcludeTrash()}
-          />
+        <div className="d-flex align-items-center mr-3">
+          <div className="border border-gray mr-3">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
+              <input
+                className="mr-2"
+                type="checkbox"
+                id="flexCheckDefault"
+                onClick={() => onExcludeUsersHome()}
+              />
+              {t('Include Subordinated Target Page', { target: '/user' })}
+            </label>
+          </div>
+          <div className="border border-gray">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckChecked">
+              <input
+                className="mr-2"
+                type="checkbox"
+                id="flexCheckChecked"
+                onClick={() => onExcludeTrash()}
+              />
+              {t('Include Subordinated Target Page', { target: '/trash' })}
+            </label>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

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

@@ -41,30 +41,29 @@ class SearchPageForm extends React.Component {
   render() {
     return (
       // TODO: modify design after other component is created
-      <div className="grw-search-form-in-search-result-page d-flex">
+      <div className="grw-search-form-in-search-result-page d-flex align-items-center">
         <div className="input-group flex-nowrap">
           <SearchForm
             onSubmit={this.search}
             keyword={this.state.searchedKeyword}
             onInputChange={this.onInputChange}
           />
-        </div>
-        <div className="input-group-append">
-          <button
-            className="btn btn-secondary"
-            type="button"
-            id="button-addon2"
-            onClick={() => {
-              try {
-                this.search();
-              }
-              catch (error) {
-                logger.error(error);
-              }
-            }}
-          >
-            <i className="icon-magnifier"></i>
-          </button>
+          <div className="btn-group-submit-search">
+            <button
+              className="btn border-0 pb-1"
+              type="button"
+              onClick={() => {
+                try {
+                  this.search();
+                }
+                catch (error) {
+                  logger.error(error);
+                }
+              }}
+            >
+              <i className="pr-2 icon-magnifier"></i>
+            </button>
+          </div>
         </div>
       </div>
     );

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

@@ -19,7 +19,8 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
-        <div className="col-xl-6  page-list search-result-list pr-0" id="search-result-list">
+        <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="d-flex align-items-start justify-content-between mt-1">
             <div className="search-result-meta">
@@ -31,7 +32,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
             <ul className="page-list-ul page-list-ul-flat nav nav-pills"><SearchResultList></SearchResultList></ul>
           </div>
         </div>
-        <div className="col-xl-6 d-none d-lg-block search-result-content">
+        <div className="col-lg-6 d-none d-lg-block search-result-content">
           <SearchResultContent></SearchResultContent>
         </div>
       </div>

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

@@ -88,7 +88,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={page._id} className={`page-list-li search-page-item w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <li key={page._id} className={`page-list-li search-page-item w-100 border-bottom px-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}

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

@@ -17,7 +17,7 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div id="main" class="main col-lg-12 search-page">
+    <div id="main" class="main col-lg-12 search-page mt-0">
       <div class="" id="search-page"></div>
     </div>
   </div>

packages/app/src/styles/_search.scss

@@ -1,6 +1,17 @@
-.search-listpage-icon {
-  font-size: 16px;
-  color: $gray-400;
+.search-page-nav {
+  background-color: #f7f7f7;
+}
+
+.search-group-submit-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
 }
 
 .search-listpage-clear {
@@ -102,17 +113,19 @@
   }
 
   .btn-group-submit-search {
-    position: absolute;
-    top: 0;
-    right: 0;
+    @extend .search-group-submit-button;
+  }
+}
 
-    z-index: 3;
+.grw-search-form-in-search-result-page {
+  .btn-group-submit-search {
+    @extend .search-group-submit-button;
+  }
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
+  button {
+    &:focus {
+      box-shadow: none !important;
+    }
   }
 }
 
@@ -158,7 +171,7 @@
 .search-result {
   .search-result-list {
     position: sticky;
-    top: 64px;
+    top: 0px;
     height: 100vh;
     overflow-y: scroll;