@things-factory/reference-app 7.0.0-alpha.9 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/_index.html +7 -31
  2. package/client/bootstrap.js +38 -51
  3. package/client/components/camera-capturer.js +10 -8
  4. package/client/components/ocr-viewpart.js +1 -1
  5. package/client/editors/id-editor.js +3 -3
  6. package/client/editors/id-selector.js +9 -12
  7. package/client/pages/context-menu-page.js +13 -13
  8. package/client/pages/context-page.js +1 -1
  9. package/client/pages/data-entry/data-entry-generator-popup.js +3 -3
  10. package/client/pages/data-entry/data-entry-mockup-form.js +3 -3
  11. package/client/pages/data-set/data-item-list.js +3 -3
  12. package/client/pages/data-set/data-set-importer.js +4 -12
  13. package/client/pages/data-set/data-set-list-page.js +14 -25
  14. package/client/pages/direct-print.js +1 -1
  15. package/client/pages/ghost-print-page.js +1 -1
  16. package/client/pages/grist-colorizing.js +4 -3
  17. package/client/pages/grist-filters.ts +5 -6
  18. package/client/pages/grist-fulltext-search.ts +5 -6
  19. package/client/pages/grist-mode-page.js +24 -23
  20. package/client/pages/grist-page.js +3 -3
  21. package/client/pages/label-scan-page.js +1 -1
  22. package/client/pages/layout-group-page.js +1 -1
  23. package/client/pages/main.js +1 -1
  24. package/client/pages/menu-page.js +2 -2
  25. package/client/pages/operation/operation-master.js +11 -8
  26. package/client/pages/pending-job-page.js +10 -9
  27. package/client/pages/product/product-master.js +8 -7
  28. package/client/pages/product-combinations-popup.js +2 -2
  29. package/client/pages/product-details-popup.js +1 -1
  30. package/client/pages/reference-page-styles.js +7 -7
  31. package/client/pages/report-page.js +2 -2
  32. package/client/pages/web-editor-editorjs-page.js +1 -1
  33. package/client/pages/web-editor-jodit-page.js +1 -1
  34. package/client/pages/web-editor-lexical-page.js +1 -1
  35. package/client/pages/web-editor-tinymce-page.js +1 -1
  36. package/client/pages/web-editor-tui-page.js +1 -1
  37. package/client/renderers/barcode-renderer.js +1 -1
  38. package/config/config.development.js +0 -3
  39. package/dist-server/constants/index.d.ts +1 -0
  40. package/dist-server/constants/type-constants.d.ts +22 -0
  41. package/dist-server/controllers/create-data-sample-mockup.d.ts +2 -0
  42. package/dist-server/controllers/create-data-sample-mockup.js +1 -2
  43. package/dist-server/controllers/create-data-sample-mockup.js.map +1 -1
  44. package/dist-server/controllers/index.d.ts +1 -0
  45. package/dist-server/index.d.ts +4 -0
  46. package/dist-server/middlewares/index.d.ts +1 -0
  47. package/dist-server/middlewares/index.js +1 -2
  48. package/dist-server/middlewares/index.js.map +1 -1
  49. package/dist-server/migrations/index.d.ts +1 -0
  50. package/dist-server/routes.d.ts +0 -0
  51. package/dist-server/service/data-sample-mockup/data-sample-mockup-mutation.d.ts +4 -0
  52. package/dist-server/service/data-sample-mockup/data-sample-mockup-mutation.js +2 -2
  53. package/dist-server/service/data-sample-mockup/data-sample-mockup-mutation.js.map +1 -1
  54. package/dist-server/service/data-sample-mockup/data-sample-mockup-type.d.ts +4 -0
  55. package/dist-server/service/data-sample-mockup/data-sample-mockup-type.js +2 -2
  56. package/dist-server/service/data-sample-mockup/data-sample-mockup-type.js.map +1 -1
  57. package/dist-server/service/data-sample-mockup/index.d.ts +3 -0
  58. package/dist-server/service/index.d.ts +4 -0
  59. package/dist-server/service/reference/index.d.ts +4 -0
  60. package/dist-server/service/reference/lambda-call.d.ts +1 -0
  61. package/dist-server/service/reference/lambda-call.js +1 -2
  62. package/dist-server/service/reference/lambda-call.js.map +1 -1
  63. package/dist-server/service/reference/reference-mutation.d.ts +5 -0
  64. package/dist-server/service/reference/reference-mutation.js +2 -2
  65. package/dist-server/service/reference/reference-mutation.js.map +1 -1
  66. package/dist-server/service/reference/reference-query.d.ts +7 -0
  67. package/dist-server/service/reference/reference-query.js +2 -2
  68. package/dist-server/service/reference/reference-query.js.map +1 -1
  69. package/dist-server/tsconfig.tsbuildinfo +1 -1
  70. package/package.json +63 -61
  71. package/schema.graphql +86 -24
  72. package/views/auth-page.html +5 -2
  73. package/views/public/home.html +6 -3
  74. package/client/themes/app-theme.css +0 -145
  75. package/client/themes/grist-theme.css +0 -217
  76. package/client/themes/layout-theme.css +0 -92
  77. package/client/themes/report-theme.css +0 -47
