GSoC week 5: Timer App Design Changes

This week’s work was on changing the display of different options in the create timer modal. This work included shifting the input code from div’s to table’s td and changing to mustache.js for rendering repeat options.

Here are the list of changes made in the timer app .

  1. Changed to having inputs inside a table.
Old timer creation modal
New timer creation modal

More images of the changes:

Dont Repeat option
Repeat Weekly option
Repeat Weekly option with close button disabled

2. Use of mustache.js to render repeat options.

New timer repeat options

For example, when a user wants to insert a new row (by clicking “+” ) to enter minute and hour in repeat daily, the approach taken in the old timer playground app code was giving each newly created row a unique id’s through jquery.

Current approach is similar to the approach cockpit has, for setting multiple system time ntp-servers.

The fixes left for display includes:

  • Create timer button is now shown in all tabs. (fix is easier when #4503 merges)
  • Datepicker for repeat yearly option is not positioned correctly.
  • “Invalid input” message causes change of position of boot timer’s elements.