From 997a12ee112eba6457fc4e5b66379a3b9accc596 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 22 Sep 2016 21:27:15 +0200
Subject: [PATCH] Shot status indicator and other minor tweaks

---
 src/styles/_base.sass   | 17 ++++++++--
 src/styles/_config.sass | 14 ++++----
 src/styles/_shots.sass  | 72 +++++++++++++++++++++++++++++++++--------
 src/styles/_tasks.sass  |  4 ++-
 src/styles/_utils.sass  | 16 ++++-----
 5 files changed, 91 insertions(+), 32 deletions(-)

diff --git a/src/styles/_base.sass b/src/styles/_base.sass
index a642aad..09422ca 100644
--- a/src/styles/_base.sass
+++ b/src/styles/_base.sass
@@ -82,6 +82,12 @@ nav.sidebar
 	background-color: white
 	border-bottom: thin solid $color-background
 
+.input-group-flex
+	display: flex
+
+	.input-transparent-group+.input-transparent-group
+		margin-left: 10px
+
 .input-transparent-group
 	width: 100%
 	display: flex
@@ -91,6 +97,7 @@ nav.sidebar
 		padding-right: 10px
 		font-weight: normal
 		color: $color-text-dark-primary
+		min-width: 80px
 
 	&.select_multiple
 		margin-bottom: 10px
@@ -154,7 +161,7 @@ select.input-transparent
 
 /* Generic Statuses */
 .processing
-	+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
+	+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
 	+stripes-animate
 	animation-duration: 2s
 
@@ -162,7 +169,13 @@ select.input-transparent
 	background-color: lighten($color-success, 50%) !important
 	border-color: lighten($color-success, 40%) !important
 	color: $color-success !important
+	text-shadow: 1px 1px 0 white
 	transition: all .1s ease-in
+	img
+		transition: all .1s ease-in
+		opacity: .8
 
 .flash-off
-	transition: all 1.2s ease-out
+	transition: all 1s ease-out
+	img
+		transition: all 1s ease-out
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 66ca14c..bd18509 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -44,16 +44,16 @@ $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: #ff8080
 $color-status-todo-dark: hsl(hue($color-status-todo), 100%, 75%)
-$color-status-in_progress: #fff2cc
+$color-status-in_progress: #ffbe00
 $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-on_hold: #cb9e15
+$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 50%, 50%)
+$color-status-approved: #a3e04d
 $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-cbb: #9cd5e2
+$color-status-cbb-dark: hsl(hue($color-status-cbb), 40%, 60%)
 $color-status-final: #e7f5d3
 $color-status-final-dark: hsl(hue($color-status-final), 100%, 40%)
 $color-status-review: #e4f5f9
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index 0e8d0c4..bae0a59 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -1,4 +1,9 @@
 .table
+	.table-cell
+		&.shot-status
+			width: 5px
+			height: 100%
+			display: inline-block
 	.table-head
 		.table-cell
 			text-align: center
@@ -17,34 +22,73 @@
 
 	.table-body
 		display: table-row-group
+
+		.table-row
+			position: relative
+
+			&.active
+				border-color: $color-background-dark
+				background-color: $color-background-light
+
+				.table-cell:last-child
+					box-shadow: inset -5px 0 0 $color-primary
+
+			&.status
+				&-invalid
+					.shot-status
+						background-color: $color-status-invalid-dark
+				&-todo
+					.shot-status
+						background-color: $color-status-todo-dark
+				&-in_progress
+					.shot-status
+						background-color: $color-status-in_progress-dark
+				&-on_hold
+					.shot-status
+						background-color: $color-status-on_hold-dark
+				&-approved
+					.shot-status
+						background-color: $color-status-approved-dark
+				&-cbb
+					.shot-status
+						background-color: $color-status-cbb-dark
+				&-final
+					.shot-status
+						background-color: $color-status-final-dark
+				&-review
+					.shot-status
+						background-color: $color-status-review-dark
+
 		.table-cell
 			text-align: center
 			&.shot-name
-				padding: 0 10px
+				padding: 0px 10px
 				text-align: left
+				a
+					color: $color-text-dark-primary
 
 			&.task-type
 				max-width: 120px
 
 				a
-					display: block /* Each task in a new line */
+					display: inline-block /* Each task in a new line */
 					opacity: 0
-					color: $color-text-dark-primary
-					+status-color
-					border: thin solid transparent
-					border-radius: 3px
+					border-radius: 50%
+					width: 16px
+					height: 16px
+					position: relative
+					top: 2px
+					+text-overflow-ellipsis
+					+status-background-color
 					transition: all 150ms ease-in-out
 
-					span
-						+text-overflow-ellipsis
-						display: block
-						padding: 1px 8px
-
 					&.active
-						text-decoration: none
 						opacity: 1
-						color: white !important
-						+status-background-color
+						border-radius: 3px
+
+					&.task-add
+						width: auto
+						border-radius: initial
 
 				a[class^="status-"]
 					opacity: 1
diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass
index 461c6d6..a0c2b4b 100644
--- a/src/styles/_tasks.sass
+++ b/src/styles/_tasks.sass
@@ -3,7 +3,9 @@
 	padding: 0 10px 10px
 	+container-box
 
-	.task-name
+	border-top: thick solid $color-warning
+
+	.item-name
 		font-size: 1.6em
 
 #task-add
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index 5451b45..61bac25 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -512,15 +512,15 @@
 		&-invalid
 				background-color: hsl(hue($color-status-invalid), 100%, 75%)
 		&-todo
-				background-color: hsl(hue($color-status-todo), 100%, 75%)
+				background-color: $color-status-todo-dark
 		&-in_progress
-				background-color: hsl(hue($color-status-in_progress), 100%, 60%)
+				background-color: hsl(hue($color-status-in_progress), 100%, 50%)
 		&-on_hold
-				background-color: hsl(hue($color-status-on_hold), 100%, 75%)
+				background-color: hsl(hue($color-status-on_hold), 60%, 50%)
 		&-approved
-				background-color: hsl(hue($color-status-approved), 100%, 75%)
+				background-color: hsl(hue($color-status-approved), 40%, 60%)
 		&-cbb
-				background-color: hsl(hue($color-status-cbb), 100%, 75%)
+				background-color: $color-status-cbb
 		&-final
 				background-color: hsl(hue($color-status-final), 100%, 40%)
 		&-review
@@ -533,11 +533,11 @@
 		&-todo
 				color: $color-status-todo-dark
 		&-in_progress
-				color: $color-status-in_progress-dark
+				color: $color-status-in_progress
 		&-on_hold
-				color: $color-status-on_hold-dark
+				color: $color-status-on_hold
 		&-approved
-				color: $color-status-approved-dark
+				color: $color-status-approved
 		&-cbb
 				color: $color-status-cbb-dark
 		&-final