Skip to content

Instantly share code, notes, and snippets.

@Tolu-Mals

Tolu-Mals/GSoC-2022-work-product.md

Last active December 22, 2022 13:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tolu-Mals/7627c724b7baf994b461c8ff6356fb6f to your computer and use it in GitHub Desktop.
Save Tolu-Mals/7627c724b7baf994b461c8ff6356fb6f to your computer and use it in GitHub Desktop.
Download ZIP
A final report of the work that was done during Google Summer of Code 2022 as part of the Tablet Layout Project for Joplin org.
Raw
GSoC-2022-work-product.md

GSoC 2022 - Tablet Layout Project

Contributor: Tolulope Malomo

Mentor: Laurent Cozic

Project Summary

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

What Was Done

1 . The side menu width on tablet devices was fixed. Pull request

Screenshots

Before:

Side Menu Width Before

After:

Side Menu Width After

Details

  • Set up the mobile app was testing using Jest

  • Wrote and tested getResponsiveValue utility function

    Related: 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

Details

  • 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

Details

  • 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.

What's left to be done

  • 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.

Challenges and learnings

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment