Adding icons to checkout, focusing on first input in each panel when selected

app/assets/javascripts/darkswarm/all.js.coffee

@@ -16,6 +16,7 @@
 #= require ./darkswarm
 #= require ./overrides
 #= require_tree ./mixins
+#= require_tree ./directives
 #= require_tree .
 
 $ ->

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
+

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

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

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}') }}"

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

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)

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

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