Shot list: show updated task name in shot list after editing task.

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('_', ' '));

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

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] %}