From 6f4a5e17fa5b79fb543f68d91fa8875bf5614bc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@stuvel.eu>
Date: Thu, 22 Sep 2016 11:08:20 +0200
Subject: [PATCH] Shot list: show updated task name in shot list after editing
 task.

---
 attract/static/js/tasks.js                   | 24 ++++++++++++++++++++
 src/styles/_tasks.sass                       |  9 ++++++++
 src/templates/attract/shots/for_project.jade |  3 ++-
 3 files changed, 35 insertions(+), 1 deletion(-)

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