From 85c7908ac69178aa2242ae8cc3e1fc75e834b241 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 22 Sep 2016 17:09:43 +0200
Subject: [PATCH] Shots view: set task as active when selecting it

---
 attract/static/js/tasks.js                   |  3 +-
 src/styles/_shots.sass                       |  7 ++++
 src/styles/_utils.sass                       | 35 +++++++++++++++-----
 src/templates/attract/shots/for_project.jade |  1 +
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js
index a2cf7db..b1216b2 100644
--- a/attract/static/js/tasks.js
+++ b/attract/static/js/tasks.js
@@ -40,11 +40,10 @@ function task_open(task_id, project_url) {
         return;
     }
 
-    $('#task-list').find('a').removeClass('active');
+    $('[id^="task-"]').removeClass('active');
     $('#task-' + task_id).addClass('active');
 
     var task_url = '/attract/' + project_url + '/tasks/' + task_id;
-    console.log('task_url is ' + task_url);
 
     $.get(task_url, function(task_data) {
         $('#task-details').html(task_data);
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index c61d82c..4929d25 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -31,6 +31,8 @@
 					opacity: 0
 					color: $color-text-dark-primary
 					+status-color
+					border: thin solid transparent
+					border-radius: 3px
 					transition: all 150ms ease-in-out
 
 					span
@@ -38,6 +40,11 @@
 						display: block
 						padding: 3px 10px
 
+					&.active
+						font-weight: bold
+						+status-border-color
+
+
 				a[class^="status-"]
 					opacity: 1
 
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index 9835ecf..5451b45 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -510,21 +510,21 @@
 =status-background-color
 	&.status
 		&-invalid
-				color: hsl(hue($color-status-invalid), 100%, 75%)
+				background-color: hsl(hue($color-status-invalid), 100%, 75%)
 		&-todo
-				color: hsl(hue($color-status-todo), 100%, 75%)
+				background-color: hsl(hue($color-status-todo), 100%, 75%)
 		&-in_progress
-				color: hsl(hue($color-status-in_progress), 100%, 60%)
+				background-color: hsl(hue($color-status-in_progress), 100%, 60%)
 		&-on_hold
-				color: hsl(hue($color-status-on_hold), 100%, 75%)
+				background-color: hsl(hue($color-status-on_hold), 100%, 75%)
 		&-approved
-				color: hsl(hue($color-status-approved), 100%, 75%)
+				background-color: hsl(hue($color-status-approved), 100%, 75%)
 		&-cbb
-				color: hsl(hue($color-status-cbb), 100%, 75%)
+				background-color: hsl(hue($color-status-cbb), 100%, 75%)
 		&-final
-				color: hsl(hue($color-status-final), 100%, 40%)
+				background-color: hsl(hue($color-status-final), 100%, 40%)
 		&-review
-				color: hsl(hue($color-status-review), 100%, 75%)
+				background-color: hsl(hue($color-status-review), 100%, 75%)
 
 =status-color
 	&.status
@@ -544,3 +544,22 @@
 				color: $color-status-final-dark
 		&-review
 				color: $color-status-review-dark
+
+=status-border-color
+	&.status
+		&-invalid
+				border-color: $color-status-invalid-dark
+		&-todo
+				border-color: $color-status-todo-dark
+		&-in_progress
+				border-color: $color-status-in_progress-dark
+		&-on_hold
+				border-color: $color-status-on_hold-dark
+		&-approved
+				border-color: $color-status-approved-dark
+		&-cbb
+				border-color: $color-status-cbb-dark
+		&-final
+				border-color: $color-status-final-dark
+		&-review
+				border-color: $color-status-review-dark
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 04cc056..faa04e0 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -37,6 +37,7 @@
 				.table-cell.task-type(class="{{ task_type }}")
 					| {% for task in tasks_for_shots[shot._id][task_type] %}
 					a(
+						id="task-{{ task._id }}",
 						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
 						class="status-{{ task.properties.status }}")
 						span(class="task-name-{{ task._id }}") {{ task.name }}