Merge branch 'dev/5.0.x' of https://github.com/weseek/growi into dev/5.0.x

packages/app/src/client/services/ContextExtractor.tsx

@@ -9,7 +9,7 @@ import {
   useSlackChannels, useNotFoundTargetPathOrId, useIsSearchPage,
 } from '../../stores/context';
 import {
-  useIsDeviceSmallerThanMd,
+  useIsDeviceSmallerThanMd, useIsDeviceSmallerThanLg,
   usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
 import { IUserUISettings } from '~/interfaces/user-ui-settings';
@@ -124,6 +124,9 @@ const ContextExtractorOnce: FC = () => {
   // Editor
   useSlackChannels(slackChannels);
 
+  // SearchResult
+  useIsDeviceSmallerThanLg();
+
   return null;
 };
 

packages/app/src/components/SearchPage.jsx

@@ -150,6 +150,12 @@ class SearchPage extends React.Component {
   // todo: refactoring
   // refs: https://redmine.weseek.co.jp/issues/82139
   async search(data) {
+    // reset following states when search runs
+    this.setState({
+      selectedPagesIdList: new Set(),
+      selectAllCheckboxType: CheckboxType.NONE_CHECKED,
+    });
+
     const keyword = data.keyword;
     if (keyword === '') {
       this.setState({

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

@@ -91,7 +91,7 @@ const SearchControl: FC <Props> = (props: Props) => {
 
   return (
     <div className="position-sticky fixed-top shadow-sm">
-      <div className="search-page-nav d-flex py-3 align-items-center">
+      <div className="grw-search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny
             keyword={props.searchingKeyword}

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

@@ -47,7 +47,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
               </div>
               <div className="input-group search-result-select-group ml-4 d-lg-flex d-none">
                 <div className="input-group-prepend">
-                  <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
+                  <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
                 </div>
                 <select
                   defaultValue={props.pagingLimit}

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

@@ -49,11 +49,10 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
   );
 
   const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
-
   return (
     <li
       key={pageData._id}
-      className={`w-100 page-list-li search-result-item border-bottom ${responsiveListStyleClass}`}
+      className={`w-100 grw-search-result-item border-bottom ${responsiveListStyleClass}`}
     >
       <div
         className="h-100 text-break"
@@ -77,8 +76,10 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
           <div className="search-item-text p-md-3 pl-2 py-3 pr-3 flex-grow-1">
             {/* page path */}
             <h6 className="mb-1 py-1">
-              <i className="icon-fw icon-home"></i>
-              <a href={pagePath.isRoot ? pagePath.latter : pagePath.former}>{pagePathElem}</a>
+              <a href={pagePath.isRoot ? pagePath.latter : pagePath.former}>
+                <i className="icon-fw icon-home"></i>
+                {pagePathElem}
+              </a>
             </h6>
             <div className="d-flex align-items-center mb-2">
               {/* Picture */}
@@ -106,7 +107,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
                 />
               </div>
             </div>
-            <div className="search-result-list-snippet py-1">
+            <div className="grw-search-result-list-snippet py-1">
               <Clamp lines={2}>
                 {
                   pageMeta.elasticSearchResult != null && pageMeta.elasticSearchResult?.snippet.length !== 0 ? (

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

@@ -29,7 +29,7 @@ const SortControl: FC <Props> = (props: Props) => {
     <>
       <div className="input-group">
         <div className="input-group-prepend">
-          <div className="input-group-text border" id="btnGroupAddon">
+          <div className="input-group-text border text-muted" id="btnGroupAddon">
             {renderOrderIcon(props.order)}
           </div>
         </div>

packages/app/src/styles/_search.scss

@@ -1,7 +1,3 @@
-.search-page-nav {
-  background-color: #f7f7f7;
-}
-
 .search-group-submit-button {
   position: absolute;
   top: 0;
@@ -190,7 +186,8 @@
       overflow-y: scroll;
     }
     .nav.nav-pills {
-      > .page-list-li {
+      > .grw-search-result-item {
+        min-height: 136px;
         &.active {
           border-left: solid 3px transparent;
           .search-item-checkbox {
@@ -222,9 +219,6 @@
         }
       }
     }
-    .search-result-item {
-      min-height: 136px;
-    }
 
     .search-result-meta {
       font-weight: bold;

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

@@ -60,6 +60,9 @@ textarea.form-control {
   background-color: theme-color('secondary');
   border: 1px solid theme-color('secondary');
   border-right: none;
+  &.text-muted {
+    color: theme-color('light') !important;
+  }
 }
 
 .input-group input {
@@ -453,3 +456,21 @@ ul.pagination {
 .grw-modal-head {
   border-color: $border-color-global;
 }
+
+/*
+ * search page
+ */
+.on-search {
+  .grw-search-result-item {
+    &.active {
+      background-color: lighten($bgcolor-global, 9%) !important;
+    }
+  }
+  .list-group-item-action:hover {
+    background-color: $bgcolor-list-hover;
+  }
+
+  .grw-search-result-list-snippet {
+    color: theme-color('light');
+  }
+}

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

@@ -5,7 +5,6 @@ $color-list-hover: $color-global !default;
 $bgcolor-list-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
-$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 $color-table: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;

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

@@ -17,11 +17,11 @@ $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%) !default;
+$bgcolor-search-item-active: lighten($primary, 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;
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -613,6 +613,9 @@ body.pathname-sidebar {
  * GROWI search result
  */
 .search-result {
+  .grw-search-page-nav {
+    background-color: $bgcolor-subnav;
+  }
   .search-result-list {
     .search-control {
       background-color: $bgcolor-global;
@@ -622,10 +625,10 @@ body.pathname-sidebar {
         background-color: $bgcolor-keyword-highlighted;
       }
       .page-list-ul {
-        .page-list-li {
+        .grw-search-result-item {
           &.active {
             background-color: $bgcolor-search-item-active;
-            border-color: $bordercolor-search-item-left-active;
+            border-color: $primary;
           }
         }
       }
@@ -638,11 +641,7 @@ body.pathname-sidebar {
     }
   }
 
-  .search-result-page-title {
-    color: $color-search-page-list-title;
-  }
-
-  .search-result-list-snippet {
+  .grw-search-result-list-snippet {
     color: $color-search-page-list-snippet;
   }
 }