@operato/context 1.1.19
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/.editorconfig +29 -0
- package/.storybook/main.js +3 -0
- package/.storybook/server.mjs +8 -0
- package/CHANGELOG.md +11 -0
- package/README.md +75 -0
- package/demo/index.html +32 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +2 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/layouts/ox-context-toolbar.d.ts +17 -0
- package/dist/src/layouts/ox-context-toolbar.js +127 -0
- package/dist/src/layouts/ox-context-toolbar.js.map +1 -0
- package/dist/src/styles/ox-context-toolbar-overlay-style.d.ts +1 -0
- package/dist/src/styles/ox-context-toolbar-overlay-style.js +58 -0
- package/dist/src/styles/ox-context-toolbar-overlay-style.js.map +1 -0
- package/dist/src/tools/ox-page-action-context-bar.d.ts +27 -0
- package/dist/src/tools/ox-page-action-context-bar.js +172 -0
- package/dist/src/tools/ox-page-action-context-bar.js.map +1 -0
- package/dist/src/tools/ox-page-action-overlay-template.d.ts +16 -0
- package/dist/src/tools/ox-page-action-overlay-template.js +116 -0
- package/dist/src/tools/ox-page-action-overlay-template.js.map +1 -0
- package/dist/src/tools/ox-title-bar.d.ts +17 -0
- package/dist/src/tools/ox-title-bar.js +99 -0
- package/dist/src/tools/ox-title-bar.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +101 -0
- package/src/index.ts +1 -0
- package/src/layouts/ox-context-toolbar.ts +125 -0
- package/src/styles/ox-context-toolbar-overlay-style.ts +58 -0
- package/src/tools/ox-page-action-context-bar.ts +176 -0
- package/src/tools/ox-page-action-overlay-template.ts +112 -0
- package/src/tools/ox-title-bar.ts +99 -0
- package/tsconfig.json +23 -0
- package/web-dev-server.config.mjs +27 -0
- package/web-test-runner.config.mjs +41 -0
package/.editorconfig
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# EditorConfig helps developers define and maintain consistent
|
|
2
|
+
# coding styles between different editors and IDEs
|
|
3
|
+
# editorconfig.org
|
|
4
|
+
|
|
5
|
+
root = true
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
[*]
|
|
9
|
+
|
|
10
|
+
# Change these settings to your own preference
|
|
11
|
+
indent_style = space
|
|
12
|
+
indent_size = 2
|
|
13
|
+
|
|
14
|
+
# We recommend you to keep these unchanged
|
|
15
|
+
end_of_line = lf
|
|
16
|
+
charset = utf-8
|
|
17
|
+
trim_trailing_whitespace = true
|
|
18
|
+
insert_final_newline = true
|
|
19
|
+
|
|
20
|
+
[*.md]
|
|
21
|
+
trim_trailing_whitespace = false
|
|
22
|
+
|
|
23
|
+
[*.json]
|
|
24
|
+
indent_size = 2
|
|
25
|
+
|
|
26
|
+
[*.{html,js,md}]
|
|
27
|
+
block_comment_start = /**
|
|
28
|
+
block_comment = *
|
|
29
|
+
block_comment_end = */
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { storybookPlugin } from '@web/dev-server-storybook';
|
|
2
|
+
import baseConfig from '../web-dev-server.config.mjs';
|
|
3
|
+
|
|
4
|
+
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
5
|
+
...baseConfig,
|
|
6
|
+
open: '/',
|
|
7
|
+
plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
|
|
8
|
+
});
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
### [1.1.19](https://github.com/hatiolab/operato/compare/v1.1.18...v1.1.19) (2022-11-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* migrate context-ui from things-factory ([5483ce5](https://github.com/hatiolab/operato/commit/5483ce5da3b0546b63a04a965a0b18f1d87c9317))
|
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# \<mini-layout>
|
|
2
|
+
|
|
3
|
+
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i mini-layout
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<script type="module">
|
|
15
|
+
import 'mini-layout/mini-layout.js'
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<mini-layout></mini-layout>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Linting and formatting
|
|
22
|
+
|
|
23
|
+
To scan the project for linting and formatting errors, run
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm run lint
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
To automatically fix linting and formatting errors, run
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm run format
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Testing with Web Test Runner
|
|
36
|
+
|
|
37
|
+
To execute a single test run:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm run test
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
To run the tests in interactive watch mode run:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
npm run test:watch
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Demoing with Storybook
|
|
50
|
+
|
|
51
|
+
To run a local instance of Storybook for your component, run
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npm run storybook
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
To build a production version of Storybook, run
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm run storybook:build
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Tooling configs
|
|
64
|
+
|
|
65
|
+
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
66
|
+
|
|
67
|
+
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
68
|
+
|
|
69
|
+
## Local Demo with `web-dev-server`
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm start
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
To run a local development server that serves the basic demo located in `demo/index.html`
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<style>
|
|
6
|
+
body {
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
--ox-checkbox-size: 12px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
#demo {
|
|
12
|
+
position: relative;
|
|
13
|
+
height: 300px;
|
|
14
|
+
background-color: lightgray;
|
|
15
|
+
vertical-align: middle;
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
19
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<div id="demo"></div>
|
|
23
|
+
|
|
24
|
+
<script type="module">
|
|
25
|
+
import { html, render } from 'lit'
|
|
26
|
+
|
|
27
|
+
const parent = document.querySelector('#demo')
|
|
28
|
+
|
|
29
|
+
render(html`clike anywhere in this box to utils mini.`, parent)
|
|
30
|
+
</script>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './styles/ox-context-toolbar-overlay-style.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAA","sourcesContent":["export * from './styles/ox-context-toolbar-overlay-style.js'\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
declare const ContextToolbar_base: (new (...args: any[]) => {
|
|
4
|
+
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
5
|
+
connectedCallback(): void;
|
|
6
|
+
disconnectedCallback(): void;
|
|
7
|
+
stateChanged(_state: unknown): void;
|
|
8
|
+
readonly isConnected: boolean;
|
|
9
|
+
}) & typeof LitElement;
|
|
10
|
+
export declare class ContextToolbar extends ContextToolbar_base {
|
|
11
|
+
static get styles(): import("lit").CSSResult[];
|
|
12
|
+
private context;
|
|
13
|
+
private tools?;
|
|
14
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
15
|
+
stateChanged(state: any): void;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/mwc-icon';
|
|
3
|
+
import { css, html, LitElement } from 'lit';
|
|
4
|
+
import { customElement, state } from 'lit/decorators.js';
|
|
5
|
+
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
6
|
+
import { TOOL_POSITION } from '@operato/layout';
|
|
7
|
+
import { store } from '@operato/shell';
|
|
8
|
+
let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
9
|
+
static get styles() {
|
|
10
|
+
return [
|
|
11
|
+
css `
|
|
12
|
+
:host {
|
|
13
|
+
display: flex;
|
|
14
|
+
position: relative;
|
|
15
|
+
|
|
16
|
+
background-color: var(--context-toolbar-background-color);
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
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
|
+
|
|
48
|
+
#front-end mwc-icon {
|
|
49
|
+
background-color: var(--primary-color);
|
|
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);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
#center {
|
|
59
|
+
flex: 1;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: end;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
#center > * {
|
|
65
|
+
align-items: center;
|
|
66
|
+
}
|
|
67
|
+
#rear-end > *,
|
|
68
|
+
#rear > * {
|
|
69
|
+
margin: var(--context-toolbar-button-margin);
|
|
70
|
+
}
|
|
71
|
+
#rear-end {
|
|
72
|
+
align-items: start;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
div > * {
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
div {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-wrap: nowrap;
|
|
82
|
+
align-items: center;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
padding: 0;
|
|
85
|
+
}
|
|
86
|
+
`
|
|
87
|
+
];
|
|
88
|
+
}
|
|
89
|
+
render() {
|
|
90
|
+
let contextKeys = Object.keys(this.context).filter(key => !!this.context[key]);
|
|
91
|
+
let tools = (this.tools || []).filter(tool => {
|
|
92
|
+
if (!tool.context || contextKeys.includes(tool.context))
|
|
93
|
+
return tool;
|
|
94
|
+
});
|
|
95
|
+
let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END);
|
|
96
|
+
let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT);
|
|
97
|
+
let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER);
|
|
98
|
+
let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
|
|
99
|
+
let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
|
|
100
|
+
return html `
|
|
101
|
+
<div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>
|
|
102
|
+
|
|
103
|
+
<div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>
|
|
104
|
+
|
|
105
|
+
<div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>
|
|
106
|
+
|
|
107
|
+
<div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>
|
|
108
|
+
|
|
109
|
+
<div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>
|
|
110
|
+
`;
|
|
111
|
+
}
|
|
112
|
+
stateChanged(state) {
|
|
113
|
+
this.tools = state.context.tools;
|
|
114
|
+
this.context = state.route.context;
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
__decorate([
|
|
118
|
+
state()
|
|
119
|
+
], ContextToolbar.prototype, "context", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
state()
|
|
122
|
+
], ContextToolbar.prototype, "tools", void 0);
|
|
123
|
+
ContextToolbar = __decorate([
|
|
124
|
+
customElement('ox-context-toolbar')
|
|
125
|
+
], ContextToolbar);
|
|
126
|
+
export { ContextToolbar };
|
|
127
|
+
//# sourceMappingURL=ox-context-toolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAmB,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG/B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2EF;SACF,CAAA;IACH,CAAC;IAKD,MAAM;QACJ,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9E,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;gBAAE,OAAO,IAAI,CAAA;QACtE,CAAC,CAAC,CAAA;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,SAAS,CAAC,CAAA;QAClF,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;QAC3E,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAAA;QAC7E,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QACzE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;4BACa,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;;wBAEvD,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;;yBAE/C,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;;uBAEnD,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;;2BAE3C,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;KACxE,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;QAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;CACF,CAAA;AAhCU;IAAR,KAAK,EAAE;+CAAqB;AACpB;IAAR,KAAK,EAAE;6CAAsB;AAnFnB,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAkH1B;SAlHY,cAAc","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } 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 position: relative;\n\n background-color: var(--context-toolbar-background-color);\n justify-content: space-between;\n box-shadow: var(--context-toolbar-shadow-line);\n }\n #front-end {\n padding-left: var(--context-toolbar-side-padding);\n }\n #rear-end {\n padding-right: var(--context-toolbar-side-padding);\n }\n #front-end mwc-icon,\n #front mwc-icon {\n background-color: var(--context-toolbar-function-button-background-color);\n border: var(--context-toolbar-function-button-border);\n height: var(--context-toolbar-function-button-height);\n margin: var(--context-toolbar-button-margin);\n padding: var(--context-toolbar-function-button-padding);\n color: var(--context-toolbar-function-button-color);\n line-height: var(--context-toolbar-function-button-lineheight);\n cursor: pointer;\n }\n #front-end mwc-icon:first-child,\n #front mwc-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 #front-end mwc-icon:last-child,\n #front mwc-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 #front-end mwc-icon {\n background-color: var(--primary-color);\n }\n #front-end mwc-icon:hover {\n background-color: var(--context-toolbar-function-button-background-color);\n }\n #front mwc-icon:hover {\n background-color: var(--context-toolbar-function-button-hover-background-color);\n }\n\n #center {\n flex: 1;\n align-items: center;\n justify-content: end;\n }\n\n #center > * {\n align-items: center;\n }\n #rear-end > *,\n #rear > * {\n margin: var(--context-toolbar-button-margin);\n }\n #rear-end {\n align-items: start;\n }\n\n div > * {\n align-items: center;\n }\n\n div {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n overflow: hidden;\n padding: 0;\n }\n `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\n\n render() {\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)) return tool\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 id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>\n\n <div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>\n `\n }\n\n stateChanged(state: any) {\n this.tools = state.context.tools\n this.context = state.route.context\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ContextToolbarOverlayStyle: import("lit").CSSResult;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const ContextToolbarOverlayStyle = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
|
|
6
|
+
background-color: var(--context-ui-background-color);
|
|
7
|
+
box-shadow: var(--context-ui-box-shadow);
|
|
8
|
+
padding: var(--context-ui-padding);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
ul {
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
list-style: none;
|
|
15
|
+
overflow-y: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
li {
|
|
19
|
+
display: flex;
|
|
20
|
+
|
|
21
|
+
border-bottom: var(--context-ui-list-border-bottom);
|
|
22
|
+
padding: var(--context-ui-list-padding);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
li > mwc-icon {
|
|
26
|
+
font-size: 1em;
|
|
27
|
+
|
|
28
|
+
padding: var(--context-ui-padding);
|
|
29
|
+
color: var(--context-ui-list-color);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
li > span {
|
|
33
|
+
margin: auto 0;
|
|
34
|
+
flex: 1;
|
|
35
|
+
|
|
36
|
+
color: var(--context-ui-list-color);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
li:hover mwc-icon,
|
|
40
|
+
li:hover span {
|
|
41
|
+
color: #fff;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
li:hover {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
|
|
47
|
+
border-bottom: var(--context-ui-list-border-hover-bottom);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (max-width: 460px) {
|
|
51
|
+
:host {
|
|
52
|
+
min-width: 100%;
|
|
53
|
+
box-shadow: none;
|
|
54
|
+
border-radius: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
`;
|
|
58
|
+
//# sourceMappingURL=ox-context-toolbar-overlay-style.js.map
|
|
@@ -0,0 +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 > mwc-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 mwc-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"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import '@material/mwc-button';
|
|
2
|
+
import '@material/mwc-icon';
|
|
3
|
+
import './ox-page-action-overlay-template.js';
|
|
4
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
5
|
+
declare const PageActionContextBar_base: (new (...args: any[]) => {
|
|
6
|
+
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
disconnectedCallback(): void;
|
|
9
|
+
stateChanged(_state: unknown): void;
|
|
10
|
+
readonly isConnected: boolean;
|
|
11
|
+
}) & typeof LitElement;
|
|
12
|
+
export declare class PageActionContextBar extends PageActionContextBar_base {
|
|
13
|
+
static get styles(): import("lit").CSSResult[];
|
|
14
|
+
actions: any[];
|
|
15
|
+
private overflown;
|
|
16
|
+
private overflownUpdaterThrottle;
|
|
17
|
+
private resizeCallback;
|
|
18
|
+
get overflownUpdater(): any;
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
disconnectedCallback(): void;
|
|
21
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
22
|
+
renderActions(): import("lit-html").TemplateResult<1>;
|
|
23
|
+
updated(changed: PropertyValues<this>): Promise<void>;
|
|
24
|
+
stateChanged(state: any): void;
|
|
25
|
+
showMore(): void;
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/mwc-button';
|
|
3
|
+
import '@material/mwc-icon';
|
|
4
|
+
import './ox-page-action-overlay-template.js';
|
|
5
|
+
import { css, html, LitElement } from 'lit';
|
|
6
|
+
import { customElement, state } from 'lit/decorators.js';
|
|
7
|
+
import throttle from 'lodash-es/throttle';
|
|
8
|
+
import { connect } from 'pwa-helpers/connect-mixin';
|
|
9
|
+
import { openOverlay } from '@operato/layout';
|
|
10
|
+
import { store } from '@operato/shell';
|
|
11
|
+
import { sleep } from '@operato/utils';
|
|
12
|
+
let PageActionContextBar = class PageActionContextBar extends connect(store)(LitElement) {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.actions = [];
|
|
16
|
+
this.overflown = false;
|
|
17
|
+
}
|
|
18
|
+
static get styles() {
|
|
19
|
+
return [
|
|
20
|
+
css `
|
|
21
|
+
:host {
|
|
22
|
+
display: flex;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
position: relative;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host *:focus {
|
|
28
|
+
outline: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
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
|
+
[more] {
|
|
43
|
+
position: absolute;
|
|
44
|
+
right: 0;
|
|
45
|
+
background-color: var(--context-action-bar-more-button-background-color);
|
|
46
|
+
box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
|
|
47
|
+
padding: var(--context-action-bar-more-button-padding);
|
|
48
|
+
color: var(--context-action-bar-more-button-color);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media screen and (max-width: 460px) {
|
|
52
|
+
mwc-button {
|
|
53
|
+
--mdc-button-horizontal-padding: var(--padding-default);
|
|
54
|
+
--mdc-shape-small: var(--context-action-bar-more-button-border-radius);
|
|
55
|
+
}
|
|
56
|
+
[more] {
|
|
57
|
+
position: fixed;
|
|
58
|
+
margin-top: -10px;
|
|
59
|
+
-webkit-border-top-left-radius: 10px;
|
|
60
|
+
-moz-border-radius-topleft: 10px;
|
|
61
|
+
border-top-left-radius: 10px;
|
|
62
|
+
padding: var(--padding-default);
|
|
63
|
+
font-size: 2rem;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@keyframes rotate {
|
|
68
|
+
from {
|
|
69
|
+
transform: rotate(0deg);
|
|
70
|
+
}
|
|
71
|
+
to {
|
|
72
|
+
transform: rotate(360deg);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
`
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
get overflownUpdater() {
|
|
79
|
+
if (!this.overflownUpdaterThrottle) {
|
|
80
|
+
this.overflownUpdaterThrottle = throttle(() => {
|
|
81
|
+
this.overflown = this.scrollWidth > this.clientWidth;
|
|
82
|
+
}, 100);
|
|
83
|
+
}
|
|
84
|
+
return this.overflownUpdaterThrottle;
|
|
85
|
+
}
|
|
86
|
+
connectedCallback() {
|
|
87
|
+
super.connectedCallback();
|
|
88
|
+
this.resizeCallback = () => this.overflownUpdater();
|
|
89
|
+
window.addEventListener('resize', this.resizeCallback);
|
|
90
|
+
}
|
|
91
|
+
disconnectedCallback() {
|
|
92
|
+
super.disconnectedCallback();
|
|
93
|
+
window.removeEventListener('resize', this.resizeCallback);
|
|
94
|
+
}
|
|
95
|
+
render() {
|
|
96
|
+
return html `
|
|
97
|
+
${this.renderActions()}
|
|
98
|
+
${this.overflown ? html ` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html ``}
|
|
99
|
+
`;
|
|
100
|
+
}
|
|
101
|
+
renderActions() {
|
|
102
|
+
return html `
|
|
103
|
+
${this.actions.map(($action, idx) => {
|
|
104
|
+
let { type, title, icon, action, select, href, emphasis } = $action;
|
|
105
|
+
let { outlined, raised, dense, danger } = emphasis || {};
|
|
106
|
+
return type == 'text'
|
|
107
|
+
? html ` <span>${title}</span> `
|
|
108
|
+
: type == 'select' || (select && select.length > 0)
|
|
109
|
+
? html `
|
|
110
|
+
<select @change=${action}>
|
|
111
|
+
${select.map((option) => html ` <option>${option}</option> `)}
|
|
112
|
+
</select>
|
|
113
|
+
`
|
|
114
|
+
: type == 'link'
|
|
115
|
+
? html ` <a href=${href}>${title}</a> `
|
|
116
|
+
: html `
|
|
117
|
+
<mwc-button
|
|
118
|
+
label=${title}
|
|
119
|
+
icon=${icon || 'done_all'}
|
|
120
|
+
?dense=${dense}
|
|
121
|
+
?raised=${raised}
|
|
122
|
+
?outlined=${outlined}
|
|
123
|
+
?danger=${danger}
|
|
124
|
+
@click=${async (e) => {
|
|
125
|
+
var _a;
|
|
126
|
+
/* all actions should be bloked for a second */
|
|
127
|
+
const button = e.currentTarget;
|
|
128
|
+
button.icon = 'rotate_right';
|
|
129
|
+
button.setAttribute('working', true);
|
|
130
|
+
button.disabled = true;
|
|
131
|
+
try {
|
|
132
|
+
await action();
|
|
133
|
+
}
|
|
134
|
+
finally {
|
|
135
|
+
await sleep(1000);
|
|
136
|
+
button.disabled = false;
|
|
137
|
+
/* because icon can be changed after sleep, don't use closure 'icon'. */
|
|
138
|
+
button.icon = ((_a = this.actions[idx]) === null || _a === void 0 ? void 0 : _a.icon) || 'done_all';
|
|
139
|
+
button.removeAttribute('working');
|
|
140
|
+
}
|
|
141
|
+
}}
|
|
142
|
+
></mwc-button>
|
|
143
|
+
`;
|
|
144
|
+
})}
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
async updated(changed) {
|
|
148
|
+
if (changed.has('actions')) {
|
|
149
|
+
requestAnimationFrame(this.overflownUpdater);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
stateChanged(state) {
|
|
153
|
+
var _a, _b, _c;
|
|
154
|
+
this.actions = ((_c = (_b = (_a = state.route) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.filter((action) => !!action)) || [];
|
|
155
|
+
}
|
|
156
|
+
showMore() {
|
|
157
|
+
openOverlay('context-toolbar-overlay', {
|
|
158
|
+
template: html `<ox-page-action-overlay-template></ox-page-action-overlay-template>`
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
__decorate([
|
|
163
|
+
state()
|
|
164
|
+
], PageActionContextBar.prototype, "actions", void 0);
|
|
165
|
+
__decorate([
|
|
166
|
+
state()
|
|
167
|
+
], PageActionContextBar.prototype, "overflown", void 0);
|
|
168
|
+
PageActionContextBar = __decorate([
|
|
169
|
+
customElement('ox-page-action-context-bar')
|
|
170
|
+
], PageActionContextBar);
|
|
171
|
+
export { PageActionContextBar };
|
|
172
|
+
//# sourceMappingURL=ox-page-action-context-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '@material/mwc-icon'\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'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n overflow: hidden;\n position: relative;\n }\n\n :host *:focus {\n outline: none;\n }\n\n mwc-button {\n white-space: nowrap;\n margin: var(--context-action-bar-button-margin);\n border-radius: var(--context-action-bar-more-button-border-radius);\n }\n\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n --mdc-button-outline-color: var(--mdc-danger-button-outline-color);\n }\n\n [more] {\n position: absolute;\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 }\n\n @media screen and (max-width: 460px) {\n mwc-button {\n --mdc-button-horizontal-padding: var(--padding-default);\n --mdc-shape-small: var(--context-action-bar-more-button-border-radius);\n }\n [more] {\n position: fixed;\n margin-top: -10px;\n -webkit-border-top-left-radius: 10px;\n -moz-border-radius-topleft: 10px;\n border-top-left-radius: 10px;\n padding: var(--padding-default);\n font-size: 2rem;\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 @state() actions: any[] = []\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` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-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 } = emphasis || {}\n\n return type == 'text'\n ? html` <span>${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 : html`\n <mwc-button\n label=${title}\n icon=${icon || 'done_all'}\n ?dense=${dense}\n ?raised=${raised}\n ?outlined=${outlined}\n ?danger=${danger}\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 ></mwc-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 this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []\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"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import '@material/mwc-icon';
|
|
2
|
+
import { LitElement } from 'lit-element';
|
|
3
|
+
declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
|
|
4
|
+
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
5
|
+
connectedCallback(): void;
|
|
6
|
+
disconnectedCallback(): void;
|
|
7
|
+
stateChanged(_state: unknown): void;
|
|
8
|
+
readonly isConnected: boolean;
|
|
9
|
+
}) & typeof LitElement;
|
|
10
|
+
export declare class PageActionOverlayTemplate extends PageActionOverlayTemplate_base {
|
|
11
|
+
static get styles(): import("lit-element").CSSResult[];
|
|
12
|
+
private actions;
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
stateChanged(state: any): void;
|
|
15
|
+
}
|
|
16
|
+
export {};
|