@things-factory/board-ui 7.0.1-alpha.10 → 7.0.1-alpha.13
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/board-list/group-bar-styles.ts +57 -0
- package/client/board-list/group-bar.ts +3 -58
- package/client/board-list/play-group-bar.ts +5 -60
- package/dist-client/board-list/group-bar-styles.d.ts +1 -0
- package/dist-client/board-list/group-bar-styles.js +57 -0
- package/dist-client/board-list/group-bar-styles.js.map +1 -0
- package/dist-client/board-list/group-bar.js +3 -58
- package/dist-client/board-list/group-bar.js.map +1 -1
- package/dist-client/board-list/play-group-bar.js +4 -59
- package/dist-client/board-list/play-group-bar.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { css } from 'lit'
|
|
2
|
+
|
|
3
|
+
export const GroupBarStyles = css`
|
|
4
|
+
:host {
|
|
5
|
+
background-color: var(--group-bar-background-color);
|
|
6
|
+
|
|
7
|
+
overflow-x: hidden;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
ul {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
list-style: none;
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
li {
|
|
21
|
+
display: inline-block;
|
|
22
|
+
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
border-bottom: var(--group-bar-line);
|
|
25
|
+
align-self: auto;
|
|
26
|
+
min-height: 43px;
|
|
27
|
+
padding: 4px 8px;
|
|
28
|
+
|
|
29
|
+
* {
|
|
30
|
+
vertical-align: text-top;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
a {
|
|
34
|
+
display: block;
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
font: var(--group-bar-textbutton);
|
|
37
|
+
color: rgba(255, 255, 255, 0.8);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&[active] {
|
|
41
|
+
border-color: var(--group-bar-active-line-color);
|
|
42
|
+
|
|
43
|
+
a {
|
|
44
|
+
font: var(--group-bar-textbutton-active);
|
|
45
|
+
color: rgba(255, 255, 255, 1);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&[padding] {
|
|
50
|
+
flex: 1;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&[add] * {
|
|
54
|
+
color: rgba(255, 255, 255, 0.5);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
`
|
|
@@ -1,72 +1,17 @@
|
|
|
1
1
|
import '@material/mwc-icon'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { html, LitElement } from 'lit'
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js'
|
|
5
5
|
|
|
6
6
|
import ScrollBooster from 'scrollbooster'
|
|
7
7
|
|
|
8
8
|
import { privileged } from '@things-factory/auth-base/dist-client'
|
|
9
9
|
import { longpressable } from '@things-factory/utils'
|
|
10
|
+
import { GroupBarStyles } from './group-bar-styles'
|
|
10
11
|
|
|
11
12
|
@customElement('group-bar')
|
|
12
13
|
export default class GroupBar extends LitElement {
|
|
13
|
-
static styles = [
|
|
14
|
-
css`
|
|
15
|
-
:host {
|
|
16
|
-
background-color: var(--group-bar-background-color);
|
|
17
|
-
|
|
18
|
-
overflow-x: hidden;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
ul {
|
|
22
|
-
display: flex;
|
|
23
|
-
list-style: none;
|
|
24
|
-
margin: 0;
|
|
25
|
-
padding: 0;
|
|
26
|
-
white-space: nowrap;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
li {
|
|
30
|
-
display: inline-block;
|
|
31
|
-
padding: 0px 3px;
|
|
32
|
-
|
|
33
|
-
border-bottom: var(--group-bar-line);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
li[active] {
|
|
37
|
-
border-color: var(--group-bar-active-line-color);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
li a {
|
|
41
|
-
display: block;
|
|
42
|
-
padding: 5px 4px 1px 4px;
|
|
43
|
-
text-decoration: none;
|
|
44
|
-
font: var(--group-bar-textbutton);
|
|
45
|
-
color: rgba(255, 255, 255, 0.8);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
li[active] a {
|
|
49
|
-
font: var(--group-bar-textbutton-active);
|
|
50
|
-
color: rgba(255, 255, 255, 1);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
li[padding] {
|
|
54
|
-
flex: 1;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
li[add] {
|
|
58
|
-
padding: 5px 4px 1px 4px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
li[add] * {
|
|
62
|
-
color: rgba(255, 255, 255, 0.5);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
mwc-icon {
|
|
66
|
-
vertical-align: middle;
|
|
67
|
-
}
|
|
68
|
-
`
|
|
69
|
-
]
|
|
14
|
+
static styles = [GroupBarStyles]
|
|
70
15
|
|
|
71
16
|
@property({ type: Array }) groups?: any[]
|
|
72
17
|
@property({ type: String }) groupId?: string
|
|
@@ -1,70 +1,15 @@
|
|
|
1
1
|
import '@material/mwc-icon'
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import { customElement, property
|
|
3
|
+
import { html, LitElement } from 'lit'
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js'
|
|
5
5
|
import ScrollBooster from 'scrollbooster'
|
|
6
6
|
|
|
7
7
|
import { longpressable } from '@things-factory/utils'
|
|
8
|
+
import { GroupBarStyles } from './group-bar-styles'
|
|
8
9
|
|
|
9
10
|
@customElement('play-group-bar')
|
|
10
11
|
export default class PlayGroupBar extends LitElement {
|
|
11
|
-
static styles = [
|
|
12
|
-
css`
|
|
13
|
-
:host {
|
|
14
|
-
background-color: var(--group-bar-background-color);
|
|
15
|
-
|
|
16
|
-
overflow-x: hidden;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
ul {
|
|
20
|
-
display: flex;
|
|
21
|
-
list-style: none;
|
|
22
|
-
margin: 0;
|
|
23
|
-
padding: 0;
|
|
24
|
-
white-space: nowrap;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
li {
|
|
28
|
-
display: inline-block;
|
|
29
|
-
padding: 0px 3px;
|
|
30
|
-
|
|
31
|
-
border-bottom: var(--group-bar-line);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
li[active] {
|
|
35
|
-
border-color: var(--group-bar-active-line-color);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
li a {
|
|
39
|
-
display: block;
|
|
40
|
-
padding: 5px 4px 1px 4px;
|
|
41
|
-
text-decoration: none;
|
|
42
|
-
font: var(--group-bar-textbutton);
|
|
43
|
-
color: rgba(255, 255, 255, 0.8);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
li[active] a {
|
|
47
|
-
font: var(--group-bar-textbutton-active);
|
|
48
|
-
color: rgba(255, 255, 255, 1);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
li[padding] {
|
|
52
|
-
flex: 1;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
li[add] {
|
|
56
|
-
padding: 5px 4px 1px 4px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
li[add] * {
|
|
60
|
-
color: rgba(255, 255, 255, 0.5);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
mwc-icon {
|
|
64
|
-
vertical-align: middle;
|
|
65
|
-
}
|
|
66
|
-
`
|
|
67
|
-
]
|
|
12
|
+
static styles = [GroupBarStyles]
|
|
68
13
|
|
|
69
14
|
@property({ type: Array }) groups: { id: string; name: string }[] = []
|
|
70
15
|
@property({ type: String }) groupId: string = ''
|
|
@@ -83,7 +28,7 @@ export default class PlayGroupBar extends LitElement {
|
|
|
83
28
|
`
|
|
84
29
|
)}
|
|
85
30
|
|
|
86
|
-
<li padding
|
|
31
|
+
<li padding> </li>
|
|
87
32
|
|
|
88
33
|
<li add>
|
|
89
34
|
<mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const GroupBarStyles: import("lit").CSSResult;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const GroupBarStyles = css `
|
|
3
|
+
:host {
|
|
4
|
+
background-color: var(--group-bar-background-color);
|
|
5
|
+
|
|
6
|
+
overflow-x: hidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
ul {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: row;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
list-style: none;
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
li {
|
|
20
|
+
display: inline-block;
|
|
21
|
+
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
border-bottom: var(--group-bar-line);
|
|
24
|
+
align-self: auto;
|
|
25
|
+
min-height: 43px;
|
|
26
|
+
padding: 4px 8px;
|
|
27
|
+
|
|
28
|
+
* {
|
|
29
|
+
vertical-align: text-top;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
a {
|
|
33
|
+
display: block;
|
|
34
|
+
text-decoration: none;
|
|
35
|
+
font: var(--group-bar-textbutton);
|
|
36
|
+
color: rgba(255, 255, 255, 0.8);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&[active] {
|
|
40
|
+
border-color: var(--group-bar-active-line-color);
|
|
41
|
+
|
|
42
|
+
a {
|
|
43
|
+
font: var(--group-bar-textbutton-active);
|
|
44
|
+
color: rgba(255, 255, 255, 1);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&[padding] {
|
|
49
|
+
flex: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&[add] * {
|
|
53
|
+
color: rgba(255, 255, 255, 0.5);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
57
|
+
//# sourceMappingURL=group-bar-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"group-bar-styles.js","sourceRoot":"","sources":["../../client/board-list/group-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDhC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GroupBarStyles = css`\n :host {\n background-color: var(--group-bar-background-color);\n\n overflow-x: hidden;\n }\n\n ul {\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n li {\n display: inline-block;\n\n box-sizing: border-box;\n border-bottom: var(--group-bar-line);\n align-self: auto;\n min-height: 43px;\n padding: 4px 8px;\n\n * {\n vertical-align: text-top;\n }\n\n a {\n display: block;\n text-decoration: none;\n font: var(--group-bar-textbutton);\n color: rgba(255, 255, 255, 0.8);\n }\n\n &[active] {\n border-color: var(--group-bar-active-line-color);\n\n a {\n font: var(--group-bar-textbutton-active);\n color: rgba(255, 255, 255, 1);\n }\n }\n\n &[padding] {\n flex: 1;\n }\n\n &[add] * {\n color: rgba(255, 255, 255, 0.5);\n }\n }\n`\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
|
-
import {
|
|
3
|
+
import { html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import ScrollBooster from 'scrollbooster';
|
|
6
6
|
import { privileged } from '@things-factory/auth-base/dist-client';
|
|
7
7
|
import { longpressable } from '@things-factory/utils';
|
|
8
|
+
import { GroupBarStyles } from './group-bar-styles';
|
|
8
9
|
let GroupBar = class GroupBar extends LitElement {
|
|
9
10
|
render() {
|
|
10
11
|
return html `
|
|
@@ -69,63 +70,7 @@ let GroupBar = class GroupBar extends LitElement {
|
|
|
69
70
|
});
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
|
-
GroupBar.styles = [
|
|
73
|
-
css `
|
|
74
|
-
:host {
|
|
75
|
-
background-color: var(--group-bar-background-color);
|
|
76
|
-
|
|
77
|
-
overflow-x: hidden;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
ul {
|
|
81
|
-
display: flex;
|
|
82
|
-
list-style: none;
|
|
83
|
-
margin: 0;
|
|
84
|
-
padding: 0;
|
|
85
|
-
white-space: nowrap;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
li {
|
|
89
|
-
display: inline-block;
|
|
90
|
-
padding: 0px 3px;
|
|
91
|
-
|
|
92
|
-
border-bottom: var(--group-bar-line);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
li[active] {
|
|
96
|
-
border-color: var(--group-bar-active-line-color);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
li a {
|
|
100
|
-
display: block;
|
|
101
|
-
padding: 5px 4px 1px 4px;
|
|
102
|
-
text-decoration: none;
|
|
103
|
-
font: var(--group-bar-textbutton);
|
|
104
|
-
color: rgba(255, 255, 255, 0.8);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
li[active] a {
|
|
108
|
-
font: var(--group-bar-textbutton-active);
|
|
109
|
-
color: rgba(255, 255, 255, 1);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
li[padding] {
|
|
113
|
-
flex: 1;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
li[add] {
|
|
117
|
-
padding: 5px 4px 1px 4px;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
li[add] * {
|
|
121
|
-
color: rgba(255, 255, 255, 0.5);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
mwc-icon {
|
|
125
|
-
vertical-align: middle;
|
|
126
|
-
}
|
|
127
|
-
`
|
|
128
|
-
];
|
|
73
|
+
GroupBar.styles = [GroupBarStyles];
|
|
129
74
|
__decorate([
|
|
130
75
|
property({ type: Array }),
|
|
131
76
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group-bar.js","sourceRoot":"","sources":["../../client/board-list/group-bar.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"group-bar.js","sourceRoot":"","sources":["../../client/board-list/group-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport ScrollBooster from 'scrollbooster'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\nimport { longpressable } from '@things-factory/utils'\nimport { GroupBarStyles } from './group-bar-styles'\n\n@customElement('group-bar')\nexport default class GroupBar extends LitElement {\n static styles = [GroupBarStyles]\n\n @property({ type: Array }) groups?: any[]\n @property({ type: String }) groupId?: string\n @property({ type: String }) targetPage?: string\n\n private __sb?: ScrollBooster\n\n render() {\n return html`\n <ul>\n <li ?active=${!this.groupId}>\n <a href=${this.targetPage || ''}><mwc-icon>dashboard</mwc-icon></a>\n </li>\n\n <li ?active=${this.groupId === 'favor'}>\n <a href=\"${this.targetPage}/favor\"><mwc-icon>star</mwc-icon></a>\n </li>\n\n ${privileged(\n { privilege: 'mutation', category: 'board' },\n html`<li ?active=${this.groupId === 'mywork'}>\n <a href=\"${this.targetPage}/mywork\"><mwc-icon>engineering</mwc-icon></a>\n </li>`\n )}\n ${(this.groups || []).map(\n group => html`\n <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>\n <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>\n </li>\n `\n )}\n\n <li padding></li>\n\n <li add>\n <mwc-icon @click=${e => this.infoGroup()}>add</mwc-icon>\n </li>\n </ul>\n `\n }\n\n infoGroup(groupId?: string) {\n this.dispatchEvent(\n new CustomEvent('info-group', {\n detail: groupId\n })\n )\n }\n\n onWheelEvent(e) {\n var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n this.scrollLeft -= delta * 40\n\n e.preventDefault()\n }\n\n updated(change) {\n if (change.has('groups')) {\n /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */\n this.__sb && this.__sb.updateMetrics()\n }\n\n if (change.has('groupId')) {\n var active = this.renderRoot.querySelector('li[active]')\n active && active.scrollIntoView()\n }\n }\n\n firstUpdated() {\n var scrollTarget = this.renderRoot.querySelector('ul')\n\n /* long-press */\n longpressable(scrollTarget)\n\n scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)\n\n this.__sb = new ScrollBooster({\n viewport: this,\n content: scrollTarget,\n mode: 'x',\n onUpdate: data => {\n this.scrollLeft = data.position.x\n }\n })\n }\n}\n"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
2
|
import '@material/mwc-icon';
|
|
3
|
-
import {
|
|
3
|
+
import { html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import ScrollBooster from 'scrollbooster';
|
|
6
6
|
import { longpressable } from '@things-factory/utils';
|
|
7
|
+
import { GroupBarStyles } from './group-bar-styles';
|
|
7
8
|
let PlayGroupBar = class PlayGroupBar extends LitElement {
|
|
8
9
|
constructor() {
|
|
9
10
|
super(...arguments);
|
|
@@ -20,7 +21,7 @@ let PlayGroupBar = class PlayGroupBar extends LitElement {
|
|
|
20
21
|
</li>
|
|
21
22
|
`)}
|
|
22
23
|
|
|
23
|
-
<li padding
|
|
24
|
+
<li padding> </li>
|
|
24
25
|
|
|
25
26
|
<li add>
|
|
26
27
|
<mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>
|
|
@@ -66,63 +67,7 @@ let PlayGroupBar = class PlayGroupBar extends LitElement {
|
|
|
66
67
|
});
|
|
67
68
|
}
|
|
68
69
|
};
|
|
69
|
-
PlayGroupBar.styles = [
|
|
70
|
-
css `
|
|
71
|
-
:host {
|
|
72
|
-
background-color: var(--group-bar-background-color);
|
|
73
|
-
|
|
74
|
-
overflow-x: hidden;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
ul {
|
|
78
|
-
display: flex;
|
|
79
|
-
list-style: none;
|
|
80
|
-
margin: 0;
|
|
81
|
-
padding: 0;
|
|
82
|
-
white-space: nowrap;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
li {
|
|
86
|
-
display: inline-block;
|
|
87
|
-
padding: 0px 3px;
|
|
88
|
-
|
|
89
|
-
border-bottom: var(--group-bar-line);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
li[active] {
|
|
93
|
-
border-color: var(--group-bar-active-line-color);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
li a {
|
|
97
|
-
display: block;
|
|
98
|
-
padding: 5px 4px 1px 4px;
|
|
99
|
-
text-decoration: none;
|
|
100
|
-
font: var(--group-bar-textbutton);
|
|
101
|
-
color: rgba(255, 255, 255, 0.8);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
li[active] a {
|
|
105
|
-
font: var(--group-bar-textbutton-active);
|
|
106
|
-
color: rgba(255, 255, 255, 1);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
li[padding] {
|
|
110
|
-
flex: 1;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
li[add] {
|
|
114
|
-
padding: 5px 4px 1px 4px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
li[add] * {
|
|
118
|
-
color: rgba(255, 255, 255, 0.5);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
mwc-icon {
|
|
122
|
-
vertical-align: middle;
|
|
123
|
-
}
|
|
124
|
-
`
|
|
125
|
-
];
|
|
70
|
+
PlayGroupBar.styles = [GroupBarStyles];
|
|
126
71
|
__decorate([
|
|
127
72
|
property({ type: Array }),
|
|
128
73
|
__metadata("design:type", Array)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"play-group-bar.js","sourceRoot":"","sources":["../../client/board-list/play-group-bar.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"play-group-bar.js","sourceRoot":"","sources":["../../client/board-list/play-group-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport ScrollBooster from 'scrollbooster'\n\nimport { longpressable } from '@things-factory/utils'\nimport { GroupBarStyles } from './group-bar-styles'\n\n@customElement('play-group-bar')\nexport default class PlayGroupBar extends LitElement {\n static styles = [GroupBarStyles]\n\n @property({ type: Array }) groups: { id: string; name: string }[] = []\n @property({ type: String }) groupId: string = ''\n @property({ type: String, attribute: 'target-page' }) targetPage: string = ''\n\n private __sb?: ScrollBooster\n\n render() {\n return html`\n <ul>\n ${(this.groups || []).map(\n group => html`\n <li ?active=${this.groupId === group.id} @long-press=${e => this._infoGroup(group)}>\n <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>\n </li>\n `\n )}\n\n <li padding> </li>\n\n <li add>\n <mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>\n </li>\n </ul>\n `\n }\n\n _infoGroup(group?: { id: string; name: string }) {\n this.dispatchEvent(\n new CustomEvent('info-play-group', {\n detail: group\n })\n )\n }\n\n _onWheelEvent(e) {\n var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n this.scrollLeft -= delta * 40\n\n e.preventDefault()\n }\n\n _onClickAdd(e) {\n // TODO Implements\n }\n\n updated(change) {\n if (change.has('groups')) {\n /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */\n this.__sb && this.__sb.updateMetrics()\n }\n\n if (change.has('groupId')) {\n var active = this.renderRoot.querySelector('li[active]')\n active && active.scrollIntoView()\n }\n }\n\n firstUpdated() {\n var scrollTarget = this.renderRoot.querySelector('ul')\n\n /* long-press */\n longpressable(scrollTarget)\n\n scrollTarget!.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)\n\n this.__sb = new ScrollBooster({\n viewport: this,\n content: scrollTarget,\n mode: 'x',\n onUpdate: data => {\n this.scrollLeft = data.position.x\n }\n })\n }\n}\n"]}
|