solidus_backend 2.2.2 → 2.3.0.beta1

data/app/views/spree/admin/stock_items/_stock_management.html.erb

@@ -69,7 +69,7 @@
       <% if display_add_row %>
         <tr class="js-add-stock-item stock-item-edit-row" data-variant-id="<%= variant.id %>">
           <td class='location-name-cell'>
-            <%= select_tag :stock_location_id, options_from_collection_for_select(locations_without_items, :id, :name), { include_blank: true, class: 'select2', "data-placeholder" => Spree.t(:add_to_stock_location), id: "variant-stock-location-#{variant.id}" } %>
+            <%= select_tag :stock_location_id, options_from_collection_for_select(locations_without_items, :id, :name), { include_blank: true, class: 'custom-select', "data-placeholder" => Spree.t(:add_to_stock_location), id: "variant-stock-location-#{variant.id}" } %>
           </td>
           <td class="align-center">
             <%= check_box_tag :backorderable, 'backorderable', false, id: "variant-backorderable-#{variant.id}" %>

data/app/views/spree/admin/stock_locations/_form.html.erb

@@ -114,7 +114,7 @@
 <% content_for :head do %>
   <%= javascript_tag do -%>
     $(document).ready(function(){
-      $('span#country .select2').on('change', function() { update_state(''); });
+      $('span#country select.select2').on('change', function() { update_state(''); });
     });
   <% end -%>
 <% end %>

data/app/views/spree/admin/stock_transfers/edit.html.erb

@@ -28,7 +28,7 @@
     <% end %>
     <%= f.field_container :destination_location do %>
       <%= f.label :destination_location_id %>
-      <%= f.select :destination_location_id, options_from_collection_for_select(@destination_stock_locations, :id, :name, @stock_transfer.destination_location_id), {include_blank: true}, {class: 'select2 fullwidth', "data-placeholder" => Spree.t(:select_a_stock_location)} %>
+      <%= f.select :destination_location_id, options_from_collection_for_select(@destination_stock_locations, :id, :name, @stock_transfer.destination_location_id), {include_blank: true}, {class: 'custom-select fullwidth', "data-placeholder" => Spree.t(:select_a_stock_location)} %>
       <%= f.error_message_on :destination_location %>
     <% end %>
     <div class="filter-actions actions" data-hook="buttons">

data/app/views/spree/admin/stock_transfers/index.html.erb

@@ -21,7 +21,7 @@
         <div class="field-block col-3">
           <div class="field">
             <%= f.label nil, Spree::StockLocation.model_name.human %>
-            <%= f.select :source_location_id_or_destination_location_id_eq, options_from_collection_for_select(@stock_locations, :id, :name, params[:q][:source_location_id_or_destination_location_id_eq]), {include_blank: true}, {class: 'select2 fullwidth'} %>
+            <%= f.select :source_location_id_or_destination_location_id_eq, options_from_collection_for_select(@stock_locations, :id, :name, params[:q][:source_location_id_or_destination_location_id_eq]), {include_blank: true}, {class: 'custom-select fullwidth'} %>
           </div>
         </div>
 

data/app/views/spree/admin/stock_transfers/new.html.erb

@@ -10,7 +10,7 @@
   <fieldset class="no-border-top">
     <%= f.field_container :source_location do %>
       <%= f.label :source_location_id %>
-      <%= f.select :source_location_id, options_from_collection_for_select(@source_stock_locations, :id, :name), {include_blank: true}, {class: 'select2 fullwidth', "data-placeholder" => Spree.t(:select_a_stock_location)} %>
+      <%= f.select :source_location_id, options_from_collection_for_select(@source_stock_locations, :id, :name), {include_blank: true}, {class: 'custom-select fullwidth', "data-placeholder" => Spree.t(:select_a_stock_location)} %>
       <%= f.error_message_on :source_location %>
     <% end %>
     <%= f.field_container :description do %>

data/app/views/spree/admin/store_credits/_form.html.erb

