From d83367486b298c3fa17dbc7150c5e55501202cc1 Mon Sep 17 00:00:00 2001
From: Will Marshall <will@willmarshall.me>
Date: Wed, 16 Apr 2014 16:07:19 +1000
Subject: [PATCH] Adding icons to checkout, focusing on first input in each
 panel when selected

---
 app/assets/javascripts/darkswarm/all.js.coffee        |  1 +
 .../javascripts/darkswarm/directives/focus.js.coffee  | 11 +++++++++++
 app/assets/stylesheets/darkswarm/checkout.css.sass    |  7 +++++--
 app/helpers/checkout_helper.rb                        | 10 +++++++---
 app/views/shared/_validated_input.html.haml           |  8 +++-----
 app/views/shop/checkout/_billing.html.haml            |  4 +++-
 app/views/shop/checkout/_details.html.haml            |  2 ++
 app/views/shop/checkout/_payment.html.haml            |  2 ++
 app/views/shop/checkout/_shipping.html.haml           |  2 ++
 9 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/focus.js.coffee

diff --git a/app/assets/javascripts/darkswarm/all.js.coffee b/app/assets/javascripts/darkswarm/all.js.coffee
index e94c975952..357e371974 100644
--- a/app/assets/javascripts/darkswarm/all.js.coffee
+++ b/app/assets/javascripts/darkswarm/all.js.coffee
@@ -16,6 +16,7 @@
 #= require ./darkswarm
 #= require ./overrides
 #= require_tree ./mixins
+#= require_tree ./directives
 #= require_tree .
 
 $ ->
diff --git a/app/assets/javascripts/darkswarm/directives/focus.js.coffee b/app/assets/javascripts/darkswarm/directives/focus.js.coffee
new file mode 100644
index 0000000000..276e332578
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/focus.js.coffee
@@ -0,0 +1,11 @@
+Darkswarm.directive "ofnFocus", ->
+  restrict: "A"
+  link: (scope, element, attrs) ->
+    scope.$watch attrs.ofnFocus, ((focus) ->
+      console.log focus
+      focus and element.focus()
+      return
+    ), true
+
+    return
+
diff --git a/app/assets/stylesheets/darkswarm/checkout.css.sass b/app/assets/stylesheets/darkswarm/checkout.css.sass
index 1d6819d57a..84e8eccf8a 100644
--- a/app/assets/stylesheets/darkswarm/checkout.css.sass
+++ b/app/assets/stylesheets/darkswarm/checkout.css.sass
@@ -5,5 +5,8 @@ checkout
     .button, table
       width: 100%
 
-  dd.valid
-    background: green
+  dd
+    i.fi-check, &.valid i.fi-x
+      display: none
+    &.valid i.fi-check
+      display: inline
diff --git a/app/helpers/checkout_helper.rb b/app/helpers/checkout_helper.rb
index 6cf2aca961..147e240fce 100644
--- a/app/helpers/checkout_helper.rb
+++ b/app/helpers/checkout_helper.rb
@@ -12,10 +12,14 @@ module CheckoutHelper
   end
 
   def validated_input(name, path, args = {})
-    defaults = {
+    attributes = {
       required: true,
-      type: :text
+      type: :text,
+      name: path,
+      "ng-model" => path,
+      "ng-class" => "{error: !fieldValid('#{path}')}" 
     }.merge args
-    render partial: "shared/validated_input", locals: {name: name, path: path}.merge(defaults)
+    
+    render partial: "shared/validated_input", locals: {name: name, path: path, attributes: attributes}
   end
 end
diff --git a/app/views/shared/_validated_input.html.haml b/app/views/shared/_validated_input.html.haml
index 251c60b975..46331333fc 100644
--- a/app/views/shared/_validated_input.html.haml
+++ b/app/views/shared/_validated_input.html.haml
@@ -1,8 +1,6 @@
 %label{for: path}= name
-%input.medium.input-text{name: path,
-  "ng-model" => path,
-  required: required,
-  type: type,
-  "ng-class" => "{error: !fieldValid('#{path}')}"}
+
+%input.medium.input-text{attributes}
+
 %small.error.medium.input-text{"ng-show" => "!fieldValid('#{path}')"}
   = "{{ fieldErrors('#{path}') }}"
diff --git a/app/views/shop/checkout/_billing.html.haml b/app/views/shop/checkout/_billing.html.haml
index fe7232dfbd..169e9d032b 100644
--- a/app/views/shop/checkout/_billing.html.haml
+++ b/app/views/shop/checkout/_billing.html.haml
@@ -9,10 +9,12 @@
           .large-6.columns.text-right
             {{ order.bill_address.address1 }}
             {{ order.bill_address.city }}
+            %i.fi-x
+            %i.fi-check
       = f.fields_for :bill_address, @order.bill_address do |ba|
         .row
           .large-12.columns
-            = validated_input "Address", "order.bill_address.address1"
+            = validated_input "Address", "order.bill_address.address1", "ofn-focus" => "accordion['billing']"
         .row
           .large-12.columns
             = validated_input "Address (contd.)", "order.bill_address.address2", required: false
diff --git a/app/views/shop/checkout/_details.html.haml b/app/views/shop/checkout/_details.html.haml
index 3f3a815452..de27e0dfb2 100644
--- a/app/views/shop/checkout/_details.html.haml
+++ b/app/views/shop/checkout/_details.html.haml
@@ -9,6 +9,8 @@
           .large-6.columns.text-right
             {{ order.bill_address.firstname }}
             {{ order.bill_address.lastname }}
+            %i.fi-x
+            %i.fi-check
       .row
         .large-6.columns
           = validated_input('Email', 'order.email', type: :email)
diff --git a/app/views/shop/checkout/_payment.html.haml b/app/views/shop/checkout/_payment.html.haml
index c7ffd0c5dd..7cb79f81b2 100644
--- a/app/views/shop/checkout/_payment.html.haml
+++ b/app/views/shop/checkout/_payment.html.haml
@@ -8,6 +8,8 @@
             Payment Details 
           .large-6.columns.text-right
             {{ Order.paymentMethod().name }}
+            %i.fi-x
+            %i.fi-check
       - current_order.available_payment_methods.each do |method|
         .row
           .large-12.columns
diff --git a/app/views/shop/checkout/_shipping.html.haml b/app/views/shop/checkout/_shipping.html.haml
index f5636c81d1..34f543ddd7 100644
--- a/app/views/shop/checkout/_shipping.html.haml
+++ b/app/views/shop/checkout/_shipping.html.haml
@@ -8,6 +8,8 @@
             Shipping 
           .large-6.columns.text-right
             {{ Order.shippingMethod().name }}
+            %i.fi-x
+            %i.fi-check
       - for ship_method, i in current_distributor.shipping_methods.uniq
         .row
           .large-12.columns