Skip to content

fix(mobile): note view hide bar options on editor focus #1903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
moughxyz merged 3 commits into from
Oct 29, 2022
Merged

fix(mobile): note view hide bar options on editor focus #1903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c48d091
fix: note view hide bar options on mobile
moughxyz Oct 29, 2022
e34995a
refactor: use fragments
moughxyz Oct 29, 2022
c8a707c
fix: only add extra android provider if not rendering app contents
amanharwara Oct 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 13 additions & 19 deletions packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,28 +174,22 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
}, [needsUnlock, launched])

const renderChallenges = useCallback(() => {
return (
<AndroidBackHandlerProvider application={application}>
{challenges.map((challenge) => {
return (
<div className="sk-modal" key={`${challenge.id}${application.ephemeralIdentifier}`}>
<ChallengeModal
key={`${challenge.id}${application.ephemeralIdentifier}`}
application={application}
viewControllerManager={viewControllerManager}
mainApplicationGroup={mainApplicationGroup}
challenge={challenge}
onDismiss={removeChallenge}
/>
</div>
)
})}
</AndroidBackHandlerProvider>
)
return challenges.map((challenge) => (
<div className="sk-modal" key={`${challenge.id}${application.ephemeralIdentifier}`}>
<ChallengeModal
key={`${challenge.id}${application.ephemeralIdentifier}`}
application={application}
viewControllerManager={viewControllerManager}
mainApplicationGroup={mainApplicationGroup}
challenge={challenge}
onDismiss={removeChallenge}
/>
</div>
))
}, [viewControllerManager, challenges, mainApplicationGroup, removeChallenge, application])

if (!renderAppContents) {
return renderChallenges()
return <AndroidBackHandlerProvider application={application}>{renderChallenges()}</AndroidBackHandlerProvider>
}

return (
Expand Down
86 changes: 41 additions & 45 deletions packages/web/src/javascripts/Components/NoteView/NoteView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
EditorFontSize,
NoteType,
} from '@standardnotes/snjs'
import { debounce, isDesktopApplication } from '@/Utils'
import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
import { EditorEventSource } from '../../Types/EditorEventSource'
import { confirmDialog, KeyboardModifier, KeyboardKey } from '@standardnotes/ui-services'
import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Constants/Strings'
Expand Down Expand Up @@ -74,6 +74,7 @@ type State = {
/** Setting to true then false will allow the main content textarea to be destroyed
* then re-initialized. Used when reloading spellcheck status. */
textareaUnloading: boolean
plaintextEditorFocused?: boolean

leftResizerWidth: number
leftResizerOffset: number
Expand Down Expand Up @@ -104,7 +105,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
private lastEditorFocusEventSource?: EditorEventSource
onEditorComponentLoad?: () => void

private scrollPosition = 0
private removeTrashKeyObserver?: () => void
private removeTabObserver?: () => void
private removeComponentStreamObserver?: () => void
Expand Down Expand Up @@ -193,8 +193,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
;(this.onPanelResizeFinish as unknown) = undefined
;(this.stackComponentExpanded as unknown) = undefined
;(this.toggleStackComponent as unknown) = undefined
;(this.setScrollPosition as unknown) = undefined
;(this.resetScrollPosition as unknown) = undefined
;(this.onSystemEditorLoad as unknown) = undefined
;(this.debounceReloadEditorComponent as unknown) = undefined
;(this.textAreaChangeDebounceSave as unknown) = undefined
Expand Down Expand Up @@ -644,6 +642,15 @@ class NoteView extends PureComponent<NoteViewProps, State> {
this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
}
this.lastEditorFocusEventSource = undefined
this.setState({ plaintextEditorFocused: true })
}

onContentBlur = () => {
if (this.lastEditorFocusEventSource) {
this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
}
this.lastEditorFocusEventSource = undefined
this.setState({ plaintextEditorFocused: false })
}

