fix(web): content & navigation list scroll on mobile (#1207)

standardnotes · Jul 5, 2022 · 37d765a · 37d765a
1 parent 82f3025
commit 37d765a
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 25 deletions.
diff --git a/packages/encryption/src/Domain/Split/EncryptionSplit.ts b/packages/encryption/src/Domain/Split/EncryptionSplit.ts
@@ -1,9 +1,5 @@
 import { Uuid } from '@standardnotes/common'
-import {
-  DecryptedPayloadInterface,
-  EncryptedPayloadInterface,
-  PayloadInterface,
-} from '@standardnotes/models'
+import { DecryptedPayloadInterface, EncryptedPayloadInterface, PayloadInterface } from '@standardnotes/models'
 import { EncryptionTypeSplit } from './EncryptionTypeSplit'
 import { KeyedDecryptionSplit } from './KeyedDecryptionSplit'
 import { KeyedEncryptionSplit } from './KeyedEncryptionSplit'

diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -12,6 +12,7 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -66,7 +67,11 @@ const ContentList: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="infinite-scroll focus:shadow-none focus:outline-none"
+      className={classNames(
+        'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
+        'md:overflow-y-hidden md:hover:overflow-y-auto',
+        'md:hover:[overflow-y:_overlay]',
+      )}
       id={ElementIds.ContentList}
       onScroll={onScroll}
       onKeyDown={onKeyDown}

diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -19,6 +19,7 @@ import { ElementIds } from '@/Constants/ElementIDs'
 import ContentListHeader from './Header/ContentListHeader'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -43,6 +44,8 @@ const ContentListView: FunctionComponent<Props> = ({
   notesController,
   selectionController,
 }) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
   const itemsViewPanelRef = useRef<HTMLDivElement>(null)
 
   const {
@@ -65,13 +68,14 @@ const ContentListView: FunctionComponent<Props> = ({
     [navigationController.selected?.uuid],
   )
 
-  const addNewItem = useCallback(() => {
+  const addNewItem = useCallback(async () => {
     if (isFilesSmartView) {
       void filesController.uploadNewFile()
     } else {
-      void createNewNote()
+      await createNewNote()
+      toggleAppPane(AppPaneId.Editor)
     }
-  }, [filesController, createNewNote, isFilesSmartView])
+  }, [isFilesSmartView, filesController, createNewNote, toggleAppPane])
 
   useEffect(() => {
     /**
@@ -84,7 +88,7 @@ const ContentListView: FunctionComponent<Props> = ({
       modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
       onKeyDown: (event) => {
         event.preventDefault()
-        addNewItem()
+        void addNewItem()
       },
     })
 
@@ -170,7 +174,7 @@ const ContentListView: FunctionComponent<Props> = ({
   return (
     <div
       id="items-column"
-      className="sn-component section app-column app-column-second border-b border-solid border-border"
+      className="sn-component section app-column app-column-second flex flex-col border-b border-solid border-border"
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >

diff --git a/packages/web/src/javascripts/Components/Navigation/Navigation.tsx b/packages/web/src/javascripts/Components/Navigation/Navigation.tsx
@@ -9,6 +9,7 @@ import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '
 import SearchBar from '@/Components/SearchBar/SearchBar'
 import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -59,7 +60,13 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
             </div>
           </div>
         </div>
-        <div className="scrollable">
+        <div
+          className={classNames(
+            'h-full overflow-y-auto overflow-x-hidden',
+            'md:overflow-y-hidden md:hover:overflow-y-auto',
+            'md:hover:[overflow-y:_overlay]',
+          )}
+        >
           <SmartViewsSection viewControllerManager={viewControllerManager} />
           <TagsSection viewControllerManager={viewControllerManager} />
         </div>

diff --git a/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx b/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx
@@ -315,6 +315,7 @@ class PanelResizer extends Component<Props, State> {
           this.props.hoverable && 'hover:opacity-100',
           this.props.side === PanelSide.Left && 'left-0 right-auto',
         )}
+        onMouseDown={this.onMouseDown}
         ref={this.resizerElementRef}
       />
     )

diff --git a/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx b/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx
@@ -33,7 +33,7 @@ const ResponsivePaneContent = ({ children, contentClassName, contentElementId, p
       </button>
       <div
         id={contentElementId}
-        className={classNames('content', isSelectedPane ? 'h-full' : 'hidden flex-col md:flex', contentClassName)}
+        className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', contentClassName)}
       >
         {children}
       </div>

diff --git a/packages/web/src/javascripts/Components/Tags/TagsList.tsx b/packages/web/src/javascripts/Components/Tags/TagsList.tsx
@@ -1,11 +1,9 @@
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { isMobile } from '@/Utils'
 import { SNTag } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback } from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import { TouchBackend } from 'react-dnd-touch-backend'
 import RootTagDropZone from './RootTagDropZone'
 import { TagsListItem } from './TagsListItem'
 
@@ -17,7 +15,7 @@ const TagsList: FunctionComponent<Props> = ({ viewControllerManager }: Props) =>
   const tagsState = viewControllerManager.navigationController
   const allTags = tagsState.allLocalRootTags
 
-  const backend = isMobile({ tablet: true }) ? TouchBackend : HTML5Backend
+  const backend = HTML5Backend
 
   const openTagContextMenu = useCallback(
     (posX: number, posY: number) => {

diff --git a/packages/web/src/stylesheets/_items-column.scss b/packages/web/src/stylesheets/_items-column.scss
@@ -108,8 +108,6 @@
   }
 
   .infinite-scroll {
-    @include minimal_scrollbar();
-    height: inherit;
     background-color: var(--items-column-items-background-color);
   }
 

diff --git a/packages/web/src/stylesheets/_navigation.scss b/packages/web/src/stylesheets/_navigation.scss
@@ -1,10 +1,3 @@
-@import './scrollbar';
-
-#navigation .scrollable {
-  @include minimal_scrollbar();
-  height: 100%;
-}
-
 $content-horizontal-padding: 16px;
 
 #navigation {