@things-factory/operato-wms 7.0.1-alpha.3 → 7.0.1-alpha.31

package/_index.html

@@ -52,6 +52,7 @@
     <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
     <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
+    <link href="/node_modules/material-symbols/index.css" rel="stylesheet" />
     <style>
       body {
         margin: 0;

package/client/bootstrap.js

@@ -99,7 +99,7 @@ export default async function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html` <mwc-icon>settings</mwc-icon> `,
+      icon: html` <md-icon>settings</md-icon> `,
       name: html` <ox-i18n msgid="label.setting"></ox-i18n> `,
       action: () => {
         navigate('setting')
@@ -126,7 +126,7 @@ export default async function bootstrap() {
   store.dispatch({
     type: ADD_MORENDA,
     morenda: {
-      icon: html`<mwc-icon>help</mwc-icon>`,
+      icon: html`<md-icon>help</md-icon>`,
       name: html`<ox-i18n msgid="text.help"></ox-i18n>`,
       action: () => {
         navigate('help')

package/client/pages/components/partner-selector.js

@@ -1,4 +1,5 @@
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
+
 import '@things-factory/form-ui'
 import '@operato/data-grist'
 
@@ -8,10 +9,12 @@ import { css, html, LitElement } from 'lit'
 import { i18next } from '@things-factory/i18n-base'
 import { client } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 class PartnerSelector extends LitElement {
   static get styles() {
     return [
+      ButtonContainerStyles,
       css`
         :host {
           display: flex;
@@ -19,16 +22,10 @@ class PartnerSelector extends LitElement {
           overflow: hidden;
           background-color: white;
         }
+
         ox-grist {
           flex: 1;
         }
-        .button-container {
-          padding: var(--button-container-padding);
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-          height: var(--button-container-height);
-        }
       `
     ]
   }
@@ -45,14 +42,10 @@ class PartnerSelector extends LitElement {
     return html`
       <search-form id="search-form" .fields=${this.searchFields} @submit=${() => this.dataGrist.fetch()}></search-form>
 
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.select.bind(this)}">${i18next.t('button.select')}</mwc-button>
+        <button @click="${this.select.bind(this)}"><md-icon>select_check_box</md-icon>${i18next.t('button.select')}</button>
       </div>
     `
   }

package/client/pages/inbound/carton-label-popup.js

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { DirectPrinter } from '@things-factory/barcode-base'
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
@@ -6,6 +8,8 @@ import { client, store } from '@things-factory/shell'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
+import { ButtonContainerStyles } from '@operato/styles'
+
 import { CARTON_LABEL_SETTING_KEY } from '../constants'
 
 class CartonLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
@@ -18,6 +22,7 @@ class CartonLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
 
   static get styles() {
     return [
+      ButtonContainerStyles,
       SingleColumnFormStyles,
       css`
         :host {
@@ -27,17 +32,6 @@ class CartonLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           overflow-x: overlay;
           background-color: var(--main-section-background-color);
         }
-        .button-container {
-          display: flex;
-          flex-direction: column;
-          height: 100vh;
-          height: 100dvh;
-          justify-content: space-evenly;
-          padding: 0 20px;
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-        }
       `
     ]
   }
@@ -50,8 +44,9 @@ class CartonLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           <input name="printQty" type="number" min="1" />
         </fieldset>
       </form>
+
       <div class="button-container">
-        <mwc-button raised @click="${this._printLabel.bind(this)}" label="${i18next.t('button.print')}"></mwc-button>
+        <button @click=${this._printLabel.bind(this)}><md-icon>print</md-icon>${i18next.t('button.print')}</button>
       </div>
     `
   }

package/client/pages/inbound/pallet-label-popup.js

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -8,6 +9,7 @@ import { DirectPrinter } from '@things-factory/barcode-base'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { client, store } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 import { PALLET_LABEL_SETTING_KEY } from '../constants'
 
@@ -23,6 +25,7 @@ class PalletLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
 
   static get styles() {
     return [
+      ButtonContainerStyles,
       css`
         :host {
           padding: 10px;
@@ -31,6 +34,7 @@ class PalletLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           overflow-x: overlay;
           background-color: var(--main-section-background-color);
         }
+
         .grist {
           background-color: var(--main-section-background-color);
           display: flex;
@@ -38,17 +42,11 @@ class PalletLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           flex: 1;
           overflow-y: auto;
         }
+
         ox-grist {
           overflow-y: hidden;
           flex: 1;
         }
-        .button-container {
-          padding: var(--button-container-padding);
-          margin: var(--button-container-margin);
-          text-align: var(--button-container-align);
-          background-color: var(--button-container-background);
-          height: var(--button-container-height);
-        }
       `
     ]
   }
@@ -97,16 +95,11 @@ class PalletLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
   render() {
     return html`
       <div class="grist">
-        <ox-grist
-          id="grist"
-          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-          .config=${this.config}
-          .data="${this.data}"
-        ></ox-grist>
+        <ox-grist id="grist" .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data="${this.data}"></ox-grist>
       </div>
 
       <div class="button-container">
-        <mwc-button raised @click="${this._printLabel.bind(this)}" label="${i18next.t('button.print')}"></mwc-button>
+        <button @click=${this._printLabel.bind(this)}><md-icon>print</md-icon>${i18next.t('button.print')}</button>
       </div>
     `
   }

package/client/pages/order/reverse-kitting-order/reverse-kitting-pallet-label-popup.js

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -8,6 +9,7 @@ import { DirectPrinter } from '@things-factory/barcode-base'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { client, store } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 import { PALLET_LABEL_SETTING_KEY } from '../../constants'
 
@@ -23,6 +25,7 @@ class ReverseKittingPalletLabelPopup extends connect(store)(localize(i18next)(Li
 
   static get styles() {
     return [
+      ButtonContainerStyles,
       css`
         :host {
           padding: 10px;
@@ -97,16 +100,11 @@ class ReverseKittingPalletLabelPopup extends connect(store)(localize(i18next)(Li
   render() {
     return html`
       <div class="grist">
-        <ox-grist
-          id="grist"
-          .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-          .config=${this.config}
-          .data="${this.data}"
-        ></ox-grist>
+        <ox-grist id="grist" .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data="${this.data}"></ox-grist>
       </div>
 
       <div class="button-container">
-        <mwc-button raised @click="${this._printLabel.bind(this)}" label="${i18next.t('button.print')}"></mwc-button>
+        <button @click=${this._printLabel.bind(this)}><md-icon>print</md-icon>${i18next.t('button.print')}</button>
       </div>
     `
   }

package/client/themes/app-theme.css

@@ -83,17 +83,30 @@ body {
   --mdc-danger-button-outline-color: var(--status-danger-color);
   --mdc-button-outline-width: 1px;
   --mdc-button-horizontal-padding: 16px;
+
+  --md-fab-container-color: var(--primary-color);
+  --md-fab-icon-color: var(--focus-color);
   --mdc-text-field-fill-color: transparent
 
+  --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-background-color: var(--status-success-color);

package/client/themes/grist-theme.css

@@ -143,7 +143,7 @@ body {
   --record-view-footer-button-border-width: 0 0 0 1px;
   --record-view-footer-button-font: 17px;
   --record-view-footer-button-color: var(--theme-white-color);
-  --record-view-footer-iconbutton-size: 35px;
+  --record-view-footer-iconbutton-size: 28px;
   --record-view-footer-focus-background: var(--primary-color);
 
   --ox-grist-padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);