@@ -11,7 +11,7 @@
     <%= f.field_container :category_id do %>
       <%= f.label :category_id, class: 'required' %><br />
       <%= f.select :category_id, options_from_collection_for_select(@credit_categories, :id, :name, f.object.category.try(:id)),
-        { include_blank: true }, { class: 'select2 fullwidth', placeholder: Spree.t("admin.store_credits.select_reason") } %>
+        { include_blank: true }, { class: 'custom-select fullwidth', placeholder: Spree.t("admin.store_credits.select_reason") } %>
       <%= f.error_message_on :category_id %>
     <% end %>
   </div>

data/app/views/spree/admin/store_credits/_update_reason_field.html.erb

@@ -2,7 +2,7 @@
   <%= f.field_container :reason do %>
     <%= f.label :reason, Spree.t(:reason), class: 'required' %><br />
     <%= select_tag :update_reason_id, options_from_collection_for_select(@update_reasons, :id, :name),
-      { include_blank: true , class: 'select2 fullwidth', placeholder: Spree.t("admin.store_credits.select_amount_update_reason") } %>
+      { include_blank: true , class: 'custom-select fullwidth', placeholder: Spree.t("admin.store_credits.select_amount_update_reason") } %>
     <%= f.error_message_on :reason %>
   <% end %>
 </div>

data/app/views/spree/admin/stores/_form.html.erb

@@ -46,6 +46,6 @@
   <%= f.select :cart_tax_country_iso,
     Spree::Country.all.map { |c| [c.name, c.iso] },
     { include_blank: t(".no_cart_tax_country") },
-    { class: "select2 fullwidth" } %>
+    { class: "custom-select fullwidth" } %>
   <%= f.error_message_on :cart_tax_country_iso %>
 <% end %>

data/app/views/spree/admin/style_guide/topics/forms/_building_forms.html.erb

@@ -1,3 +1,4 @@
+<p>This content is related to the current Solidus layout and it's forms, and does not apply to building pages with Bootstrap. The "Building Forms" section will be removed once all new Bootstrap layouts have been implemented in Solidus core.</p>
 <%- snippet = capture do %>
   <form id="table-filter">
     <fieldset>
@@ -33,8 +34,9 @@
           </div>
 
           <div class="field">
-            <select class="select2">
-              <option>Select 2</option>
+            <select class="custom-select">
+              <option>Option A</option>
+              <option>Option B</option>
             </select>
           </div>
         </div>
@@ -75,9 +77,3 @@
 <div class="style-guide-code">
   <pre><code class="language-html"><%= escape_once snippet %></code></pre>
 </div>
-
-<script>
-$(function(){
-  $('.select2').select2();
-});
-</script>

data/app/views/spree/admin/style_guide/topics/forms/_buttons.html.erb

@@ -0,0 +1,6 @@
+<ul>
+  <li>Display form buttons at the bottom of the group, after the form inputs.</li>
+  <li>Primary action buttons and icons should be one style, secondary actions a second style, and destroy actions a third style.</li>
+  <li>Display search buttons and upload image buttons attached to the left side of the text field they accompany.</li>
+  <li>Allow users to submit a search form with the enter key when the cursor is inside of the search field.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/forms/_helper_text.html.erb

@@ -0,0 +1,13 @@
+<ul>
+  <li>Include a "i" icon and tooltip beside form labels with supplementary information.</li>
+  <li>Display input restrictions below form labels and above inputs (example: max 100 characters or specific formats).</li>
+  <li>Use helpful text like 'select a taxon' in dropdowns that don't have anything selected.</li>
+  <li>Don't display placeholder text inside text fields and boxes.</li>
+  <li>Display a progress/loading message or graphic if it takes a long time to submit a form.</li>
+</ul>
+
+
+
+
+
+

data/app/views/spree/admin/style_guide/topics/forms/_inputs.html.erb

