@operato/context 2.0.0-alpha.9 → 2.0.0-alpha.92
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/CHANGELOG.md +470 -0
- package/demo/index.html +13 -2
- package/dist/src/layouts/ox-context-page-toolbar.d.ts +9 -4
- package/dist/src/layouts/ox-context-page-toolbar.js +30 -10
- package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
- package/dist/src/layouts/ox-context-toolbar.d.ts +5 -3
- package/dist/src/layouts/ox-context-toolbar.js +139 -73
- package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
- package/dist/src/styles/ox-context-toolbar-overlay-style.js +2 -2
- package/dist/src/styles/ox-context-toolbar-overlay-style.js.map +1 -1
- package/dist/src/tools/ox-page-action-context-bar.d.ts +12 -5
- package/dist/src/tools/ox-page-action-context-bar.js +43 -48
- package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
- package/dist/src/tools/ox-page-action-overlay-template.d.ts +2 -2
- package/dist/src/tools/ox-page-action-overlay-template.js +22 -31
- package/dist/src/tools/ox-page-action-overlay-template.js.map +1 -1
- package/dist/src/tools/ox-page-title-bar.d.ts +2 -2
- package/dist/src/tools/ox-page-title-bar.js +6 -8
- package/dist/src/tools/ox-page-title-bar.js.map +1 -1
- package/dist/src/tools/ox-title-bar.d.ts +2 -2
- package/dist/src/tools/ox-title-bar.js +6 -8
- package/dist/src/tools/ox-title-bar.js.map +1 -1
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts +25 -0
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +127 -0
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +24 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.js +85 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -0
- package/dist/stories/ox-context-page-toolbar.stories.d.ts +24 -0
- package/dist/stories/ox-context-page-toolbar.stories.js +93 -0
- package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -0
- package/dist/stories/ox-context-toolbar-complex.stories.d.ts +19 -0
- package/dist/stories/ox-context-toolbar-complex.stories.js +150 -0
- package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -0
- package/dist/stories/ox-context-toolbar-empty.stories.d.ts +19 -0
- package/dist/stories/ox-context-toolbar-empty.stories.js +88 -0
- package/dist/stories/ox-context-toolbar-empty.stories.js.map +1 -0
- package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +19 -0
- package/dist/stories/ox-context-toolbar-overflow.stories.js +131 -0
- package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -0
- package/dist/stories/ox-context-toolbar.stories.d.ts +19 -0
- package/dist/stories/ox-context-toolbar.stories.js +188 -0
- package/dist/stories/ox-context-toolbar.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -20
- package/src/layouts/ox-context-page-toolbar.ts +33 -10
- package/src/layouts/ox-context-toolbar.ts +140 -70
- package/src/styles/ox-context-toolbar-overlay-style.ts +2 -2
- package/src/tools/ox-page-action-context-bar.ts +71 -67
- package/src/tools/ox-page-action-overlay-template.ts +42 -51
- package/src/tools/ox-page-title-bar.ts +6 -8
- package/src/tools/ox-title-bar.ts +6 -8
- package/stories/ox-context-page-toolbar-select-buttons.stories.ts +141 -0
- package/stories/ox-context-page-toolbar-select.stories.ts +99 -0
- package/stories/ox-context-page-toolbar.stories.ts +107 -0
- package/stories/ox-context-toolbar-complex.stories.ts +162 -0
- package/stories/ox-context-toolbar-empty.stories.ts +100 -0
- package/stories/ox-context-toolbar-overflow.stories.ts +143 -0
- package/stories/ox-context-toolbar.stories.ts +200 -0
- package/themes/app-theme.css +161 -0
- package/themes/context-theme.css +74 -0
- package/themes/material-theme.css +38 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
4
|
+
import { customElement, query, state } from 'lit/decorators.js';
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
6
|
import { TOOL_POSITION } from '@operato/layout';
|
|
7
7
|
import { store } from '@operato/shell';
|
|
@@ -11,77 +11,107 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
11
11
|
css `
|
|
12
12
|
:host {
|
|
13
13
|
display: flex;
|
|
14
|
-
position: relative;
|
|
15
14
|
|
|
16
15
|
background-color: var(--context-toolbar-background-color);
|
|
17
|
-
justify-content: space-between;
|
|
18
16
|
box-shadow: var(--context-toolbar-shadow-line);
|
|
19
|
-
}
|
|
20
|
-
#front-end {
|
|
21
|
-
padding-left: var(--context-toolbar-side-padding);
|
|
22
|
-
}
|
|
23
|
-
#rear-end {
|
|
24
|
-
padding-right: var(--context-toolbar-side-padding);
|
|
25
|
-
}
|
|
26
|
-
#front-end mwc-icon,
|
|
27
|
-
#front mwc-icon {
|
|
28
|
-
background-color: var(--context-toolbar-function-button-background-color);
|
|
29
|
-
border: var(--context-toolbar-function-button-border);
|
|
30
|
-
height: var(--context-toolbar-function-button-height);
|
|
31
|
-
margin: var(--context-toolbar-button-margin);
|
|
32
|
-
padding: var(--context-toolbar-function-button-padding);
|
|
33
|
-
color: var(--context-toolbar-function-button-color);
|
|
34
|
-
line-height: var(--context-toolbar-function-button-lineheight);
|
|
35
|
-
cursor: pointer;
|
|
36
|
-
}
|
|
37
|
-
#front-end mwc-icon:first-child,
|
|
38
|
-
#front mwc-icon:first-child {
|
|
39
|
-
border-top-left-radius: var(--context-toolbar-function-button-radius);
|
|
40
|
-
border-bottom-left-radius: var(--context-toolbar-function-button-radius);
|
|
41
|
-
}
|
|
42
|
-
#front-end mwc-icon:last-child,
|
|
43
|
-
#front mwc-icon:last-child {
|
|
44
|
-
border-top-right-radius: var(--context-toolbar-function-button-radius);
|
|
45
|
-
border-bottom-right-radius: var(--context-toolbar-function-button-radius);
|
|
46
|
-
}
|
|
47
17
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
#front-end mwc-icon:hover {
|
|
52
|
-
background-color: var(--context-toolbar-function-button-background-color);
|
|
53
|
-
}
|
|
54
|
-
#front mwc-icon:hover {
|
|
55
|
-
background-color: var(--context-toolbar-function-button-hover-background-color);
|
|
18
|
+
padding: 0;
|
|
19
|
+
|
|
20
|
+
--md-icon-size: 20px;
|
|
56
21
|
}
|
|
57
22
|
|
|
58
|
-
|
|
23
|
+
div[container] {
|
|
59
24
|
flex: 1;
|
|
60
|
-
align-items: center;
|
|
61
|
-
justify-content: end;
|
|
62
|
-
}
|
|
63
25
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
26
|
+
display: flex;
|
|
27
|
+
position: relative;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
|
|
32
|
+
gap: var(--padding-narrow);
|
|
33
|
+
padding: 6px 10px;
|
|
34
|
+
|
|
35
|
+
&:not(:has(> *)) {
|
|
36
|
+
padding: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
div {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: row;
|
|
42
|
+
flex-wrap: nowrap;
|
|
43
|
+
|
|
44
|
+
align-items: center;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
padding: 0;
|
|
47
|
+
}
|
|
74
48
|
|
|
75
|
-
|
|
76
|
-
|
|
49
|
+
#front-end md-icon,
|
|
50
|
+
#front md-icon {
|
|
51
|
+
background-color: var(--context-toolbar-function-button-background-color);
|
|
52
|
+
border: var(--context-toolbar-function-button-border);
|
|
53
|
+
color: var(--context-toolbar-function-button-color);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#front-end md-icon {
|
|
57
|
+
background-color: var(--primary-color);
|
|
58
|
+
}
|
|
59
|
+
#front-end md-icon:hover {
|
|
60
|
+
background-color: var(--context-toolbar-function-button-background-color);
|
|
61
|
+
}
|
|
62
|
+
#front md-icon:hover {
|
|
63
|
+
background-color: var(--context-toolbar-function-button-hover-background-color);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
md-icon {
|
|
67
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
68
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
69
|
+
border-radius: var(--button-border-radius);
|
|
70
|
+
padding: var(--iconbtn-padding, 2px);
|
|
71
|
+
|
|
72
|
+
color: var(--primary-color);
|
|
73
|
+
|
|
74
|
+
&:hover {
|
|
75
|
+
background-color: var(--primary-color);
|
|
76
|
+
|
|
77
|
+
color: var(--theme-white-color);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
div md-icon {
|
|
82
|
+
border-radius: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
div md-icon:first-child {
|
|
86
|
+
border-top-left-radius: var(--context-toolbar-function-button-radius);
|
|
87
|
+
border-bottom-left-radius: var(--context-toolbar-function-button-radius);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
div md-icon:last-child {
|
|
91
|
+
border-top-right-radius: var(--context-toolbar-function-button-radius);
|
|
92
|
+
border-bottom-right-radius: var(--context-toolbar-function-button-radius);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
#center {
|
|
96
|
+
flex: 1;
|
|
97
|
+
justify-content: end;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
* {
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
}
|
|
77
103
|
}
|
|
78
104
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
105
|
+
@media only screen and (max-width: 460px) {
|
|
106
|
+
div[container] {
|
|
107
|
+
padding: 0;
|
|
108
|
+
gap: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
div[container] div md-icon {
|
|
112
|
+
border-radius: 0;
|
|
113
|
+
border-right-width: 0;
|
|
114
|
+
}
|
|
85
115
|
}
|
|
86
116
|
`
|
|
87
117
|
];
|
|
@@ -102,20 +132,53 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
102
132
|
let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
|
|
103
133
|
let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
|
|
104
134
|
return html `
|
|
105
|
-
<div
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
135
|
+
<div container>
|
|
136
|
+
${frontEndTools.length > 0
|
|
137
|
+
? html `<div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
138
|
+
: nothing}
|
|
139
|
+
${frontTools.length > 0
|
|
140
|
+
? html `<div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
141
|
+
: nothing}
|
|
142
|
+
${centerTools.length > 0
|
|
143
|
+
? html `<div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
144
|
+
: nothing}
|
|
145
|
+
${rearTools.length > 0
|
|
146
|
+
? html `<div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
147
|
+
: nothing}
|
|
148
|
+
${rearEndTools.length > 0
|
|
149
|
+
? html `<div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
150
|
+
: nothing}
|
|
151
|
+
</div>
|
|
114
152
|
`;
|
|
115
153
|
}
|
|
154
|
+
updated(changes) {
|
|
155
|
+
requestAnimationFrame(() => {
|
|
156
|
+
/*
|
|
157
|
+
하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.
|
|
158
|
+
&:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.
|
|
159
|
+
&:not(:has(> *)) 가 필요없으나, 남겨 두었음.
|
|
160
|
+
*/
|
|
161
|
+
if (!this.container) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
const children = this.container.querySelectorAll('*');
|
|
165
|
+
let zero = true;
|
|
166
|
+
// 모든 하위 엘리먼트의 높이를 확인
|
|
167
|
+
for (const child of Array.from(children)) {
|
|
168
|
+
if (child.offsetHeight !== 0) {
|
|
169
|
+
zero = false;
|
|
170
|
+
break;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
// 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경
|
|
174
|
+
this.container.style.padding = zero ? '0' : '6px 10px';
|
|
175
|
+
});
|
|
176
|
+
}
|
|
116
177
|
stateChanged(state) {
|
|
117
|
-
|
|
118
|
-
|
|
178
|
+
if (state.context) {
|
|
179
|
+
this.tools = state.context.tools || [];
|
|
180
|
+
this.context = state.route.context || {};
|
|
181
|
+
}
|
|
119
182
|
}
|
|
120
183
|
};
|
|
121
184
|
__decorate([
|
|
@@ -124,6 +187,9 @@ __decorate([
|
|
|
124
187
|
__decorate([
|
|
125
188
|
state()
|
|
126
189
|
], ContextToolbar.prototype, "tools", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
query('[container]')
|
|
192
|
+
], ContextToolbar.prototype, "container", void 0);
|
|
127
193
|
ContextToolbar = __decorate([
|
|
128
194
|
customElement('ox-context-toolbar')
|
|
129
195
|
], ContextToolbar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n\n background-color: var(--context-toolbar-background-color);\n box-shadow: var(--context-toolbar-shadow-line);\n\n padding: 0;\n\n --md-icon-size: 20px;\n }\n\n div[container] {\n flex: 1;\n\n display: flex;\n position: relative;\n overflow: hidden;\n\n justify-content: space-between;\n\n gap: var(--padding-narrow);\n padding: 6px 10px;\n\n &:not(:has(> *)) {\n padding: 0;\n }\n\n div {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n\n align-items: center;\n overflow: hidden;\n padding: 0;\n }\n\n #front-end md-icon,\n #front md-icon {\n background-color: var(--context-toolbar-function-button-background-color);\n border: var(--context-toolbar-function-button-border);\n color: var(--context-toolbar-function-button-color);\n }\n\n #front-end md-icon {\n background-color: var(--primary-color);\n }\n #front-end md-icon:hover {\n background-color: var(--context-toolbar-function-button-background-color);\n }\n #front md-icon:hover {\n background-color: var(--context-toolbar-function-button-hover-background-color);\n }\n\n md-icon {\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n padding: var(--iconbtn-padding, 2px);\n\n color: var(--primary-color);\n\n &:hover {\n background-color: var(--primary-color);\n\n color: var(--theme-white-color);\n }\n }\n\n div md-icon {\n border-radius: 0;\n }\n\n div md-icon:first-child {\n border-top-left-radius: var(--context-toolbar-function-button-radius);\n border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n }\n\n div md-icon:last-child {\n border-top-right-radius: var(--context-toolbar-function-button-radius);\n border-bottom-right-radius: var(--context-toolbar-function-button-radius);\n }\n\n #center {\n flex: 1;\n justify-content: end;\n }\n\n * {\n cursor: pointer;\n }\n }\n\n @media only screen and (max-width: 460px) {\n div[container] {\n padding: 0;\n gap: 0;\n }\n\n div[container] div md-icon {\n border-radius: 0;\n border-right-width: 0;\n }\n }\n `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\n\n @query('[container]') private container!: HTMLDivElement\n\n render() {\n if (this.context.toolbar === false) {\n return nothing\n }\n\n let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n let tools = (this.tools || []).filter(tool => {\n if (!tool.context || contextKeys.includes(tool.context)) {\n return tool\n }\n })\n\n let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n return html`\n <div container>\n ${frontEndTools.length > 0\n ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${frontTools.length > 0\n ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${centerTools.length > 0\n ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearTools.length > 0\n ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n requestAnimationFrame(() => {\n /*\n 하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.\n &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.\n &:not(:has(> *)) 가 필요없으나, 남겨 두었음.\n */\n if (!this.container) {\n return\n }\n\n const children = this.container.querySelectorAll('*')\n\n let zero = true\n\n // 모든 하위 엘리먼트의 높이를 확인\n for (const child of Array.from(children)) {\n if ((child as HTMLElement).offsetHeight !== 0) {\n zero = false\n break\n }\n }\n\n // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경\n this.container.style.padding = zero ? '0' : '6px 10px'\n })\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context.tools || []\n this.context = state.route.context || {}\n }\n }\n}\n"]}
|
|
@@ -22,7 +22,7 @@ export const ContextToolbarOverlayStyle = css `
|
|
|
22
22
|
padding: var(--context-ui-list-padding);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
li >
|
|
25
|
+
li > md-icon {
|
|
26
26
|
font-size: 1em;
|
|
27
27
|
|
|
28
28
|
padding: var(--context-ui-padding);
|
|
@@ -36,7 +36,7 @@ export const ContextToolbarOverlayStyle = css `
|
|
|
36
36
|
color: var(--context-ui-list-color);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
li:hover
|
|
39
|
+
li:hover md-icon,
|
|
40
40
|
li:hover span {
|
|
41
41
|
color: #fff;
|
|
42
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-toolbar-overlay-style.js","sourceRoot":"","sources":["../../../src/styles/ox-context-toolbar-overlay-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ContextToolbarOverlayStyle = css`\n :host {\n display: block;\n\n background-color: var(--context-ui-background-color);\n box-shadow: var(--context-ui-box-shadow);\n padding: var(--context-ui-padding);\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n overflow-y: auto;\n }\n\n li {\n display: flex;\n\n border-bottom: var(--context-ui-list-border-bottom);\n padding: var(--context-ui-list-padding);\n }\n\n li >
|
|
1
|
+
{"version":3,"file":"ox-context-toolbar-overlay-style.js","sourceRoot":"","sources":["../../../src/styles/ox-context-toolbar-overlay-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ContextToolbarOverlayStyle = css`\n :host {\n display: block;\n\n background-color: var(--context-ui-background-color);\n box-shadow: var(--context-ui-box-shadow);\n padding: var(--context-ui-padding);\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n overflow-y: auto;\n }\n\n li {\n display: flex;\n\n border-bottom: var(--context-ui-list-border-bottom);\n padding: var(--context-ui-list-padding);\n }\n\n li > md-icon {\n font-size: 1em;\n\n padding: var(--context-ui-padding);\n color: var(--context-ui-list-color);\n }\n\n li > span {\n margin: auto 0;\n flex: 1;\n\n color: var(--context-ui-list-color);\n }\n\n li:hover md-icon,\n li:hover span {\n color: #fff;\n }\n\n li:hover {\n cursor: pointer;\n\n border-bottom: var(--context-ui-list-border-hover-bottom);\n }\n\n @media (max-width: 460px) {\n :host {\n min-width: 100%;\n box-shadow: none;\n border-radius: 0;\n }\n }\n`\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
2
|
-
import '@material/mwc-icon';
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
3
2
|
import './ox-page-action-overlay-template.js';
|
|
4
3
|
import { LitElement, PropertyValues } from 'lit';
|
|
5
4
|
declare const PageActionContextBar_base: (new (...args: any[]) => {
|
|
@@ -11,15 +10,23 @@ declare const PageActionContextBar_base: (new (...args: any[]) => {
|
|
|
11
10
|
}) & typeof LitElement;
|
|
12
11
|
export declare class PageActionContextBar extends PageActionContextBar_base {
|
|
13
12
|
static get styles(): import("lit").CSSResult[];
|
|
14
|
-
actions:
|
|
13
|
+
actions: {
|
|
14
|
+
title: string;
|
|
15
|
+
action: () => void;
|
|
16
|
+
icon: string;
|
|
17
|
+
type: string;
|
|
18
|
+
select: string[];
|
|
19
|
+
href?: string;
|
|
20
|
+
emphasis?: boolean;
|
|
21
|
+
}[];
|
|
15
22
|
private overflown;
|
|
16
23
|
private overflownUpdaterThrottle;
|
|
17
24
|
private resizeCallback;
|
|
18
25
|
get overflownUpdater(): any;
|
|
19
26
|
connectedCallback(): void;
|
|
20
27
|
disconnectedCallback(): void;
|
|
21
|
-
render(): import("lit").TemplateResult<1>;
|
|
22
|
-
renderActions(): import("lit").TemplateResult<1>;
|
|
28
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
29
|
+
renderActions(): import("lit-html").TemplateResult<1>;
|
|
23
30
|
updated(changed: PropertyValues<this>): Promise<void>;
|
|
24
31
|
stateChanged(state: any): void;
|
|
25
32
|
showMore(): void;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
3
|
-
import '@material/mwc-icon';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
4
3
|
import './ox-page-action-overlay-template.js';
|
|
5
4
|
import { css, html, LitElement } from 'lit';
|
|
6
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
5
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
7
6
|
import throttle from 'lodash-es/throttle';
|
|
8
7
|
import { connect } from 'pwa-helpers/connect-mixin';
|
|
9
8
|
import { openOverlay } from '@operato/layout';
|
|
10
9
|
import { store } from '@operato/shell';
|
|
11
10
|
import { sleep } from '@operato/utils';
|
|
11
|
+
import { ButtonContainerStyles } from '@operato/styles';
|
|
12
12
|
let PageActionContextBar = class PageActionContextBar extends connect(store)(LitElement) {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
@@ -17,58 +17,48 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
17
17
|
}
|
|
18
18
|
static get styles() {
|
|
19
19
|
return [
|
|
20
|
+
ButtonContainerStyles,
|
|
20
21
|
css `
|
|
21
22
|
:host {
|
|
22
23
|
display: flex;
|
|
23
24
|
overflow: hidden;
|
|
24
|
-
|
|
25
|
+
gap: var(--padding-narrow);
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
:host *:focus {
|
|
28
29
|
outline: none;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
mwc-button {
|
|
32
|
-
white-space: nowrap;
|
|
33
|
-
margin: var(--context-action-bar-button-margin);
|
|
34
|
-
border-radius: var(--context-action-bar-more-button-border-radius);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
[danger] {
|
|
38
|
-
--mdc-theme-primary: var(--mdc-danger-button-primary-color);
|
|
39
|
-
--mdc-button-outline-color: var(--mdc-danger-button-outline-color);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
32
|
[more] {
|
|
43
33
|
position: absolute;
|
|
44
34
|
top: 0;
|
|
45
|
-
right:
|
|
35
|
+
right: 0;
|
|
46
36
|
background-color: var(--context-action-bar-more-button-background-color);
|
|
47
37
|
box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
|
|
48
38
|
padding: var(--context-action-bar-more-button-padding);
|
|
49
39
|
color: var(--context-action-bar-more-button-color);
|
|
40
|
+
padding: 11px 10px;
|
|
50
41
|
font-size: 2rem;
|
|
51
42
|
}
|
|
52
43
|
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
select,
|
|
45
|
+
input[type='text'] {
|
|
46
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
55
47
|
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
border-radius: var(--button-border-radius);
|
|
49
|
+
padding: 0 var(--padding-narrow);
|
|
50
|
+
|
|
51
|
+
font-size: var(--fontsize-default);
|
|
52
|
+
color: var(--secondary-color);
|
|
58
53
|
}
|
|
59
54
|
|
|
60
55
|
@media screen and (max-width: 460px) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
--mdc-shape-small: var(--context-action-bar-more-button-border-radius);
|
|
56
|
+
:host {
|
|
57
|
+
gap: 0;
|
|
64
58
|
}
|
|
65
59
|
|
|
66
60
|
[more] {
|
|
67
|
-
|
|
68
|
-
margin-top: -10px;
|
|
69
|
-
right: 0px;
|
|
70
|
-
padding: var(--padding-default);
|
|
71
|
-
font-size: 2rem;
|
|
61
|
+
margin-top: -7px;
|
|
72
62
|
}
|
|
73
63
|
}
|
|
74
64
|
|
|
@@ -103,35 +93,34 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
103
93
|
render() {
|
|
104
94
|
return html `
|
|
105
95
|
${this.renderActions()}
|
|
106
|
-
${this.overflown ? html ` <
|
|
96
|
+
${this.overflown ? html ` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html ``}
|
|
107
97
|
`;
|
|
108
98
|
}
|
|
109
99
|
renderActions() {
|
|
110
100
|
return html `
|
|
111
101
|
${this.actions.map(($action, idx) => {
|
|
112
102
|
let { type, title, icon, action, select, href, emphasis } = $action;
|
|
113
|
-
let { outlined, raised, dense, danger } = emphasis || {};
|
|
103
|
+
let { outlined, raised, dense, danger, filled } = emphasis || {};
|
|
114
104
|
return type == 'text'
|
|
115
105
|
? html ` <span @click=${action}>${title}</span> `
|
|
116
106
|
: type == 'select' || (select && select.length > 0)
|
|
117
107
|
? html `
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
108
|
+
<select @change=${action}>
|
|
109
|
+
${select.map((option) => html ` <option>${option}</option> `)}
|
|
110
|
+
</select>
|
|
111
|
+
`
|
|
122
112
|
: type == 'link'
|
|
123
113
|
? html ` <a href=${href}>${title}</a> `
|
|
124
114
|
: type == 'icon'
|
|
125
|
-
? html `<
|
|
115
|
+
? html `<md-icon @click=${action}>${icon}</md-icon>`
|
|
126
116
|
: html `
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
@click=${async (e) => {
|
|
117
|
+
<button
|
|
118
|
+
?dense=${dense}
|
|
119
|
+
?raised=${raised}
|
|
120
|
+
?outlined=${outlined}
|
|
121
|
+
?danger=${danger}
|
|
122
|
+
?filled=${filled}
|
|
123
|
+
@click=${async (e) => {
|
|
135
124
|
var _a;
|
|
136
125
|
/* all actions should be bloked for a second */
|
|
137
126
|
const button = e.currentTarget;
|
|
@@ -149,8 +138,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
149
138
|
button.removeAttribute('working');
|
|
150
139
|
}
|
|
151
140
|
}}
|
|
152
|
-
|
|
153
|
-
|
|
141
|
+
>
|
|
142
|
+
<md-icon>${icon || 'done_all'}</md-icon>
|
|
143
|
+
${title}
|
|
144
|
+
</button>
|
|
145
|
+
`;
|
|
154
146
|
})}
|
|
155
147
|
`;
|
|
156
148
|
}
|
|
@@ -160,8 +152,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
160
152
|
}
|
|
161
153
|
}
|
|
162
154
|
stateChanged(state) {
|
|
163
|
-
var _a
|
|
164
|
-
|
|
155
|
+
var _a;
|
|
156
|
+
const { actions } = ((_a = state.route) === null || _a === void 0 ? void 0 : _a.context) || {};
|
|
157
|
+
if (actions) {
|
|
158
|
+
this.actions = actions.filter((action) => !!action);
|
|
159
|
+
}
|
|
165
160
|
}
|
|
166
161
|
showMore() {
|
|
167
162
|
openOverlay('context-toolbar-overlay', {
|
|
@@ -170,7 +165,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
170
165
|
}
|
|
171
166
|
};
|
|
172
167
|
__decorate([
|
|
173
|
-
|
|
168
|
+
property({ type: Array })
|
|
174
169
|
], PageActionContextBar.prototype, "actions", void 0);
|
|
175
170
|
__decorate([
|
|
176
171
|
state()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAE7C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAGhD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAA7D;;QA4DsB,YAAO,GAQ5B,EAAE,CAAA;QACS,cAAS,GAAY,KAAK,CAAA;IA0G7C,CAAC;IA9KC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,qBAAqB;YACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoDF;SACF,CAAA;IACH,CAAC;IAgBD,IAAI,gBAAgB;QAClB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACnC,IAAI,CAAC,wBAAwB,GAAG,QAAQ,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;YACtD,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;QAED,OAAO,IAAI,CAAC,wBAAwB,CAAA;IACtC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAA;QAEnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;IACxD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;KAC1G,CAAA;IACH,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;YAClC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAc,CAAA;YAC1E,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;YAEhE,OAAO,IAAI,IAAI,MAAM;gBACnB,CAAC,CAAC,IAAI,CAAA,iBAAiB,MAAM,IAAI,KAAK,UAAU;gBAChD,CAAC,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;oBACjD,CAAC,CAAC,IAAI,CAAA;kCACgB,MAAM;oBACpB,MAAM,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,IAAI,CAAA,YAAY,MAAM,YAAY,CAAC;;eAEpE;oBACH,CAAC,CAAC,IAAI,IAAI,MAAM;wBACd,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,IAAI,KAAK,OAAO;wBACtC,CAAC,CAAC,IAAI,IAAI,MAAM;4BACd,CAAC,CAAC,IAAI,CAAA,mBAAmB,MAAM,IAAI,IAAI,YAAY;4BACnD,CAAC,CAAC,IAAI,CAAA;;+BAES,KAAK;gCACJ,MAAM;kCACJ,QAAQ;gCACV,MAAM;gCACN,MAAM;+BACP,KAAK,EAAE,CAAa,EAAE,EAAE;;gCAC/B,+CAA+C;gCAC/C,MAAM,MAAM,GAAG,CAAC,CAAC,aAAoB,CAAA;gCACrC,MAAM,CAAC,IAAI,GAAG,cAAc,CAAA;gCAC5B,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;gCACpC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAA;gCAEtB,IAAI,CAAC;oCACH,MAAM,MAAM,EAAE,CAAA;gCAChB,CAAC;wCAAS,CAAC;oCACT,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA;oCACjB,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAA;oCACvB,wEAAwE;oCACxE,MAAM,CAAC,IAAI,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,0CAAE,IAAI,KAAI,UAAU,CAAA;oCACnD,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;gCACnC,CAAC;4BACH,CAAC;;iCAEU,IAAI,IAAI,UAAU;wBAC3B,KAAK;;mBAEV,CAAA;QACb,CAAC,CAAC;KACH,CAAA;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAU;;QACrB,MAAM,EAAE,OAAO,EAAE,GAAG,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,OAAO,KAAI,EAAE,CAAA;QAE9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAC1D,CAAC;IACH,CAAC;IAED,QAAQ;QACN,WAAW,CAAC,yBAAyB,EAAE;YACrC,QAAQ,EAAE,IAAI,CAAA,qEAAqE;SACpF,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAnH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAQlB;AACS;IAAhB,KAAK,EAAE;uDAAmC;AArEhC,oBAAoB;IADhC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,oBAAoB,CA+KhC","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n overflow: hidden;\n gap: var(--padding-narrow);\n }\n\n :host *:focus {\n outline: none;\n }\n\n [more] {\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--context-action-bar-more-button-background-color);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding);\n color: var(--context-action-bar-more-button-color);\n padding: 11px 10px;\n font-size: 2rem;\n }\n\n select,\n input[type='text'] {\n background-color: var(--button-background-color, #fafbfc);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: var(--button-border-radius);\n padding: 0 var(--padding-narrow);\n\n font-size: var(--fontsize-default);\n color: var(--secondary-color);\n }\n\n @media screen and (max-width: 460px) {\n :host {\n gap: 0;\n }\n\n [more] {\n margin-top: -7px;\n }\n }\n\n @keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n `\n ]\n }\n\n @property({ type: Array }) actions: {\n title: string\n action: () => void\n icon: string\n type: string\n select: string[]\n href?: string\n emphasis?: boolean\n }[] = []\n @state() private overflown: boolean = false\n\n private overflownUpdaterThrottle: any\n private resizeCallback: any\n\n get overflownUpdater() {\n if (!this.overflownUpdaterThrottle) {\n this.overflownUpdaterThrottle = throttle(() => {\n this.overflown = this.scrollWidth > this.clientWidth\n }, 100)\n }\n\n return this.overflownUpdaterThrottle\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.resizeCallback = () => this.overflownUpdater()\n\n window.addEventListener('resize', this.resizeCallback)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n window.removeEventListener('resize', this.resizeCallback)\n }\n\n render() {\n return html`\n ${this.renderActions()}\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n `\n }\n\n renderActions() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { outlined, raised, dense, danger, filled } = emphasis || {}\n\n return type == 'text'\n ? html` <span @click=${action}>${title}</span> `\n : type == 'select' || (select && select.length > 0)\n ? html`\n <select @change=${action}>\n ${select.map((option: any) => html` <option>${option}</option> `)}\n </select>\n `\n : type == 'link'\n ? html` <a href=${href}>${title}</a> `\n : type == 'icon'\n ? html`<md-icon @click=${action}>${icon}</md-icon>`\n : html`\n <button\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\n ?filled=${filled}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n button.icon = 'rotate_right'\n button.setAttribute('working', true)\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000)\n button.disabled = false\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n button.icon = this.actions[idx]?.icon || 'done_all'\n button.removeAttribute('working')\n }\n }}\n >\n <md-icon>${icon || 'done_all'}</md-icon>\n ${title}\n </button>\n `\n })}\n `\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('actions')) {\n requestAnimationFrame(this.overflownUpdater)\n }\n }\n\n stateChanged(state: any) {\n const { actions } = state.route?.context || {}\n\n if (actions) {\n this.actions = actions.filter((action: any) => !!action)\n }\n }\n\n showMore() {\n openOverlay('context-toolbar-overlay', {\n template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n })\n }\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
|
|
4
4
|
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
@@ -10,7 +10,7 @@ declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
|
|
|
10
10
|
export declare class PageActionOverlayTemplate extends PageActionOverlayTemplate_base {
|
|
11
11
|
static get styles(): import("lit").CSSResult[];
|
|
12
12
|
private actions;
|
|
13
|
-
render(): import("lit").TemplateResult<1>;
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
14
|
stateChanged(state: any): void;
|
|
15
15
|
}
|
|
16
16
|
export {};
|