diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js index 869a68d..eb7e68d 100644 --- a/attract/static/js/tasks.js +++ b/attract/static/js/tasks.js @@ -1,3 +1,26 @@ +(function ( $ ) { + $.fn.flashOnce = function() { + var target = this; + this + .addClass('flash-on') + .delay(200) // this delay is linked to the transition in the flash-on CSS class. + .queue(function() { + target + .removeClass('flash-on') + .addClass('flash-off') + .dequeue() + ;}) + .delay(1000) // this delay is just to clean up the flash-X classes. + .queue(function() { + target + .removeClass('flash-on flash-off') + .dequeue() + ;}) + ; + return this; + }; +}(jQuery)); + /** * Shows a task in the #task-details div. */ @@ -73,6 +96,7 @@ function task_save(task_id, task_url) { // Update the task list. // NOTE: this is tightly linked to the HTML of the task list in for_project.jade. + $('.task-name-' + saved_task._id).text(saved_task.name).flashOnce(); $task.find('span.name').text(saved_task.name); $task.find('span.type').text(saved_task.task_type); $task.find('span.status').text(saved_task.properties.status.replace('_', ' ')); diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass index a918310..d25ca86 100644 --- a/src/styles/_tasks.sass +++ b/src/styles/_tasks.sass @@ -19,6 +19,15 @@ border-radius: 50% transition: all 100ms ease-in-out +.flash-on + background-color: #dfd + color: #040 + outline: 1px solid #040 + transition: all 0.2s + +.flash-off + transition: all 0.1s + .task-list-item border-right: 5px solid transparent color: $color-primary-dark diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index 3ab3f66..827f2f8 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -24,7 +24,8 @@ | {% for task in tasks_for_shots[shot._id][task_type] %} a( href="javascript:task_open('{{ task._id }}', '{{ project.url }}');", - class="status-{{ task.properties.status }}") {{ task.name }} + class="status-{{ task.properties.status }}") + span(class="task-name-{{ task._id }}") {{ task.name }} br | {% endfor %} | {% if not tasks_for_shots[shot._id][task_type] %}