@@ -0,0 +1,96 @@
+<div class=half>
+  <h4>Grouping and layout</h4>
+  <ul>
+    <li>Group inputs associated with one function within a background container.</li>
+    <li>Layout inputs in a logical order. Try to group similar input types to make it easier to fill out.</li>
+    <li>Display form fields side by side only if they're reasonably related. Don't do it just to fill the space.</li>
+    <li>Display date range fields side by side (and shorter than other text field types).</li>
+    <li>Stack radio buttons and checkboxes. Use more space between them if they aren't a group of similar items.</li>
+  </ul>
+</div>
+
+<div class="half">
+  <h4>Specific field types</h4>
+  <ul>
+    <li>Mark mandatory fields with an *.</li>
+    <li>Use radio buttons instead of dropdown lists for small finite lists and toggles.</li>
+    <li>Display a calendar icon in the right of date picker fields. When either the icon or the field is clicked, a calendar picker should appear.</li>
+    <li>Display a downwards pointing arrow in all dropdown lists, and Select2 dropdown fields.</li>
+    <li>Include a way for users to access a plain text version of their password in a password field.</li>
+  </ul>
+</div>
+
+<h4>Input widths</h4>
+<p>Size a text field or a text box so that it's indicative of how much text goes inside of it.</p>
+<table>
+  <tr>
+    <th>Input type</th>
+    <th>2/3 column<br>(main content area)</th>
+    <th>1/3 column<br>(secondary content area)</th>
+    <th>1/2 column<br>(main content, small screen)</th>
+    <th>1 column<br>(main & secondary content, small screen)
+  </tr>
+  <tr>
+    <td>text field - 'normal'</td>
+    <td>full, half, or quarter width</td>
+    <td>full or half width</td>
+    <td>full or half width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text field - date picker</td>
+    <td>half width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text field - multi selects  </td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>2 text fields - date range</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>text box</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>select box ('regular' and select2)</td>
+    <td>full, half, or quarter width</td>
+    <td>full or half width</td>
+    <td>full or half width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>checkbox - single</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>checkbox - list</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+  <tr>
+    <td>radio button - list</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+    <td>full width</td>
+  </tr>
+</table>

data/app/views/spree/admin/style_guide/topics/forms/_labels.html.erb

@@ -0,0 +1,6 @@
+<ul>
+  <li>Left align field labels and do not include colons.</li>
+  <li>Display field labels above text fields, text boxes and drop downs, and to the right of checkboxes and radio buttons.</li>
+  <li>Labels should be in sentence casing (first letter of the first word is uppercase, the rest are lowercase).</li>
+  <li>Do not add underlines to labels.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/forms/_validation.html.erb

@@ -1,3 +1,10 @@
+<ul>
+  <li>Validate mandatory fields client-side to make sure content is present.</li>
+  <li>Display field labels in red when there is an error in their respective field.</li>
+  <li>Outline inputs in red when there is an error inside.</li>
+  <li>Display validation text in red and below the input it is referring to. It should be closer to that input than anything else on the page.</li>
+</ul>
+
 <div class="errorExplanation">
   <h2>2 errors prohibited this record from being saved:</h2>
   <p>There were problems with the following fields:</p>
@@ -7,7 +14,7 @@
   </ul>
 </div>
 
-<div class="field withError">
+<div class="field withError half">
   <span class="field_with_errors"><label for="user_name">Name</label></span>
     <span class="field_with_errors"><input class="fullwidth" type="text" name="user[name]" id="user_name"></span>
   <span class="formError">can't be blank</span>

data/app/views/spree/admin/style_guide/topics/layout/_full_width_table_layout.html.erb

@@ -0,0 +1,10 @@
+<ul>
+  <li>This one has a main column on the left and secondary column on the right for information to describe what happens in each section of the form. I expect this one will be used more often than the other.</li>
+  <li>Use this for forms that would benefit from a little extra explanation of how to use the section.</li>
+  <li>Use this for forms that have minimal fields and have many equal priority items in them.</li>
+  <li>Try to use this form layout first before using the next one.</li>
+</ul>
+
+
+
+

data/app/views/spree/admin/style_guide/topics/layout/_sidebar_layout.html.erb

@@ -0,0 +1,4 @@
+<ul>
+  <li>This one has a main column on the left and secondary column on the right for form things.</li>
+  <li>Use this for dense, self explanatory forms that have secondary information to them like timing on a product or promotion.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/messaging/_flashes.html.erb

