Fix #193

Author: webdevstar

locales/admin/en.json

@@ -42,7 +42,7 @@
   "messages_uploadComplete": "Upload complete",
   "messages_deleteConfirmation": "Are you sure you want to delete this item?",
   "messages_deleteForever": "Delete forever?",
-  "help_dropHere": "Drop file here to upload",
+  "help_dropHere": "Drop files here to upload",
   "help_slug": "The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.",
   "errors_required": "This field is required.",
   "errors_email": "Please enter a valid email address.",
@@ -245,5 +245,6 @@
   "orders_setDraft": "Set as Draft",
   "orders_search": "Search orders",
   "pageNotFound": "Page not found!",
-  "skuTaken": "Product SKU must be unique"
+  "skuTaken": "Product SKU must be unique",
+  "product_options": "Options"
 }

package.json

@@ -53,7 +53,7 @@
     "babel-preset-latest": "^6.24.0",
     "babel-preset-react": "^6.23.0",
     "body-parser": "^1.16.1",
-    "cezerin-client": "^0.4.38",
+    "cezerin-client": "^0.4.40",
     "cookie-parser": "^1.4.3",
     "css-loader": "^0.28.0",
     "express": "^4.15.1",
@@ -91,7 +91,7 @@
     "slug": "^0.9.1",
     "theme": "file:themes/current",
     "ua-parser-js": "^0.7.12",
-    "webpack": "^2.3.2",
+    "webpack": "^2.3.3",
     "winston": "^2.3.1"
   },
   "devDependencies": {

public/admin-assets/css/style.css

@@ -1,29 +1,43 @@
-html, body { height: 100%; margin: 0; padding: 0; background-color: #F9F9F9; box-sizing: border-box;}
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #f1f1f1;
+  box-sizing: border-box;
+}
+
+#app, #container {
+  height: 100%;
+}
 
-#app, #container { height: 100%; }
-#bodyContainer { overflow: hidden; }
+#bodyContainer {
+  overflow: hidden;
+}
 
