@things-factory/rack-base 7.0.1-alpha.5 → 7.0.1-alpha.52

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,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'
@@ -7,9 +8,11 @@ import { property } from 'lit/decorators.js'
7
8
  import { client } from '@operato/graphql'
8
9
  import { i18next } from '@operato/i18n'
9
10
  import { isMobileDevice } from '@operato/utils'
11
+ import { ButtonContainerStyles } from '@operato/styles'
10
12
 
11
13
  export class CellImporter extends LitElement {
12
14
  static styles = [
15
+ ButtonContainerStyles,
13
16
  css`
14
17
  :host {
15
18
  display: flex;
@@ -21,16 +24,6 @@ export class CellImporter extends LitElement {
21
24
  ox-grist {
22
25
  flex: 1;
23
26
  }
24
-
25
- .button-container {
26
- display: flex;
27
- margin-left: auto;
28
- padding: var(--padding-default);
29
- }
30
-
31
- mwc-button {
32
- margin-left: var(--margin-default);
33
- }
34
27
  `
35
28
  ]
36
29
 
@@ -60,21 +53,18 @@ export class CellImporter extends LitElement {
60
53
  ]
61
54
  }
62
55
 
63
-
64
56
  render() {
65
57
  return html`
66
58
  <ox-grist
67
59
  .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
68
60
  .config=${this.columns}
69
- .data=${
70
- {
71
- records: this.cells
72
- }
73
- }
61
+ .data=${{
62
+ records: this.cells
63
+ }}
74
64
  ></ox-grist>
75
65
 
76
66
  <div class="button-container">
77
- <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
67
+ <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
78
68
  </div>
79
69
  `
80
70
  }
@@ -94,4 +84,3 @@ export class CellImporter extends LitElement {
94
84
  this.dispatchEvent(new CustomEvent('imported'))
95
85
  }
96
86
  }
97
-
@@ -89,7 +89,7 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
89
89
 
90
90
  <div id="sorters">
91
91
  Sort
92
- <mwc-icon
92
+ <md-icon
93
93
  @click=${e => {
94
94
  const target = e.currentTarget
95
95
  this.sortersControl.open({
@@ -97,7 +97,7 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
97
97
  top: target.offsetTop + target.offsetHeight
98
98
  })
99
99
  }}
100
- >expand_more</mwc-icon
100
+ >expand_more</md-icon
101
101
  >
102
102
  <ox-popup id="sorter-control">
103
103
  <ox-sorters-control> </ox-sorters-control>
@@ -105,9 +105,10 @@ export class CellListPage extends connect(store)(localize(i18next)(ScopedElement
105
105
  </div>
106
106
 
107
107
  <div id="modes">
108
- <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
109
- <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
110
- <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
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>
111
112
  </div>
112
113
  </div>
113
114
  </ox-grist>
@@ -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'
@@ -7,9 +8,11 @@ import { property } from 'lit/decorators.js'
7
8
  import { client } from '@operato/graphql'
8
9
  import { i18next } from '@operato/i18n'
9
10
  import { isMobileDevice } from '@operato/utils'
11
+ import { ButtonContainerStyles } from '@operato/styles'
10
12
 
11
13
  export class RackImporter extends LitElement {
12
14
  static styles = [
15
+ ButtonContainerStyles,
13
16
  css`
14
17
  :host {
15
18
  display: flex;
@@ -21,16 +24,6 @@ export class RackImporter extends LitElement {
21
24
  ox-grist {
22
25
  flex: 1;
23
26
  }
24
-
25
- .button-container {
26
- display: flex;
27
- margin-left: auto;
28
- padding: var(--padding-default);
29
- }
30
-
31
- mwc-button {
32
- margin-left: var(--margin-default);
33
- }
34
27
  `
35
28
  ]
36
29
 
@@ -60,21 +53,18 @@ export class RackImporter extends LitElement {
60
53
  ]
61
54
  }
62
55
 
63
-
64
56
  render() {
65
57
  return html`
66
58
  <ox-grist
67
59
  .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
68
60
  .config=${this.columns}
69
- .data=${
70
- {
71
- records: this.racks
72
- }
73
- }
61
+ .data=${{
62
+ records: this.racks
63
+ }}
74
64
  ></ox-grist>
75
65
 
76
66
  <div class="button-container">
77
- <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
67
+ <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
78
68
  </div>
79
69
  `
80
70
  }
@@ -94,4 +84,3 @@ export class RackImporter extends LitElement {
94
84
  this.dispatchEvent(new CustomEvent('imported'))
95
85
  }
96
86
  }
97
-
@@ -89,7 +89,7 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
89
89
 
90
90
  <div id="sorters">
91
91
  Sort
92
- <mwc-icon
92
+ <md-icon
93
93
  @click=${e => {
94
94
  const target = e.currentTarget
95
95
  this.sortersControl.open({
@@ -97,7 +97,7 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
97
97
  top: target.offsetTop + target.offsetHeight
98
98
  })
99
99
  }}
100
- >expand_more</mwc-icon
100
+ >expand_more</md-icon
101
101
  >
102
102
  <ox-popup id="sorter-control">
103
103
  <ox-sorters-control> </ox-sorters-control>
@@ -105,9 +105,10 @@ export class RackListPage extends connect(store)(localize(i18next)(ScopedElement
105
105
  </div>
106
106
 
107
107
  <div id="modes">
108
- <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
109
- <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
110
- <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
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>
111
112
  </div>
112
113
  </div>
113
114
  </ox-grist>