@things-factory/board-ui 7.0.1-rc.8 → 7.0.2

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 (44) hide show
  1. package/client/board-list/board-tile-list.ts +2 -2
  2. package/client/themes/board-theme.css +3 -2
  3. package/client/viewparts/board-basic-info.ts +1 -1
  4. package/client/viewparts/board-template-builder.ts +1 -1
  5. package/client/viewparts/board-versions.ts +2 -2
  6. package/client/viewparts/group-info-basic.ts +21 -24
  7. package/client/viewparts/group-info-import.ts +6 -6
  8. package/client/viewparts/link-builder.ts +2 -2
  9. package/client/viewparts/play-group-info-basic.ts +23 -17
  10. package/client/viewparts/play-group-info-link.ts +1 -1
  11. package/dist-client/board-list/board-tile-list.js +2 -2
  12. package/dist-client/board-list/board-tile-list.js.map +1 -1
  13. package/dist-client/themes/board-theme.css +3 -2
  14. package/dist-client/tsconfig.tsbuildinfo +1 -1
  15. package/dist-client/viewparts/board-basic-info.js +1 -1
  16. package/dist-client/viewparts/board-basic-info.js.map +1 -1
  17. package/dist-client/viewparts/board-template-builder.js +1 -1
  18. package/dist-client/viewparts/board-template-builder.js.map +1 -1
  19. package/dist-client/viewparts/board-versions.js +2 -2
  20. package/dist-client/viewparts/board-versions.js.map +1 -1
  21. package/dist-client/viewparts/group-info-basic.js +21 -24
  22. package/dist-client/viewparts/group-info-basic.js.map +1 -1
  23. package/dist-client/viewparts/group-info-import.js +6 -6
  24. package/dist-client/viewparts/group-info-import.js.map +1 -1
  25. package/dist-client/viewparts/link-builder.js +2 -2
  26. package/dist-client/viewparts/link-builder.js.map +1 -1
  27. package/dist-client/viewparts/play-group-info-basic.js +23 -17
  28. package/dist-client/viewparts/play-group-info-basic.js.map +1 -1
  29. package/dist-client/viewparts/play-group-info-link.js +1 -1
  30. package/dist-client/viewparts/play-group-info-link.js.map +1 -1
  31. package/dist-server/tsconfig.tsbuildinfo +1 -1
  32. package/helps/board-modeller/shapes/text-box.ko.md +9 -0
  33. package/helps/board-modeller/shapes/text-box.md +10 -0
  34. package/helps/board-modeller/shapes/text-box.zh.md +9 -0
  35. package/package.json +19 -19
  36. package/translations/en.json +1 -0
  37. package/translations/ja.json +1 -0
  38. package/translations/ko.json +1 -0
  39. package/translations/ms.json +1 -0
  40. package/translations/zh.json +1 -0
  41. package/client/board-list/board-importer.ts +0 -138
  42. package/dist-client/board-list/board-importer.d.ts +0 -6
  43. package/dist-client/board-list/board-importer.js +0 -112
  44. package/dist-client/board-list/board-importer.js.map +0 -1
package/client/board-list/board-tile-list.ts CHANGED
@@ -23,7 +23,6 @@ export class BoardTileList extends LitElement {
23
23
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
24
24
  grid-auto-rows: var(--card-list-rows-height);
25
25
  grid-gap: 20px;
26
- --mdc-button-horizontal-padding: var(--padding-default);
27
26
  }
28
27
 
