@things-factory/reference-app 7.0.1-alpha.4 → 7.0.1-alpha.41

package/client/pages/product/product-master.js

@@ -38,6 +38,7 @@ class ProductMaster extends localize(i18next)(PageView) {
   constructor() {
     super()
     this.mode = isMobileDevice() ? 'LIST' : 'GRID'
+    this.importHandler = this.defaultImportHandler
   }
 
   static get properties() {
@@ -61,7 +62,7 @@ class ProductMaster extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -69,7 +70,7 @@ class ProductMaster extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -77,8 +78,8 @@ class ProductMaster extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
 
           <ox-record-creator id="add" .callback=${this.productCreationCallback.bind(this)}>
@@ -725,7 +726,7 @@ class ProductMaster extends localize(i18next)(PageView) {
     }
   }
 
-  async importHandler(patches) {
+  async defaultImportHandler(patches) {
     const response = await saveProducts(patches)
 
     if (!response.errors) {
@@ -842,9 +843,7 @@ class ProductMaster extends localize(i18next)(PageView) {
         ...this._columns
           .filter(column => column.type !== 'gutter' && !!column.imex)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }
@@ -866,15 +865,13 @@ class ProductMaster extends localize(i18next)(PageView) {
         if (!errors.find(err => err.type == 'type')) errors.push({ type: 'type', value: 'Product type is required' })
       }
       if (_.isEmpty(itm.packingType) || '') {
-        if (!errors.find(err => err.type == 'packingType'))
-          errors.push({ type: 'packingType', value: 'Packing type is required' })
+        if (!errors.find(err => err.type == 'packingType')) errors.push({ type: 'packingType', value: 'Packing type is required' })
       }
       if (_.isEmpty(itm.uom) || '') {
         if (!errors.find(err => err.type == 'uom')) errors.push({ type: 'uom', value: 'UOM is required' })
       }
       if (!_.isNumber(itm.uomValue) || _.isNaN(itm.uomValue) || '' || itm?.uomValue < 0) {
-        if (!errors.find(err => err.type == 'uomValue'))
-          errors.push({ type: 'uomValue', value: 'UOM Value is required' })
+        if (!errors.find(err => err.type == 'uomValue')) errors.push({ type: 'uomValue', value: 'UOM Value is required' })
       }
       return itm
     })

package/client/themes/app-theme.css

@@ -82,18 +82,34 @@ body {
   --mdc-button-outline-width: 1px;
   --mdc-button-horizontal-padding: 16px;
 
+  --md-fab-container-color: var(--primary-color);
+  --md-fab-icon-color: var(--focus-color);
+
+  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-primary: var(--secondary-text-color);
+  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-secondary: var(--primary-color);
+  --md-button-outline-color: var(--primary-color);
+  --md-danger-button-primary-color: var(--status-danger-color);
+  --md-danger-button-outline-color: var(--status-danger-color);
+  --md-button-outline-width: 1px;
+  --md-button-horizontal-padding: 16px;
+
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);
   --button-border: var(--border-dark-color);
   --button-border-radius: var(--border-radius);
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
-  --button-padding: var(--padding-default);
+  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
   --button-color: var(--secondary-color);
-  --button-font: normal 15px var(--theme-font);
+  --button-font: 600 var(--fontsize-default) var(--theme-font);
   --button-text-transform: capitalize;
   --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
   --button-activ-border: 1px solid var(--primary-color);
+  --button-activ-background-color: var(--primary-color);
+  --button-activ-color: var(--theme-white-color);
+  --iconbtn-padding: var(--padding-narrow);
 
   --button-primary-background-color: var(--primary-color);
   --button-primary-active-background-color: var(--status-success-color);
@@ -124,7 +140,7 @@ body {
   --label-color: var(--secondary-color);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
-  --input-padding: var(--padding-default);
+  --input-padding: 6px 2px;
   --input-min-width: 200px;
   --input-font: normal var(--fontsize-default) var(--theme-font);
   --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/client/themes/grist-theme.css

@@ -155,7 +155,7 @@ body {
     --record-view-font: normal 15px/32px var(--theme-font);
     --record-view-footer-height: 50px;
     --record-view-footer-button-height: var(--record-view-footer-height);
-    --record-view-footer-iconbutton-size: 35px;
+    --record-view-footer-iconbutton-size: 28px;
     --record-view-footer-iconbutton-margin: -2px;
     --record-view-footer-iconbutton-display: block;
     --ox-grist-padding: 0;
@@ -168,7 +168,7 @@ body {
 
     --record-view-footer-height: 50px;
     --record-view-footer-button-height: var(--record-view-footer-height);
-    --record-view-footer-iconbutton-size: 35px;
+    --record-view-footer-iconbutton-size: 28px;
     --record-view-footer-iconbutton-margin: -2px;
     --record-view-footer-iconbutton-display: block;
   }