package/_index.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8" />
@@ -52,6 +52,9 @@
52
52
  <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
53
53
  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
54
54
  <link href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
55
+ <link href="/node_modules/material-symbols/index.css" rel="stylesheet" />
56
+ <link href="/node_modules/@fontsource/roboto/index.css" rel="stylesheet" />
57
+ <link rel="stylesheet" href="/theme.css" />
55
58
 
56
59
  <!-- Add any global styles for body, document, etc. -->
57
60
  <style>
@@ -67,7 +70,8 @@
67
70
  line-height: 1.5;
68
71
  -webkit-font-smoothing: antialiased;
69
72
 
70
- accent-color: var(--primary-color);
73
+ accent-color: var(--md-sys-color-primary);
74
+ background-color: var(--md-sys-color-background);
71
75
  }
72
76
  </style>
73
77
 
@@ -78,37 +82,9 @@
78
82
  })
79
83
  }
80
84
  </script>
81
- <script type="text/javascript">
82
- !(function (a, b, c, d, e, f, g, h) {
83
- ;(a.RaygunObject = e),
84
- (a[e] =
85
- a[e] ||
86
- function () {
87
- ;(a[e].o = a[e].o || []).push(arguments)
88
- }),
89
- (f = b.createElement(c)),
90
- (g = b.getElementsByTagName(c)[0]),
91
- (f.async = 1),
92
- (f.src = d),
93
- g.parentNode.insertBefore(f, g),
94
- (h = a.onerror),
95
- (a.onerror = function (b, c, d, f, g) {
96
- h && h(b, c, d, f, g),
97
- g || (g = new Error(b)),
98
- (a[e].q = a[e].q || []),
99
- a[e].q.push({
100
- e: g
101
- })
102
- })
103
- })(window, document, 'script', '//cdn.raygun.io/raygun4js/raygun.min.js', 'rg4js')
104
- </script>
105
- <script type="text/javascript">
106
- rg4js('apiKey', 'VvPzjH0zKdOM0hynpycw')
107
- rg4js('enableCrashReporting', true)
108
- </script>
109
85
  </head>
110
86
 
111
- <body>
87
+ <body class="light">
112
88
  <things-app></things-app>
113
89
  <noscript> Please enable JavaScript to view this website. </noscript>
114
90
  <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
package/client/bootstrap.js CHANGED
@@ -1,32 +1,32 @@
1
- import '@things-factory/auth-ui' /* for domain-switch */
2
- import '@things-factory/barcode-base' /* for <default-label-printer-setting-let> */
3
- import '@things-factory/notification' /* for notification-badge */
4
- import '@things-factory/board-ui'
1
+ import '@things-factory/auth-ui/dist-client' /* for domain-switch */
2
+ import '@things-factory/barcode-base/client' /* for <default-label-printer-setting-let> */
3
+ import '@things-factory/notification/dist-client' /* for notification-badge */
4
+ import '@things-factory/setting-ui/dist-client' /* secure-iplist-setting-let, theme-mode-setting-let */
5
+ import '@things-factory/board-ui/dist-client'
5
6
  import './components/ocr-viewpart'
6
7
  import '@operato/dataset/usecase/ccp'
7
8
  import '@operato/dataset/usecase/qc'
8
9
  import '@operato/dataset/ox-property-editor-ccp-limits.js'
