GSoc – Week 10: Smoothening the Edges – Introducing Drawers

Progress this Week

Until last week, my primary focus was on building newer components to make sure that all the primary blocks of the app are in place. However, starting with this week I started putting all the different pieces in their respective places.

My primary objectives for this week were:

  1. Convert the Primary app menu from being just another page component to a sliding drawer component
  2. Modularize the Composer UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. to get rid of the current Scroller layout and allow for more focus on the textarea.

Enter onyx.Drawer!

Onyx.Drawer is quite simply nothing but a simple Onyx control that appears or disappears with a sliding animation, based on a Boolean property.

This solved my primary problem of implementing a sliding drawer menu component for the app. All that I had to do was to change the menu component to a ‘onyx.drawer’ kind, along with few minor changes here and there and a bit of code refactoring, and we now have a sliding menu bar!

The fun part of this came next, when I realized that the same Drawer kind can be introduced within the Composer as well to help me with my second objective of this week. For this purpose, I went back to an earlier version of the Composer with the Settings button in it, and using the button itself as a boolean trigger to open a vertical drawer containing the post settings such as Status, Tags, Categories etc. However, after a bit of messing around with the Composer code, I finally had a much cleaner looking Composer UI with a more aesthetically pleasing looks to it.

Next Steps

This week I plan to work on the last remaining piece of the puzzle: the Login screen! Once it’s done I plan to move on to the backend apis/queries to replace the current hardcoded demo datasets to more real world datasets, sometime next week. Also, there’s a minor bug with the preview module that I’ve been meaning to get fixed for sometime now, that I want to work upon this week.

#firefoxos