Merge branch 'dev/5.0.x' into feat/81920-83419-fix-search-right-pane

packages/app/src/components/Common/ClosableTextInput.tsx

@@ -74,13 +74,25 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
   });
 
 
-  // TODO: improve style
+  const AlertInfo = () => {
+    if (currentAlertInfo == null) {
+      return <></>;
+    }
+
+    const alertType = currentAlertInfo.type != null ? currentAlertInfo.type : AlertType.ERROR;
+    const alertMessage = currentAlertInfo.message != null ? currentAlertInfo.message : 'Invalid value';
+    return (
+      <p className="text-danger text-center mt-1">{alertType}: {alertMessage}</p>
+    );
+  };
+
+
   return (
     <div className={props.isShown ? 'd-block' : 'd-none'}>
       <input
         ref={inputRef}
         type="text"
-        className="form-control"
+        className="form-control mt-1"
         placeholder={props.placeholder}
         name="input"
         onChange={onChangeHandler}
@@ -88,14 +100,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
         onBlur={onBlurHandler}
         autoFocus={false}
       />
-      <div>
-        {currentAlertInfo != null && (
-          <p>
-            {/* eslint-disable-next-line max-len */}
-            {currentAlertInfo.type != null ? currentAlertInfo.type : AlertType.ERROR}: {currentAlertInfo.message != null ? currentAlertInfo.message : 'Invalid value' }
-          </p>
-        )}
-      </div>
+      <AlertInfo />
     </div>
   );
 });

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

@@ -49,7 +49,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
               <input
                 className="mr-2"
                 type="checkbox"
-                onClick={props.onExcludeUserPagesSwitched}
+                onChange={props.onExcludeUserPagesSwitched}
                 checked={!excludeUserPages}
               />
               {t('Include Subordinated Target Page', { target: '/user' })}
@@ -60,7 +60,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
               <input
                 className="mr-2"
                 type="checkbox"
-                onClick={props.onExcludeTrashPagesSwitched}
+                onChange={props.onExcludeTrashPagesSwitched}
                 checked={!excludeTrashPages}
               />
               {t('Include Subordinated Target Page', { target: '/trash' })}

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

@@ -34,7 +34,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
   return (
     <div className="content-main">
       <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">
+        <div className="mw-0 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">
@@ -67,7 +67,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="flex-grow-1 flex-basis-0 d-none d-lg-block search-result-content">
+        <div className="mw-0 flex-grow-1 flex-basis-0 d-none d-lg-block search-result-content">
           <SearchResultContent></SearchResultContent>
         </div>
       </div>

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -4,6 +4,7 @@ import React, {
 import nodePath from 'path';
 import { useTranslation } from 'react-i18next';
 import { pagePathUtils } from '@growi/core';
+import { toastWarning } from '~/client/util/apiNotification';
 
 import { ItemNode } from './ItemNode';
 import { IPageHasId } from '~/interfaces/page';
@@ -73,10 +74,10 @@ const ItemControl: FC<ItemControlProps> = memo((props: ItemControlProps) => {
       <PageItemControl page={props.page} onClickDeleteButton={onClickDeleteButton} isEnableActions={props.isEnableActions} isDeletable={props.isDeletable} />
       <button
         type="button"
-        className="btn-link nav-link border-0 rounded grw-btn-page-management py-0"
+        className="border-0 rounded grw-btn-page-management p-0"
         onClick={onClickPlusButton}
       >
-        <i className="icon-plus text-muted"></i>
+        <i className="icon-plus text-muted d-block p-1" />
       </button>
     </>
   );
@@ -148,7 +149,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   // TODO: go to create page page
   const onPressEnterHandler = () => {
-    console.log('Enter key was pressed!');
+    toastWarning(t('search_result.currently_not_implemented'));
   };
 
   // didMount
@@ -179,7 +180,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <>
-      <div className={`grw-pagetree-item d-flex align-items-center ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}>
+      <div className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}>
         <button
           type="button"
           className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
@@ -217,7 +218,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       )}
       {
         isOpen && hasChildren() && currentChildren.map(node => (
-          <div key={node.page._id} className="ml-3 mt-2">
+          <div key={node.page._id} className="grw-pagetree-item-container mt-2">
             <Item
               isEnableActions={isEnableActions}
               itemNode={node}

packages/app/src/styles/_page-tree.scss

@@ -1,5 +1,6 @@
 $grw-sidebar-content-header-height: 58px;
 $grw-sidebar-content-footer-height: 50px;
+$grw-pagetree-item-padding-left: 10px;
 
 .grw-pagetree {
   min-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
@@ -55,4 +56,57 @@ $grw-sidebar-content-footer-height: 50px;
       }
     }
   }
+
+  // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
+
+  > .grw-pagetree-item-container {
+    > .grw-pagetree-item {
+      padding-left: $grw-pagetree-item-padding-left;
+    }
+    > .grw-pagetree-item-container {
+      > .grw-pagetree-item {
+        padding-left: $grw-pagetree-item-padding-left * 2;
+      }
+      > .grw-pagetree-item-container {
+        > .grw-pagetree-item {
+          padding-left: $grw-pagetree-item-padding-left * 3;
+        }
+        > .grw-pagetree-item-container {
+          > .grw-pagetree-item {
+            padding-left: $grw-pagetree-item-padding-left * 4;
+          }
+          > .grw-pagetree-item-container {
+            > .grw-pagetree-item {
+              padding-left: $grw-pagetree-item-padding-left * 5;
+            }
+            > .grw-pagetree-item-container {
+              > .grw-pagetree-item {
+                padding-left: $grw-pagetree-item-padding-left * 6;
+              }
+              > .grw-pagetree-item-container {
+                > .grw-pagetree-item {
+                  padding-left: $grw-pagetree-item-padding-left * 7;
+                }
+                > .grw-pagetree-item-container {
+                  > .grw-pagetree-item {
+                    padding-left: $grw-pagetree-item-padding-left * 8;
+                  }
+                  > .grw-pagetree-item-container {
+                    > .grw-pagetree-item {
+                      padding-left: $grw-pagetree-item-padding-left * 9;
+                    }
+                    .grw-pagetree-item-container {
+                      > .grw-pagetree-item {
+                        padding-left: $grw-pagetree-item-padding-left * 10;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }

packages/app/src/styles/_search.scss

@@ -184,8 +184,8 @@
     top: 0px;
 
     .search-result-list-scroll {
-      // subtract the height of SearchControl component + a gap made above #page-wrapper and below #main
-      height: calc(100vh - 117px);
+      // subtract the height of GrowiNavbar + (SearchControl component + other factors)
+      height: calc(100vh - (($grw-navbar-height + $grw-navbar-border-width) + 110px));
       overflow-y: scroll;
     }
     .nav.nav-pills {
@@ -278,18 +278,6 @@
   }
 }
 
-// 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/_sidebar.scss

@@ -327,3 +327,19 @@
 .grw-sidebar-backdrop.modal-backdrop {
   z-index: $zindex-fixed + 1;
 }
+
+// style to apply when displaying search page
+.growi.on-search {
+  // set sidebar height shown in search page
+  $search-page-sidebar-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
+
+  .grw-sidebar {
+    height: $search-page-sidebar-height;
+    .data-layout-container {
+      height: $search-page-sidebar-height;
+    }
+    .grw-sidebar-nav {
+      height: $search-page-sidebar-height;
+    }
+  }
+}