-.scroll { overflow: auto;}
-.col-full-height { height: 100%; }
+.scroll {
+  overflow: auto;
+}
+
+.col-full-height {
+  height: 100%;
+}
 
 body, button, input, select, textarea {
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .row--no-gutter {
-   margin-left: 0;
-   margin-right: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .col--no-gutter {
-   padding-left: 0;
-   padding-right: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.col-categories {
-  background-color: #f1f1f1;
+.right-border {
   border-right: 1px solid #ccc;
-  position: relative;
 }
 
 .field-hint {
@@ -34,9 +48,8 @@ body, button, input, select, textarea {
 .buttons-box {
   text-align: right;
   padding: 30px;
-  background-color: rgba(0,0,0,0.05);
+  background-color: rgba(0, 0, 0, 0.05);
   border-top: 1px solid #e0e0e0;
-  /*color: #757575;*/
 }
 
 .blue-title {
@@ -46,12 +59,13 @@ body, button, input, select, textarea {
   padding: 20px 0 5px 0;
 }
 
-.mce-content-body {
-  border-bottom: 1px solid rgb(224, 224, 224);
-}
+.mce-content-body {}
+
+.mce-edit-focus {}
 
-.mce-edit-focus {
-  /*border-bottom: 2px solid rgb(25, 118, 210);*/
+.products-item {
+  background-color: #fff;
+  border-left: 1px solid rgb(224, 224, 224);
 }
 
 .block404 {
@@ -67,6 +81,6 @@ body, button, input, select, textarea {
 }
 
 .block404 .description {
-  color: rgba(0,0,0,0.4);
+  color: rgba(0, 0, 0, 0.4);
   font-size: 16px;
 }

src/admin/client/index.html

@@ -157,7 +157,6 @@
     window.addEventListener('load', resizeElements);
   </script>
   <link href="/admin-assets/css/flexboxgrid.min.css" rel="stylesheet" type="text/css" />
-  <!-- <link href="/admin-assets/css/material.min.css" rel="stylesheet" type="text/css" /> -->
   <link href="/admin-assets/css/style.css" rel="stylesheet" type="text/css" />
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

src/admin/client/index.js

@@ -17,7 +17,11 @@ import layoutShared from 'layouts/shared'
 import layoutHome from 'layouts/home'
 import layoutNotFound from 'layouts/404'
 import layoutProducts from 'layouts/products'
-import layoutProductEdit from 'layouts/products/edit'
+import layoutProductEditShared from 'layouts/products/edit/shared'
+import layoutProductEditGeneral from 'layouts/products/edit/general'
+import layoutProductEditInventory from 'layouts/products/edit/inventory'
+import layoutProductEditImages from 'layouts/products/edit/images'
+import layoutProductEditOptions from 'layouts/products/edit/options'
 import layoutProductCategories from 'layouts/products/categories'
 import layoutCustomers from 'layouts/customers'
 import layoutCustomerEdit from 'layouts/customers/edit'
@@ -140,12 +144,21 @@ ReactDOM.render(
       <Route component={layoutShared}>
         <IndexRoute component={layoutHome}/>
         <Route path="products" component={layoutProducts}/>
-        <Route path="product/:id" component={layoutProductEdit}/>
         <Route path="products/categories" component={layoutProductCategories}/>
+
+        <Route path="product/:productId" component={layoutProductEditShared}>
+          <IndexRoute component={layoutProductEditGeneral}/>
+          <Route path="general" component={layoutProductEditGeneral}/>
+          <Route path="inventory" component={layoutProductEditInventory}/>
+          <Route path="images" component={layoutProductEditImages}/>
+          <Route path="options" component={layoutProductEditOptions}/>
+        </Route>
+
         <Route path="orders" component={layoutOrders}/>
         <Route path="customers" component={layoutCustomers}/>
         <Route path="customer/:id" component={layoutCustomerEdit}/>
         <Route path="customers/groups" component={layoutCustomerGroups}/>
+
         <Route path="settings" component={layoutSettingsShared}>
           <IndexRoute component={layoutSettingsGeneral}/>
           <Route path="general" component={layoutSettingsGeneral}/>
@@ -168,6 +181,7 @@ ReactDOM.render(
           <Route path="tokens/add" component={layoutSettingsTokensAdd}/>
           <Route path="tokens/:tokenId" component={layoutSettingsTokensEdit}/>
         </Route>
+
         <Route path="*" component={layoutNotFound} status={404}/>
       </Route>
     </Route>

src/admin/client/layouts/customers/groups/index.js

@@ -4,10 +4,10 @@ import Groups from 'modules/customer-groups/list';
 
 export default () => (
   <div className="row row--no-gutter col-full-height">
-    <div className="col-xs-3 col--no-gutter scroll col-categories">
+    <div className="col-xs-3 col--no-gutter scroll col-full-height right-border">
       <Groups showAll={false} showRoot={false} showAdd={true} />
     </div>
-    <div className="col-xs-9 col--no-gutter scroll">
+    <div className="col-xs-9 col--no-gutter scroll col-full-height">
       <GroupEdit />
     </div>
   </div>

src/admin/client/layouts/customers/index.js

@@ -4,10 +4,10 @@ import Groups from 'modules/customer-groups/list';
 
 export default () => (
   <div className="row row--no-gutter col-full-height">
-    <div className="col-xs-3 col--no-gutter scroll col-categories">
+    <div className="col-xs-3 col--no-gutter scroll col-full-height right-border">
       <Groups showAll={true} showRoot={false} showAdd={false}/>
     </div>
-    <div className="col-xs-9 col--no-gutter scroll">
+    <div className="col-xs-9 col--no-gutter scroll col-full-height">
       <CustomersList />
     </div>
   </div>

src/admin/client/layouts/home.js

@@ -1,17 +1,14 @@
 import React from 'react'
 
-import FontIcon from 'material-ui/FontIcon';
-
-export const Layout = () => (
+export default() => (
   <div>
-  <FontIcon className="material-icons">attach_file</FontIcon>
-  <FontIcon className="material-icons">add_a_photo</FontIcon>
-  <FontIcon className="material-icons">delete</FontIcon>
-  <FontIcon className="material-icons">done</FontIcon>
-  <FontIcon className="material-icons">search</FontIcon>
-  <FontIcon className="material-icons">content_copy</FontIcon>
-  <FontIcon className="material-icons">clear</FontIcon>
+    <div className="row">
+      <div className="col-xs-6">
+        Key performance indicators
+      </div>
+      <div className="col-xs-6">
+        Key performance indicators
+      </div>
+    </div>
   </div>
 )
-
-export default Layout

src/admin/client/layouts/orders/index.js

@@ -4,10 +4,10 @@ import OrdersFilter from 'modules/orders/filter';
 
 export default () => (
   <div className="row row--no-gutter col-full-height">
-    <div className="col-xs-3 col--no-gutter scroll col-categories">
+    <div className="col-xs-3 col--no-gutter scroll col-full-height right-border">
       <OrdersFilter />
     </div>
-    <div className="col-xs-9 col--no-gutter scroll">
+    <div className="col-xs-9 col--no-gutter scroll col-full-height">
       <OrdersList />
     </div>
   </div>

src/admin/client/layouts/products/categories/index.js

@@ -4,10 +4,10 @@ import Categories from 'modules/product-categories/list';
 
 export default () => (
   <div className="row row--no-gutter col-full-height">
-    <div className="col-xs-3 col--no-gutter scroll col-categories">
+    <div className="col-xs-3 col--no-gutter scroll col-full-height right-border">
       <Categories showAll={false} showTrash={false} showAdd={true} />
     </div>
-    <div className="col-xs-9 col--no-gutter scroll">
+    <div className="col-xs-9 col--no-gutter scroll col-full-height">
       <CategoryEdit />
     </div>
   </div>