@@ -5,9 +5,15 @@
 <script>
   $('.trigger-flash').on('click', function(){
     type = $(this).data('flashType');
-    flash = $("<div class='flash'>")
-      .text(type)
-      .addClass(type)
-      .appendTo('.js-flash-wrapper');
+
+    if (!$('.flash.' + type).is('*')) {
+      flash = $("<div class='flash'>")
+        .text(type)
+        .addClass(type)
+        .appendTo('.js-flash-wrapper')
+        .on('click', function() {
+          $(this).remove();
+        });
+    }
   });
 </script>

data/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb

@@ -14,3 +14,48 @@
 <div class="style-guide-code">
   <pre><code class="language-html"><%= escape_once snippet %></code></pre>
 </div>
+<br/>
+<%- info_tooltip = capture do %>
+  <a title="Some info." class="fa fa-info-circle with-tip"  href="#"></a>
+<%- end %>
+<table class="with-actions-borders">
+  <thead>
+    <tr>
+      <th> Type </th>
+      <th> Example </th>
+      <th> Code </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <b>Info tooltips</b>
+        These are used to add supplementary information to form labels.
+        The info icon is the coverable area for this tooltip and should be placed at the right side of the form label.
+      </td>
+      <td class="align-center">
+          <%= info_tooltip %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once info_tooltip %></code></pre>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <b>Adding icon tooltips</b>
+          These are used to add textual context to the action icons used with tabular data like edit, delete, and clone.
+          They are styled with a similar colour to the icon that they’re attached to.
+      </td>
+      <td class="align-center actions">
+        <%= link_to_edit_url('#', title: 'edit', no_text: true) %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once link_to_edit_url('#', title: 'edit', no_text: true) %></code></pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>

data/app/views/spree/admin/style_guide/topics/tables/_forms_in_tables.html.erb

@@ -0,0 +1,4 @@
+<ul>
+  <li>Display all table functions outside the table to the right.</li>
+  <li>Display form submit buttons outside of the table at the bottom.</li>
+</ul>

data/app/views/spree/admin/style_guide/topics/typography/_lists.html.erb

@@ -2,7 +2,7 @@
   Unordered lists have been stripped of all padding and margin.
 </p>
 
-<ul>
+<ul class="example">
   <li>Unordered list of things</li>
   <li>List item
   <ul>

data/app/views/spree/admin/tax_rates/_form.html.erb

@@ -22,16 +22,30 @@
         <div class="col-5">
           <div data-hook="zone" class="field">
             <%= f.label :zone, Spree::Zone.model_name.human %>
-            <%= f.collection_select(:zone_id, @available_zones, :id, :name, {}, {class: 'select2 fullwidth'}) %>
+            <%= f.collection_select(:zone_id, @available_zones, :id, :name, {}, {class: 'custom-select fullwidth'}) %>
           </div>
           <div data-hook="category" class="field">
-            <%= f.label :tax_category_id, Spree::TaxCategory.model_name.human %>
-            <%= f.collection_select(:tax_category_id, @available_categories,:id, :name, {}, {class: 'select2 fullwidth'}) %>
+            <%= f.label :tax_category_ids, Spree::TaxCategory.model_name.human %>
+            <%= f.collection_select(:tax_category_ids, @available_categories, :id, :name, {}, {class: 'select2 fullwidth', multiple: "multiple"}) %>
           </div>
           <div data-hook="show_rate" class="field">
             <%= f.check_box :show_rate_in_label %>
             <%= f.label :show_rate_in_label, Spree.t(:show_rate_in_label) %>
           </div>