29
28
  [card] {
@@ -50,7 +49,7 @@ export class BoardTileList extends LitElement {
50
49
  text-overflow: ellipsis;
51
50
  white-space: nowrap;
52
51
  overflow: hidden;
53
- margin-top: var(--margin-narrow);
52
+ margin-top: var(--spacing-small);
54
53
  width: calc(100% - 45px);
55
54
  color: var(--md-sys-color-on-background);
56
55
  font-weight: bolder;
@@ -83,6 +82,7 @@ export class BoardTileList extends LitElement {
83
82
  border-radius: var(--card-list-border-radius);
84
83
  border: var(--border-dim-color);
85
84
  box-sizing: border-box;
85
+ color: var(--card-list-color);
86
86
  background-color: var(--card-list-background-color);
87
87
  margin: 0px;
88
88
  height: calc(100% - 25px);
package/client/themes/board-theme.css CHANGED
@@ -5,7 +5,7 @@ body {
5
5
  --board-renderer-name-font: normal 13px var(--theme-font);
6
6
  --board-renderer-icon-size: 24px;
7
7
  --board-renderer-icon-border-radius: 10px;
8
- --board-renderer-font: bold 16px/25px var(--mdc-icon-font, 'Material Icons');
8
+ --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');
9
9
  --board-renderer-icon-edit-background-color: #95d40f;
10
10
  --board-renderer-icon-view-background-color: #27a1de;
11
11
 
@@ -25,7 +25,8 @@ body {
25
25
  --board-list-star-active-color: var(--status-warning-color);
26
26
 
27
27
  --card-list-rows-height: 180px;
28
- --card-list-background-color: var(--md-sys-color-surface-variant);
28
+ --card-list-color: var(--md-sys-color-on-surface);
29
+ --card-list-background-color: var(--md-sys-color-surface-container-lowest);
29
30
  --card-list-border-radius: var(--border-radius);
30
31
  --card-list-flip-transform: rotateX(180deg);
31
32
  --card-list-create-border: 1px dashed var(--md-sys-color-primary);
package/client/viewparts/board-basic-info.ts CHANGED
@@ -53,7 +53,7 @@ export class BoardInfo extends connect(store)(LitElement) {
53
53
  grid-template-columns: repeat(12, 1fr);
54
54
  grid-gap: 10px 0;
55
55
  grid-auto-rows: minmax(24px, auto);
56
- padding: var(--padding-wide);
56
+ padding: var(--spacing-large);
57
57
  align-items: center;
58
58
  }
59
59
 
package/client/viewparts/board-template-builder.ts CHANGED
@@ -14,7 +14,7 @@ export class BoardTemplateBuilder extends LitElement {
14
14
  css`
15
15
  :host {
16
16
  display: flex;
17
- padding: var(--padding-wide);
17
+ padding: var(--spacing-large);
18
18
 
19
19
  /* for narrow mode */
20
20
  flex-direction: column;
package/client/viewparts/board-versions.ts CHANGED
@@ -34,7 +34,7 @@ export class BoardVersions extends LitElement {
34
34
 
35
35
  div[card] {
36
36
  position: relative;
37
- margin: var(--margin-default);
37
+ margin: var(--spacing-medium);
38
38
  text-align: start;
39
39
  border-bottom: var(--border-dim-color);
40
40
  }
@@ -42,7 +42,7 @@ export class BoardVersions extends LitElement {
42
42
  div[info] {
43
43
  display: flex;
44
44
  align-items: center;
45
- gap: var(--margin-default);
45
+ gap: var(--spacing-medium);
46
46
  }
47
47
 
48
48
  span {
package/client/viewparts/group-info-basic.ts CHANGED
@@ -16,6 +16,7 @@ export class GroupInfo extends LitElement {
16
16
  css`
17
17
  :host {
18
18
  display: block;
19
+ color: var(--md-sys-color-on-surface);
19
20
  background-color: var(--md-sys-color-surface);
20
21
  height: 100%;
21
22
  min-width: 360px;
@@ -24,15 +25,8 @@ export class GroupInfo extends LitElement {
24
25
 
25
26
  --form-grid-gap: 2px 0;
26
27
 
27
- --md-outlined-text-field-top-space: 12px;
28
- --md-outlined-text-field-bottom-space: 12px;
29
- --md-outlined-text-field-leading-space: 12px;
30
- --md-outlined-text-field-trailing-space: 12px;
31
-
32
- --md-outlined-select-top-space: 12px;
33
- --md-outlined-select-bottom-space: 12px;
34
- --md-outlined-select-leading-space: 12px;
35
- --md-outlined-select-trailing-space: 12px;
28
+ --input-field-padding: var(--spacing-medium);
29
+ --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
36
30
  }
37
31
 
38
32
  form {
@@ -40,7 +34,7 @@ export class GroupInfo extends LitElement {
40
34
  grid-template-columns: repeat(12, 1fr);
41
35
  grid-gap: var(--form-grid-gap);
42
36
  grid-auto-rows: minmax(24px, auto);
43
- padding: var(--padding-wide);
37
+ padding: var(--spacing-large);
44
38
  align-items: center;
45
39
  }
46
40
 
@@ -51,21 +45,24 @@ export class GroupInfo extends LitElement {
51
45
 
52
46
  [buttons] {
53
47
  grid-column: span 12;
54
- padding: var(--padding-default) 0;
48
+ padding: var(--spacing-medium) 0;
55
49
  text-align: right;
56
50
 
57
51
  display: flex;
58
- gap: var(--margin-narrow);
52
+ gap: var(--spacing-small);
59
53
  align-items: center;
60
54
  }
61
55
 
62
- [buttons] md-elevated-button {
63
- margin-left: auto;
56
+ [buttons] * {
57
+ margin: 0 0 0 auto;
64
58
  }
65
59
 
66
- [buttons] md-elevated-button[danger] {
67
- margin-left: 0;
68
- background-color: var(--status-danger-color);
60
+ [danger] {
61
+ float: left;
62
+ margin: 0;
63
+ --md-elevated-button-icon-color: var(--md-sys-color-on-error);
64
+ --md-elevated-button-label-text-color: var(--md-sys-color-on-error);
65
+ --md-elevated-button-container-color: var(--md-sys-color-error);
69
66
  }
70
67
 
71
68
  fieldset {
@@ -76,22 +73,22 @@ export class GroupInfo extends LitElement {
76
73
  grid-column: span 12;
77
74
  padding: var(--legend-padding);
78
75
  font: var(--legend-font);
79
- color: var(--legend-text-color);
76
+ color: var(--md-sys-color-primary);
80
77
  text-transform: capitalize;
81
78
  }
82
79
 
83
80
  label {
84
81
  grid-column: span 12;
85
82
  text-transform: capitalize;
86
- color: var(--label-color, var(--md-sys-color-on-surface));
83
+ color: var(--md-sys-color-primary);
87
84
  font: var(--label-font);
88
85
  }
89
86
 
90
87
  span {
91
88
  grid-column: span 12;
92
89
  border-bottom: var(--border-dim-color);
93
- margin-bottom: var(--margin-default);
94
- padding-bottom: var(--padding-narrow);
90
+ margin-bottom: var(--spacing-medium);
91
+ padding-bottom: var(--spacing-small);
95
92
  font: var(--input-field-font);
96
93
  }
97
94
  span md-icon {
@@ -111,7 +108,7 @@ export class GroupInfo extends LitElement {
111
108
 
112
109
  border: var(--input-field-border);
113
110
  border-radius: var(--input-field-border-radius);
114
- margin-bottom: var(--margin-default);
111
+ margin-bottom: var(--spacing-medium);
115
112
  padding: var(--input-field-padding);
116
113
  font: var(--input-field-font);
117
114
  }
@@ -129,7 +126,7 @@ export class GroupInfo extends LitElement {
129
126
  grid-column: span 11 / auto;
130
127
 
131
128
  font: var(--form-sublabel-font);
132
- color: var(--form-sublabel-color, var(--md-sys-color-secondary));
129
+ color: var(--md-sys-color-secondary);
133
130
  }
134
131
 
135
132
  input:focus {
@@ -192,7 +189,7 @@ export class GroupInfo extends LitElement {
192
189
  ><md-icon slot="icon">delete_outline</md-icon>${i18next.t('button.delete')}</md-elevated-button
193
190
  >
194
191
  <md-elevated-button @click=${this.updateGroup.bind(this)}
195
- ><md-icon slot="icon">done</md-icon>${i18next.t('button.save')}</md-elevated-button
192
+ ><md-icon slot="icon">save</md-icon>${i18next.t('button.save')}</md-elevated-button
196
193
  >
197
194
  `
198
195
  : html`
package/client/viewparts/group-info-import.ts CHANGED
@@ -15,6 +15,7 @@ export class GroupInfoImport extends LitElement {
15
15
  css`
16
16
  :host {
17
17
  display: block;
18
+ color: var(--md-sys-color-on-surface);
18
19
  background-color: var(--md-sys-color-surface);
19
20
  height: 100%;
20
21
  min-width: 360px;
@@ -22,18 +23,17 @@ export class GroupInfoImport extends LitElement {
22
23
  position: relative;
23
24
 
24
25
  --form-grid-gap: 2px 0;
25
- --input-field-padding: var(--padding-default);
26
- --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
27
- --mdc-button-horizontal-padding: var(--padding-default);
26
+ --input-field-padding: var(--spacing-medium);
27
+ --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
28
28
  }
29
29
 
30
30
  [buttons] {
31
31
  grid-column: span 12;
32
- padding: var(--padding-default) 0;
32
+ padding: var(--spacing-medium) 0;
33
33
  text-align: right;
34
34
 
35
35
  display: flex;
36
- gap: var(--margin-narrow);
36
+ gap: var(--spacing-small);
37
37
  align-items: center;
38
38
  }
39
39
 
@@ -54,7 +54,7 @@ export class GroupInfoImport extends LitElement {
54
54
  display: flex;
55
55
  flex-direction: column;
56
56
  gap: 4px;
57
- padding: var(--padding-wide);
57
+ padding: var(--spacing-large);
58
58
  align-items: stretch;
59
59
  }
60
60
 
package/client/viewparts/link-builder.ts CHANGED
@@ -21,7 +21,8 @@ export class LinkBuilder extends LitElement {
21
21
  css`
22
22
  :host {
23
23
  display: flex;
24
- padding: var(--padding-wide);
24
+ padding: var(--spacing-large);
25
+ color: var(--md-sys-color-primary);
25
26
 
26
27
  /* for narrow mode */
27
28
  flex-direction: column;
@@ -34,7 +35,6 @@ export class LinkBuilder extends LitElement {
34
35
 
35
36
  label {
36
37
  font: var(--label-font);
37
- color: var(--label-color, var(--md-sys-color-on-surface));
38
38
  text-transform: capitalize;
39
39
  }
40
40
 
package/client/viewparts/play-group-info-basic.ts CHANGED
@@ -15,6 +15,7 @@ export class PlayGroupInfoBasic extends LitElement {
15
15
  css`
16
16
  :host {
17
17
  display: block;
18
+ color: var(--md-sys-color-on-surface);
18
19
  background-color: var(--md-sys-color-surface);
19
20
  height: 100%;
20
21
  min-width: 360px;
@@ -22,9 +23,8 @@ export class PlayGroupInfoBasic extends LitElement {
22
23
  position: relative;
23
24
 
24
25
  --form-grid-gap: 2px 0;
25
- --input-field-padding: var(--padding-default);
26
- --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
27
- --mdc-button-horizontal-padding: var(--padding-default);
26
+ --input-field-padding: var(--spacing-medium);
27
+ --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
28
28
  }
29
29
 
30
30
  form {
@@ -32,7 +32,7 @@ export class PlayGroupInfoBasic extends LitElement {
32
32
  grid-template-columns: repeat(12, 1fr);
33
33
  grid-gap: var(--form-grid-gap);
34
34
  grid-auto-rows: minmax(24px, auto);
35
- padding: var(--padding-wide);
35
+ padding: var(--spacing-large);
36
36
  align-items: center;
37
37
  }
38
38
 
@@ -43,18 +43,24 @@ export class PlayGroupInfoBasic extends LitElement {
43
43
 
44
44
  [buttons] {
45
45
  grid-column: span 12;
46
- padding: var(--padding-default) 0;
46
+ padding: var(--spacing-medium) 0;
47
47
  text-align: right;
48
+
49
+ display: flex;
50
+ gap: var(--spacing-small);
51
+ align-items: center;
48
52
  }
49
53
 
50
54
  [buttons] * {
51
- margin: 0 0 0 var(--margin-narrow);
55
+ margin: 0 0 0 auto;
52
56
  }
53
57
 
54
58
  [danger] {
55
59
  float: left;
56
- margin: 0 var(--margin-narrow) 0 0;
57
- background-color: var(--status-danger-color);
60
+ margin: 0;
61
+ --md-elevated-button-icon-color: var(--md-sys-color-on-error);
62
+ --md-elevated-button-label-text-color: var(--md-sys-color-on-error);
63
+ --md-elevated-button-container-color: var(--md-sys-color-error);
58
64
  }
59
65
 
60
66
  fieldset {
@@ -65,22 +71,22 @@ export class PlayGroupInfoBasic extends LitElement {
65
71
  grid-column: span 12;
66
72
  padding: var(--legend-padding);
67
73
  font: var(--legend-font);
68
- color: var(--legend-text-color);
74
+ color: var(--md-sys-color-primary);
69
75
  text-transform: capitalize;
70
76
  }
71
77
 
72
78
  label {
73
79
  grid-column: span 12;
74
80
  text-transform: capitalize;
75
- color: var(--label-color, var(--md-sys-color-on-surface));
81
+ color: var(--md-sys-color-primary);
76
82
  font: var(--label-font);
77
83
  }
78
84
 
79
85
  span {
80
86
  grid-column: span 12;
81
87
  border-bottom: var(--border-dim-color);
82
- margin-bottom: var(--margin-default);
83
- padding-bottom: var(--padding-narrow);
88
+ margin-bottom: var(--spacing-medium);
89
+ padding-bottom: var(--spacing-small);
84
90
  font: var(--input-field-font);
85
91
  }
86
92
  span md-icon {
@@ -100,7 +106,7 @@ export class PlayGroupInfoBasic extends LitElement {
100
106
 
101
107
  border: var(--input-field-border);
102
108
  border-radius: var(--input-field-border-radius);
103
- margin-bottom: var(--margin-default);
109
+ margin-bottom: var(--spacing-medium);
104
110
  padding: var(--input-field-padding);
105
111
  font: var(--input-field-font);
106
112
  }
@@ -118,7 +124,7 @@ export class PlayGroupInfoBasic extends LitElement {
118
124
  grid-column: span 11 / auto;
119
125
 
120
126
  font: var(--form-sublabel-font);
121
- color: var(--form-sublabel-color, var(--md-sys-color-secondary));
127
+ color: var(--md-sys-color-secondary);
122
128
  }
123
129
 
124
130
  input:focus {
@@ -150,14 +156,14 @@ export class PlayGroupInfoBasic extends LitElement {
150
156
  <md-filled-text-field
151
157
  type="text"
152
158
  label=${String(i18next.t('label.name'))}
153
- .value=${playGroup.name}
159
+ .value=${playGroup.name || ''}
154
160
  @change=${e => (this.playGroup.name = e.target.value)}
155
161
  ></md-filled-text-field>
156
162
 
157
163
  <md-filled-text-field
158
164
  type="text"
159
165
  label=${String(i18next.t('label.description'))}
160
- .value=${playGroup.description}
166
+ .value=${playGroup.description || ''}
161
167
  @change=${e => (this.playGroup.description = e.target.value)}
162
168
  ></md-filled-text-field>
163
169
 
@@ -182,7 +188,7 @@ export class PlayGroupInfoBasic extends LitElement {
182
188
  )}</md-elevated-button
183
189
  >
184
190
  <md-elevated-button @click=${this.updateGroup.bind(this)}
185
- ><md-icon slot="icon">done</md-icon>${String(i18next.t('button.save'))}</md-elevated-button
191
+ ><md-icon slot="icon">save</md-icon>${String(i18next.t('button.save'))}</md-elevated-button
186
192
  >
187
193
  `
188
194
  : html`
package/client/viewparts/play-group-info-link.ts CHANGED
@@ -15,7 +15,7 @@ export class PlayGroupInfoLink extends LitElement {
15
15
  background-color: var(--md-sys-color-surface);
16
16
  position: relative;
17
17
  text-align: center;
18
- color: var(--label-color, var(--md-sys-color-on-surface));
18
+ color: var(--md-sys-color-on-surface);
19
19
  font: var(--label-font);
20
20
  }
21
21
 
package/dist-client/board-list/board-tile-list.js CHANGED
@@ -150,7 +150,6 @@ BoardTileList.styles = [
150
150
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
151
151
  grid-auto-rows: var(--card-list-rows-height);
152
152
  grid-gap: 20px;
153
- --mdc-button-horizontal-padding: var(--padding-default);
154
153
  }
155
154
 
156
155
  [card] {
@@ -177,7 +176,7 @@ BoardTileList.styles = [
177
176
  text-overflow: ellipsis;
178
177
  white-space: nowrap;
179
178
  overflow: hidden;
180
- margin-top: var(--margin-narrow);
179
+ margin-top: var(--spacing-small);
181
180
  width: calc(100% - 45px);
182
181
  color: var(--md-sys-color-on-background);
183
182
  font-weight: bolder;
@@ -210,6 +209,7 @@ BoardTileList.styles = [
210
209
  border-radius: var(--card-list-border-radius);
211
210
  border: var(--border-dim-color);
212
211
  box-sizing: border-box;
212
+ color: var(--card-list-color);
213
213
  background-color: var(--card-list-background-color);
214
214
  margin: 0px;
215
215
  height: calc(100% - 25px);
package/dist-client/board-list/board-tile-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('board-tile-list')\nexport class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n background-color: var(--md-sys-color-background);\n\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n clip-path: border-box;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--margin-narrow);\n width: calc(100% - 45px);\n color: var(--md-sys-color-on-background);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n flex: 1;\n object-fit: contain;\n }\n\n md-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n md-icon[info] {\n color: var(--md-sys-color-primary);\n }\n\n md-icon[iconBtn][favored],\n md-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dim-color);\n box-sizing: border-box;\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n [draggable='true'] {\n cursor: grab;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) boards: any[] = []\n @property({ type: Array }) favorites: any[] = []\n @property({ type: Array }) groups: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable?: boolean = false\n @property({ type: String, attribute: 'search-text' }) searchText?: string\n @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false\n\n private draggedItem\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.reorderable) {\n this.renderRoot.addEventListener('dragstart', (e: Event) => {\n const target = e.target! as HTMLElement\n this.draggedItem = target.closest('[card]')\n ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)\n })\n\n this.renderRoot.addEventListener('dragover', (e: Event) => {\n e.preventDefault()\n\n const target = e.target! as HTMLElement\n const targetItem = target.closest('[card]')\n if (targetItem && targetItem !== this.draggedItem) {\n const targetRect = targetItem.getBoundingClientRect()\n const mousePos = (e as DragEvent).clientX - targetRect.left\n\n if (mousePos < targetRect.width / 2) {\n // 마우스 위치가 아이템 좌측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem)\n } else {\n // 마우스 위치가 아이템 우측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n }\n }\n })\n\n this.renderRoot.addEventListener('drop', (e: Event) => {\n e.preventDefault()\n\n const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n .map(board => board.getAttribute('id'))\n .filter(Boolean)\n\n this.dispatchEvent(\n new CustomEvent('reordered', {\n detail: {\n groupId: this.group,\n boardIds\n }\n })\n )\n })\n }\n }\n\n render() {\n var boards = this.boards || []\n\n return html`\n ${this.creatable\n ? privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n )\n : nothing}\n ${keyed(\n Date.now(),\n boards.map(\n board => html`\n <div card draggable=\"true\" id=${board.id}>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <md-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board)\n e.preventDefault()\n }}\n >info</md-icon\n >\n\n ${(this.favorites || []).includes(board.id)\n ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `\n : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}\n </div>\n `\n )\n )}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n var creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any\n if (creationCard) {\n creationCard.reset()\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(board) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: board\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}
1
+ {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\n\n@customElement('board-tile-list')\nexport class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n background-color: var(--md-sys-color-background);\n\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n clip-path: border-box;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--spacing-small);\n width: calc(100% - 45px);\n color: var(--md-sys-color-on-background);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n flex: 1;\n object-fit: contain;\n }\n\n md-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n md-icon[info] {\n color: var(--md-sys-color-primary);\n }\n\n md-icon[iconBtn][favored],\n md-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dim-color);\n box-sizing: border-box;\n color: var(--card-list-color);\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n [draggable='true'] {\n cursor: grab;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) boards: any[] = []\n @property({ type: Array }) favorites: any[] = []\n @property({ type: Array }) groups: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable?: boolean = false\n @property({ type: String, attribute: 'search-text' }) searchText?: string\n @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false\n\n private draggedItem\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.reorderable) {\n this.renderRoot.addEventListener('dragstart', (e: Event) => {\n const target = e.target! as HTMLElement\n this.draggedItem = target.closest('[card]')\n ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)\n })\n\n this.renderRoot.addEventListener('dragover', (e: Event) => {\n e.preventDefault()\n\n const target = e.target! as HTMLElement\n const targetItem = target.closest('[card]')\n if (targetItem && targetItem !== this.draggedItem) {\n const targetRect = targetItem.getBoundingClientRect()\n const mousePos = (e as DragEvent).clientX - targetRect.left\n\n if (mousePos < targetRect.width / 2) {\n // 마우스 위치가 아이템 좌측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem)\n } else {\n // 마우스 위치가 아이템 우측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n }\n }\n })\n\n this.renderRoot.addEventListener('drop', (e: Event) => {\n e.preventDefault()\n\n const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n .map(board => board.getAttribute('id'))\n .filter(Boolean)\n\n this.dispatchEvent(\n new CustomEvent('reordered', {\n detail: {\n groupId: this.group,\n boardIds\n }\n })\n )\n })\n }\n }\n\n render() {\n var boards = this.boards || []\n\n return html`\n ${this.creatable\n ? privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n )\n : nothing}\n ${keyed(\n Date.now(),\n boards.map(\n board => html`\n <div card draggable=\"true\" id=${board.id}>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <md-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board)\n e.preventDefault()\n }}\n >info</md-icon\n >\n\n ${(this.favorites || []).includes(board.id)\n ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `\n : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}\n </div>\n `\n )\n )}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n var creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any\n if (creationCard) {\n creationCard.reset()\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(board) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: board\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}
package/dist-client/themes/board-theme.css CHANGED
@@ -5,7 +5,7 @@ body {
5
5
  --board-renderer-name-font: normal 13px var(--theme-font);
6
6
  --board-renderer-icon-size: 24px;
7
7
  --board-renderer-icon-border-radius: 10px;
8
- --board-renderer-font: bold 16px/25px var(--mdc-icon-font, 'Material Icons');
8
+ --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');
9
9
  --board-renderer-icon-edit-background-color: #95d40f;
10
10
  --board-renderer-icon-view-background-color: #27a1de;
11
11
 
@@ -25,7 +25,8 @@ body {
25
25
  --board-list-star-active-color: var(--status-warning-color);
26
26
 
27
27
  --card-list-rows-height: 180px;
28
- --card-list-background-color: var(--md-sys-color-surface-variant);
28
+ --card-list-color: var(--md-sys-color-on-surface);
29
+ --card-list-background-color: var(--md-sys-color-surface-container-lowest);
29
30
  --card-list-border-radius: var(--border-radius);
30
31
  --card-list-flip-transform: rotateX(180deg);
31
32
  --card-list-create-border: 1px dashed var(--md-sys-color-primary);