9
10
  import '@operato/dataset/ox-property-editor-qc-limits.js'
10
11
  import '@operato/i18n/ox-i18n.js'
11
- import '@things-factory/setting-ui' /* secure-iplist-setting-let */
12
12
 
13
13
  import { html } from 'lit-html'
14
14
 
15
+ import { navigate, store } from '@operato/shell'
15
16
  import { OxGristEditorResourceId } from '@operato/app/grist-editor/ox-grist-editor-resource-id.js'
16
17
  import { registerDefaultGroups } from '@operato/board/register-default-groups.js'
17
18
  import { getEditor, registerEditor, registerRenderer } from '@operato/data-grist'
18
19
  import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
19
20
  import { OxPropertyEditor } from '@operato/property-editor'
20
21
  import { isMobileDevice } from '@operato/utils'
21
- import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
22
- import { setupAppToolPart } from '@things-factory/apptool-ui'
22
+ import { APPEND_APP_TOOL } from '@things-factory/apptool-base/client'
23
+ import { setupAppToolPart } from '@things-factory/apptool-ui/dist-client'
23
24
  import { auth, hasPrivilege } from '@things-factory/auth-base/dist-client'
24
- import { setAuthManagementMenus } from '@things-factory/auth-ui'
25
- import { setupMenuPart, updateMenuTemplate } from '@things-factory/lite-menu'
26
- import { setupContextUIPart } from '@things-factory/context-ui'
27
- import { ADD_MORENDA } from '@things-factory/more-base'
28
- import { ADD_SETTING } from '@things-factory/setting-base'
29
- import { navigate, store } from '@things-factory/shell'
25
+ import { setAuthManagementMenus } from '@things-factory/auth-ui/dist-client'
26
+ import { setupMenuPart, updateMenuTemplate } from '@things-factory/lite-menu/dist-client'
27
+ import { setupContextUIPart } from '@things-factory/context-ui/dist-client'
28
+ import { ADD_MORENDA } from '@things-factory/more-base/client'
29
+ import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
30
30
 
31
31
  import { getMenuTemplate } from './menu'
32
32
  import { BarcodeRenderer } from './renderers/barcode-renderer'
