From e555d790e62855e3ab285646c657b275074d88b0 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Thu, 15 Aug 2019 22:48:39 -0700 Subject: [PATCH] Fixed: Scrolling of modals with tabular content in iOS Co-Authored-By: Mark McDowall --- .../AlbumInteractiveSearchModalContent.js | 3 ++- .../FileBrowser/FileBrowserModalContent.js | 6 +++++- frontend/src/Components/Modal/ModalBody.js | 2 +- frontend/src/Components/Scroller/Scroller.css | 9 +++++++++ frontend/src/Components/Scroller/Scroller.js | 2 +- frontend/src/Components/Table/Table.css | 13 +++++++++--- frontend/src/Components/Table/Table.js | 20 +++++++++++++++---- .../src/Helpers/Props/scrollDirections.js | 3 ++- .../InteractiveImportModalContent.js | 5 +++-- 9 files changed, 49 insertions(+), 14 deletions(-) diff --git a/frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js b/frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js index 7d94ed946..ff8cbe384 100644 --- a/frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js +++ b/frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { scrollDirections } from 'Helpers/Props'; import Button from 'Components/Link/Button'; import ModalContent from 'Components/Modal/ModalContent'; import ModalHeader from 'Components/Modal/ModalHeader'; @@ -20,7 +21,7 @@ function AlbumInteractiveSearchModalContent(props) { Interactive Search {albumId != null && `- ${albumTitle}`} - + { !!error && @@ -152,7 +153,10 @@ class FileBrowserModalContent extends Component { { isPopulated && !error && - +
{ emptyParent && diff --git a/frontend/src/Components/Modal/ModalBody.js b/frontend/src/Components/Modal/ModalBody.js index a35f2ecf5..6edde4790 100644 --- a/frontend/src/Components/Modal/ModalBody.js +++ b/frontend/src/Components/Modal/ModalBody.js @@ -48,7 +48,7 @@ ModalBody.propTypes = { className: PropTypes.string, innerClassName: PropTypes.string, children: PropTypes.node, - scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]) + scrollDirection: PropTypes.oneOf(scrollDirections.all) }; ModalBody.defaultProps = { diff --git a/frontend/src/Components/Scroller/Scroller.css b/frontend/src/Components/Scroller/Scroller.css index c8783a8de..4dbd395cd 100644 --- a/frontend/src/Components/Scroller/Scroller.css +++ b/frontend/src/Components/Scroller/Scroller.css @@ -2,6 +2,7 @@ @add-mixin scrollbar; @add-mixin scrollbarTrack; @add-mixin scrollbarThumb; + -webkit-overflow-scrolling: touch; } .none { @@ -26,3 +27,11 @@ overflow-x: auto; } } + +.both { + overflow: scroll; + + &.autoScroll { + overflow: auto; + } +} diff --git a/frontend/src/Components/Scroller/Scroller.js b/frontend/src/Components/Scroller/Scroller.js index 701ac0cf4..f4ce7781f 100644 --- a/frontend/src/Components/Scroller/Scroller.js +++ b/frontend/src/Components/Scroller/Scroller.js @@ -66,7 +66,7 @@ class Scroller extends Component { Scroller.propTypes = { className: PropTypes.string, - scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired, + scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired, autoScroll: PropTypes.bool.isRequired, scrollTop: PropTypes.number, children: PropTypes.node, diff --git a/frontend/src/Components/Table/Table.css b/frontend/src/Components/Table/Table.css index 46d49826a..bdfdec641 100644 --- a/frontend/src/Components/Table/Table.css +++ b/frontend/src/Components/Table/Table.css @@ -1,5 +1,7 @@ .tableContainer { - overflow-x: auto; + &.horizontalScroll { + overflow-x: auto; + } } .table { @@ -10,7 +12,12 @@ @media only screen and (max-width: $breakpointSmall) { .tableContainer { - overflow-y: hidden; - width: 100%; + min-width: 100%; + width: fit-content; + + &.horizontalScroll { + overflow-y: hidden; + width: 100%; + } } } diff --git a/frontend/src/Components/Table/Table.js b/frontend/src/Components/Table/Table.js index 2c33efd29..dbd60bf5f 100644 --- a/frontend/src/Components/Table/Table.js +++ b/frontend/src/Components/Table/Table.js @@ -1,6 +1,7 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; +import classNames from 'classnames'; import { icons, scrollDirections } from 'Helpers/Props'; import IconButton from 'Components/Link/IconButton'; import Scroller from 'Components/Scroller/Scroller'; @@ -28,6 +29,7 @@ function getTableHeaderCellProps(props) { function Table(props) { const { className, + horizontalScroll, selectAll, columns, optionsComponent, @@ -41,14 +43,22 @@ function Table(props) { return (
{ - selectAll && - + selectAll ? + : + null } { @@ -111,6 +121,7 @@ function Table(props) { Table.propTypes = { className: PropTypes.string, + horizontalScroll: PropTypes.bool.isRequired, selectAll: PropTypes.bool.isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired, optionsComponent: PropTypes.elementType, @@ -123,6 +134,7 @@ Table.propTypes = { Table.defaultProps = { className: styles.table, + horizontalScroll: true, selectAll: false }; diff --git a/frontend/src/Helpers/Props/scrollDirections.js b/frontend/src/Helpers/Props/scrollDirections.js index 5e4a4fe08..1ae61143b 100644 --- a/frontend/src/Helpers/Props/scrollDirections.js +++ b/frontend/src/Helpers/Props/scrollDirections.js @@ -1,5 +1,6 @@ export const NONE = 'none'; +export const BOTH = 'both'; export const HORIZONTAL = 'horizontal'; export const VERTICAL = 'vertical'; -export const all = [NONE, HORIZONTAL, VERTICAL]; +export const all = [NONE, HORIZONTAL, VERTICAL, BOTH]; diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js index 066da0966..f3f77faaf 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js @@ -5,7 +5,7 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage'; import getSelectedIds from 'Utilities/Table/getSelectedIds'; import selectAll from 'Utilities/Table/selectAll'; import toggleSelected from 'Utilities/Table/toggleSelected'; -import { align, icons, kinds } from 'Helpers/Props'; +import { align, icons, kinds, scrollDirections } from 'Helpers/Props'; import Button from 'Components/Link/Button'; import Icon from 'Components/Icon'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; @@ -305,7 +305,7 @@ class InteractiveImportModalContent extends Component { Manual Import - {title || folder} - +
{ showFilterExistingFiles && @@ -393,6 +393,7 @@ class InteractiveImportModalContent extends Component { isPopulated && !!items.length && !isFetching && !isFetching &&