setShowProtectedOverlay(show: boolean) {
Expand Down Expand Up @@ -837,16 +844,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
})
}

setScrollPosition = () => {
const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
this.scrollPosition = editor.scrollTop
}

resetScrollPosition = () => {
const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
editor.scrollTop = this.scrollPosition
}

onSystemEditorLoad = (ref: HTMLTextAreaElement | null) => {
if (this.removeTabObserver || !ref) {
return
Expand Down Expand Up @@ -900,18 +897,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
},
})

editor.addEventListener('scroll', this.setScrollPosition)
editor.addEventListener('input', this.resetScrollPosition)

const observer = new MutationObserver((records) => {
for (const record of records) {
record.removedNodes.forEach((node) => {
if (node === editor) {
this.removeTabObserver?.()
this.removeTabObserver = undefined
editor.removeEventListener('scroll', this.setScrollPosition)
editor.removeEventListener('scroll', this.resetScrollPosition)
this.scrollPosition = 0
}
})
}
Expand Down Expand Up @@ -942,6 +933,8 @@ class NoteView extends PureComponent<NoteViewProps, State> {
)
}

const renderHeaderOptions = isMobileScreen() ? !this.state.plaintextEditorFocused : true

return (
<div
aria-label="Note"
Expand Down Expand Up @@ -1005,31 +998,33 @@ class NoteView extends PureComponent<NoteViewProps, State> {
updateSavingIndicator={this.state.updateSavingIndicator}
/>
</div>
<div className="flex items-center gap-3">
<LinkedItemsButton
filesController={this.viewControllerManager.filesController}
linkingController={this.viewControllerManager.linkingController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
featuresController={this.viewControllerManager.featuresController}
/>
<ChangeEditorButton
application={this.application}
viewControllerManager={this.viewControllerManager}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
<PinNoteButton
notesController={this.viewControllerManager.notesController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
<NotesOptionsPanel
application={this.application}
navigationController={this.viewControllerManager.navigationController}
notesController={this.viewControllerManager.notesController}
linkingController={this.viewControllerManager.linkingController}
historyModalController={this.viewControllerManager.historyModalController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
</div>
{renderHeaderOptions && (
<div className="flex items-center gap-3">
<LinkedItemsButton
filesController={this.viewControllerManager.filesController}
linkingController={this.viewControllerManager.linkingController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
featuresController={this.viewControllerManager.featuresController}
/>
<ChangeEditorButton
application={this.application}
viewControllerManager={this.viewControllerManager}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
<PinNoteButton
notesController={this.viewControllerManager.notesController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
<NotesOptionsPanel
application={this.application}
navigationController={this.viewControllerManager.navigationController}
notesController={this.viewControllerManager.notesController}
linkingController={this.viewControllerManager.linkingController}
historyModalController={this.viewControllerManager.historyModalController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
/>
</div>
)}
</div>
<LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
</div>
Expand Down Expand Up @@ -1073,6 +1068,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
id={ElementIds.NoteTextEditor}
onChange={this.onTextAreaChange}
onFocus={this.onContentFocus}
onBlur={this.onContentBlur}
readOnly={this.state.noteLocked}
ref={(ref) => ref && this.onSystemEditorLoad(ref)}
spellCheck={this.state.spellcheck}
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function useStateRef<State>(state: State): MutableRefObject<State> {
return ref
}

const MemoizedChildren = memo(({ children }: ChildrenProps) => <div>{children}</div>)
const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)

const ResponsivePaneProvider = ({ paneController, children }: ProviderProps) => {
const currentSelectedPane = paneController.currentPane
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/javascripts/NativeMobileWeb/useAndroidBackHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ type ProviderProps = {
application: WebApplication
} & ChildrenProps

const MemoizedChildren = memo(({ children }: ChildrenProps) => <div>{children}</div>)
const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)

const AndroidBackHandlerProvider = ({ application, children }: ProviderProps) => {
const addAndroidBackHandler = useCallback(
Expand Down