@@ -73,36 +73,15 @@ export default async function bootstrap() {
73
73
  await setupMenuPart({
74
74
  hovering: isMobileDevice(),
75
75
  position: VIEWPART_POSITION.NAVBAR,
76
- portraitSlotTemplate: html` <domain-switch slot="tail"></domain-switch> `
76
+ portraitSlotTemplate: html` <domain-switch attrname="description" slot="tail"></domain-switch> `
77
77
  })
78
78
  updateMenuTemplate(getMenuTemplate())
79
79
 
80
- /* add top-menu app-tool */
81
- // store.dispatch({
82
- // type: APPEND_APP_TOOL,
83
- // replace: 'title-bar',
84
- // tool: {
85
- // name: 'top-menu-bar',
86
- // template: html` <top-menu-bar></top-menu-bar> `,
87
- // position: TOOL_POSITION.CENTER
88
- // }
89
- // })
90
-
91
- /* add top-menu app-tool */
92
- // store.dispatch({
93
- // type: APPEND_APP_TOOL,
94
- // tool: {
95
- // name: 'domain-switch',
96
- // template: html` <domain-switch rounded-corner dark></domain-switch> `,
97
- // position: TOOL_POSITION.REAR
98
- // }
99
- // })
100
-
101
80
  /* add setting morenda */
102
81
  store.dispatch({
103
82
  type: ADD_MORENDA,
104
83
  morenda: {
105
- icon: html` <mwc-icon>settings</mwc-icon> `,
84
+ icon: html` <md-icon>settings</md-icon> `,
106
85
  name: html` <ox-i18n msgid="label.setting"></ox-i18n> `,
107
86
  action: () => {
108
87
  navigate('setting')
@@ -117,7 +96,7 @@ export default async function bootstrap() {
117
96
  store.dispatch({
118
97
  type: ADD_MORENDA,
119
98
  morenda: {
120
- icon: html` <mwc-icon>view_list</mwc-icon> `,
99
+ icon: html` <md-icon>view_list</md-icon> `,
121
100
  name: html` <ox-i18n msgid="text.addon-menu management"></ox-i18n> `,
122
101
  action: () => {
123
102
  navigate('addon-menu-setting')
@@ -133,7 +112,7 @@ export default async function bootstrap() {
133
112
  store.dispatch({
134
113
  type: ADD_MORENDA,
135
114
  morenda: {
136
- icon: html` <mwc-icon>vpn_key</mwc-icon> `,
115
+ icon: html` <md-icon>vpn_key</md-icon> `,
137
116
  name: html` <ox-i18n msgid="text.oauth2-clients"></ox-i18n> `,
138
117
  action: () => {
139
118
  navigate('oauth2-clients')
@@ -146,7 +125,7 @@ export default async function bootstrap() {
146
125
  store.dispatch({
147
126
  type: ADD_MORENDA,
148
127
  morenda: {
149
- icon: html` <mwc-icon>font_download</mwc-icon> `,
128
+ icon: html` <md-icon>font_download</md-icon> `,
150
129
  name: html` <ox-i18n msgid="menu.fonts"></ox-i18n> `,
151
130
  action: () => {
152
131
  navigate('font-list')
@@ -157,7 +136,7 @@ export default async function bootstrap() {
157
136
  store.dispatch({
158
137
  type: ADD_MORENDA,
159
138
  morenda: {
160
- icon: html` <mwc-icon>attachment</mwc-icon> `,
139
+ icon: html` <md-icon>attachment</md-icon> `,
161
140
  name: html` <ox-i18n msgid="menu.attachments"></ox-i18n> `,
162
141
  action: () => {
163
142
  navigate('attachment-list')
@@ -168,7 +147,7 @@ export default async function bootstrap() {
168
147
  store.dispatch({
169
148
  type: ADD_MORENDA,
170
149
  morenda: {
171
- icon: html` <mwc-icon>dvr</mwc-icon> `,
150
+ icon: html` <md-icon>dvr</md-icon> `,
172
151
  name: html` <ox-i18n msgid="menu.board-list"></ox-i18n> `,
173
152
  action: () => {
174
153
  navigate('board-list')
@@ -179,7 +158,7 @@ export default async function bootstrap() {
179
158
  store.dispatch({
180
159
  type: ADD_MORENDA,
181
160
  morenda: {
182
- icon: html` <mwc-icon>airplay</mwc-icon> `,
161
+ icon: html` <md-icon>airplay</md-icon> `,
183
162
  name: html` <ox-i18n msgid="menu.play-groups"></ox-i18n> `,
184
163
  action: () => {
185
164
  navigate('play-list')
@@ -192,7 +171,7 @@ export default async function bootstrap() {
192
171
  store.dispatch({
193
172
  type: ADD_MORENDA,
194
173
  morenda: {
195
- icon: html` <mwc-icon>device_hub</mwc-icon> `,
174
+ icon: html` <md-icon>device_hub</md-icon> `,
196
175
  name: html` <ox-i18n msgid="text.connection"></ox-i18n> `,
197
176
  action: () => {
198
177
  navigate('connection')
@@ -203,7 +182,7 @@ export default async function bootstrap() {
203
182
  store.dispatch({
204
183
  type: ADD_MORENDA,
205
184
  morenda: {
206
- icon: html` <mwc-icon>format_list_numbered</mwc-icon> `,
185
+ icon: html` <md-icon>format_list_numbered</md-icon> `,
207
186
  name: html` <ox-i18n msgid="text.scenario"></ox-i18n> `,
208
187
  action: () => {
209
188
  navigate('scenario')
@@ -214,7 +193,7 @@ export default async function bootstrap() {
214
193
  store.dispatch({
215
194
  type: ADD_MORENDA,
216
195
  morenda: {
217
- icon: html` <mwc-icon>hub</mwc-icon> `,
196
+ icon: html` <md-icon>hub</md-icon> `,
218
197
  name: html` <ox-i18n msgid="text.integration analysis"></ox-i18n>&nbsp;(beta)`,
219
198
  action: () => {
220
199
  navigate('integration-analysis')
@@ -227,7 +206,7 @@ export default async function bootstrap() {
227
206
  store.dispatch({
228
207
  type: ADD_MORENDA,
229
208
  morenda: {
230
- icon: html` <mwc-icon>app_registration</mwc-icon> `,
209
+ icon: html` <md-icon>app_registration</md-icon> `,
231
210
  name: html` <ox-i18n msgid="title.state-register"></ox-i18n> `,
232
211
  action: () => {
233
212
  navigate('state-register-page')
@@ -241,7 +220,7 @@ export default async function bootstrap() {
241
220
  store.dispatch({
242
221
  type: ADD_MORENDA,
243
222
  morenda: {
244
- icon: html` <mwc-icon>pending_actions</mwc-icon> `,
223
+ icon: html` <md-icon>pending_actions</md-icon> `,
245
224
  name: html` <ox-i18n msgid="title.work-shift"></ox-i18n> `,
246
225
  action: () => {
247
226
  navigate('work-shift')
@@ -253,7 +232,7 @@ export default async function bootstrap() {
253
232
  store.dispatch({
254
233
  type: ADD_MORENDA,
255
234
  morenda: {
256
- icon: html` <mwc-icon>extension</mwc-icon> `,
235
+ icon: html` <md-icon>extension</md-icon> `,
257
236
  name: html` <ox-i18n msgid="text.api-sandbox"></ox-i18n> `,
258
237
  action: () => {
259
238
  navigate('api-swagger')
@@ -264,7 +243,7 @@ export default async function bootstrap() {
264
243
  // store.dispatch({
265
244
  // type: ADD_MORENDA,
266
245
  // morenda: {
267
- // icon: html` <mwc-icon>help</mwc-icon> `,
246
+ // icon: html` <md-icon>help</md-icon> `,
268
247
  // name: html` <ox-i18n msgid="text.help"></ox-i18n> `,
269
248
  // action: () => {
270
249
  // navigate('help')
@@ -272,6 +251,14 @@ export default async function bootstrap() {
272
251
  // }
273
252
  // })
274
253
 
254
+ store.dispatch({
255
+ type: ADD_SETTING,
256
+ setting: {
257
+ seq: 10,
258
+ template: html` <theme-mode-setting-let></theme-mode-setting-let> `
259
+ }
260
+ })
261
+
275
262
  store.dispatch({
276
263
  type: ADD_SETTING,
277
264
  setting: {
@@ -295,14 +282,14 @@ export default async function bootstrap() {
295
282
  tool: {
296
283
  name: 'ocr-toggler',
297
284
  template: html`
298
- <mwc-icon
285
+ <md-icon
299
286
  @click=${e => {
300
287
  toggleOverlay('ocr-viewpart', {
301
288
  backdrop: false
302
289
  })
303
290
  }}
304
291
  >camera_enhance
305
- </mwc-icon>
292
+ </md-icon>
306
293
  `,
307
294
  position: TOOL_POSITION.REAR
308
295
  }
package/client/components/camera-capturer.js CHANGED
@@ -1,3 +1,5 @@
1
+ import '@material/web/icon/icon.js'
2
+
1
3
  import { css, html, LitElement } from 'lit'
2
4
 
3
5
  import { FileDropHelper } from '@things-factory/utils'
@@ -15,11 +17,11 @@ export class CameraCapturer extends LitElement {
15
17
  text-transform: capitalize;
16
18
 
17
19
  border: var(--file-uploader-border);
18
- background-color: var(--main-section-background-color);
20
+ background-color: var(--md-sys-color-background);
19
21
  font: var(--file-uploader-font) !important;
20
22
  color: var(--file-uploader-color);
21
23
  }
22
- :host > mwc-icon {
24
+ :host > md-icon {
23
25
  color: var(--file-uploader-icon-color);
24
26
  }
25
27
 
@@ -55,14 +57,14 @@ export class CameraCapturer extends LitElement {
55
57
  padding: var(--file-uploader-li-padding);
56
58
  border-bottom: var(--file-uploader-li-border-bottom);
57
59
  }
58
- li mwc-icon {
60
+ li md-icon {
59
61
  float: right;
60
62
  cursor: pointer;
61
63
  font: var(--file-uploader-li-icon-font);
62
64
  margin: var(--file-uploader-li-icon-margin);
63
65
  }
64
- li mwc-icon:hover,
65
- li mwc-icon:active {
66
+ li md-icon:hover,
67
+ li md-icon:active {
66
68
  color: var(--file-uploader-li-icon-focus-color);
67
69
  }
68
70
  `
@@ -82,7 +84,7 @@ export class CameraCapturer extends LitElement {
82
84
  var files = this._files || []
83
85
 
84
86
  return html`
85
- <mwc-icon>camera</mwc-icon>
87
+ <md-icon>camera</md-icon>
86
88
  <span>Capture image<br />or drop files here!</span>
87
89
  <input
88
90
  id="input-file"
@@ -117,7 +119,7 @@ export class CameraCapturer extends LitElement {
117
119
  file => html`
118
120
  <li>
119
121
  - ${file.name}
120
- <mwc-icon
122
+ <md-icon
121
123
  @click=${e => {
122
124
  this._files = [...this._files.splice(this._files.indexOf(file), 1)]
123
125
  this.dispatchEvent(
@@ -130,7 +132,7 @@ export class CameraCapturer extends LitElement {
130
132
  })
131
133
  )
132
134
  }}
133
- >delete_outline</mwc-icon
135
+ >delete_outline</md-icon
134
136
  >
135
137
  </li>
136
138
  `
package/client/components/ocr-viewpart.js CHANGED
@@ -5,7 +5,7 @@ import '@operato/ocr/ox-ocr-helper.js'
5
5
  import gql from 'graphql-tag'
6
6
  import { css, html, LitElement } from 'lit'
7
7
 
8
- import { client } from '@things-factory/shell'
8
+ import { client } from '@operato/graphql'
9
9
 
10
10
  var FILES = []
11
11
  var RESULT = []
package/client/editors/id-editor.js CHANGED
@@ -1,4 +1,4 @@
1
- import '@material/mwc-icon'
1
+ import '@material/web/icon/icon.js'
2
2
  import './id-selector'
3
3
 
4
4
  import { css, html, LitElement } from 'lit'
@@ -44,7 +44,7 @@ export class IdEditor extends LitElement {
44
44
  justify-content: inherit;
45
45
  }
46
46
 
47
- mwc-icon {
47
+ md-icon {
48
48
  width: 20px;
49
49
  font-size: 1.5em;
50
50
  margin-left: auto;
@@ -58,7 +58,7 @@ export class IdEditor extends LitElement {
58
58
 
59
59
  return html`
60
60
  ${!value ? html`` : html` <span>${value[nameField]} (${value[descriptionField]})</span> `}
61
- <mwc-icon>arrow_drop_down</mwc-icon>
61
+ <md-icon>arrow_drop_down</md-icon>
62
62
  `
63
63
  }
64
64
 
package/client/editors/id-selector.js CHANGED
@@ -2,9 +2,10 @@ import '@operato/data-grist'
2
2
 
3
3
  import { css, html, LitElement } from 'lit'
4
4
 
5
- import { MultiColumnFormStyles } from '@things-factory/form-ui'
6
- import { i18next } from '@things-factory/i18n-base'
7
- import { isMobileDevice } from '@things-factory/utils'
5
+ import { MultiColumnFormStyles } from '@operato/form'
6
+ import { i18next } from '@operato/i18n'
7
+ import { isMobileDevice } from '@operato/utils'
8
+ import { ButtonContainerStyles } from '@operato/styles'
8
9
 
9
10
  export class IdSelector extends LitElement {
10
11
  static get properties() {
@@ -21,13 +22,14 @@ export class IdSelector extends LitElement {
21
22
 
22
23
  static get styles() {
23
24
  return [
25
+ ButtonContainerStyles,
24
26
  MultiColumnFormStyles,
25
27
  css`
26
28
  :host {
27
29
  display: flex;
28
30
  flex-direction: column;
29
31
 
30
- background-color: #fff;
32
+ background-color: var(--md-sys-color-surface);
31
33
 
32
34
  width: var(--overlay-center-normal-width, 50%);
33
35
  height: var(--overlay-center-normal-height, 50%);
@@ -44,12 +46,7 @@ export class IdSelector extends LitElement {
44
46
  }
45
47
 
46
48
  #filters > * {
47
- padding: var(--padding-default) var(--padding-wide);
48
- }
49
-
50
- .button-container {
51
- display: flex;
52
- margin-left: auto;
49
+ padding: var(--spacing-medium) var(--spacing-large);
53
50
  }
54
51
  `
55
52
  ]
@@ -75,8 +72,8 @@ export class IdSelector extends LitElement {
75
72
  </ox-grist>
76
73
 
77
74
  <div class="button-container">
78
- <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
79
- <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
75
+ <button @click=${this.oncancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
76
+ <button @click=${this.onconfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
80
77
  </div>
81
78
  `
82
79
  }
package/client/pages/context-menu-page.js CHANGED
@@ -1,11 +1,11 @@
1
- import '@material/mwc-icon'
1
+ import '@material/web/icon/icon.js'
2
2
  import '@operato/popup/ox-popup-menu.js'
3
3
 
4
4
  import { css, html } from 'lit'
5
5
  import { connect } from 'pwa-helpers/connect-mixin.js'
6
6
 
7
7
  import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
8
- import { PageView, store } from '@things-factory/shell'
8
+ import { PageView, store } from '@operato/shell'
9
9
 
10
10
  import { ReferencePageStyles } from './reference-page-styles'
11
11
 
@@ -55,11 +55,11 @@ class ContextMenuPage extends connect(store)(PageView) {
55
55
  console.log('first level article selected')
56
56
  }}
57
57
  >
58
- <mwc-icon slot="icon">article</mwc-icon>
58
+ <md-icon slot="icon">article</md-icon>
59
59
  </ox-popup-menuitem>
60
60
 
61
61
  <ox-popup-menuitem label="home">
62
- <mwc-icon slot="icon">home</mwc-icon>
62
+ <md-icon slot="icon">home</md-icon>
63
63
  </ox-popup-menuitem>
64
64
 
65
65
  <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -67,16 +67,16 @@ class ContextMenuPage extends connect(store)(PageView) {
67
67
  <ox-popup-menuitem
68
68
  label="click me to toggle"
69
69
  @selected=${function (e) {
70
- const icon = this.querySelector('mwc-icon')
70
+ const icon = this.querySelector('md-icon')
71
71
  icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
72
72
  }}
73
73
  alive-on-select
74
74
  >
75
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
75
+ <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
76
76
  </ox-popup-menuitem>
77
77
 
78
78
  <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
79
- <mwc-icon slot="icon">verified</mwc-icon>
79
+ <md-icon slot="icon">verified</md-icon>
80
80
  <ox-popup-menu>
81
81
  <ox-popup-menuitem
82
82
  label="article"
@@ -85,26 +85,26 @@ class ContextMenuPage extends connect(store)(PageView) {
85
85
  }}
86
86
  alive-on-select
87
87
  >
88
- <mwc-icon slot="icon">article</mwc-icon>
88
+ <md-icon slot="icon">article</md-icon>
89
89
  </ox-popup-menuitem>
90
90
 
91
91
  <ox-popup-menuitem label="home">
92
- <mwc-icon slot="icon">home</mwc-icon>
92
+ <md-icon slot="icon">home</md-icon>
93
93
  </ox-popup-menuitem>
94
94
 
95
95
  <ox-popup-menuitem label="verified">
96
- <mwc-icon slot="icon">verified</mwc-icon>
96
+ <md-icon slot="icon">verified</md-icon>
97
97
  <ox-popup-menu>
98
98
  <ox-popup-menuitem label="article">
99
- <mwc-icon slot="icon">article</mwc-icon>
99
+ <md-icon slot="icon">article</md-icon>
100
100
  </ox-popup-menuitem>
101
101
 
102
102
  <ox-popup-menuitem label="home">
103
- <mwc-icon slot="icon">home</mwc-icon>
103
+ <md-icon slot="icon">home</md-icon>
104
104
  </ox-popup-menuitem>
105
105
 
106
106
  <ox-popup-menuitem label="verified">
107
- <mwc-icon slot="icon">verified</mwc-icon>
107
+ <md-icon slot="icon">verified</md-icon>
108
108
  </ox-popup-menuitem>
109
109
 
110
110
  <ox-popup-menuitem label="checkbox">
package/client/pages/context-page.js CHANGED
@@ -6,7 +6,7 @@ import { css, html } from 'lit'
6
6
  import { connect } from 'pwa-helpers/connect-mixin.js'
7
7
 
8
8
  import { openImportPopUp } from '@things-factory/import-ui'
9
- import { PageView, store } from '@things-factory/shell'
9
+ import { PageView, store } from '@operato/shell'
10
10
  import { CommonButtonStyles } from '@things-factory/styles'
11
11
  import { sleep } from '@things-factory/utils'
12
12
 
package/client/pages/data-entry/data-entry-generator-popup.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SingleColumnFormStyles } from '@things-factory/form-ui'
2
- import { i18next, localize } from '@things-factory/i18n-base'
3
- import { client } from '@things-factory/shell'
2
+ import { i18next, localize } from '@operato/i18n'
3
+ import { client } from '@operato/graphql'
4
4
  import gql from 'graphql-tag'
5
5
  import { css, html, LitElement } from 'lit'
6
6
 
@@ -21,7 +21,7 @@ class DataEntryGeneratorPopup extends localize(i18next)(LitElement) {
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
  overflow-x: overlay;
24
- background-color: var(--main-section-background-color);
24
+ background-color: var(--md-sys-color-background);
25
25
  }
26
26
  .button-container {
27
27
  padding: var(--button-container-padding);
package/client/pages/data-entry/data-entry-mockup-form.js CHANGED
@@ -24,7 +24,7 @@ class DataEntryMockupForm extends localize(i18next)(LitElement) {
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
 
27
- background-color: #fff;
27
+ background-color: var(--md-sys-color-surface);
28
28
  }
29
29
 
30
30
  ox-data-entry-form {
@@ -36,11 +36,11 @@ class DataEntryMockupForm extends localize(i18next)(LitElement) {
36
36
  .button-container {
37
37
  display: flex;
38
38
  margin-left: auto;
39
- padding: var(--padding-default);
39
+ padding: var(--spacing-medium);
40
40
  }
41
41
 
42
42
  mwc-button {
43
- margin-left: var(--margin-default);
43
+ margin-left: var(--spacing-medium);
44
44
  }
45
45
  `
46
46
  ]
package/client/pages/data-set/data-item-list.js CHANGED
@@ -20,7 +20,7 @@ class DataItemList extends localize(i18next)(LitElement) {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
 
23
- background-color: #fff;
23
+ background-color: var(--md-sys-color-surface);
24
24
  }
25
25
 
26
26
  ox-grist {
@@ -30,14 +30,14 @@ class DataItemList extends localize(i18next)(LitElement) {
30
30
  .button-container {
31
31
  display: flex;
32
32
  margin-left: auto;
33
- padding: var(--padding-default);
33
+ padding: var(--spacing-medium);
34
34
  }
35
35
 
36
36
  [danger] {
37
37
  --mdc-theme-primary: var(--mdc-danger-button-primary-color);
38
38
  }
39
39
  mwc-button {
40
- margin-left: var(--margin-default);
40
+ margin-left: var(--spacing-medium);
41
41
  }
42
42
  `
43
43
  ]
package/client/pages/data-set/data-set-importer.js CHANGED
@@ -1,3 +1,4 @@
1
+ import '@material/web/icon/icon.js'
1
2
  import '@operato/data-grist'
2
3
 
3
4
  import gql from 'graphql-tag'
@@ -6,6 +7,7 @@ import { css, html, LitElement } from 'lit'
6
7
  import { client } from '@operato/graphql'
7
8
  import { i18next } from '@operato/i18n'
8
9
  import { isMobileDevice } from '@operato/utils'
10
+ import { ButtonContainerStyles } from '@operato/styles'
9
11
 
10
12
  export class DataSetImporter extends LitElement {
11
13
  static get properties() {
@@ -50,22 +52,12 @@ export class DataSetImporter extends LitElement {
50
52
  display: flex;
51
53
  flex-direction: column;
52
54
 
53
- background-color: #fff;
55
+ background-color: var(--md-sys-color-surface);
54
56
  }
55
57
 
56
58
  ox-grist {
57
59
  flex: 1;
58
60
  }
59
-
60
- .button-container {
61
- display: flex;
62
- margin-left: auto;
63
- padding: var(--padding-default);
64
- }
65
-
66
- mwc-button {
67
- margin-left: var(--margin-default);
68
- }
69
61
  `
70
62
  ]
71
63
  }
@@ -79,7 +71,7 @@ export class DataSetImporter extends LitElement {
79
71
  ></ox-grist>
80
72
 
81
73
  <div class="button-container">
82
- <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
74
+ <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
83
75
  </div>
84
76
  `
85
77
  }