@things-factory/rack-base 7.0.6 → 7.0.10
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.
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import '@operato/data-grist'
|
|
2
2
|
|
|
3
|
-
import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
|
|
3
|
+
import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
|
|
4
4
|
import { PageView, store } from '@operato/shell'
|
|
5
5
|
import { css, html } from 'lit'
|
|
6
6
|
import { customElement, property, query } from 'lit/decorators.js'
|
|
7
7
|
import { ScopedElementsMixin } from '@open-wc/scoped-elements'
|
|
8
|
-
import { ColumnConfig, DataGrist, FetchOption
|
|
8
|
+
import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
|
|
9
9
|
import { client } from '@operato/graphql'
|
|
10
10
|
import { i18next, localize } from '@operato/i18n'
|
|
11
11
|
import { notify, openPopup } from '@operato/layout'
|
|
12
|
-
import { OxPopup } from '@operato/popup'
|
|
13
12
|
import { isMobileDevice } from '@operato/utils'
|
|
14
13
|
|
|
15
14
|
import { connect } from 'pwa-helpers/connect-mixin'
|
|
@@ -22,6 +21,7 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
22
21
|
static styles = [
|
|
23
22
|
ScrollbarStyles,
|
|
24
23
|
CommonGristStyles,
|
|
24
|
+
CommonHeaderStyles,
|
|
25
25
|
css`
|
|
26
26
|
:host {
|
|
27
27
|
display: flex;
|
|
@@ -49,7 +49,6 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
49
49
|
@property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
|
|
50
50
|
|
|
51
51
|
@query('ox-grist') private grist!: DataGrist
|
|
52
|
-
@query('#sorter-control') private sortersControl!: OxPopup
|
|
53
52
|
|
|
54
53
|
get context() {
|
|
55
54
|
return {
|
|
@@ -82,33 +81,15 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
82
81
|
|
|
83
82
|
return html`
|
|
84
83
|
<ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
|
|
85
|
-
<div slot="headroom">
|
|
86
|
-
<div
|
|
84
|
+
<div slot="headroom" class="header">
|
|
85
|
+
<div class="filters">
|
|
87
86
|
<ox-filters-form autofocus></ox-filters-form>
|
|
88
|
-
</div>
|
|
89
|
-
|
|
90
|
-
<div id="sorters">
|
|
91
|
-
Sort
|
|
92
|
-
<md-icon
|
|
93
|
-
@click=${e => {
|
|
94
|
-
const target = e.currentTarget
|
|
95
|
-
this.sortersControl.open({
|
|
96
|
-
right: 0,
|
|
97
|
-
top: target.offsetTop + target.offsetHeight
|
|
98
|
-
})
|
|
99
|
-
}}
|
|
100
|
-
>expand_more</md-icon
|
|
101
|
-
>
|
|
102
|
-
<ox-popup id="sorter-control">
|
|
103
|
-
<ox-sorters-control> </ox-sorters-control>
|
|
104
|
-
</ox-popup>
|
|
105
|
-
</div>
|
|
106
87
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
88
|
+
<div id="modes">
|
|
89
|
+
<md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
|
|
90
|
+
<md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
|
|
91
|
+
<md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
|
|
92
|
+
</div>
|
|
112
93
|
</div>
|
|
113
94
|
</div>
|
|
114
95
|
</ox-grist>
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import '@operato/data-grist'
|
|
2
2
|
|
|
3
|
-
import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
|
|
3
|
+
import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
|
|
4
4
|
import { PageView, store } from '@operato/shell'
|
|
5
5
|
import { css, html } from 'lit'
|
|
6
6
|
import { customElement, property, query } from 'lit/decorators.js'
|
|
7
7
|
import { ScopedElementsMixin } from '@open-wc/scoped-elements'
|
|
8
|
-
import { ColumnConfig, DataGrist, FetchOption
|
|
8
|
+
import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
|
|
9
9
|
import { client } from '@operato/graphql'
|
|
10
10
|
import { i18next, localize } from '@operato/i18n'
|
|
11
11
|
import { notify, openPopup } from '@operato/layout'
|
|
12
|
-
import { OxPopup } from '@operato/popup'
|
|
13
12
|
import { isMobileDevice } from '@operato/utils'
|
|
14
13
|
|
|
15
14
|
import { connect } from 'pwa-helpers/connect-mixin'
|
|
@@ -22,6 +21,7 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
22
21
|
static styles = [
|
|
23
22
|
ScrollbarStyles,
|
|
24
23
|
CommonGristStyles,
|
|
24
|
+
CommonHeaderStyles,
|
|
25
25
|
css`
|
|
26
26
|
:host {
|
|
27
27
|
display: flex;
|
|
@@ -36,6 +36,10 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
36
36
|
overflow-y: auto;
|
|
37
37
|
flex: 1;
|
|
38
38
|
}
|
|
39
|
+
|
|
40
|
+
ox-filters-form {
|
|
41
|
+
flex: 1;
|
|
42
|
+
}
|
|
39
43
|
`
|
|
40
44
|
]
|
|
41
45
|
|
|
@@ -49,7 +53,6 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
49
53
|
@property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
|
|
50
54
|
|
|
51
55
|
@query('ox-grist') private grist!: DataGrist
|
|
52
|
-
@query('#sorter-control') private sortersControl!: OxPopup
|
|
53
56
|
|
|
54
57
|
get context() {
|
|
55
58
|
return {
|
|
@@ -82,33 +85,15 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
|
|
|
82
85
|
|
|
83
86
|
return html`
|
|
84
87
|
<ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
|
|
85
|
-
<div slot="headroom">
|
|
86
|
-
<div
|
|
88
|
+
<div slot="headroom" class="header">
|
|
89
|
+
<div class="filters">
|
|
87
90
|
<ox-filters-form autofocus></ox-filters-form>
|
|
88
|
-
</div>
|
|
89
91
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
@click=${
|
|
94
|
-
|
|
95
|
-
this.sortersControl.open({
|
|
96
|
-
right: 0,
|
|
97
|
-
top: target.offsetTop + target.offsetHeight
|
|
98
|
-
})
|
|
99
|
-
}}
|
|
100
|
-
>expand_more</md-icon
|
|
101
|
-
>
|
|
102
|
-
<ox-popup id="sorter-control">
|
|
103
|
-
<ox-sorters-control> </ox-sorters-control>
|
|
104
|
-
</ox-popup>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div id="modes">
|
|
108
|
-
<md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
|
|
109
|
-
<md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
|
|
110
|
-
<md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
|
|
111
|
-
</div>
|
|
92
|
+
<div id="modes">
|
|
93
|
+
<md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
|
|
94
|
+
<md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
|
|
95
|
+
<md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
|
|
96
|
+
</div>
|
|
112
97
|
</div>
|
|
113
98
|
</div>
|
|
114
99
|
</ox-grist>
|