Number with currency widget

[jhawthorn]

cc @Mandily @tvdeyen

I would like to introduce a "Number with currency" widget to use on every form with a monetary amount.

Currently whenever we are looking to input a monetary value, we just have a plain text box for the amount, and a second field for the currency (if it can be changed by that form).

This widget combines both inputs. It comes in two flavours, either with a dropdown for the currency (if it is changeable here) or fixed (where we previously didn't show a currency). I think it is better to always show the currency, both to make it obvious what currency is being used and for consistency.

Examples

Product edit

After	Before

Promotion Rules and calculators

After

Before

Payment

After
(layout and padding could use some fixing here before the final version)

Before

Try it

To try it out you can clone this down or try a demo on codepen

Implementation

This depends on having the font size match bootstrap's, which @tvdeyen has been working on. The widget uses bootstrap's styling of input addons, for the basic layout.

The selector (when enabled) is a standard HTML <select> (not select2) with custom styling to make it blend in better. I've done some cross browser testing, and what I have now seems to function well on chrome/FF/IE11/safari.

There's a small backbone.js view which watches for changes to the currency so it can update the symbol.

[Senjai]

😍 👍

[Mandily]

I like this a lot. I'm assuming we'd use the same thing in the settings where you set the master currency for each store?

[jhawthorn]

I like this a lot. I'm assuming we'd use the same thing in the settings where you set the master currency for each store?

This probably only makes sense when entering an amount.

[Sinetheta]

Now that we have components inheriting styles from $input-color (instead of catching the old solidus styles) we should probably replace that boostrap default with the current solidus admin color

# backend/_bootstrap_custom.scss
-$input-color:                    $gray !default;
+$input-color:                    $brand-primary;

[Sinetheta]

Is there a reason for these inherits? That would be the default and it's also in our reset.

[Sinetheta]

I'm not sure what way you want to go here, but you could also add <i class="fa fa-caret-down" aria-hidden="true"></i> and position as necessary.

The svg us much simpler, but harder to color/theme.

[jhawthorn]

Can't be done. This is the background of a <select>

[tvdeyen]

There is also asset-data-url

https://github.com/rails/sass-rails#asset-data-urlrelative-asset-path

then we can make this changeable and it's still a data uri.

[mtomov]

another option might be to use ::before / ::after selectors and content: property with the encoded symbol (not entirely sure what the svg is) as a value and position it absolutely, and set the font-family to the one for the icons, and finally give the element a position: relative

[Sinetheta]

We can break this up a bit

Spree.Views.NumberWithCurrency = Backbone.View.extend({
  events: {
    'change input,select': "render"
  },

  initialize: function() {
    this.defaultCurrency = this.$('[data-currency]').data("currency");
  },

  getCurrency: function() {
    return this.$('.currency-selector').val() || this.defaultCurrency;
  },

  updateSymbol: function(currency) {
    var symbol = '';
    if (currency) {
      symbol = Spree.currencyInfo[currency][0];
    }
    this.$('.currency-selector-symbol').text(symbol)
  },

  render: function() {
    var currency = this.getCurrency();
    this.updateSymbol(currency);
  }
});

[Sinetheta]

Sorry about the nits, I didn't read the PR message. Looks great as a UI @jhawthorn 👍

[tvdeyen]

I like this a lot. There is still room for improving, though. For me it's hard to distinguish between changeable and "not changeable" currency. The only differentiation is the little black arrow. Maybe we could remove the background from the "display only" or use a different bg colour? Not sure.

Thanks John! 🍺

[tvdeyen]

can we have a:

&:hover {
  cursor: pointer;
}

here please?

[jhawthorn]

👍

I'm going to try &:hover:not(:active). When testing with just :hover it felt a little weird. When opening the select, the cursor changed from pointer to arrow and then quickly back. Using :hover:not(:active), it just switches to arrow, and stays that way while open. This is the same behaviour we get from the select2 controlled selects.

[tvdeyen]

👌🏻

[jhawthorn]

@tvdeyen to help differentiate between selectable and fixed currencies, I'm going to try make the background white when it is a select box. If we also go with the change I propose in #1797 "Replace select2 styling" it should match other select boxes and be even more obvious.

[jhawthorn]

This is no longer WIP and is good to go.

Here's how the selectable vs fixed currency looks now.

[jhawthorn]

At @tvdeyen's suggestion I've swapped this to use bootstrap's custom select styling, which has the advantage of looking (more or less) identical across browsers and reduces the CSS we need to achieve this.

[tvdeyen]

Really like this 👍

I have some comments about removing styles already set by Bootstrap.

Also I think we should add tests for the changes in the controllers.

[tvdeyen]

display: inline-block is already set by Bootstrap in .c-select

[tvdeyen]

Bootstrap already takes care of hiding this.

[jhawthorn]

opacity: 0 didn't do the trick on IE11. The "D" in "USD" was cut off, despite there being lots of room in the select box. See comment.

[tvdeyen]

Interesting. Ok. Thanks for clarification.

[tvdeyen]

Can we use Bootstraps $input-heighthere?

[jhawthorn]

👍

This leaves a 1px gap on the top and bottom (height is 2.25rem == 29px), but I don't think that's a huge issue, and is worth it to avoid this magic number and ensure the input will scale well if our font size changes.

[tvdeyen]

Let's make use of Bootstraps $input-bg here.

[tvdeyen]

text-align: center; is already set by Bootstraps .input-group-addon

[jhawthorn]

@tvdeyen Thanks. I have addressed your feedback.

[tvdeyen]

Great stuff. 🌟

[mtomov]

Just played with this for a bit, and it's super cool! The up and down keys from the keyboard work just as well, and the immediate feedback that you get with the currency sign change in front is awesome! Very nice piece of UI! Thanks a lot!