Skip to content
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

Mobile: Implement new note menu redesign #11780

Draft
wants to merge 39 commits into
base: dev
Choose a base branch
from
Draft

Mobile: Implement new note menu redesign #11780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
031d968
Chore: Mobile: Internal menu support for vertical menus
personalizedrefrigerator Jan 22, 2025
f236a3b
WIP: Move the menu and not the app content
personalizedrefrigerator Jan 22, 2025
09b9791
Switch to an overlay style menu
personalizedrefrigerator Jan 22, 2025
de3d1ea
Refactoring
personalizedrefrigerator Jan 22, 2025
69af4e0
Merge remote-tracking branch 'upstream/dev' into pr/mobile/redesigned…
personalizedrefrigerator Jan 25, 2025
feaac7c
Merge remote-tracking branch 'upstream/dev' into pr/mobile/redesigned…
personalizedrefrigerator Jan 27, 2025
4de6eb4
Merge remote-tracking branch 'upstream/dev' into pr/mobile/redesigned…
personalizedrefrigerator Feb 4, 2025
38321fb
Make the new note menu use the (partially-working) BottomDrawer menu
personalizedrefrigerator Feb 4, 2025
3014b86
WIP: Make the bottom drawer menu overlay content and the vertical
personalizedrefrigerator Feb 4, 2025
0b6c104
WIP
personalizedrefrigerator Jan 27, 2025
722bc25
Revert "WIP"
personalizedrefrigerator Feb 4, 2025
520048d
Fix crash when running on Android
personalizedrefrigerator Feb 4, 2025
24fe1d9
Fix resizing the popup
personalizedrefrigerator Feb 4, 2025
e2d639f
Fix new note/to-do menu is not centered on web
personalizedrefrigerator Feb 4, 2025
993de77
Fix empty border at the top of the screen
personalizedrefrigerator Feb 4, 2025
ef88203
Don't allow menus to be taller than the window
personalizedrefrigerator Feb 5, 2025
b25c190
Adjust styles of edge menu
personalizedrefrigerator Feb 5, 2025
4b2282a
Handle back button/escape
personalizedrefrigerator Feb 5, 2025
e55d0ba
Add camera, attachment, drawing shortcuts
personalizedrefrigerator Feb 5, 2025
7f25ced
Mobile: Fix creating a new note with the "create note" shortcut applies
personalizedrefrigerator Feb 5, 2025
1f4ac36
Fix buttons don't wrap on small screens
personalizedrefrigerator Feb 5, 2025
8c74260
Refactoring
personalizedrefrigerator Feb 5, 2025
42c4832
Note edit button: Fix accessibility state
personalizedrefrigerator Feb 5, 2025
b904408
Fix menu in Safari
personalizedrefrigerator Feb 5, 2025
67dfb94
Trying to fix drag-to-dismiss on either side of the menu
personalizedrefrigerator Feb 5, 2025
ef42f1a
Fix icon layout on iOS
personalizedrefrigerator Feb 5, 2025
c18f401
Refactoring
personalizedrefrigerator Feb 5, 2025
2312c5d
Better accessibility labels
personalizedrefrigerator Feb 5, 2025
6268e0d
Prevent the new note menu from being covered by the device notch
personalizedrefrigerator Feb 5, 2025
dad62ec
Merge remote-tracking branch 'refs/remotes/origin/pr/mobile/redesigne…
personalizedrefrigerator Feb 5, 2025
2cbe511
Merge remote-tracking branch 'upstream/dev' into pr/mobile/redesigned…
personalizedrefrigerator Feb 7, 2025
fe481cd
Improve announcement behavior
personalizedrefrigerator Feb 8, 2025
22e852f
Larger touch targets
personalizedrefrigerator Feb 8, 2025
cd8c26a
Adjust button appearance to more closely match design
personalizedrefrigerator Feb 8, 2025
468cd25
Adjust drawer styles
personalizedrefrigerator Feb 8, 2025
3e91cc4
Merge remote-tracking branch 'upstream/dev' into pr/mobile/redesigned…
personalizedrefrigerator Feb 12, 2025
aef3c70
Fixing tsc errors
personalizedrefrigerator Feb 12, 2025
b4c8c5a
Web: Fix menu is sometimes invisible in Chrome
personalizedrefrigerator Feb 12, 2025
199fcf0
WIP: Auto-focus the "new note" button
personalizedrefrigerator Feb 12, 2025
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
11 changes: 8 additions & 3 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -681,18 +681,17 @@ packages/app-mobile/components/ScreenHeader/WarningBox.js
packages/app-mobile/components/ScreenHeader/WebBetaButton.js
packages/app-mobile/components/ScreenHeader/index.js
packages/app-mobile/components/SelectDateTimeDialog.js
packages/app-mobile/components/SideMenu.js
packages/app-mobile/components/SideMenuContentNote.js
packages/app-mobile/components/TextInput.js
packages/app-mobile/components/ToggleSpaceButton.js
packages/app-mobile/components/accessibility/AccessibleModalMenu.js
packages/app-mobile/components/accessibility/AccessibleView.js
packages/app-mobile/components/app-nav.js
packages/app-mobile/components/base-screen.js
packages/app-mobile/components/biometrics/BiometricPopup.js
packages/app-mobile/components/biometrics/biometricAuthenticate.js
packages/app-mobile/components/biometrics/sensorInfo.js
packages/app-mobile/components/buttons/FloatingActionButton.js
packages/app-mobile/components/buttons/LabelledIconButton.js
packages/app-mobile/components/buttons/TextButton.js
packages/app-mobile/components/buttons/index.js
packages/app-mobile/components/getResponsiveValue.test.js
Expand Down Expand Up @@ -780,7 +779,8 @@ packages/app-mobile/components/screens/Note/commands/setTags.js
packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
packages/app-mobile/components/screens/Note/types.js
packages/app-mobile/components/screens/NoteTagsDialog.js
packages/app-mobile/components/screens/Notes.js
packages/app-mobile/components/screens/Notes/NewNoteButton.js
packages/app-mobile/components/screens/Notes/Notes.js
packages/app-mobile/components/screens/SearchScreen/SearchResults.js
packages/app-mobile/components/screens/SearchScreen/index.js
packages/app-mobile/components/screens/ShareManager/AcceptedShareItem.js
Expand All @@ -793,6 +793,9 @@ packages/app-mobile/components/screens/encryption-config.js
packages/app-mobile/components/screens/status.js
packages/app-mobile/components/screens/tags.js
packages/app-mobile/components/side-menu-content.js
packages/app-mobile/components/sidebar/AppSideMenu.js
packages/app-mobile/components/sidebar/BottomDrawer.js
packages/app-mobile/components/sidebar/SideMenu.js
packages/app-mobile/components/testing/TestProviderStack.js
packages/app-mobile/components/voiceTyping/VoiceTypingDialog.js
packages/app-mobile/gulpfile.js
Expand Down Expand Up @@ -832,6 +835,7 @@ packages/app-mobile/utils/createRootStyle.js
packages/app-mobile/utils/database-driver-react-native.js
packages/app-mobile/utils/database-driver-react-native.web.js
packages/app-mobile/utils/debounce.js
packages/app-mobile/utils/focusView.js
packages/app-mobile/utils/fs-driver/constants.js
packages/app-mobile/utils/fs-driver/fs-driver-rn.js
packages/app-mobile/utils/fs-driver/fs-driver-rn.web.js
Expand All @@ -847,6 +851,7 @@ packages/app-mobile/utils/getVersionInfoText.js
packages/app-mobile/utils/hooks/useKeyboardVisible.js
packages/app-mobile/utils/hooks/useOnLongPressProps.js
packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
packages/app-mobile/utils/hooks/useSafeAreaPadding.js
packages/app-mobile/utils/image/fileToImage.web.js
packages/app-mobile/utils/image/getImageDimensions.js
packages/app-mobile/utils/image/resizeImage.js
Expand Down
11 changes: 8 additions & 3 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,18 +656,17 @@ packages/app-mobile/components/ScreenHeader/WarningBox.js
packages/app-mobile/components/ScreenHeader/WebBetaButton.js
packages/app-mobile/components/ScreenHeader/index.js
packages/app-mobile/components/SelectDateTimeDialog.js
packages/app-mobile/components/SideMenu.js
packages/app-mobile/components/SideMenuContentNote.js
packages/app-mobile/components/TextInput.js
packages/app-mobile/components/ToggleSpaceButton.js
packages/app-mobile/components/accessibility/AccessibleModalMenu.js
packages/app-mobile/components/accessibility/AccessibleView.js
packages/app-mobile/components/app-nav.js
packages/app-mobile/components/base-screen.js
packages/app-mobile/components/biometrics/BiometricPopup.js
packages/app-mobile/components/biometrics/biometricAuthenticate.js
packages/app-mobile/components/biometrics/sensorInfo.js
packages/app-mobile/components/buttons/FloatingActionButton.js
packages/app-mobile/components/buttons/LabelledIconButton.js
packages/app-mobile/components/buttons/TextButton.js
packages/app-mobile/components/buttons/index.js
packages/app-mobile/components/getResponsiveValue.test.js
Expand Down Expand Up @@ -755,7 +754,8 @@ packages/app-mobile/components/screens/Note/commands/setTags.js
packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
packages/app-mobile/components/screens/Note/types.js
packages/app-mobile/components/screens/NoteTagsDialog.js
packages/app-mobile/components/screens/Notes.js
packages/app-mobile/components/screens/Notes/NewNoteButton.js
packages/app-mobile/components/screens/Notes/Notes.js
packages/app-mobile/components/screens/SearchScreen/SearchResults.js
packages/app-mobile/components/screens/SearchScreen/index.js
packages/app-mobile/components/screens/ShareManager/AcceptedShareItem.js
Expand All @@ -768,6 +768,9 @@ packages/app-mobile/components/screens/encryption-config.js
packages/app-mobile/components/screens/status.js
packages/app-mobile/components/screens/tags.js
packages/app-mobile/components/side-menu-content.js
packages/app-mobile/components/sidebar/AppSideMenu.js
packages/app-mobile/components/sidebar/BottomDrawer.js
packages/app-mobile/components/sidebar/SideMenu.js
packages/app-mobile/components/testing/TestProviderStack.js
packages/app-mobile/components/voiceTyping/VoiceTypingDialog.js
packages/app-mobile/gulpfile.js
Expand Down Expand Up @@ -807,6 +810,7 @@ packages/app-mobile/utils/createRootStyle.js
packages/app-mobile/utils/database-driver-react-native.js
packages/app-mobile/utils/database-driver-react-native.web.js
packages/app-mobile/utils/debounce.js
packages/app-mobile/utils/focusView.js
packages/app-mobile/utils/fs-driver/constants.js
packages/app-mobile/utils/fs-driver/fs-driver-rn.js
packages/app-mobile/utils/fs-driver/fs-driver-rn.web.js
Expand All @@ -822,6 +826,7 @@ packages/app-mobile/utils/getVersionInfoText.js
packages/app-mobile/utils/hooks/useKeyboardVisible.js
packages/app-mobile/utils/hooks/useOnLongPressProps.js
packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
packages/app-mobile/utils/hooks/useSafeAreaPadding.js
packages/app-mobile/utils/image/fileToImage.web.js
packages/app-mobile/utils/image/getImageDimensions.js
packages/app-mobile/utils/image/resizeImage.js
Expand Down
24 changes: 8 additions & 16 deletions packages/app-mobile/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import * as React from 'react';
import { RefObject, useCallback, useMemo, useRef } from 'react';
import { GestureResponderEvent, Modal, ModalProps, ScrollView, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
import { hasNotch } from 'react-native-device-info';
import { GestureResponderEvent, Modal, ModalProps, ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
import useSafeAreaPadding from '../utils/hooks/useSafeAreaPadding';

interface ModalElementProps extends ModalProps {
children: React.ReactNode;
containerStyle?: ViewStyle;
backgroundColor?: string;
modalBackgroundStyle?: ViewStyle;

// If scrollOverflow is provided, the modal is wrapped in a vertical
// ScrollView. This allows the user to scroll parts of dialogs into
Expand All @@ -15,21 +16,11 @@ interface ModalElementProps extends ModalProps {
}

const useStyles = (hasScrollView: boolean, backgroundColor: string|undefined) => {
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
const isLandscape = windowWidth > windowHeight;
const safeAreaPadding = useSafeAreaPadding();
return useMemo(() => {
const backgroundPadding: ViewStyle = isLandscape ? {
paddingRight: hasNotch() ? 60 : 0,
paddingLeft: hasNotch() ? 60 : 0,
paddingTop: 15,
paddingBottom: 15,
} : {
paddingTop: hasNotch() ? 65 : 15,
paddingBottom: hasNotch() ? 35 : 15,
};
return StyleSheet.create({
modalBackground: {
...backgroundPadding,
...safeAreaPadding,
flexGrow: 1,
flexShrink: 1,

Expand All @@ -50,7 +41,7 @@ const useStyles = (hasScrollView: boolean, backgroundColor: string|undefined) =>
flexGrow: 1,
},
});
}, [hasScrollView, isLandscape, backgroundColor]);
}, [hasScrollView, safeAreaPadding, backgroundColor]);
};

const useBackgroundTouchListeners = (onRequestClose: (event: GestureResponderEvent)=> void, backdropRef: RefObject<View>) => {
Expand All @@ -72,6 +63,7 @@ const ModalElement: React.FC<ModalElementProps> = ({
containerStyle,
backgroundColor,
scrollOverflow,
modalBackgroundStyle: extraModalBackgroundStyles,
...modalProps
}) => {
const styles = useStyles(scrollOverflow, backgroundColor);
Expand All @@ -89,7 +81,7 @@ const ModalElement: React.FC<ModalElementProps> = ({

const contentAndBackdrop = <View
ref={backgroundRef}
style={styles.modalBackground}
style={[styles.modalBackground, extraModalBackgroundStyles]}
onStartShouldSetResponder={onShouldBackgroundCaptureTouch}
onResponderRelease={onBackgroundTouchFinished}
>{content}</View>;
Expand Down
Loading