rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: screen presentation and dismiss animations for mobile (#2073)

Browse Source
This commit is contained in:
Mo
2022-11-30 14:37:36 -06:00
committed by GitHub
parent 0e95b451d6
commit 7f2074a6ec
79 changed files with 1338 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx
View File

@@ -1,30 +1,33 @@
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
import { useMediaQuery, MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
import { IconType } from '@standardnotes/snjs'
import { AppPaneId } from '../Panes/AppPaneMetadata'
import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
import { classNames, IconType } from '@standardnotes/snjs'
import RoundIconButton from '../Button/RoundIconButton'
import useIsTabletOrMobileScreen from '@/Hooks/useIsTabletOrMobileScreen'
import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
const MobileItemsListButton = () => {
const { toggleAppPane, isNotesListVisibleOnTablets, toggleNotesListOnTablets } = useResponsiveAppPane()
const matchesMediumBreakpoint = useMediaQuery(MediaQueryBreakpoints.md)
const matchesXLBreakpoint = useMediaQuery(MediaQueryBreakpoints.xl)
const isTabletScreenSize = matchesMediumBreakpoint && !matchesXLBreakpoint
const { panes, replacePanes, setPaneLayout } = useResponsiveAppPane()
const iconType: IconType = isTabletScreenSize && !isNotesListVisibleOnTablets ? 'chevron-right' : 'chevron-left'
const label = isTabletScreenSize
? isNotesListVisibleOnTablets
? 'Hide items list'
: 'Show items list'
: 'Go to items list'
const { isTablet, isTabletOrMobile, isMobile } = useIsTabletOrMobileScreen()
const itemsShown = panes.includes(AppPaneId.Items)
const iconType: IconType = isTablet && !itemsShown ? 'chevron-right' : 'chevron-left'
const label = isTablet ? (itemsShown ? 'Hide items list' : 'Show items list') : 'Go to items list'
return (
<RoundIconButton
className="mr-3 md:hidden pointer-coarse:md-only:flex pointer-coarse:lg-only:flex"
className={classNames(isTabletOrMobile ? 'flex' : 'hidden', 'mr-3')}
onClick={() => {
if (isTabletScreenSize) {
toggleNotesListOnTablets()
if (isMobile) {
void setPaneLayout(PaneLayout.ItemSelection)
} else {
toggleAppPane(AppPaneId.Items)
if (itemsShown) {
void replacePanes([AppPaneId.Editor])
} else {
void setPaneLayout(PaneLayout.ItemSelection)
}
}
}}
label={label}

81
packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -3,9 +3,7 @@ import { AbstractComponent } from '@/Components/Abstract/PureComponent'
import { WebApplication } from '@/Application/Application'
import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
import MultipleSelectedFiles from '../MultipleSelectedFiles/MultipleSelectedFiles'
import { ElementIds } from '@/Constants/ElementIDs'
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
import { AppPaneId } from '../Panes/AppPaneMetadata'
import FileView from '../FileView/FileView'
import NoteView from '../NoteView/NoteView'
import { NoteViewController } from '../NoteView/Controller/NoteViewController'
@@ -22,6 +20,9 @@ type State = {
type Props = {
application: WebApplication
className?: string
innerRef: (ref: HTMLDivElement) => void
id: string
}
class NoteGroupView extends AbstractComponent<Props, State> {
@@ -97,44 +98,44 @@ class NoteGroupView extends AbstractComponent<Props, State> {
const hasControllers = this.state.controllers.length > 0
const canRenderEditorView = this.state.selectedPane === AppPaneId.Editor || !this.state.isInMobileView
return (
<div id={ElementIds.EditorColumn} className="app-column app-column-third flex h-full flex-col pt-safe-top">
<ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
{this.state.showMultipleSelectedNotes && (
<MultipleSelectedNotes
application={this.application}
selectionController={this.viewControllerManager.selectionController}
navigationController={this.viewControllerManager.navigationController}
notesController={this.viewControllerManager.notesController}
linkingController={this.viewControllerManager.linkingController}
historyModalController={this.viewControllerManager.historyModalController}
/>
)}
{this.state.showMultipleSelectedFiles && (
<MultipleSelectedFiles
filesController={this.viewControllerManager.filesController}
selectionController={this.viewControllerManager.selectionController}
/>
)}
{shouldNotShowMultipleSelectedItems && hasControllers && canRenderEditorView && (
<>
{this.state.controllers.map((controller) => {
return controller instanceof NoteViewController ? (
<NoteView key={controller.runtimeId} application={this.application} controller={controller} />
) : (
<FileView
key={controller.runtimeId}
application={this.application}
viewControllerManager={this.viewControllerManager}
file={controller.item}
/>
)
})}
</>
)}
</ResponsivePaneContent>
<div
id={this.props.id}
className={`flex h-full flex-grow flex-col pt-safe-top ${this.props.className}`}
ref={this.props.innerRef}
>
{this.state.showMultipleSelectedNotes && (
<MultipleSelectedNotes
application={this.application}
selectionController={this.viewControllerManager.selectionController}
navigationController={this.viewControllerManager.navigationController}
notesController={this.viewControllerManager.notesController}
linkingController={this.viewControllerManager.linkingController}
historyModalController={this.viewControllerManager.historyModalController}
/>
)}
{this.state.showMultipleSelectedFiles && (
<MultipleSelectedFiles
filesController={this.viewControllerManager.filesController}
selectionController={this.viewControllerManager.selectionController}
/>
)}
{shouldNotShowMultipleSelectedItems && hasControllers && (
<>
{this.state.controllers.map((controller) => {
return controller instanceof NoteViewController ? (
<NoteView key={controller.runtimeId} application={this.application} controller={controller} />
) : (
<FileView
key={controller.runtimeId}
application={this.application}
viewControllerManager={this.viewControllerManager}
file={controller.item}
/>
)
})}
</>
)}
</div>
)
}