From 0b07bdb4829f75dcfb6e302c60dc499e86387e94 Mon Sep 17 00:00:00 2001
From: Andrew Miner <andrewminer@mac.com>
Date: Fri, 29 May 2015 12:49:13 -0700
Subject: [PATCH] Update crafting page checks to fade in

Update the crafting page so that the check mark for each step only
appears when hovering over that step, and so that the check also has
some descriptive text helping the user understand what it does.
---
 src/coffee/controllers/step_controller.coffee | 13 ++--
 src/jade/templates/step.jade                  |  3 +-
 src/scss/main.scss                            |  6 ++
 src/scss/templates/step.scss                  | 64 +++++++++++++++----
 4 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/coffee/controllers/step_controller.coffee b/src/coffee/controllers/step_controller.coffee
index cd85cf995..709f2836f 100644
--- a/src/coffee/controllers/step_controller.coffee
+++ b/src/coffee/controllers/step_controller.coffee
@@ -28,7 +28,7 @@ module.exports = class StepController extends BaseController
 
     # Event Methods ################################################################################
 
-    onCompleteButtonClicked: (event)->
+    onCompleteClicked: (event)->
         event.preventDefault()
         @trigger Event.button.complete, this
 
@@ -46,8 +46,9 @@ module.exports = class StepController extends BaseController
             model:       @model.recipe
             modPack:     @modPack
 
-        @$header         = @$('h3')
-        @$completeButton = @$('button.complete')
+        @$header        = @$('h3')
+        @$completePanel = @$('.complete')
+        @$completeImage = @$('.complete img')
         super
 
     onWillChangeModel: (oldModel, newModel)->
@@ -63,9 +64,9 @@ module.exports = class StepController extends BaseController
         @recipeController.multiplier = @model.multiplier
 
         if @canComplete(this)
-            @$completeButton.removeProp 'disabled'
+            @$completePanel.addClass 'disabled'
         else
-            @$completeButton.prop 'disabled', true
+            @$completePanel.removeClass 'disabled'
 
         super
 
@@ -73,4 +74,4 @@ module.exports = class StepController extends BaseController
 
     events: ->
         return _.extend super,
-            'click button.complete': 'onCompleteButtonClicked'
+            'click .complete a': 'onCompleteClicked'
diff --git a/src/jade/templates/step.jade b/src/jade/templates/step.jade
index 00e9cb3a7..680cb8cd6 100644
--- a/src/jade/templates/step.jade
+++ b/src/jade/templates/step.jade
@@ -9,4 +9,5 @@
     h3
     .view__inventory
     .view__minimal_recipe
-    button.complete
+    .complete
+        a: div: p I already have this
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 45854bd2d..066497a16 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -62,6 +62,11 @@ $color-brick-light:        #D9D9D9;
 $color-dirt:               #906647;
 $color-ice:                #8AA7E6;
 
+// Opacity Values //////////////////////////////////////////////////////////////////////////////////
+
+$opacity-hidden: 0.000001;
+$opacity-shown:  1.0;
+
 // Style Colors ////////////////////////////////////////////////////////////////////////////////////
 
 $color-active:             #5C8AE6;
@@ -69,6 +74,7 @@ $color-active-hover:       #2E6BE6;
 $color-background:         #AAC9FF;
 $color-background-panel:   #FFFFFF;
 $color-background-toolbar: rgba(255, 255, 255, 0.75);
+$color-checkmark:          #7EDD7B;
 $color-content:            rgba(230, 230, 230, 0.90);
 $color-error:              #F3C2C2;
 $color-error-new:          #CD0000;
diff --git a/src/scss/templates/step.scss b/src/scss/templates/step.scss
index d617d2279..b198bdac7 100644
--- a/src/scss/templates/step.scss
+++ b/src/scss/templates/step.scss
@@ -13,6 +13,17 @@ All rights reserved.
 
     &:first-child {
         border-top: 0;
+        padding-top: 0;
+
+        .complete {
+            top: 0;
+        }
+    }
+
+    &:hover {
+        .complete {
+            opacity: $opacity-shown;
+        }
     }
 
     .view__inventory {
@@ -23,25 +34,50 @@ All rights reserved.
         position: absolute; top: 2em; right: 4.8em;
     }
 
-    button.complete {
-        position: absolute; top: 1em; right: 0; height: 3em; width: 3em;
+    .complete {
+        position: absolute; top: 1em; right: 0;
+        cursor: pointer;
+        opacity: $opacity-hidden;
 
-        background: url("/images/check.png") no-repeat center;
-        border: 0;
-        font-size: $font-size-small;
-        outline: none;
+        transition: opacity $animate-fast;
 
-        &:active {
-            background: url('/images/check_active.png') no-repeat center;
+        a {
+            div {
+                height: 3em;
+
+                background: url('/images/check.png') no-repeat right;
+                background-size: 3em 3em;
+                padding-right: 4em;
+                text-align: right;
+
+                &:hover {
+                    background-image: url('/images/check_hover.png');
+
+                    p {
+                        font-weight: bold;
+                    }
+                }
+
+                p {
+                    position: relative; top: 50%;
+                    @include transform(translateY(-50%));
+                    color: $color-checkmark;
+                    font-size: $font-size-small;
+                }
+            }
         }
 
-        &:disabled {
-            background: url('/images/check_disabled.png') no-repeat center !important;
-            cursor: inherit;
+        &.active {
+            a {
+                background-image: url('/images/check_active.png');
+            }
         }
 
-        &:hover {
-            background: url('/images/check_hover.png') no-repeat center;
+        &.disabled {
+            a {
+                background-image: url('/images/check_disabled.png') !important;
+                cursor: inherit;
+            }
         }
     }
-}
\ No newline at end of file
+}