@things-factory/operato-fleet 7.0.1-alpha.4 → 7.0.1-alpha.40

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

@@ -69,7 +69,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')
@@ -92,7 +92,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/report/report.js

@@ -1,4 +1,5 @@
 import '@operato/board/ox-board-viewer.js'
+import '@operato/oops'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -44,7 +45,7 @@ export class FMSReport extends connect(store)(localize(i18next)(PageView)) {
           flex: 1;
         }
 
-        oops-spinner {
+        ox-oops-spinner {
           display: none;
           position: absolute;
           left: 50%;
@@ -52,11 +53,11 @@ export class FMSReport extends connect(store)(localize(i18next)(PageView)) {
           transform: translate(-50%, -50%);
         }
 
-        oops-spinner[show] {
+        ox-oops-spinner[show] {
           display: block;
         }
 
-        oops-note {
+        ox-oops-note {
           display: block;
           position: absolute;
           left: 50%;
@@ -87,17 +88,12 @@ export class FMSReport extends connect(store)(localize(i18next)(PageView)) {
     return oops
       ? html`
           <div main>
-            <oops-note
-              icon=${oops.icon}
-              title=${oops.title}
-              description=${oops.description}
-              @click=${oops.click || NOOP}
-            ></oops-note>
+            <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description} @click=${oops.click || NOOP}></ox-oops-note>
           </div>
         `
       : html`
           <ox-board-viewer main .board=${this._board} .provider=${provider}></ox-board-viewer>
-          <oops-spinner ?show=${this._showSpinner}></oops-spinner>
+          <ox-oops-spinner ?show=${this._showSpinner}></ox-oops-spinner>
         `
   }
 

package/client/themes/app-theme.css

@@ -82,17 +82,33 @@ 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-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);
@@ -123,7 +139,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

@@ -36,6 +36,8 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
+  --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
+
   --grid-gutter-padding: var(--padding-default) 0;
 
   --grid-record-background-color: var(--theme-white-color);
@@ -143,7 +145,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);