+
+          <div class="date-range-filter field">
+            <%= label_tag :validity_period, Spree.t(:validity_period) %>
+            <%= admin_hint Spree.t(:validity_period), Spree.t(:validity_period, scope: [:hints, "spree/tax_rate"]) %>
+            <div class="date-range-fields input-group">
+              <%= f.text_field :starts_at, class: 'datepicker form-control datepicker-from', value: datepicker_field_value(f.object.starts_at), placeholder: Spree::TaxRate.human_attribute_name(:starts_at) %>
+
+              <span class="range-divider input-group-addon">
+                <i class="fa fa-arrow-right"></i>
+              </span>
+
+              <%= f.text_field :expires_at, class: 'datepicker form-control datepicker-to', value: datepicker_field_value(f.object.expires_at), placeholder: Spree::TaxRate.human_attribute_name(:expires_at) %>
+            </div>
+          </div>
         </div>
       </div>
     </fieldset>

data/app/views/spree/admin/tax_rates/index.html.erb

@@ -20,7 +20,8 @@
       <col style="width: 15%">
       <col style="width: 10%">
       <col style="width: 10%">
-      <col style="width: 10%">
+      <col style="width: 5%">
+      <col style="width: 5%">
       <col style="width: 10%">
       <col style="width: 15%">
       <col style="width: 15%">
@@ -29,10 +30,11 @@
       <tr data-hook="rate_header">
         <th><%= Spree::TaxRate.human_attribute_name(:zone) %></th>
         <th><%= Spree::TaxRate.human_attribute_name(:name) %></th>
-        <th><%= Spree::TaxRate.human_attribute_name(:tax_category_id) %></th>
+        <th><%= Spree::TaxRate.human_attribute_name(:tax_categories) %></th>
         <th><%= Spree::TaxRate.human_attribute_name(:amount) %></th>
         <th><%= Spree::TaxRate.human_attribute_name(:included_in_price) %></th>
         <th><%= Spree::TaxRate.human_attribute_name(:show_rate_in_label) %></th>
+        <th><%= Spree::TaxRate.human_attribute_name(:expires_at) %></th>
         <th><%= Spree::Calculator.model_name.human %></th>
         <th class="actions"></th>
       </tr>
@@ -42,10 +44,17 @@
       <tr id="<%= spree_dom_id tax_rate %>" data-hook="rate_row" class="<%= cycle('odd', 'even')%>">
         <td class="align-center"><%=tax_rate.zone.try(:name) || Spree.t(:not_available) %></td>
         <td class="align-center"><%=tax_rate.name %></td>
-        <td class="align-center"><%=tax_rate.tax_category.try(:name) || Spree.t(:not_available) %></td>
+        <td class="align-center">
+          <% if tax_rate.tax_categories.any? %>
+            <%= tax_rate.tax_categories.map(&:name).join(", ") %>
+          <% else %>
+            <%= Spree.t(:not_available) %>
+          <% end %>
+        </td>
         <td class="align-center"><%=tax_rate.amount %></td>
         <td class="align-center"><%=tax_rate.included_in_price? ? Spree.t(:say_yes) : Spree.t(:say_no) %></td>
         <td class="align-center"><%=tax_rate.show_rate_in_label? ? Spree.t(:say_yes) : Spree.t(:say_no) %></td>
+        <td class="align-center"><%=tax_rate.expires_at.to_date.to_s(:short_date) if tax_rate.expires_at %></td>
         <td class="align-center"><%=tax_rate.calculator.to_s %></td>
         <td class="actions">
           <% if can?(:update, tax_rate) %>

data/app/views/spree/admin/taxonomies/edit.erb

@@ -19,12 +19,5 @@
   </fieldset>
 
 
-  <div>
-    <script>
-      Spree.routes.taxonomy_path = "<%= spree.api_taxonomy_path(@taxonomy) %>";
-      Spree.routes.taxonomy_taxons_path = "<%= spree.api_taxonomy_taxons_path(@taxonomy) %>";
-      Spree.routes.admin_taxonomy_taxons_path = "<%= spree.admin_taxonomy_taxons_path(@taxonomy) %>";
-    </script>
-    <div id="taxonomy_tree" class="tree" data-taxonomy-id="<%= @taxonomy.id %>"></div>
-  </div>
+  <div id="taxonomy_tree" class="tree" data-taxonomy-id="<%= @taxonomy.id %>"></div>
 <% end %>