[checklist] Improve checklist extension and user interface

Review Request #6969 — Created Feb. 22, 2015 and submitted — Latest diff uploaded

Information

rb-extension-pack
8989a11...

Reviewers

This change aims to polish up the existing checklist UI as well as its code base.

On the UI:

  • Shifted the UI to be fixed at the bottom (better than in the middle of nowhere)
  • Uses existing Reviewboard icons as buttons (versus textual buttons)
  • Reworked toggling of the interface (using CSS animation)
  • Editing an item selects/highlights the entire text (like renaming files)
  • Ability to cancel edit via Esc key or button
  • Word wrapping of long item descriptions
  • Now escapes special characters in the item descriptions
  • Trims the string before adding or editing, avoids empty descriptions

In the front end:

  • Removed delete checklist functionality (since new checklist is generated upon refresh)
  • Moved remove item method from collection view to item view
  • So that item ids do not have to be stored in DOM
  • Fixed a bug where editing multiple items only picks the value of the first item being edited
  • Enforce hyphens for ids and classes, and single quotes for strings

Glass box front end testing on Chrome 40.0.2214. Quick tests for UI on Safari 8.0.2.

  • Toggling size works
  • Marking an item as done or undone works
  • Deleting an item works
  • Editing an item works
  • Cancelling item editing works
  • Adding an item works
  • Long text is wrapped
  • Special characters are escaped
  • Can edit multiple items without conflict
  • Whitespace in description is trimmed
checklist/checklist/extension.py
checklist/checklist/resources.py
checklist/checklist/static/css/style.less
checklist/checklist/static/js/models/checklistAPI.js
checklist/checklist/static/js/views/checklistView.js
checklist/checklist/templates/checklist/template.html
Loading...