@operato/context 2.0.0-alpha.146 → 2.0.0-alpha.148
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 +20 -0
- package/dist/src/layouts/ox-context-page-toolbar.js +15 -9
- package/dist/src/layouts/ox-context-page-toolbar.js.map +1 -1
- package/dist/src/layouts/ox-context-toolbar.js +20 -21
- package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
- package/dist/src/tools/ox-page-action-context-bar.js +14 -12
- package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
- package/dist/src/tools/ox-page-action-overlay-template.js +1 -1
- package/dist/src/tools/ox-page-action-overlay-template.js.map +1 -1
- package/dist/src/tools/ox-page-title-bar.js +9 -8
- package/dist/src/tools/ox-page-title-bar.js.map +1 -1
- package/dist/src/tools/ox-title-bar.js +7 -8
- package/dist/src/tools/ox-title-bar.js.map +1 -1
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts +5 -0
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +59 -30
- package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -1
- package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +5 -0
- package/dist/stories/ox-context-page-toolbar-select.stories.js +51 -25
- package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -1
- package/dist/stories/ox-context-page-toolbar.stories.d.ts +5 -0
- package/dist/stories/ox-context-page-toolbar.stories.js +53 -26
- package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -1
- package/dist/stories/ox-context-toolbar-complex.stories.d.ts +7 -1
- package/dist/stories/ox-context-toolbar-complex.stories.js +31 -8
- package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -1
- package/dist/stories/ox-context-toolbar-empty.stories.d.ts +7 -1
- package/dist/stories/ox-context-toolbar-empty.stories.js +31 -8
- package/dist/stories/ox-context-toolbar-empty.stories.js.map +1 -1
- package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +7 -1
- package/dist/stories/ox-context-toolbar-overflow.stories.js +35 -9
- package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -1
- package/dist/stories/ox-context-toolbar.stories.d.ts +1 -0
- package/dist/stories/ox-context-toolbar.stories.js +32 -7
- package/dist/stories/ox-context-toolbar.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/layouts/ox-context-page-toolbar.ts +15 -9
- package/src/layouts/ox-context-toolbar.ts +20 -21
- package/src/tools/ox-page-action-context-bar.ts +14 -12
- package/src/tools/ox-page-action-overlay-template.ts +1 -1
- package/src/tools/ox-page-title-bar.ts +9 -8
- package/src/tools/ox-title-bar.ts +7 -8
- package/stories/ox-context-page-toolbar-select-buttons.stories.ts +122 -91
- package/stories/ox-context-page-toolbar-select.stories.ts +91 -64
- package/stories/ox-context-page-toolbar.stories.ts +92 -63
- package/stories/ox-context-toolbar-complex.stories.ts +34 -9
- package/stories/ox-context-toolbar-empty.stories.ts +34 -9
- package/stories/ox-context-toolbar-overflow.stories.ts +38 -10
- package/stories/ox-context-toolbar.stories.ts +35 -8
- package/themes/dark-hc.css +51 -0
- package/themes/dark-mc.css +51 -0
- package/themes/dark.css +51 -0
- package/themes/light-hc.css +51 -0
- package/themes/light-mc.css +51 -0
- package/themes/light.css +57 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +13 -0
- package/themes/state-color.css +6 -0
- package/themes/app-theme.css +0 -161
- package/themes/context-theme.css +0 -74
- package/themes/material-theme.css +0 -88
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,26 @@
|
|
|
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.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
|
|
12
|
+
* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### :bug: Bug Fix
|
|
16
|
+
|
|
17
|
+
* context style ([d3cac99](https://github.com/hatiolab/operato/commit/d3cac9909a61befa05ec30331a32e2de6d39ba5e))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### :mega: Other
|
|
21
|
+
|
|
22
|
+
* context sample stories ([0e34d5a](https://github.com/hatiolab/operato/commit/0e34d5a40ff7cad78c8eda591d2bd0f88c80fcf4))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
|
|
7
27
|
|
|
8
28
|
**Note:** Version bump only for package @operato/context
|
|
@@ -12,12 +12,14 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
12
12
|
:host {
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: row-reverse;
|
|
15
|
+
gap: var(--spacing-medium);
|
|
16
|
+
|
|
15
17
|
position: relative;
|
|
16
18
|
|
|
17
19
|
justify-content: end;
|
|
18
20
|
align-items: center;
|
|
19
21
|
|
|
20
|
-
--context-action-bar-button-margin:
|
|
22
|
+
--context-action-bar-button-margin: var(--spacing-none);
|
|
21
23
|
--context-action-bar-more-button-border-radius: 2px;
|
|
22
24
|
|
|
23
25
|
--md-icon-size: 20px;
|
|
@@ -28,25 +30,29 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
|
|
|
28
30
|
flex-direction: row;
|
|
29
31
|
|
|
30
32
|
align-items: center;
|
|
31
|
-
gap: var(--
|
|
33
|
+
gap: var(--spacing-small);
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
md-icon {
|
|
35
|
-
background-color: var(--
|
|
36
|
-
border: 1px solid
|
|
37
|
-
border-radius: var(--
|
|
38
|
-
padding: var(--
|
|
37
|
+
background-color: var(--md-sys-color-primary-container);
|
|
38
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
39
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
40
|
+
padding: var(--spacing-small);
|
|
39
41
|
|
|
40
|
-
color: var(--
|
|
42
|
+
color: var(--md-sys-color-primary);
|
|
41
43
|
|
|
42
44
|
&:hover {
|
|
43
|
-
background-color: var(--
|
|
45
|
+
background-color: var(--md-sys-color-primary);
|
|
44
46
|
|
|
45
|
-
color: var(--
|
|
47
|
+
color: var(--md-sys-color-secondary-container);
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
@media screen and (max-width: 460px) {
|
|
52
|
+
:host {
|
|
53
|
+
gap: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
50
56
|
:host > div {
|
|
51
57
|
gap: 0;
|
|
52
58
|
}
|
|
@@ -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 gap: var(--spacing-medium);\n\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: var(--spacing-none);\n --context-action-bar-more-button-border-radius: 2px;\n\n --md-icon-size: 20px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n md-icon {\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-small);\n\n color: var(--md-sys-color-primary);\n\n &:hover {\n background-color: var(--md-sys-color-primary);\n\n color: var(--md-sys-color-secondary-container);\n }\n }\n\n @media screen and (max-width: 460px) {\n :host {\n gap: 0;\n }\n\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"]}
|
|
@@ -12,7 +12,7 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
12
12
|
:host {
|
|
13
13
|
display: flex;
|
|
14
14
|
|
|
15
|
-
background-color: var(--context-toolbar-background-color);
|
|
15
|
+
background-color: var(--context-toolbar-background-color, var(--md-sys-color-secondary-container));
|
|
16
16
|
box-shadow: var(--context-toolbar-shadow-line);
|
|
17
17
|
|
|
18
18
|
padding: 0;
|
|
@@ -29,8 +29,8 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
29
29
|
|
|
30
30
|
justify-content: space-between;
|
|
31
31
|
|
|
32
|
-
gap: var(--
|
|
33
|
-
padding:
|
|
32
|
+
gap: var(--spacing-medium);
|
|
33
|
+
padding: var(--spacing-small) var(--spacing-medium);
|
|
34
34
|
|
|
35
35
|
&:not(:has(> *)) {
|
|
36
36
|
padding: 0;
|
|
@@ -48,33 +48,32 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
48
48
|
|
|
49
49
|
#front-end md-icon,
|
|
50
50
|
#front md-icon {
|
|
51
|
-
background-color: var(--
|
|
52
|
-
border: var(--context-toolbar-function-button-border);
|
|
53
|
-
color: var(--
|
|
51
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
52
|
+
border: var(--context-toolbar-function-button-border, none);
|
|
53
|
+
color: var(--md-sys-color-secondary-fixed);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
#front-end md-icon {
|
|
57
|
-
background-color: var(--primary-
|
|
57
|
+
background-color: var(--md-sys-color-on-primary-container);
|
|
58
58
|
}
|
|
59
59
|
#front-end md-icon:hover {
|
|
60
|
-
background-color: var(--
|
|
60
|
+
background-color: var(--md-sys-color-primary);
|
|
61
61
|
}
|
|
62
62
|
#front md-icon:hover {
|
|
63
|
-
background-color: var(--
|
|
63
|
+
background-color: var(--md-sys-color-secondary);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
md-icon {
|
|
67
|
-
background-color: var(--
|
|
68
|
-
border: 1px solid
|
|
69
|
-
border-radius: var(--
|
|
70
|
-
padding: var(--
|
|
67
|
+
background-color: var(--md-sys-color-primary-container);
|
|
68
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
69
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
70
|
+
padding: var(--spacing-small);
|
|
71
71
|
|
|
72
|
-
color: var(--
|
|
72
|
+
color: var(--md-sys-color-primary);
|
|
73
73
|
|
|
74
74
|
&:hover {
|
|
75
|
-
background-color: var(--
|
|
76
|
-
|
|
77
|
-
color: var(--theme-white-color);
|
|
75
|
+
background-color: var(--md-sys-color-primary);
|
|
76
|
+
color: var(--md-sys-color-secondary-container);
|
|
78
77
|
}
|
|
79
78
|
}
|
|
80
79
|
|
|
@@ -83,13 +82,13 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
|
|
|
83
82
|
}
|
|
84
83
|
|
|
85
84
|
div md-icon:first-child {
|
|
86
|
-
border-top-left-radius: var(--
|
|
87
|
-
border-bottom-left-radius: var(--
|
|
85
|
+
border-top-left-radius: var(--md-sys-shape-corner-medium);
|
|
86
|
+
border-bottom-left-radius: var(--md-sys-shape-corner-medium);
|
|
88
87
|
}
|
|
89
88
|
|
|
90
89
|
div md-icon:last-child {
|
|
91
|
-
border-top-right-radius: var(--
|
|
92
|
-
border-bottom-right-radius: var(--
|
|
90
|
+
border-top-right-radius: var(--md-sys-shape-corner-medium);
|
|
91
|
+
border-bottom-right-radius: var(--md-sys-shape-corner-medium);
|
|
93
92
|
}
|
|
94
93
|
|
|
95
94
|
#center {
|
|
@@ -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,EAAkB,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,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, 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, var(--md-sys-color-secondary-container));\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(--spacing-medium);\n padding: var(--spacing-small) var(--spacing-medium);\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(--md-sys-color-secondary-container);\n border: var(--context-toolbar-function-button-border, none);\n color: var(--md-sys-color-secondary-fixed);\n }\n\n #front-end md-icon {\n background-color: var(--md-sys-color-on-primary-container);\n }\n #front-end md-icon:hover {\n background-color: var(--md-sys-color-primary);\n }\n #front md-icon:hover {\n background-color: var(--md-sys-color-secondary);\n }\n\n md-icon {\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n padding: var(--spacing-small);\n\n color: var(--md-sys-color-primary);\n\n &:hover {\n background-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-secondary-container);\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(--md-sys-shape-corner-medium);\n border-bottom-left-radius: var(--md-sys-shape-corner-medium);\n }\n\n div md-icon:last-child {\n border-top-right-radius: var(--md-sys-shape-corner-medium);\n border-bottom-right-radius: var(--md-sys-shape-corner-medium);\n }\n\n #center {\n flex: 1;\n justify-content: end;\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 }\n\n div[container] div md-icon:not(:last-child) {\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' : 'revert-layer'\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"]}
|
|
@@ -42,22 +42,24 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
|
|
|
42
42
|
position: absolute;
|
|
43
43
|
top: 0;
|
|
44
44
|
right: 0;
|
|
45
|
-
background-color: var(--
|
|
45
|
+
background-color: var(--md-sys-color-inverse-surface);
|
|
46
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(--
|
|
49
|
-
padding: 11px 10px;
|
|
47
|
+
padding: var(--context-action-bar-more-button-padding, 11px 10px);
|
|
48
|
+
color: var(--md-sys-color-inverse-on-surface);
|
|
50
49
|
font-size: 2rem;
|
|
51
50
|
}
|
|
52
51
|
|
|
53
|
-
select
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
color: var(--
|
|
52
|
+
select,
|
|
53
|
+
input[type='text'] {
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
padding: 0 var(--spacing-small);
|
|
56
|
+
height: var(--form-element-height-medium);
|
|
57
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
58
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
59
|
+
background-color: var(--md-sys-color-on-primary);
|
|
60
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
61
|
+
color: var(--md-sys-color-on-primary-container);
|
|
62
|
+
outline: none;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
md-icon[working] {
|
|
@@ -1 +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/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, 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 }\n\n :host *:focus {\n outline: none;\n }\n\n [container] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n gap: var(--padding-narrow);\n padding: 2px; /* only for button shadow */\n align-items: center;\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 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 md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\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 this.actions.length > 0\n ? html`\n <div container>\n ${this.renderActions()}\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n </div>\n `\n : nothing\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 { raised, danger } = 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 : html`\n <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n if (iconElement) {\n icon = this.actions[idx].icon\n this.actions[idx].icon = 'refresh'\n this.requestUpdate()\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n this.actions[idx].icon = icon\n this.requestUpdate()\n iconElement.removeAttribute('working')\n }\n\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n </md-assist-chip>\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
|
+
{"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/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, 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 }\n\n :host *:focus {\n outline: none;\n }\n\n [container] {\n flex: 1;\n\n display: flex;\n overflow: hidden;\n gap: var(--padding-narrow);\n padding: 2px; /* only for button shadow */\n align-items: center;\n }\n\n [more] {\n position: absolute;\n top: 0;\n right: 0;\n background-color: var(--md-sys-color-inverse-surface);\n box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n padding: var(--context-action-bar-more-button-padding, 11px 10px);\n color: var(--md-sys-color-inverse-on-surface);\n font-size: 2rem;\n }\n\n select,\n input[type='text'] {\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-medium-size);\n color: var(--md-sys-color-on-primary-container);\n outline: none;\n }\n\n md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\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 this.actions.length > 0\n ? html`\n <div container>\n ${this.renderActions()}\n ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n </div>\n `\n : nothing\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 { raised, danger } = 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 : html`\n <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n if (iconElement) {\n icon = this.actions[idx].icon\n this.actions[idx].icon = 'refresh'\n this.requestUpdate()\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n this.actions[idx].icon = icon\n this.requestUpdate()\n iconElement.removeAttribute('working')\n }\n\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n </md-assist-chip>\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-action-overlay-template.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-overlay-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'\n\n@customElement('ox-page-action-overlay-template')\nexport class PageActionOverlayTemplate extends connect(store)(LitElement) {\n static get styles() {\n return [\n ScrollbarStyles,\n ButtonContainerStyles,\n ContextToolbarOverlayStyle,\n css`\n :host {\n display: flex;\n flex-wrap: wrap;\n gap: var(--
|
|
1
|
+
{"version":3,"file":"ox-page-action-overlay-template.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-overlay-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'\n\n@customElement('ox-page-action-overlay-template')\nexport class PageActionOverlayTemplate extends connect(store)(LitElement) {\n static get styles() {\n return [\n ScrollbarStyles,\n ButtonContainerStyles,\n ContextToolbarOverlayStyle,\n css`\n :host {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-small);\n align-items: center;\n }\n\n :host *:focus {\n outline: none;\n }\n\n md-icon[working] {\n animation: rotate 1s linear infinite;\n }\n\n md-assist-chip[icon-only] {\n --md-assist-chip-trailing-space: 0;\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() private actions: any[] = []\n\n render() {\n return html`\n ${this.actions.map(($action, idx) => {\n let { type, title, icon, action, select, href, emphasis } = $action as any\n let { raised, 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 <md-assist-chip\n ?icon-only=${type == 'icon' || !title}\n ?elevated=${raised}\n ?danger=${danger}\n label=${title}\n @click=${async (e: MouseEvent) => {\n /* all actions should be bloked for a second */\n const button = e.currentTarget as any\n const iconElement = button.querySelector('[slot=\"icon\"]')\n if (iconElement) {\n iconElement.textContent = 'refresh'\n iconElement.setAttribute('working', true)\n }\n button.disabled = true\n\n try {\n await action()\n } finally {\n await sleep(1000) /* waiting for additionla 1 second */\n\n /* because icon can be changed after sleep, don't use closure 'icon'. */\n if (iconElement) {\n iconElement.textContent = this.actions[idx]?.icon\n iconElement.removeAttribute('working')\n }\n button.disabled = false\n }\n }}\n >\n <md-icon slot=\"icon\">${icon || 'done_all'}</md-icon>\n </md-assist-chip>\n `\n })}\n `\n }\n\n stateChanged(state: any) {\n this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []\n }\n}\n"]}
|
|
@@ -58,20 +58,21 @@ PageTitleBar.styles = [
|
|
|
58
58
|
display: flex;
|
|
59
59
|
align-items: center;
|
|
60
60
|
|
|
61
|
-
--help-icon-color: var(--
|
|
62
|
-
--help-icon-hover-color: var(--
|
|
61
|
+
--help-icon-color: var(--md-sys-color-on-primary-container);
|
|
62
|
+
--help-icon-hover-color: var(--md-sys-color-primary);
|
|
63
63
|
--help-icon-opacity: 0.2;
|
|
64
64
|
--help-icon-size: 20px;
|
|
65
65
|
|
|
66
66
|
--md-icon-size: 20px;
|
|
67
67
|
|
|
68
|
-
--input-search-padding: var(--
|
|
68
|
+
--input-search-padding: var(--spacing-small);
|
|
69
69
|
--input-search-font: normal 14px var(--theme-font);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
[titler] {
|
|
73
73
|
display: flex;
|
|
74
|
-
padding: var(--
|
|
74
|
+
padding: var(--spacing-small);
|
|
75
|
+
padding-top: var(--spacing-medium);
|
|
75
76
|
font: var(--context-toolbar-title);
|
|
76
77
|
color: var(--title-text-color);
|
|
77
78
|
}
|
|
@@ -93,7 +94,7 @@ PageTitleBar.styles = [
|
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
[search] [help] {
|
|
96
|
-
color: var(--secondary-
|
|
97
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
[search] {
|
|
@@ -102,11 +103,11 @@ PageTitleBar.styles = [
|
|
|
102
103
|
align-items: center;
|
|
103
104
|
|
|
104
105
|
align-self: center;
|
|
105
|
-
color: var(--secondary-
|
|
106
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
106
107
|
background-color: var(--opacity-light-color);
|
|
107
|
-
border-radius:
|
|
108
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
108
109
|
margin-left: auto;
|
|
109
|
-
padding: 0
|
|
110
|
+
padding: 0 var(--spacing-medium);
|
|
110
111
|
}
|
|
111
112
|
|
|
112
113
|
[search] > * {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-page-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-title-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAGxC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;
|
|
1
|
+
{"version":3,"file":"ox-page-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-title-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAGxC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAArD;;QAmEL,WAAM,GAAG,cAAc,EAAE,CAAA;IA4C3B,CAAC;IA1CC,MAAM;QACJ,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAK,EAAU,CAAA;QACjE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,MAAM,IAAK,EAAU,CAAA;QACtG,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,MAAM,IAAK,EAAU,CAAA;QACxD,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,EAAU,CAAA;QAC9E,MAAM,UAAU,GAAG,OAAO,aAAa,IAAI,UAAU,CAAA;QACrD,MAAM,UAAU,GAAG,OAAO,aAAa,IAAI,UAAU,CAAA;QAErD,IAAI,IAAI,CAAC,MAAM,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACvC,WAAW,KAAX,WAAW,GAAK,KAAK,EAAA;YACrB,KAAK,GAAG,EAAE,CAAA;QACZ,CAAC;QAED,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,GAAG,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;QAC3G,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,CAAC,CAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;QAC/G,UAAU,IAAI,UAAU;YACxB,CAAC,CAAC,IAAI,CAAA;;gBAEE,UAAU;gBACV,CAAC,CAAC,IAAI,CAAA;mCACa,WAAW;6BACjB,KAAK,IAAI,EAAE;iCACP,SAAS;8BACZ,CAAC,CAAQ,EAAE,EAAE;oBACrB,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC,CAAA;gBACxC,CAAC;sCACiB;gBACtB,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,CAAC,KAAK,IAAI,IAAI,IAAI,UAAU;gBAC5B,CAAC,CAAC,IAAI,CAAA,mBAAmB,CAAC,CAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,sBAAsB;gBAChF,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,CAAC,CAAa,EAAE,EAAE,CAAC,aAAa,EAAE,wBAAwB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;WAE5G;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;;AA7GM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,AA9DY,CA8DZ;AAEgB;IAAhB,KAAK,EAAE;6CAAqB;AAjElB,YAAY;IADxB,aAAa,CAAC,mBAAmB,CAAC;GACtB,YAAY,CA+GxB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openHelp } from '@operato/help'\nimport { store } from '@operato/shell'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('ox-page-title-bar')\nexport class PageTitleBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n\n --help-icon-color: var(--md-sys-color-on-primary-container);\n --help-icon-hover-color: var(--md-sys-color-primary);\n --help-icon-opacity: 0.2;\n --help-icon-size: 20px;\n\n --md-icon-size: 20px;\n\n --input-search-padding: var(--spacing-small);\n --input-search-font: normal 14px var(--theme-font);\n }\n\n [titler] {\n display: flex;\n padding: var(--spacing-small);\n padding-top: var(--spacing-medium);\n font: var(--context-toolbar-title);\n color: var(--title-text-color);\n }\n\n [titler] > * {\n align-self: center;\n }\n\n [help] {\n opacity: var(--help-icon-opacity);\n font-size: var(--help-icon-size);\n color: var(--help-icon-color);\n }\n\n [help]:hover {\n cursor: help;\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n\n [search] [help] {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--opacity-light-color);\n border-radius: var(--md-sys-shape-corner-full);\n margin-left: auto;\n padding: 0 var(--spacing-medium);\n }\n\n [search] > * {\n align-self: center;\n }\n `\n ]\n\n @state() private context: any\n\n mobile = isMobileDevice()\n\n render() {\n var { search, filter, title, help } = this.context || ({} as any)\n var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)\n const { handler: filterHandler } = filter || ({} as any)\n const { icon, text = title } = typeof title === 'object' ? title : ({} as any)\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n if (this.mobile && searchable && title) {\n placeholder ||= title\n title = ''\n }\n\n return html`\n ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon> ` : html``}${text}</div> ` : html``}\n ${help && title ? html` <md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler((e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${!title && help && searchable\n ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`\n : html``}\n ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</md-icon>` : html``}\n </div>\n `\n : html``}\n `\n }\n\n stateChanged(state: any) {\n this.context = state.route.context\n }\n}\n"]}
|
|
@@ -53,15 +53,14 @@ TitleBar.styles = [
|
|
|
53
53
|
display: flex;
|
|
54
54
|
align-items: center;
|
|
55
55
|
|
|
56
|
-
--help-icon-color:
|
|
57
|
-
--help-icon-hover-color:
|
|
56
|
+
--help-icon-color: var(--md-sys-color-on-primary);
|
|
57
|
+
--help-icon-hover-color: var(--md-sys-color-on-primary);
|
|
58
58
|
--help-icon-opacity: 0.2;
|
|
59
59
|
--help-icon-size: 20px;
|
|
60
60
|
|
|
61
61
|
--md-icon-size: 20px;
|
|
62
62
|
|
|
63
|
-
--input-search-padding:
|
|
64
|
-
--input-search-border-bottom: none;
|
|
63
|
+
--input-search-padding: var(--spacing-medium);
|
|
65
64
|
--input-search-focus-border-bottom: none;
|
|
66
65
|
--input-search-font: normal 16px var(--theme-font);
|
|
67
66
|
}
|
|
@@ -88,7 +87,7 @@ TitleBar.styles = [
|
|
|
88
87
|
}
|
|
89
88
|
|
|
90
89
|
[search] [help] {
|
|
91
|
-
color: var(--secondary-
|
|
90
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
92
91
|
}
|
|
93
92
|
|
|
94
93
|
[search] {
|
|
@@ -97,10 +96,10 @@ TitleBar.styles = [
|
|
|
97
96
|
align-items: center;
|
|
98
97
|
|
|
99
98
|
align-self: center;
|
|
100
|
-
color: var(--secondary-
|
|
99
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
101
100
|
background-color: var(--opacity-light-color);
|
|
102
|
-
border-radius:
|
|
103
|
-
padding: 0
|
|
101
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
102
|
+
padding: 0 var(--spacing-medium);
|
|
104
103
|
}
|
|
105
104
|
|
|
106
105
|
[search] > * {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-title-bar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG/B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-title-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-title-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { openHelp } from '@operato/help'\nimport { store } from '@operato/shell'\n\n@customElement('ox-title-bar')\nexport class TitleBar extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n align-items: center;\n\n --help-icon-color: var(--md-sys-color-on-primary);\n --help-icon-hover-color: var(--md-sys-color-on-primary);\n --help-icon-opacity: 0.2;\n --help-icon-size: 20px;\n\n --md-icon-size: 20px;\n\n --input-search-padding: var(--spacing-medium);\n --input-search-focus-border-bottom: none;\n --input-search-font: normal 16px var(--theme-font);\n }\n\n [titler] {\n display: flex;\n font: var(--context-toolbar-title);\n }\n\n [titler] > * {\n align-self: center;\n }\n\n [help] {\n opacity: var(--help-icon-opacity);\n font-size: var(--help-icon-size);\n color: var(--help-icon-color);\n }\n\n [help]:hover {\n cursor: help;\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n\n [search] [help] {\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [search] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n align-self: center;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--opacity-light-color);\n border-radius: var(--md-sys-shape-corner-full);\n padding: 0 var(--spacing-medium);\n }\n\n [search] > * {\n align-self: center;\n }\n `\n ]\n\n @state() private context: any\n\n render() {\n var { search, filter, title, help } = this.context || ({} as any)\n var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)\n const { handler: filterHandler } = filter || ({} as any)\n const { icon, text = title } = typeof title === 'object' ? title : ({} as any)\n const searchable = typeof searchHandler == 'function'\n const filterable = typeof filterHandler == 'function'\n\n if (searchable && title) {\n placeholder ||= text\n title = ''\n }\n\n return html`\n ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon> ` : html``}${text}</div> ` : html``}\n ${help && title ? html` <md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}\n ${searchable || filterable\n ? html`\n <div search>\n ${searchable\n ? html` <ox-input-search\n .placeholder=${placeholder}\n .value=${value || ''}\n ?autofocus=${autofocus}\n @change=${(e: Event) => {\n searchHandler((e.target as any).value)\n }}\n ></ox-input-search>`\n : html``}\n ${!title && help && searchable\n ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`\n : html``}\n ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}\n </div>\n `\n : html``}\n `\n }\n\n stateChanged(state: any) {\n this.context = state.route.context\n }\n}\n"]}
|
|
@@ -11,6 +11,10 @@ declare const _default: {
|
|
|
11
11
|
label: {
|
|
12
12
|
control: string;
|
|
13
13
|
};
|
|
14
|
+
theme: {
|
|
15
|
+
control: string;
|
|
16
|
+
options: string[];
|
|
17
|
+
};
|
|
14
18
|
};
|
|
15
19
|
};
|
|
16
20
|
export default _default;
|
|
@@ -21,5 +25,6 @@ interface Story<T> {
|
|
|
21
25
|
}
|
|
22
26
|
interface ArgTypes {
|
|
23
27
|
label?: string;
|
|
28
|
+
theme?: string;
|
|
24
29
|
}
|
|
25
30
|
export declare const Regular: Story<ArgTypes>;
|