A big piece of upgrading the Hub in recent months has been moving more of our UI to dojo and sprucing up the detail view was one of the main areas we focused on. Travis did most of the work of moving ui code to dojo, and most of the detail view work. I did a final touch-up, standing on the shoulders of giants.

The detail view effort aimed to simplify what users see as they create and edit their data. Now, a simple note looks like this:

We’ve moved the Remove and Save buttons to the top, so they don’t shift around as the detail view size changes. We’ve also simplified the UI for adding the “star” stamp (which used to be called task) and adding to the calendar.

Throughout the new UI, we make use of dojo’s elaborate support for fades, which help make expand and disappear changes easier to follow.

One of these fade-ins happens if you click on “ADD TO CALENDAR” or the event icon.

To reduce clutter, we’ve used more hint-text in widgets and fewer permanent labels. We also hide event related widgets that don’t apply to the current event. So, for example, “anytime” events which don’t have a start time don’t need a timezone, so we don’t display a timezone picker until you choose a start time for your event.

We’ve also made a much-clamored for addition for events, a date picker. Happily, dojo gave us this for free.

Once you fill in a start-date, end-date defaults to start-date.

Finally, we’ve moved our notes field to dojo’s expanding text area. So if you’ve got three pages of notes, the notes field (and the entire detail view pane) will automatically expand to give you room to type everything.

For reference, here’s a snapshot of the old detail view.