From caf38df8816d80b56491a57b56fb508bb003cd51 Mon Sep 17 00:00:00 2001 From: Antoine Chabert Date: Sun, 10 May 2020 22:15:56 +0200 Subject: [PATCH] Add indiana drag scroll for column layout (#29) Signed-off-by: Antoine Chabert --- package-lock.json | 20 ++++++ package.json | 1 + .../paginated-results.module.css | 62 +++++++++---------- src/views/search-view.js | 12 +++- src/views/search-view.module.css | 38 ++++++++---- src/views/settings-view.module.css | 2 +- 6 files changed, 87 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2ef28a0..87412eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4693,6 +4693,11 @@ "assert-plus": "^1.0.0" } }, + "debounce": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", + "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==" + }, "debounce-fn": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/debounce-fn/-/debounce-fn-3.0.1.tgz", @@ -5060,6 +5065,11 @@ "stream-shift": "^1.0.0" } }, + "easy-bem": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.0.2.tgz", + "integrity": "sha512-tHtLDhcEHZIMKdiiZElQoR8TcZ/6rvcNp7//93Vx/mqNLah9BOFGhhzTUfWLJs7uxZiKMdP/KzGOtzq14DrrqQ==" + }, "easy-table": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/easy-table/-/easy-table-1.0.0.tgz", @@ -12234,6 +12244,16 @@ "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==", "dev": true }, + "react-indiana-drag-scroll": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-1.6.1.tgz", + "integrity": "sha512-wdeKLI42VJtcp+HEV9O9dxg2C6h9Yn8ot0DbxU8NiXvK3LMAXbqcTi+e5IBrBteI5Jt85jFUsvYcJqgkbNpDCA==", + "requires": { + "classnames": "^2.2.6", + "debounce": "^1.2.0", + "easy-bem": "^1.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 30b6763..8f074d5 100644 --- a/package.json +++ b/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", diff --git a/src/components/paginated-results/paginated-results.module.css b/src/components/paginated-results/paginated-results.module.css index fb67482..5145c97 100644 --- a/src/components/paginated-results/paginated-results.module.css +++ b/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; } diff --git a/src/views/search-view.js b/src/views/search-view.js index 0c7a8c6..5f3e728 100644 --- a/src/views/search-view.js +++ b/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 ? ( -
-
+
+ {enabledModules.map((moduleState) => { const ResultComponent = getModuleView(moduleState.nested.moduleType.get()); return ( @@ -128,7 +134,7 @@ export function SearchView({ store }) { ); })} -
+
) : ( diff --git a/src/views/search-view.module.css b/src/views/search-view.module.css index 748a962..3934673 100644 --- a/src/views/search-view.module.css +++ b/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%; } diff --git a/src/views/settings-view.module.css b/src/views/settings-view.module.css index c7fae37..2864d4b 100644 --- a/src/views/settings-view.module.css +++ b/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); }