@operato/context 2.0.0-alpha.65 → 2.0.0-alpha.67
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 +18 -0
- package/dist/src/layouts/ox-context-page-toolbar.js +15 -5
- package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
- package/dist/src/layouts/ox-context-toolbar.d.ts +1 -1
- package/dist/src/layouts/ox-context-toolbar.js +76 -58
- package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
- package/dist/stories/{ox-context-toolbar.stories copy.js → ox-context-toolbar-empty.stories.js} +4 -38
- package/dist/stories/ox-context-toolbar-empty.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/layouts/ox-context-page-toolbar.ts +15 -5
- package/src/layouts/ox-context-toolbar.ts +84 -66
- package/stories/ox-context-toolbar-empty.stories.ts +61 -0
- package/dist/stories/ox-context-page-toolbar.stories copy.d.ts +0 -24
- package/dist/stories/ox-context-page-toolbar.stories copy.js +0 -90
- package/dist/stories/ox-context-page-toolbar.stories copy.js.map +0 -1
- package/dist/stories/ox-context-toolbar-complex-2.stories.js +0 -136
- package/dist/stories/ox-context-toolbar-complex-2.stories.js.map +0 -1
- package/dist/stories/ox-context-toolbar-complex.stories copy.d.ts +0 -19
- package/dist/stories/ox-context-toolbar-complex.stories copy.js +0 -146
- package/dist/stories/ox-context-toolbar-complex.stories copy.js.map +0 -1
- package/dist/stories/ox-context-toolbar.stories copy.d.ts +0 -19
- package/dist/stories/ox-context-toolbar.stories copy.js.map +0 -1
- /package/dist/stories/{ox-context-toolbar-complex-2.stories.d.ts → ox-context-toolbar-empty.stories.d.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-alpha.67](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.66...v2.0.0-alpha.67) (2024-04-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* mwc=>md for context ([eacd9a5](https://github.com/hatiolab/operato/commit/eacd9a5b698969156f430f3d26233fdf7edccdf3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.66](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.65...v2.0.0-alpha.66) (2024-04-13)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* mwc=>md for context ([3d4217a](https://github.com/hatiolab/operato/commit/3d4217ae178ce568823697af2bdfbb244fda93c3))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [2.0.0-alpha.65](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.64...v2.0.0-alpha.65) (2024-04-13)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -30,7 +30,7 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
30
30
|
flex-direction: row;
|
|
31
31
|
|
|
32
32
|
align-items: center;
|
|
33
|
-
gap:var(--padding-narrow);
|
|
33
|
+
gap: var(--padding-narrow);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
* {
|
|
@@ -38,19 +38,29 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
md-icon {
|
|
41
|
-
background-color: var(--button-background-color
|
|
41
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
42
42
|
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
43
|
-
border-radius:var(--button-border-radius);
|
|
43
|
+
border-radius: var(--button-border-radius);
|
|
44
44
|
padding: var(--iconbtn-padding, 2px);
|
|
45
45
|
|
|
46
46
|
color: var(--primary-color);
|
|
47
|
-
|
|
48
|
-
&:hover{
|
|
47
|
+
|
|
48
|
+
&:hover {
|
|
49
49
|
background-color: var(--primary-color);
|
|
50
50
|
|
|
51
51
|
color: var(--theme-white-color);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
@media screen and (max-width: 460px) {
|
|
56
|
+
:host > div {
|
|
57
|
+
gap: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
md-icon {
|
|
61
|
+
border-radius: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
54
64
|
`
|
|
55
65
|
];
|
|
56
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,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,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAChE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, nothing } 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-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --mdc-icon-size: 20px;\n --mdc-button-height: 20px;\n --mdc-button-horizontal-padding: 2px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--padding-narrow);\n }\n\n * {\n cursor: pointer;\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 @media screen and (max-width: 460px) {\n :host > div {\n gap: 0;\n }\n\n md-icon {\n border-radius: 0;\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) context: any\n @property({ type: Array }) tools?: {\n position: TOOL_POSITION\n template: TemplateResult\n context?: string\n }[]\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)) {\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 ${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 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context?.tools\n }\n }\n}\n"]}
|
|
@@ -11,7 +11,7 @@ export declare class ContextToolbar extends ContextToolbar_base {
|
|
|
11
11
|
static get styles(): import("lit").CSSResult[];
|
|
12
12
|
private context;
|
|
13
13
|
private tools?;
|
|
14
|
-
render():
|
|
14
|
+
render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
15
15
|
stateChanged(state: any): void;
|
|
16
16
|
}
|
|
17
17
|
export {};
|
|
@@ -11,80 +11,94 @@ 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
17
|
|
|
20
|
-
padding:
|
|
21
|
-
gap: 4px;
|
|
18
|
+
padding: 0;
|
|
22
19
|
}
|
|
23
20
|
|
|
24
|
-
div {
|
|
25
|
-
|
|
26
|
-
flex-direction: row;
|
|
27
|
-
flex-wrap: nowrap;
|
|
21
|
+
div[container] {
|
|
22
|
+
flex: 1;
|
|
28
23
|
|
|
29
|
-
|
|
24
|
+
display: flex;
|
|
25
|
+
position: relative;
|
|
30
26
|
overflow: hidden;
|
|
31
|
-
padding: 0;
|
|
32
|
-
}
|
|
33
27
|
|
|
34
|
-
|
|
35
|
-
#front md-icon {
|
|
36
|
-
background-color: var(--context-toolbar-function-button-background-color);
|
|
37
|
-
border: var(--context-toolbar-function-button-border);
|
|
38
|
-
color: var(--context-toolbar-function-button-color);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
#front-end md-icon {
|
|
42
|
-
background-color: var(--primary-color);
|
|
43
|
-
}
|
|
44
|
-
#front-end md-icon:hover {
|
|
45
|
-
background-color: var(--context-toolbar-function-button-background-color);
|
|
46
|
-
}
|
|
47
|
-
#front md-icon:hover {
|
|
48
|
-
background-color: var(--context-toolbar-function-button-hover-background-color);
|
|
49
|
-
}
|
|
28
|
+
justify-content: space-between;
|
|
50
29
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
border-top-left-radius: var(--context-toolbar-function-button-radius);
|
|
54
|
-
border-bottom-left-radius: var(--context-toolbar-function-button-radius);
|
|
55
|
-
}
|
|
56
|
-
div md-icon:last-child {
|
|
57
|
-
border-radius: 0;
|
|
58
|
-
border-top-right-radius: var(--context-toolbar-function-button-radius);
|
|
59
|
-
border-bottom-right-radius: var(--context-toolbar-function-button-radius);
|
|
60
|
-
}
|
|
30
|
+
gap: 4px;
|
|
31
|
+
padding: 6px 10px;
|
|
61
32
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
33
|
+
&:empty {
|
|
34
|
+
padding: 0;
|
|
35
|
+
}
|
|
66
36
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
37
|
+
div {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
flex-wrap: nowrap;
|
|
70
41
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
padding: var(--iconbtn-padding, 2px);
|
|
42
|
+
align-items: center;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
padding: 0;
|
|
45
|
+
}
|
|
76
46
|
|
|
77
|
-
|
|
47
|
+
#front-end md-icon,
|
|
48
|
+
#front md-icon {
|
|
49
|
+
background-color: var(--context-toolbar-function-button-background-color);
|
|
50
|
+
border: var(--context-toolbar-function-button-border);
|
|
51
|
+
color: var(--context-toolbar-function-button-color);
|
|
52
|
+
}
|
|
78
53
|
|
|
79
|
-
|
|
54
|
+
#front-end md-icon {
|
|
80
55
|
background-color: var(--primary-color);
|
|
56
|
+
}
|
|
57
|
+
#front-end md-icon:hover {
|
|
58
|
+
background-color: var(--context-toolbar-function-button-background-color);
|
|
59
|
+
}
|
|
60
|
+
#front md-icon:hover {
|
|
61
|
+
background-color: var(--context-toolbar-function-button-hover-background-color);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
md-icon {
|
|
65
|
+
background-color: var(--button-background-color, #fafbfc);
|
|
66
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
67
|
+
border-radius: var(--button-border-radius);
|
|
68
|
+
padding: var(--iconbtn-padding, 2px);
|
|
81
69
|
|
|
82
|
-
color: var(--
|
|
70
|
+
color: var(--primary-color);
|
|
71
|
+
|
|
72
|
+
&:hover {
|
|
73
|
+
background-color: var(--primary-color);
|
|
74
|
+
|
|
75
|
+
color: var(--theme-white-color);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
div md-icon:first-child {
|
|
80
|
+
border-radius: 0;
|
|
81
|
+
border-top-left-radius: var(--context-toolbar-function-button-radius);
|
|
82
|
+
border-bottom-left-radius: var(--context-toolbar-function-button-radius);
|
|
83
|
+
}
|
|
84
|
+
div md-icon:last-child {
|
|
85
|
+
border-radius: 0;
|
|
86
|
+
border-top-right-radius: var(--context-toolbar-function-button-radius);
|
|
87
|
+
border-bottom-right-radius: var(--context-toolbar-function-button-radius);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
#center {
|
|
91
|
+
flex: 1;
|
|
92
|
+
justify-content: end;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
* {
|
|
96
|
+
cursor: pointer;
|
|
83
97
|
}
|
|
84
98
|
}
|
|
85
99
|
|
|
86
100
|
@media only screen and (max-width: 460px) {
|
|
87
|
-
|
|
101
|
+
div[container] {
|
|
88
102
|
padding: 0;
|
|
89
103
|
gap: 0;
|
|
90
104
|
}
|
|
@@ -108,19 +122,23 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
108
122
|
let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
|
|
109
123
|
let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
|
|
110
124
|
return html `
|
|
111
|
-
|
|
125
|
+
<div container>
|
|
126
|
+
${frontEndTools.length > 0
|
|
112
127
|
? html `<div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
113
128
|
: nothing}
|
|
114
|
-
|
|
129
|
+
${frontTools.length > 0
|
|
115
130
|
? html `<div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
116
131
|
: nothing}
|
|
117
|
-
|
|
132
|
+
${centerTools.length > 0
|
|
118
133
|
? html `<div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
119
134
|
: nothing}
|
|
120
|
-
|
|
121
|
-
|
|
135
|
+
${rearTools.length > 0
|
|
136
|
+
? html `<div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
137
|
+
: nothing}
|
|
138
|
+
${rearEndTools.length > 0
|
|
122
139
|
? html `<div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>`
|
|
123
140
|
: nothing}
|
|
141
|
+
</div>
|
|
124
142
|
`;
|
|
125
143
|
}
|
|
126
144
|
stateChanged(state) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,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
|
|
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 } 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\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: 4px;\n padding: 6px 10px;\n\n &:empty {\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:first-child {\n border-radius: 0;\n border-top-left-radius: var(--context-toolbar-function-button-radius);\n border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n }\n div md-icon:last-child {\n border-radius: 0;\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 `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\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 stateChanged(state: any) {\n this.tools = state.context.tools\n this.context = state.route.context\n }\n}\n"]}
|
package/dist/stories/{ox-context-toolbar.stories copy.js → ox-context-toolbar-empty.stories.js}
RENAMED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import '../src/layouts/ox-context-toolbar.js';
|
|
3
3
|
import '../src/tools/ox-page-action-context-bar.js';
|
|
4
|
-
import { TOOL_POSITION } from '@operato/layout';
|
|
5
4
|
import '@operato/styles';
|
|
6
5
|
import { html } from 'lit';
|
|
7
6
|
export default {
|
|
8
|
-
title: 'ox-context-toolbar',
|
|
7
|
+
title: 'ox-context-toolbar empty',
|
|
9
8
|
component: 'ox-context-toolbar',
|
|
10
9
|
argTypes: {}
|
|
11
10
|
};
|
|
@@ -34,44 +33,11 @@ const Template = () => html `
|
|
|
34
33
|
|
|
35
34
|
<div style="height:100px; padding: 10px; background-color: black;">
|
|
36
35
|
<ox-context-toolbar
|
|
37
|
-
.tools=${[
|
|
38
|
-
{
|
|
39
|
-
position: TOOL_POSITION.FRONT,
|
|
40
|
-
template: html ` <md-icon>download</md-icon> `,
|
|
41
|
-
context: 'exportable'
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
position: TOOL_POSITION.FRONT,
|
|
45
|
-
template: html ` <md-icon>upload</md-icon> `,
|
|
46
|
-
context: 'importable'
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
position: TOOL_POSITION.CENTER,
|
|
50
|
-
template: html `<ox-page-action-context-bar
|
|
51
|
-
.actions=${[
|
|
52
|
-
{
|
|
53
|
-
title: 'save',
|
|
54
|
-
action: () => { },
|
|
55
|
-
icon: 'save'
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
title: 'copy',
|
|
59
|
-
action: () => { },
|
|
60
|
-
icon: 'content_copy'
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
title: 'delete',
|
|
64
|
-
action: () => { },
|
|
65
|
-
icon: 'delete'
|
|
66
|
-
}
|
|
67
|
-
]}
|
|
68
|
-
></ox-page-action-context-bar>`
|
|
69
|
-
}
|
|
70
|
-
]}
|
|
36
|
+
.tools=${[]}
|
|
71
37
|
.context=${{
|
|
72
38
|
exportable: true,
|
|
73
39
|
importable: true,
|
|
74
|
-
toolbar:
|
|
40
|
+
toolbar: false
|
|
75
41
|
}}
|
|
76
42
|
>
|
|
77
43
|
</ox-context-toolbar>
|
|
@@ -79,4 +45,4 @@ const Template = () => html `
|
|
|
79
45
|
`;
|
|
80
46
|
export const Regular = Template.bind({});
|
|
81
47
|
Regular.args = {};
|
|
82
|
-
//# sourceMappingURL=ox-context-toolbar.stories
|
|
48
|
+
//# sourceMappingURL=ox-context-toolbar-empty.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-context-toolbar-empty.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-empty.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AAGnD,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;eAyB7B,EAAE;iBACA;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-context-toolbar empty',\n component: 'ox-context-toolbar',\n argTypes: {}\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = () => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/context-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n background-color: white;\n }\n </style>\n\n <div style=\"height:100px; padding: 10px; background-color: black;\">\n <ox-context-toolbar\n .tools=${[]}\n .context=${{\n exportable: true,\n importable: true,\n toolbar: false\n }}\n >\n </ox-context-toolbar>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|