Add indiana drag scroll for column layout (#29)

Signed-off-by: Antoine Chabert <[email protected]>

package.json

@@ -100,6 +100,7 @@
     "react-dnd-html5-backend": "^10.0.2",
     "react-dom": "^16.13.1",
     "react-draggable": "^4.3.1",
+    "react-indiana-drag-scroll": "^1.6.1",
     "react-markdown": "^4.3.1",
     "react-pdf": "^4.1.0",
     "react-query": "^1.3.3",

src/components/paginated-results/paginated-results.module.css

@@ -1,78 +1,78 @@
 .results {
-  --space: 0.8rem;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding-bottom: 2rem;
+    --space: 0.8rem;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-bottom: 2rem;
 }
 
 .results > * {
-  margin-top: 0;
-  margin-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 .results > * + * {
-  margin-top: var(--space);
+    margin-top: var(--space);
 }
 
 .results :global(.bp3-card) {
-  padding: 10px;
-  overflow: hidden;
-  word-break: break-word;
+    padding: 10px;
+    overflow: hidden;
+    word-break: break-word;
 }
 
 .resultsHeader {
-  display: flex;
-  align-items: center;
-  min-height: 30px;
+    display: flex;
+    align-items: center;
+    min-height: 30px;
 }
 
 .moduleLogo {
-  height: 1rem;
-  margin-right: 0.4rem;
+    height: 1rem;
+    margin-right: 0.4rem;
 }
 
 .moduleTitle {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .resultTotal {
-  margin-bottom: 0;
-  margin-left: 5px;
+    margin-bottom: 0;
+    margin-left: 5px;
 }
 
 :global(.column-layout) .resultTotal {
-  display: none;
+    display: none;
 }
 
 .moduleFilters {
-  margin-left: auto;
+    margin-left: auto;
 }
 
 :global(.column-layout) .moduleFilters {
-  display: none;
+    display: none;
 }
 
 .moduleFiltersMore {
-  display: none;
-  margin-left: auto;
+    display: none;
+    margin-left: auto;
 }
 
 .moduleFiltersMoreContainer {
-  padding: 3px;
+    padding: 3px;
 }
 
 :global(.column-layout) .moduleFiltersMore {
-  display: block;
+    display: block;
 }
 
 .resultList {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  grid-gap: 1rem;
-  grid-auto-flow: row dense;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-gap: 1rem;
+    grid-auto-flow: row dense;
 }
 
 .resultItem {
-  height: fit-content;
+    height: fit-content;
 }

src/views/search-view.js

@@ -12,6 +12,7 @@ import SettingsBar from "../components/settings-bar/settings-bar";
 import ButtonLink from "../components/button-link";
 import ErrorBoundary from "../components/error-boundary";
 import SearchString from "../shared/search-query-parser";
+import ScrollContainer from "react-indiana-drag-scroll";
 
 import icon from "../icon.svg";
 import { useShortcut } from "../services/shortcut-manager";
@@ -113,8 +114,13 @@ export function SearchView({ store }) {
         }}
       />
       {searchViewState.nested.rawQuery.get() && hasModules ? (
-        <div style={{ display: "flex" }}>
-          <div className={styles.searchResults}>
+        <div className={styles.searchContainer}>
+          <ScrollContainer
+            vertical={false}
+            horizontal
+            hideScrollbars={false}
+            className={styles.searchResults}
+          >
             {enabledModules.map((moduleState) => {
               const ResultComponent = getModuleView(moduleState.nested.moduleType.get());
               return (
@@ -128,7 +134,7 @@ export function SearchView({ store }) {
                 </Suspense>
               );
             })}
-          </div>
+          </ScrollContainer>
           <Sidebar searchViewState={searchViewState} />
         </div>
       ) : (

src/views/search-view.module.css

@@ -1,11 +1,23 @@
+.searchContainer {
+    display: flex;
+}
+
 .searchResults {
-  padding: 1rem;
-  display: grid;
-  grid-gap: 1rem;
-  grid-auto-flow: row dense;
-  overflow: auto;
-  height: calc(100vh - 101px);
-  flex-grow: 1;
+    padding: 1rem;
+    display: grid;
+    grid-gap: 1rem;
+    grid-auto-flow: row dense;
+    overflow: auto;
+    height: calc(100vh - 101px);
+    flex-grow: 1;
+}
+
+:global(.column-layout .indiana-scroll-container:hover) {
+    cursor: grab;
+}
+
+:global(.column-layout .indiana-scroll-container.indiana-scroll-container--dragging) {
+    cursor: grabbing;
 }
 
 :global(.column-layout) .searchResults {
@@ -17,13 +29,13 @@
 }
 
 .searchResultsSidebar {
-  outline: none !important;
-  padding: 20px;
-  height: calc(100vh - 81px);
-  overflow: auto;
-  word-break: break-word;
+    outline: none !important;
+    padding: 20px;
+    height: calc(100vh - 81px);
+    overflow: auto;
+    word-break: break-word;
 }
 
 .searchResultsSidebar img {
-  max-width: 100%;
+    max-width: 100%;
 }

src/views/settings-view.module.css

@@ -8,7 +8,7 @@
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
-.wrapper{
+.wrapper {
     overflow-y: auto;
     max-height: calc(100vh - 110px);
 }