Contributor: Tolulope Malomo
Mentor: Laurent Cozic
The goal of this project was to improve the user experience of the Joplin mobile app on tablet devices and devices with wider screens. The tablet layout project has three major parts:
- Fixing the side menu width on tablet devices
- Implementing a note-list sidebar on tablet devices
- Implementing a simultaneous view and edit layout
More Info: Forum discussion | Weekly Reports
1 . The side menu width on tablet devices was fixed. Pull request
-
Set up the mobile app was testing using Jest
-
Wrote and tested
getResponsiveValue
utility functionRelated: forum post | getResponsiveValue.ts | getResponsiveValue.test.ts
-
Updated react-native-side-menu package
-
Modified the react-native-side-menu-updated package class to make it work properly in the Joplin app
-
Used
getResponsiveValue
to update the width of the side menu when the device width changes
Status: Completed and merged
2 . A notes-list sidebar was implemented. Pull request
Video demo
notelistdemo.mp4
- Refactored related JavaScript code into TypeScript
Related: global-style.ts | checkbox.tsx
- Added note-list sidebar UI and toggle button UI
Related: NotesBar.tsx | NotesBarListItem.tsx
- Added notesbar opening and closing animation
- Configured note-list sidebar toggle button
- Added search functionality
- Added note creation functionality
- Added note switching functionality
- Made notesbar toggle button draggable
- Fixed bugs
Status: Completed and merged.
3 . Split layout was implemented. Pull request
Video demo
split-layout-demo.webm
- Add split layout UI
- Configure toggle split layout button
- Add view button
- Make view update automatically after edits
- Make view button draggable
Status: To be reviewed.
- Component/UI testing needs to be set up in the mobile app
- The view button needs to move up above the keyboard when it shows.
One major thing I learnt was that to make your codebase easy to maintain in the long run, you need to minimize duplicate and boilerplate code. Also, I started GSoC as a beginner at React Native, so I got to learn about and work with several React Native API's like Dimensions
, Animated
, Gesture Responder System
. I also learnt better ways to write Typescript.
One of the major challenges I faced was working with github workflows, resolving merge conflicts, rebasing etc. They got easier with time though. I also had issues setting up component/UI testing for React Native with ts-jest and rtl.