[dansays]

With the recent announcement that the MobileSafari interface is being quasi-dropped from OmniFocus, I decided to roll up my sleeves and fix some of the nagging bugs and interface nitpicks that have bothered me about the app. Please bear in mind that I am not a Ruby developer; I hacked away through trial and error. The changes I made may not be the most elegant, but they seem to work.

http://junk.dansays.com/Web%20Interface.zip

Here are the changes I've made:

Updated to latest version of iUI

The iPhone app look-and-feel is based upon Joe Hewitt's iUI framework. I've updated iui.js to the latest and greatest. The slidey animation appears to be a lot smoother for it.

I also went through iui.css and changed all box-sizing references to -webkit-box-sizing. This fixes the funky behavior of the "add task" mode, where the input box sizes too wide and breaks the viewport constrictions.

Tweaked styling of sub-contexts

I rely heavily on nested contexts. For example, under my "Errands" context, I have sub-contexts for "East Village," "Soho," "Midtown," etc. This relationship breaks down in the MobileSafari interface, where everything is flattened.

I played around with a number of different ways to visually represent the hierarchy (indenting, prefixing with the parent context) and settled on a simple but effective solution: sub-contexts are given a lighter font weight. It sounds like such a minor adjustment, but for me it makes all the difference in the world. (This won't help people who maintain more than two levels of structure, but then again, it won't hurt them either.)



Because of this style change, I removed the rule that restricts contexts to those who have one or more actionable tasks assigned. Empty contexts are now displayed to provide a frame of reference for sub-contexts.

Also: parent contexts now reflect an accurate task count, rather than including the tasks of their children.

Task completion progress indicator

As visual feedback that a click was registered, a spinning progress indicator now displays when a task checkbox is clicked.

Other minor tweaks

I added a few more minor tweaks here and there. The page title is properly vertically centered in the title bar. I changed "+" to "Add," to provide a bigger target for my fat thumb. Really minor stuff.

Installation Instructions

1. Back up ~/Library/Application Support/OmniFocus/Web Interface/
2. Uncompress "Web Interface.zip" to ~/Library/Application Support/OmniFocus/
3. Open ~/Library/Application Support/OmniFocus/Web Interface/config/Settings.plist and replace the placeholders with your user name, password, and hard drive name.
4. Open Activity Monitor, change "Show" to "All Processes," select the "ruby" process, and click "Quit Process" in the toolbar.

That's it.

Going forward?

I have a million ideas for improvements to the MobileSafari app. For the time being, I'm going to sit quietly over here and wait to see what Omni decides to officially do with the feature.

If it does find its way back into the official version, Omni is welcome to incorporate my changes. I recognize that port forwarding and dyndns are likely beyond the skillz of the novice user, but I still think it's worth including. (Applications like Lighthouse dramatically simplify the process, btw.)

If Omni decides to open source the project, I'd love to play a role. Again, big disclaimer: I am not a Ruby programmer. But I can feel my way around well enough to not trip over the heavy machinery while tweaking Javascript and CSS.