From 0c3aa44825e9c5305621a82c75dac97ec5e761a0 Mon Sep 17 00:00:00 2001
From: John Hawthorn <john@stembolt.com>
Date: Wed, 5 Apr 2017 15:03:52 -0700
Subject: [PATCH] Show focused border on currency selector

Previously we were embedding the currency selector inside of a bootstrap
input-group-addon and hiding its border. This required a little extra
magic because we had to hide the select's border and change its height
to fit within.

Having no border meant that there was no indication when the currency
input was focused.

Bootstrap doesn't fully support having multiple inputs within a
input-group, but we can make it work by hiding the right border on the
left input.

A slight hack is needed to make focus look correct: we show the focused
colour on the right input's left border when the left border is focused.
This achieves the desired effect.
---
 .../backend/views/number_with_currency.js     |  2 +-
 .../spree/backend/_bootstrap_custom.scss      |  2 +-
 .../components/_number_with_currency.scss     | 21 ++++++++++++-------
 .../shared/_number_with_currency.html.erb     |  6 ++----
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js b/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js
index add2b89e64c..01e1cbde7ce 100644
--- a/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js
+++ b/backend/app/assets/javascripts/spree/backend/views/number_with_currency.js
@@ -4,7 +4,7 @@ Spree.Views.NumberWithCurrency = Backbone.View.extend({
   },
 
   initialize: function() {
-    this.$currencySelector = this.$('.number-with-currency-select select');
+    this.$currencySelector = this.$('.number-with-currency-select');
   },
 
   getCurrency: function() {
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
index b781a5c3c34..577e707b55e 100644
--- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
+++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
@@ -515,7 +515,7 @@ $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
 
-$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
+$custom-select-focus-border-color: $input-border-focus !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-sm-padding-y:  .2rem !default;
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss
index eb1b0ce019e..da3417c553d 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss
@@ -12,16 +12,23 @@
     text-align: left;
   }
 
-  & &-select {
-    padding: 0;
-    background: $input-bg;
+  &-with-select {
+    .number-with-currency-amount {
+      border-right: 0;
 
-    select {
+      &:focus + .number-with-currency-select {
+        border-left-color: $input-border-focus;
+      }
+    }
+
+    .number-with-currency-select {
       @extend .custom-select;
 
-      width: 100%;
-      height: $input-height;
-      border: 0;
+      cursor: pointer;
+      width: 5.5rem;
+
+      @include border-radius($border-radius);
+      @include border-left-radius(0);
 
       &::-ms-expand {
         // Required to see full text of selected value on IE11
diff --git a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb
index 941297f7976..19632937e0c 100644
--- a/backend/app/views/spree/admin/shared/_number_with_currency.html.erb
+++ b/backend/app/views/spree/admin/shared/_number_with_currency.html.erb
@@ -3,7 +3,7 @@
 <% currency ||= nil %>
 <% required ||= nil %>
 
-<div class="input-group number-with-currency js-number-with-currency">
+<div class="input-group number-with-currency <%= "number-with-currency-with-select" unless currency %> js-number-with-currency">
   <div class="input-group-addon number-with-currency-symbol"></div>
   <%= f.text_field amount_attr, value: number_to_currency(f.object.public_send(amount_attr), unit: ''), class: 'form-control number-with-currency-amount', required: required %>
   <% if currency %>
@@ -11,8 +11,6 @@
       <%= ::Money::Currency.find(currency).iso_code %>
     </div>
   <% else %>
-    <div class="input-group-addon number-with-currency-addon number-with-currency-select">
-      <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required} %>
-    </div>
+    <%= f.select currency_attr, ::Money::Currency.all.map(&:iso_code), {include_blank: true}, {required: required, class: 'number-with-currency-select'} %>
   <% end %>
 </div>