Faster user interface and better tablet experience
The current (~R2.1) load times of the Tracks home page are quite long (4+ seconds with 80 - 120 actions), even after Reinier's pre-rendering and storing of action notes in the database. In addition the small buttons / handles for the drop down menu, edit menu and dragging of actions are hard to hit on tablets.
So the question is how can we improve the design and performance of the home page?
Design points
- Eliminate hard to hit targets (edit icon, drag icon, dropdown menu icon), keeping only the 'completed' checkbox and the star
- Make the description of the todo (i.e., the large text) do something useful
- Eliminate the drop down menu, which takes up 40% of the server rendering time
Implementation
- Clicking the description opens the existing edit form
- The functions that were in the drop down menu reside in the edit form now
- The buttons in the edit form are on top, so if one just wants to defer an action the mouse / finger does not have to move all the way to the bottom of the form
- Dragging the description allows to drag the action into new contexts or make it a dependent action (as before with the drag icon)
Code
Small patch is attached to Ticket #1279
It applies cleanly against the 2.1 release branch as of 4/19/12. To try it in your environment do:
cd /var/www/tracks
patch -p1 --dry-run <~/faster_ui_patch_v2 | less # Confirm that it will apply
git status
git branch fast_ui # Try it in a branch
patch -p1 <~/faster_ui_patch_v2 | less # Apply the patch
rm public/stylesheets/tracks-cached.css # Don't forget this
service httpd restart # Or whatever you do if you're not using passenger
Issues
- Dragging todos does not work on tablets yet
- If inside a context the last action does not have a project or a note or a dependency then it will extend outside the container
- If we go this way there'll be some unused code that can be removed