Merge pull request #561 from tarnung/feat/scrollable-modals

Feat/scrollable modals
200ok-ch · Nov 14, 2020 · 42bed28 · 42bed28
2 parents 94cc3a6 + 0500395
commit 42bed28
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 37 deletions.
diff --git a/changelog.org b/changelog.org
@@ -4,17 +4,20 @@ All user visible changes to organice will be documented in this file.
 
 When there are updates to the changelog, you will be notified and see a 'gift' icon appear on the top right corner.
 
-* [2020-11-08 Sun]
+* [2020-11-14 Sat]
+** Fixed
+   - The task list was not scrollable on Android.
+      - Thank you [[/~https://github.com/tarnung][tarnung]] for your [[/~https://github.com/200ok-ch/organice/pull/561][PR]] 🙏
 
+* [2020-11-08 Sun]
 ** Changed
- - Safeguard against selecting text by accident.
-    - Before this change, it was possible to select text when doing a 'swipe'.
-    - Now, selecting/copying text is only possible in 'edit mode', effectively safeguarding against accidentally selecting text.
-    - Thank you [[/~https://github.com/tarnung][tarnung]] for your [[/~https://github.com/200ok-ch/organice/pull/557][PR]] 🙏
+   - Safeguard against selecting text by accident.
+      - Before this change, it was possible to select text when doing a 'swipe'.
+      - Now, selecting/copying text is only possible in 'edit mode', effectively safeguarding against accidentally selecting text.
+      - Thank you [[/~https://github.com/tarnung][tarnung]] for your [[/~https://github.com/200ok-ch/organice/pull/557][PR]] 🙏
 
 
 * [2020-11-06 Fri]
-
 ** Added
    - Additional themes. You now can choose between:
      - Solarized

diff --git a/src/components/OrgFile/components/AgendaModal/index.js b/src/components/OrgFile/components/AgendaModal/index.js
@@ -8,6 +8,8 @@ import AgendaDay from './components/AgendaDay';
 import Drawer from '../../../UI/Drawer';
 import TabButtons from '../../../UI/TabButtons';
 
+import { isMobileBrowser } from '../../../../lib/browser_utils';
+
 import * as orgActions from '../../../../actions/org';
 
 import _ from 'lodash';
@@ -140,7 +142,15 @@ function AgendaModal(props) {
         <i className="fas fa-chevron-right fa-lg" onClick={handleNextDateClick} />
       </div>
 
-      <div className="agenda__days-container">
+      <div
+        className="agenda__days-container"
+        // On mobile devices, the Drawer already handles the touch
+        // event. Hence, scrolling within the Drawers container does
+        // not work with the same event. Therefore, we're just opting
+        // to scroll the whole drawer. That's not the best UX. And a
+        // better CSS juggler than me is welcome to improve on it.
+        style={isMobileBrowser ? undefined : { overflow: 'auto' }}
+      >
         {dates.map((date) => (
           <AgendaDay
             key={format(date, 'yyyy MM dd')}

diff --git a/src/components/OrgFile/components/SearchModal/index.js b/src/components/OrgFile/components/SearchModal/index.js
@@ -41,17 +41,6 @@ function SearchModal(props) {
     props.org.setSearchFilterInformation(event.target.value, event.target.selectionStart, context);
   }
 
-  // On mobile devices, the Drawer already handles the touch event.
-  // Hence, scrolling within the Drawers container does not work with
-  // the same event. Therefore, we're just opting to scroll the whole
-  // drawer. That's not the best UX. And a better CSS juggler than me
-  // is welcome to improve on it.
-  let taskListViewStyle = {
-    overflow: (() => {
-      return isMobileBrowser ? 'none' : 'auto';
-    })(),
-  };
-
   return (
     <Drawer onClose={onClose} maxSize={true}>
       <div className="task-list__modal-title">
@@ -94,7 +83,10 @@ function SearchModal(props) {
         />
       </div>
 
-      <div className="task-list__headers-container" style={taskListViewStyle}>
+      <div
+        className="task-list__headers-container"
+        style={isMobileBrowser ? undefined : { overflow: 'auto' }}
+      >
         <HeaderListView
           onHeaderClick={handleHeaderClick}
           dateDisplayType={dateDisplayType}

diff --git a/src/components/OrgFile/components/TaskListModal/index.js b/src/components/OrgFile/components/TaskListModal/index.js
@@ -33,17 +33,6 @@ function TaskListModal(props) {
 
   const { onClose, searchFilter, searchFilterValid, searchFilterSuggestions } = props;
 
-  // On mobile devices, the Drawer already handles the touch event.
-  // Hence, scrolling within the Drawers container does not work with
-  // the same event. Therefore, we're just opting to scroll the whole
-  // drawer. That's not the best UX. And a better CSS juggler than me
-  // is welcome to improve on it.
-  let taskListViewStyle = {
-    overflow: (() => {
-      return isMobileBrowser ? 'none' : 'auto';
-    })(),
-  };
-
   return (
     <Drawer onClose={onClose} maxSize={true}>
       <h2 className="agenda__title">Task list</h2>
@@ -69,7 +58,15 @@ function TaskListModal(props) {
         />
       </div>
 
-      <div className="task-list__headers-container" style={taskListViewStyle}>
+      <div
+        className="task-list__headers-container"
+        // On mobile devices, the Drawer already handles the touch
+        // event. Hence, scrolling within the Drawers container does
+        // not work with the same event. Therefore, we're just opting
+        // to scroll the whole drawer. That's not the best UX. And a
+        // better CSS juggler than me is welcome to improve on it.
+        style={isMobileBrowser ? undefined : { overflow: 'auto' }}
+      >
         <TaskListView
           onHeaderClick={handleHeaderClick}
           dateDisplayType={dateDisplayType}

diff --git a/src/lib/browser_utils.js b/src/lib/browser_utils.js
@@ -21,12 +21,7 @@ export const isMobileSafari13 = (() => {
 
 /** Is the OS iOS or Android? */
 export const isMobileBrowser = (() => {
-  return browser.satisfies({
-    mobile: {
-      safari: '>=6',
-      'android browser': '>3',
-    },
-  });
+  return browser.getPlatformType() !== 'desktop';
 })();
 
 export const isIos = () => {