Tweaks to flash-on/off

attract/static/js/tasks.js

@@ -3,7 +3,7 @@
         var target = this;
         this
             .addClass('flash-on')
-            .delay(200) // this delay is linked to the transition in the flash-on CSS class.
+            .delay(1000) // this delay is linked to the transition in the flash-on CSS class.
             .queue(function() {
                 target
                     .removeClass('flash-on')

src/styles/_base.sass

@@ -54,6 +54,7 @@ nav.sidebar
 
 #col_main
 	background-color: white
+	border-right: thin solid $color-background-dark
 
 #col_right
 	background-color: $color-background-light
@@ -130,7 +131,6 @@ select.input-transparent
 		display: table-header-group
 
 		.table-cell
-			padding: 5px
 			font-size: .9em
 			color: $color-text-dark-secondary
 
@@ -140,6 +140,7 @@ select.input-transparent
 	.table-cell
 		display: table-cell
 		border-bottom: thin solid $color-background-dark
+		vertical-align: middle
 
 	.table-cell-spacer
 		background-color: $color-background-light
@@ -150,3 +151,8 @@ select.input-transparent
 		border-top: none
 		border-bottom: none
 		cursor: e-resize
+
+.processing
+	+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
+	+stripes-animate
+	animation-duration: 2s

src/styles/_config.sass

@@ -43,13 +43,21 @@ $color_downvote: #74a4ff
 
 /* Label Status */
 $color-status-invalid: lightgray
+$color-status-invalid-dark: hsl(hue($color-status-invalid), 100%, 75%)
 $color-status-todo: lightgray
+$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 75%)
 $color-status-in_progress: #fff2cc
+$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%)
 $color-status-on_hold: #fff2cc
+$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 100%, 50%)
 $color-status-approved: #e4f5f9
+$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 50%)
 $color-status-cbb: #e4f5f9
+$color-status-cbb-dark: hsl(hue($color-status-cbb), 100%, 50%)
 $color-status-final: #e7f5d3
+$color-status-final-dark: hsl(hue($color-status-final), 100%, 40%)
 $color-status-review: #e4f5f9
+$color-status-review-dark: hsl(hue($color-status-review), 100%, 50%)
 
 $color-status-active: #E6F3FD
 $color-status-updated: #e7f5d3

src/styles/_shots.sass

@@ -1,6 +1,8 @@
 .table
 	.table-head
 		.table-cell
+			text-align: center
+
 			&.shot-thumbnail
 				width: $shots-list-thumbnail-width
 
@@ -9,19 +11,36 @@
 
 			span.collapser
 				cursor: pointer
+				width: 100%
+				display: inline-block
+				padding: 5px
 
 	.table-body
 		display: table-row-group
 		.table-cell
+			text-align: center
 			&.shot-name
-				padding-left: 10px
+				padding: 0 10px
+				text-align: left
 
 			&.task-type
 				max-width: 120px
-				+text-overflow-ellipsis
 
-				/* Each task in a new line */
 				a
+					display: block /* Each task in a new line */
+					opacity: 0
+					color: $color-text-dark-primary
+					+status-color
+					transition: all 150ms ease-in-out
+
+					span
+						+text-overflow-ellipsis
 						display: block
+						padding: 3px 10px
 
+				a[class^="status-"]
+					opacity: 1
 
+			&:hover
+				a
+					opacity: 1

src/styles/_tasks.sass

@@ -20,13 +20,11 @@
 	transition: all 100ms ease-in-out
 
 .flash-on
-	background-color: #dfd
-	color: #040
-	outline: 1px solid #040
-	transition: all 0.2s
+	background-color: lighten($color-success, 40%)
+	transition: all .5s ease-in
 
 .flash-off
-	transition: all 0.1s
+	transition: all 1s ease-out
 
 .task-list-item
 	border-right: 5px solid transparent
@@ -49,11 +47,6 @@
 		.status-indicator
 			transform: scale(1.1)
 
-	&.processing
-		+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
-		+stripes-animate
-		animation-duration: 2s
-
 	.status, .type
 		display: inline-block
 		margin-right: 10px

src/styles/_utils.sass

@@ -506,3 +506,41 @@
 	display: block
 	max-width: 100%
 	height: auto
+
+=status-background-color
+	&.status
+		&-invalid
+				color: hsl(hue($color-status-invalid), 100%, 75%)
+		&-todo
+				color: hsl(hue($color-status-todo), 100%, 75%)
+		&-in_progress
+				color: hsl(hue($color-status-in_progress), 100%, 60%)
+		&-on_hold
+				color: hsl(hue($color-status-on_hold), 100%, 75%)
+		&-approved
+				color: hsl(hue($color-status-approved), 100%, 75%)
+		&-cbb
+				color: hsl(hue($color-status-cbb), 100%, 75%)
+		&-final
+				color: hsl(hue($color-status-final), 100%, 40%)
+		&-review
+				color: hsl(hue($color-status-review), 100%, 75%)
+
+=status-color
+	&.status
+		&-invalid
+				color: $color-status-invalid-dark
+		&-todo
+				color: $color-status-todo-dark
+		&-in_progress
+				color: $color-status-in_progress-dark
+		&-on_hold
+				color: $color-status-on_hold-dark
+		&-approved
+				color: $color-status-approved-dark
+		&-cbb
+				color: $color-status-cbb-dark
+		&-final
+				color: $color-status-final-dark
+		&-review
+				color: $color-status-review-dark

src/templates/attract/shots/for_project.jade

@@ -22,6 +22,10 @@
 			| {% for shot in shots %}
 			.table-row(id="shot-{{ shot._id }}")
 				.table-cell.shot-thumbnail
+					a(
+						id="shot-link-{{ shot._id }}"
+						href="javascript:shot_open('{{ shot._id }}', '{{ project.url }}');",
+						class="status-{{ shot.properties.status }}")
 						img(src="http://placehold.it/100x60")
 				.table-cell.shot-name
 					a(
@@ -40,7 +44,7 @@
 					| {% if not tasks_for_shots[shot._id][task_type] %}
 					a(
 						href="javascript:task_create('{{ shot._id }}', '{{ project.url }}', '{{ task_type }}');")
-						| + {{ task_type }}
+						| + Task
 					| {% endif %}
 				| {% endfor %}
 			| {% endfor %}