@things-factory/apptool-ui 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.
- package/client/index.ts +3 -3
- package/client/layout/app-busybar.ts +10 -6
- package/client/layout/app-toolbar.ts +5 -8
- package/client/layout/page-mdibar.ts +40 -37
- package/client/layout/page-toolbar.ts +0 -2
- package/client/mdibar-setting-let.ts +10 -6
- package/dist-client/index.js +1 -1
- package/dist-client/index.js.map +1 -1
- package/dist-client/layout/app-busybar.d.ts +1 -1
- package/dist-client/layout/app-busybar.js +10 -6
- package/dist-client/layout/app-busybar.js.map +1 -1
- package/dist-client/layout/app-toolbar.d.ts +1 -1
- package/dist-client/layout/app-toolbar.js +4 -7
- package/dist-client/layout/app-toolbar.js.map +1 -1
- package/dist-client/layout/page-mdibar.d.ts +45 -1
- package/dist-client/layout/page-mdibar.js +41 -37
- package/dist-client/layout/page-mdibar.js.map +1 -1
- package/dist-client/layout/page-toolbar.d.ts +1 -1
- package/dist-client/layout/page-toolbar.js +0 -1
- package/dist-client/layout/page-toolbar.js.map +1 -1
- package/dist-client/mdibar-setting-let.d.ts +1 -2
- package/dist-client/mdibar-setting-let.js +10 -6
- package/dist-client/mdibar-setting-let.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/index.d.ts +0 -0
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -7
- package/things-factory.config.js +1 -5
- package/client/bootstrap.ts +0 -1
- package/dist-client/bootstrap.d.ts +0 -1
- package/dist-client/bootstrap.js +0 -2
- package/dist-client/bootstrap.js.map +0 -1
package/client/index.ts
CHANGED
|
@@ -7,10 +7,10 @@ import './mdibar-setting-let'
|
|
|
7
7
|
import { html } from 'lit-html'
|
|
8
8
|
|
|
9
9
|
import { store, clientSettingStore } from '@operato/shell'
|
|
10
|
-
import { appendViewpart,
|
|
10
|
+
import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'
|
|
11
11
|
import { isMobileDevice } from '@operato/utils'
|
|
12
|
-
|
|
13
|
-
import { ADD_SETTING } from '@things-factory/setting-base'
|
|
12
|
+
|
|
13
|
+
import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
|
|
14
14
|
|
|
15
15
|
export async function setupAppToolPart({
|
|
16
16
|
toolbar = true,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/progress/linear-progress.js'
|
|
2
2
|
|
|
3
3
|
import { css, html, LitElement } from 'lit'
|
|
4
4
|
import { customElement, property, state } from 'lit/decorators.js'
|
|
@@ -11,12 +11,16 @@ class AppBusyBar extends connect(store)(LitElement) {
|
|
|
11
11
|
static styles = [
|
|
12
12
|
css`
|
|
13
13
|
:host {
|
|
14
|
-
display:
|
|
14
|
+
display: block;
|
|
15
|
+
position: relative;
|
|
16
|
+
|
|
17
|
+
--md-linear-progress-track-color: var(--md-sys-color-on-primary);
|
|
15
18
|
}
|
|
16
19
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
md-linear-progress {
|
|
21
|
+
position: absolute;
|
|
22
|
+
bottom: 0;
|
|
23
|
+
width: 100%;
|
|
20
24
|
overflow: hidden;
|
|
21
25
|
}
|
|
22
26
|
`
|
|
@@ -27,7 +31,7 @@ class AppBusyBar extends connect(store)(LitElement) {
|
|
|
27
31
|
@state() private timeout?: any
|
|
28
32
|
|
|
29
33
|
render() {
|
|
30
|
-
return this.busy ? html`<
|
|
34
|
+
return this.busy ? html`<md-linear-progress indeterminate></md-linear-progress>` : html``
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
stateChanged(state) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js'
|
|
2
2
|
|
|
3
3
|
import { css, html, LitElement, TemplateResult } from 'lit'
|
|
4
4
|
import { customElement, query, state } from 'lit/decorators.js'
|
|
@@ -19,14 +19,11 @@ class AppToolbar extends connect(store)(LitElement) {
|
|
|
19
19
|
justify-content: space-between;
|
|
20
20
|
align-items: center;
|
|
21
21
|
padding: 0 5px;
|
|
22
|
+
gap: 10px;
|
|
22
23
|
|
|
23
24
|
text-transform: capitalize;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
:host > * {
|
|
27
|
-
margin: var(--header-bar-item-padding);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
27
|
[center] {
|
|
31
28
|
flex: 1;
|
|
32
29
|
flex-wrap: nowrap;
|
|
@@ -81,10 +78,10 @@ class AppToolbar extends connect(store)(LitElement) {
|
|
|
81
78
|
|
|
82
79
|
return html`
|
|
83
80
|
${overlay
|
|
84
|
-
? html` <
|
|
81
|
+
? html` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
|
|
85
82
|
: frontEndTools.length == 0
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
? html` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
|
|
84
|
+
: frontEndTools.map(tool => html` ${tool.template} `)}
|
|
88
85
|
${frontTools.map(tool => html` ${tool.template} `)}
|
|
89
86
|
|
|
90
87
|
<div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js'
|
|
2
2
|
import '@operato/popup/ox-popup-menu.js'
|
|
3
3
|
|
|
4
4
|
import { css, html, nothing, LitElement } from 'lit'
|
|
5
5
|
import { customElement, query, state } from 'lit/decorators.js'
|
|
6
6
|
import { connect } from 'pwa-helpers/connect-mixin.js'
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { navigate, store, PageView } from '@operato/shell'
|
|
9
|
+
import { i18next, localize } from '@operato/i18n'
|
|
9
10
|
import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
|
|
10
|
-
import { i18next } from '@operato/i18n'
|
|
11
11
|
|
|
12
12
|
@customElement('page-mdibar')
|
|
13
|
-
class PageMDIBar extends connect(store)(LitElement) {
|
|
13
|
+
export class PageMDIBar extends connect(store)(localize(i18next)(LitElement)) {
|
|
14
14
|
static styles = [
|
|
15
15
|
css`
|
|
16
16
|
:host {
|
|
17
17
|
display: flex;
|
|
18
|
-
background-color: var(--
|
|
19
|
-
color: var(--
|
|
18
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
19
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
20
20
|
font-size: var(--fontsize-small);
|
|
21
21
|
overflow: hidden;
|
|
22
22
|
align-items: stretch;
|
|
@@ -39,9 +39,9 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
39
39
|
min-width: var(--mdibar-min-width, 100px);
|
|
40
40
|
max-width: var(--mdibar-max-width, 150px);
|
|
41
41
|
padding: var(--mdibar-padding, 3px 22px 1px 7px);
|
|
42
|
-
border-right: var(--border-
|
|
43
|
-
border-top: var(--border-
|
|
44
|
-
border-bottom: var(--border-
|
|
42
|
+
border-right: var(--border-dim-color);
|
|
43
|
+
border-top: var(--border-dim-color);
|
|
44
|
+
border-bottom: var(--border-dim-color);
|
|
45
45
|
white-space: nowrap;
|
|
46
46
|
overflow: hidden;
|
|
47
47
|
text-overflow: ellipsis;
|
|
@@ -50,7 +50,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
50
50
|
|
|
51
51
|
div[arrows] {
|
|
52
52
|
display: flex;
|
|
53
|
-
border: var(--border-
|
|
53
|
+
border: var(--border-dim-color);
|
|
54
54
|
align-items: center;
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -60,31 +60,31 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
60
60
|
flex: 1;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
md-icon {
|
|
64
|
+
--md-icon-size: var(--mdibar-icon-size, 18px);
|
|
65
65
|
opacity: 0.5;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
md-icon:hover {
|
|
69
69
|
opacity: 0.8;
|
|
70
|
-
color: var(--
|
|
70
|
+
color: var(--md-sys-color-secondary);
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
div[arrows]
|
|
73
|
+
div[arrows] md-icon[disabled] {
|
|
74
74
|
opacity: 0.2;
|
|
75
75
|
color: unset;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
div[route]
|
|
78
|
+
div[route] md-icon {
|
|
79
79
|
position: absolute;
|
|
80
80
|
right: 2px;
|
|
81
|
-
margin-left: var(--
|
|
81
|
+
margin-left: var(--spacing-small);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
div[route][active] {
|
|
85
|
-
background-color: var(--
|
|
86
|
-
border-bottom: 1px solid var(--
|
|
87
|
-
color: var(--
|
|
85
|
+
background-color: var(--md-sys-color-background);
|
|
86
|
+
border-bottom: 1px solid var(--md-sys-color-background);
|
|
87
|
+
color: var(--md-sys-color-on-background);
|
|
88
88
|
font-weight: bold;
|
|
89
89
|
}
|
|
90
90
|
|
|
@@ -95,7 +95,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
95
95
|
max-width: unset;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
div[route][home]
|
|
98
|
+
div[route][home] md-icon {
|
|
99
99
|
left: 0;
|
|
100
100
|
}
|
|
101
101
|
|
|
@@ -138,7 +138,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
138
138
|
this.openContextMenu(e)
|
|
139
139
|
}}
|
|
140
140
|
>
|
|
141
|
-
<
|
|
141
|
+
<md-icon>home</md-icon>${i18next.t('label.home')}
|
|
142
142
|
</div>
|
|
143
143
|
|
|
144
144
|
<div
|
|
@@ -160,7 +160,6 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
160
160
|
|
|
161
161
|
return html`
|
|
162
162
|
<div
|
|
163
|
-
@click=${() => this.moveTo(route)}
|
|
164
163
|
@contextmenu=${(e: MouseEvent) => {
|
|
165
164
|
e.preventDefault()
|
|
166
165
|
e.stopPropagation()
|
|
@@ -170,16 +169,17 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
170
169
|
|
|
171
170
|
this.openContextMenu(e)
|
|
172
171
|
}}
|
|
172
|
+
@click=${() => this.moveTo(route)}
|
|
173
173
|
?active=${this.activePage === route.page}
|
|
174
174
|
route
|
|
175
175
|
>
|
|
176
176
|
${typeof title == 'object' ? title.text : title}
|
|
177
|
-
<
|
|
177
|
+
<md-icon
|
|
178
178
|
@click=${(e: MouseEvent) => {
|
|
179
179
|
e.stopPropagation()
|
|
180
180
|
this.closePage(route, idx + 1)
|
|
181
181
|
}}
|
|
182
|
-
>close</
|
|
182
|
+
>close</md-icon
|
|
183
183
|
>
|
|
184
184
|
</div>
|
|
185
185
|
`
|
|
@@ -188,14 +188,14 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
188
188
|
</div>
|
|
189
189
|
|
|
190
190
|
<div arrows>
|
|
191
|
-
<
|
|
192
|
-
>arrow_left</
|
|
191
|
+
<md-icon ?disabled=${!this.scroller || this.scroller.scrollLeft <= 0} @click=${() => this.onScrollByArrow(1)}
|
|
192
|
+
>arrow_left</md-icon
|
|
193
193
|
>
|
|
194
|
-
<
|
|
194
|
+
<md-icon
|
|
195
195
|
?disabled=${!this.scroller ||
|
|
196
196
|
this.scroller.scrollWidth <= this.scroller.offsetWidth + this.scroller.scrollLeft}
|
|
197
197
|
@click=${() => this.onScrollByArrow(-1)}
|
|
198
|
-
>arrow_right</
|
|
198
|
+
>arrow_right</md-icon
|
|
199
199
|
>
|
|
200
200
|
</div>
|
|
201
201
|
`
|
|
@@ -254,11 +254,11 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
moveTo(route: { page?: PageView; url: string }) {
|
|
257
|
-
|
|
257
|
+
navigate(route.url)
|
|
258
258
|
}
|
|
259
259
|
|
|
260
260
|
moveToHome() {
|
|
261
|
-
|
|
261
|
+
navigate(this.getHomeRoute())
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
closePage(route: { page?: PageView; url: string }, idx: number) {
|
|
@@ -270,7 +270,10 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
270
270
|
|
|
271
271
|
if (this.activePage === page) {
|
|
272
272
|
const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1
|
|
273
|
-
|
|
273
|
+
navigate(next != -1 ? this.routes[next].url : this.getHomeRoute())
|
|
274
|
+
// const anchors = Array.from(this.anchors)
|
|
275
|
+
// const next = Math.max(0, idx - 1)
|
|
276
|
+
// navigate(anchors[next].getAttribute('href')!)
|
|
274
277
|
}
|
|
275
278
|
}
|
|
276
279
|
|
|
@@ -284,7 +287,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
284
287
|
|
|
285
288
|
this.routes = [this.routes[0]]
|
|
286
289
|
|
|
287
|
-
|
|
290
|
+
navigate(this.routes[0].url)
|
|
288
291
|
}
|
|
289
292
|
|
|
290
293
|
closeOtherPages(route: { page?: PageView; url: string }, idx: number) {
|
|
@@ -301,7 +304,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
301
304
|
|
|
302
305
|
this.routes = [this.routes[0], route]
|
|
303
306
|
|
|
304
|
-
|
|
307
|
+
navigate(route.url)
|
|
305
308
|
}
|
|
306
309
|
|
|
307
310
|
openContextMenu(e: MouseEvent) {
|
|
@@ -315,7 +318,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
315
318
|
this.closePage(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
|
|
316
319
|
}}
|
|
317
320
|
>
|
|
318
|
-
<
|
|
321
|
+
<md-icon slot="icon">close</md-icon>
|
|
319
322
|
</ox-popup-menuitem>
|
|
320
323
|
|
|
321
324
|
<ox-popup-menuitem
|
|
@@ -324,7 +327,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
324
327
|
this.closeOtherPages(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
|
|
325
328
|
}}
|
|
326
329
|
>
|
|
327
|
-
<
|
|
330
|
+
<md-icon slot="icon">cancel</md-icon>
|
|
328
331
|
</ox-popup-menuitem>
|
|
329
332
|
`
|
|
330
333
|
: nothing}
|
|
@@ -335,7 +338,7 @@ class PageMDIBar extends connect(store)(LitElement) {
|
|
|
335
338
|
this.closeAllPage()
|
|
336
339
|
}}
|
|
337
340
|
>
|
|
338
|
-
<
|
|
341
|
+
<md-icon slot="icon">disabled_by_default</md-icon>
|
|
339
342
|
</ox-popup-menuitem>
|
|
340
343
|
`,
|
|
341
344
|
top: e.clientY,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import '@material/mwc-formfield'
|
|
2
|
-
import '@material/mwc-checkbox'
|
|
3
1
|
import '@operato/i18n/ox-i18n.js'
|
|
2
|
+
import '@material/web/checkbox/checkbox.js'
|
|
4
3
|
|
|
5
4
|
import { css, html, LitElement } from 'lit'
|
|
6
5
|
import { customElement, property, state } from 'lit/decorators.js'
|
|
@@ -14,8 +13,12 @@ export class MDIBarSettingLet extends localize(i18next)(LitElement) {
|
|
|
14
13
|
static styles = [
|
|
15
14
|
css`
|
|
16
15
|
label {
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: 10px;
|
|
18
|
+
align-items: center;
|
|
19
|
+
|
|
17
20
|
font: var(--label-font);
|
|
18
|
-
color: var(--
|
|
21
|
+
color: var(--md-sys-color-on-primary-container);
|
|
19
22
|
text-transform: var(--label-text-transform);
|
|
20
23
|
}
|
|
21
24
|
`
|
|
@@ -31,9 +34,10 @@ export class MDIBarSettingLet extends localize(i18next)(LitElement) {
|
|
|
31
34
|
<ox-i18n slot="title" msgid="title.mdibar setting"></ox-i18n>
|
|
32
35
|
|
|
33
36
|
<div slot="content">
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
+
<label>
|
|
38
|
+
<md-checkbox @change=${e => this.onChangeShowMDIBar(e)} ?checked=${checked}></md-checkbox>
|
|
39
|
+
${i18next.t('label.show')}
|
|
40
|
+
</label>
|
|
37
41
|
</div>
|
|
38
42
|
</setting-let>
|
|
39
43
|
`
|
package/dist-client/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { html } from 'lit-html';
|
|
|
7
7
|
import { store, clientSettingStore } from '@operato/shell';
|
|
8
8
|
import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout';
|
|
9
9
|
import { isMobileDevice } from '@operato/utils';
|
|
10
|
-
import { ADD_SETTING } from '@things-factory/setting-base';
|
|
10
|
+
import { ADD_SETTING } from '@things-factory/setting-base/dist-client';
|
|
11
11
|
export async function setupAppToolPart({ toolbar = true, busybar = true, mdibar = true, pageToolbar = false }) {
|
|
12
12
|
var _a;
|
|
13
13
|
if (toolbar) {
|
package/dist-client/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,EACrC,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,KAAK,EAMpB;;IACC,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,CAAC,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,IAAI,CAAA;QAEzE,cAAc,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,IAAI;gBACJ,KAAK,EAAE,cAAc,CAAC,OAAO;gBAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,IAAI,CAAA,6CAA6C;aAC5D;SACF,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,cAAc,CAAC;YACb,IAAI,EAAE,cAAc;YACpB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,kCAAkC;aACjD;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;IACJ,CAAC;AACH,CAAC","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-busybar'\nimport './layout/page-mdibar'\nimport './layout/page-toolbar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { ADD_SETTING } from '@things-factory/setting-base/dist-client'\n\nexport async function setupAppToolPart({\n toolbar = true,\n busybar = true,\n mdibar = true,\n pageToolbar = false\n}: {\n toolbar?: boolean\n busybar?: boolean\n mdibar?: boolean\n pageToolbar?: boolean\n}) {\n if (toolbar) {\n appendViewpart({\n name: 'apptoolbar',\n viewpart: {\n show: true,\n template: html` <app-toolbar></app-toolbar> `\n },\n position: VIEWPART_POSITION.HEADERBAR\n })\n }\n\n if (busybar) {\n appendViewpart({\n name: 'appbusybar',\n viewpart: {\n show: true,\n template: html` <app-busybar></app-busybar> `\n },\n position: VIEWPART_POSITION.HEADERBAR\n })\n }\n\n if (mdibar && !isMobileDevice()) {\n const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show\n\n appendViewpart({\n name: 'appmdibar',\n viewpart: {\n show,\n level: VIEWPART_LEVEL.TOPMOST,\n template: html` <page-mdibar></page-mdibar> `\n },\n position: VIEWPART_POSITION.PAGE_HEADERBAR\n })\n\n store.dispatch({\n type: ADD_SETTING,\n setting: {\n seq: 21,\n template: html` <mdibar-setting-let></mdibar-setting-let> `\n }\n })\n }\n\n if (pageToolbar) {\n appendViewpart({\n name: 'page-toolbar',\n viewpart: {\n show: true,\n template: html` <page-toolbar> </page-toolbar> `\n },\n position: VIEWPART_POSITION.PAGE_HEADERBAR\n })\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/progress/linear-progress.js';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/progress/linear-progress.js';
|
|
3
3
|
import { css, html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, state } from 'lit/decorators.js';
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
6
|
import { store } from '@operato/shell';
|
|
7
7
|
let AppBusyBar = class AppBusyBar extends connect(store)(LitElement) {
|
|
8
8
|
render() {
|
|
9
|
-
return this.busy ? html `<
|
|
9
|
+
return this.busy ? html `<md-linear-progress indeterminate></md-linear-progress>` : html ``;
|
|
10
10
|
}
|
|
11
11
|
stateChanged(state) {
|
|
12
12
|
if (!state.busy.busy) {
|
|
@@ -26,12 +26,16 @@ let AppBusyBar = class AppBusyBar extends connect(store)(LitElement) {
|
|
|
26
26
|
AppBusyBar.styles = [
|
|
27
27
|
css `
|
|
28
28
|
:host {
|
|
29
|
-
display:
|
|
29
|
+
display: block;
|
|
30
|
+
position: relative;
|
|
31
|
+
|
|
32
|
+
--md-linear-progress-track-color: var(--md-sys-color-on-primary);
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
md-linear-progress {
|
|
36
|
+
position: absolute;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
width: 100%;
|
|
35
39
|
overflow: hidden;
|
|
36
40
|
}
|
|
37
41
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-busybar.js","sourceRoot":"","sources":["../../client/layout/app-busybar.ts"],"names":[],"mappings":";AAAA,OAAO
|
|
1
|
+
{"version":3,"file":"app-busybar.js","sourceRoot":"","sources":["../../client/layout/app-busybar.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAuBjD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,yDAAyD,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IAC3F,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACnB,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;QAEhC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC7B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;gBAClB,CAAC;gBAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;IACH,CAAC;;AA1CM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;KAcF;CACF,AAhBY,CAgBZ;AAEgB;IAAhB,KAAK,EAAE;8BAAgB,OAAO;wCAAA;AACd;IAAhB,KAAK,EAAE;;6CAA4B;AACnB;IAAhB,KAAK,EAAE;;2CAAsB;AArB1B,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CA4Cf","sourcesContent":["import '@material/web/progress/linear-progress.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { store } from '@operato/shell'\n\n@customElement('app-busybar')\nclass AppBusyBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n\n --md-linear-progress-track-color: var(--md-sys-color-on-primary);\n }\n\n md-linear-progress {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: hidden;\n }\n `\n ]\n\n @state() private busy?: Boolean\n @state() private lastState?: boolean\n @state() private timeout?: any\n\n render() {\n return this.busy ? html`<md-linear-progress indeterminate></md-linear-progress>` : html``\n }\n\n stateChanged(state) {\n if (!state.busy.busy) {\n this.busy = false\n }\n\n this.lastState = state.busy.busy\n\n if (!this.timeout) {\n this.timeout = setTimeout(() => {\n if (this.lastState) {\n this.busy = true\n }\n\n this.timeout = null\n }, 500)\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, query, state } from 'lit/decorators.js';
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
@@ -22,9 +22,9 @@ let AppToolbar = class AppToolbar extends connect(store)(LitElement) {
|
|
|
22
22
|
var overlay = (state || {}).overlay;
|
|
23
23
|
return html `
|
|
24
24
|
${overlay
|
|
25
|
-
? html ` <
|
|
25
|
+
? html ` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
|
|
26
26
|
: frontEndTools.length == 0
|
|
27
|
-
? html ` <
|
|
27
|
+
? html ` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
|
|
28
28
|
: frontEndTools.map(tool => html ` ${tool.template} `)}
|
|
29
29
|
${frontTools.map(tool => html ` ${tool.template} `)}
|
|
30
30
|
|
|
@@ -64,14 +64,11 @@ AppToolbar.styles = [
|
|
|
64
64
|
justify-content: space-between;
|
|
65
65
|
align-items: center;
|
|
66
66
|
padding: 0 5px;
|
|
67
|
+
gap: 10px;
|
|
67
68
|
|
|
68
69
|
text-transform: capitalize;
|
|
69
70
|
}
|
|
70
71
|
|
|
71
|
-
:host > * {
|
|
72
|
-
margin: var(--header-bar-item-padding);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
72
|
[center] {
|
|
76
73
|
flex: 1;
|
|
77
74
|
flex-wrap: nowrap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-toolbar.js","sourceRoot":"","sources":["../../client/layout/app-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"app-toolbar.js","sourceRoot":"","sources":["../../client/layout/app-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\n\n@customElement('app-toolbar')\nclass AppToolbar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n height: var(--header-bar-height, 45px);\n color: var(--header-bar-color);\n background-color: var(--header-bar-background-color, white);\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n gap: 10px;\n\n text-transform: capitalize;\n }\n\n [center] {\n flex: 1;\n flex-wrap: nowrap;\n display: flex;\n align-items: center;\n overflow: hidden;\n }\n\n [center] > * {\n margin: auto;\n }\n\n :host(.vline) {\n display: block;\n flex: none;\n border-left: 1px solid rgba(255, 255, 255, 0.07);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n width: 0px;\n height: 18px;\n margin: 0 4px;\n }\n\n :host(label) {\n margin-right: 5px;\n color: #fff;\n font-size: 20px;\n }\n\n span.space {\n width: 10px;\n }\n `\n ]\n\n @state() _tools: { position: string; template: TemplateResult }[] = []\n @state() _route: any\n\n @query('[center]') center!: HTMLDivElement\n\n render() {\n var tools = this._tools || ([] as { position: string; template: TemplateResult }[])\n\n var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */\n var state = history.state\n var overlay = (state || {}).overlay\n\n return html`\n ${overlay\n ? html` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `\n : frontEndTools.length == 0\n ? html` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `\n : frontEndTools.map(tool => html` ${tool.template} `)}\n ${frontTools.map(tool => html` ${tool.template} `)}\n\n <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}\n `\n }\n\n stateChanged(state) {\n /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */\n this._route = state.route\n\n this._tools = state.apptool.tools\n }\n\n navigateToHome() {\n var base = document.querySelector('base')\n if (base) {\n navigate(base.getAttribute('href') || '')\n } else {\n navigate('/')\n }\n }\n\n onWheelEvent(e) {\n const center = e.currentTarget\n var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n center.scrollLeft -= delta * 10\n\n e.preventDefault()\n }\n}\n"]}
|
|
@@ -1,2 +1,46 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@operato/popup/ox-popup-menu.js';
|
|
3
|
+
import { LitElement } from 'lit';
|
|
4
|
+
import { PageView } from '@operato/shell';
|
|
5
|
+
declare const PageMDIBar_base: (new (...args: any[]) => {
|
|
6
|
+
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
disconnectedCallback(): void;
|
|
9
|
+
stateChanged(_state: unknown): void;
|
|
10
|
+
readonly isConnected: boolean;
|
|
11
|
+
}) & (new (...args: any[]) => LitElement) & typeof LitElement;
|
|
12
|
+
export declare class PageMDIBar extends PageMDIBar_base {
|
|
13
|
+
static styles: import("lit").CSSResult[];
|
|
14
|
+
routes: {
|
|
15
|
+
page?: PageView;
|
|
16
|
+
url: string;
|
|
17
|
+
}[];
|
|
18
|
+
activePage?: PageView;
|
|
19
|
+
title: string;
|
|
20
|
+
scroller: HTMLDivElement;
|
|
21
|
+
contextMenu: HTMLDivElement;
|
|
22
|
+
private contextMenuTargetIndex?;
|
|
23
|
+
private contextMenuTargetRoute?;
|
|
24
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
25
|
+
updated(changed: any): void;
|
|
26
|
+
stateChanged(state: any): void;
|
|
27
|
+
onScrollByArrow(delta: number): void;
|
|
28
|
+
onWheelEvent(e: Event): void;
|
|
29
|
+
getHomeRoute(): string;
|
|
30
|
+
moveTo(route: {
|
|
31
|
+
page?: PageView;
|
|
32
|
+
url: string;
|
|
33
|
+
}): void;
|
|
34
|
+
moveToHome(): void;
|
|
35
|
+
closePage(route: {
|
|
36
|
+
page?: PageView;
|
|
37
|
+
url: string;
|
|
38
|
+
}, idx: number): void;
|
|
39
|
+
closeAllPage(): void;
|
|
40
|
+
closeOtherPages(route: {
|
|
41
|
+
page?: PageView;
|
|
42
|
+
url: string;
|
|
43
|
+
}, idx: number): void;
|
|
44
|
+
openContextMenu(e: MouseEvent): void;
|
|
45
|
+
}
|
|
46
|
+
export {};
|