Update grid settings panel (#1812)

- Add hover and active states to list items - Add arrow to each list item - Improve layout and style of size selector
reactioncommerce · Feb 8, 2017 · d8e8860 · d8e8860
1 parent 0287833
commit d8e8860
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 36 deletions.
diff --git a/imports/plugins/included/default-theme/client/styles/grid.less b/imports/plugins/included/default-theme/client/styles/grid.less
@@ -9,6 +9,10 @@
   .flex-wrap(wrap);
 }
 
+.flex-nowrap {
+  display: flex;
+}
+
 .flex-column {
   .flex-direction(column);
 }

diff --git a/imports/plugins/included/default-theme/client/styles/products/products.less b/imports/plugins/included/default-theme/client/styles/products/products.less
@@ -7,18 +7,20 @@
 
 
 .product-settings-size-controls {
-  .display(flex);
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .product-settings-size-control {
-  .display(flex);
-  .flex(1 1 auto);
+  display: flex;
+  flex: 1 1 auto;
   width: 50px;
   max-width: 50px;
   height: 50px;
   margin: 10px;
 
   .main {
+    position: relative;
     .flex(1 1 auto);
     height: 100%;
     background-color: @black20;
@@ -30,7 +32,7 @@
     .flex-direction(column);
     .flex(0 0 auto);
 
-    width: 33%;
+    width: 20px;
     height: 100%;
   }
 
@@ -39,7 +41,21 @@
     display: block;
     height: 25%;
     background-color: @black20;
-    border: 1px solid @white;
+    border-top: 1px solid @white;
+    border-right: 1px solid @white;
+
+    &:last-child {
+      border-bottom: 1px solid @white;
+    }
+  }
+
+  .main .overlay {
+    width: 45%;
+    height: 25%;
+    position: absolute;
+    background-color: @brand-primary-dark;
+    left: 0.5rem;
+    bottom: 0.5rem;
   }
 }
 
@@ -51,6 +67,32 @@
   max-width: 150px;
 }
 
+.product-settings-size-controls .list-group-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 33%;
+  border: none;
+}
+
+.product-settings-list-item a {
+  display: flex
+}
+
+.product-settings-list-item.active a {
+  color: @list-group-active-color;
+}
+
+.product-settings-list-item .action-view {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+
 .product-load-more {
-  padding: 0 60px;  
+  padding: 0 60px;
 }
diff --git a/...s/included/product-variant/client/templates/products/productSettings/productSettings.html b/...s/included/product-variant/client/templates/products/productSettings/productSettings.html
@@ -43,19 +43,10 @@
       </div>
     </div>
 
-    <div class="panel-body">
-      <div class="order-items">
-        {{#each product in products}}
-          {{> productSettingsListItem product}}
-        {{/each}}
-      </div>
-      {{!-- Todo: if theres only one selected
-      <div class="product-settings-mock-grid hidden">
-        {{#each product in products}}
-          {{> productSettingsGridItem product}}
-        {{/each}}
-      </div>
-      --}}
+    <div class="list-group order-items">
+      {{#each product in products}}
+        {{> productSettingsListItem product}}
+      {{/each}}
     </div>
 
   </div>
@@ -87,7 +78,9 @@ <h4 class="panel-title" data-i18n="productDetailEdit.size">Size</h4>
 
       <div class="list-group-item {{itemWeightActive 2}}" data-event-action="changeProductWeight" data-event-data="2">
         <div class="product-settings-size-control main-full">
-          <div class="main"></div>
+          <div class="main">
+            <div class="overlay"></div>
+          </div>
         </div>
       </div>
 
@@ -107,24 +100,33 @@ <h4 class="panel-title" data-i18n="productDetailEdit.size">Size</h4>
 </template>
 
 <template name="productSettingsListItem">
-  <div class="order-item" data-id="{{_id}}" id="{{_id}}">
-
-
-    <div class="order-item-media">
-      {{#with media}}
-        <img src="{{url store='large'}}">
-      {{else}}
-        <img src="/resources/placeholder.gif">
-      {{/with}}
-    </div>
+  <div class="list-group-item product-settings-list-item {{listItemActiveClassName _id}}" data-id="{{_id}}" id="{{_id}}">
+    <a
+      href="{{pathFor 'product' handle=handle}}"
+      data-event-category="grid"
+      data-event-action="product-click"
+      data-event-label="grid product click"
+      data-event-value="{{_id}}"
+    >
+      <div class="order-item-media">
+        {{#with media}}
+          <img src="{{url store='large'}}">
+        {{else}}
+          <img src="/resources/placeholder.gif">
+        {{/with}}
+      </div>
 
-    <div class="order-item-details">
-      <a href="{{pathFor 'product' handle=handle}}" data-event-category="grid" data-event-action="product-click" data-event-label="grid product click" data-event-value="{{_id}}">
-        <div class="overlay-title">{{title}}</div>
-        <div class="currency-symbol">{{formatPrice displayPrice}}</div>
-      </a>
-    </div>
+      <div class="order-item-details">
+        <div>
+          <div class="overlay-title">{{title}}</div>
+          <div class="currency-symbol">{{formatPrice displayPrice}}</div>
+        </div>
+      </div>
 
+      <div class="action-view">
+        <i class="fa fa-angle-right"></i>
+      </div>
+    </a>
   </div>
 </template>
 

diff --git a/...ins/included/product-variant/client/templates/products/productSettings/productSettings.js b/...ins/included/product-variant/client/templates/products/productSettings/productSettings.js
@@ -1,5 +1,6 @@
 import _ from "lodash";
 import { ReactiveDict } from "meteor/reactive-dict";
+import { Reaction } from "/client/api";
 import Logger from "/client/modules/logger";
 import { ReactionProduct } from "/lib/api";
 import { Media, Products } from "/lib/collections";
@@ -128,6 +129,15 @@ Template.productSettingsGridItem.helpers({
       return true;
     }
     return false;
+  },
+  listItemActiveClassName(productId) {
+    const handle = Reaction.Router.current().params.handle;
+
+    if (ReactionProduct.equals("productId", productId) && handle) {
+      return "active";
+    }
+
+    return "";
   }
 });