@operato/help 2.0.0-alpha.13 → 2.0.0-alpha.132
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 +621 -0
- package/demo/index.html +13 -2
- package/dist/src/components/ox-help-icon.d.ts +2 -2
- package/dist/src/components/ox-help-icon.js +9 -8
- package/dist/src/components/ox-help-icon.js.map +1 -1
- package/dist/src/components/ox-inline-help.d.ts +1 -1
- package/dist/src/components/ox-title-with-help.d.ts +2 -2
- package/dist/src/components/ox-title-with-help.js +10 -8
- package/dist/src/components/ox-title-with-help.js.map +1 -1
- package/dist/src/help-style.js +4 -3
- package/dist/src/help-style.js.map +1 -1
- package/dist/src/pages/ox-help-home.d.ts +1 -1
- package/dist/src/pages/ox-help-home.js +11 -9
- package/dist/src/pages/ox-help-home.js.map +1 -1
- package/dist/src/viewparts/ox-help-panel.d.ts +1 -1
- package/dist/src/viewparts/ox-help-panel.js +18 -21
- package/dist/src/viewparts/ox-help-panel.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -20
- package/src/components/ox-help-icon.ts +9 -8
- package/src/components/ox-title-with-help.ts +10 -8
- package/src/help-style.ts +4 -3
- package/src/pages/ox-help-home.ts +14 -17
- package/src/viewparts/ox-help-panel.ts +18 -21
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-help-icon.js","sourceRoot":"","sources":["../../../src/components/ox-help-icon.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-help-icon.js","sourceRoot":"","sources":["../../../src/components/ox-help-icon.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGzC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAqBL,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC,CAAA;QAED,gBAAW,GAAgE,CAAC,CAAQ,EAAE,EAAE;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAA;QAED,cAAS,GAAgE,CAAC,CAAQ,EAAE,EAAE;YACpF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAA;IAOH,CAAC;IALC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,EAAE,CAAA;IAChE,CAAC;;AAtCM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAe;AAnB/B,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CAwCpB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { openHelp } from '../controller/help.js'\n\n@customElement('ox-help-icon')\nexport class HelpIcon extends LitElement {\n static styles = css`\n md-icon {\n position: relative;\n top: 4px;\n cursor: help;\n opacity: var(--help-icon-opacity);\n color: var(--help-icon-color);\n line-height: 0;\n\n --md-icon-size: var(--help-icon-size);\n\n &:hover {\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n }\n `\n\n @property({ type: String }) topic!: string\n\n onclick = (e: Event) => {\n e.stopPropagation()\n\n openHelp(this.topic)\n }\n\n onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null = (e: Event) => {\n e.stopPropagation()\n }\n\n onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null = (e: Event) => {\n e.stopPropagation()\n }\n\n render() {\n const topic = this.topic\n\n return html`${topic ? html`<md-icon>help</md-icon>` : html``}`\n }\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
declare const TitleWithHelp_base: (new (...args: any[]) => LitElement) & typeof LitElement;
|
|
4
4
|
export declare class TitleWithHelp extends TitleWithHelp_base {
|
|
5
5
|
static styles: import("lit").CSSResult;
|
|
6
6
|
msgid: string;
|
|
7
7
|
topic: string;
|
|
8
|
-
render(): import("lit").TemplateResult<1>;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
9
|
}
|
|
10
10
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
import { i18next, localize } from '@operato/i18n';
|
|
@@ -8,22 +8,24 @@ let TitleWithHelp = class TitleWithHelp extends localize(i18next)(LitElement) {
|
|
|
8
8
|
render() {
|
|
9
9
|
const title = i18next.t(this.msgid);
|
|
10
10
|
const topic = this.topic;
|
|
11
|
-
return html ` ${title} ${topic ? html `<
|
|
11
|
+
return html ` ${title} ${topic ? html `<md-icon @click=${() => openHelp(topic)}>help</md-icon>` : html ``} `;
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
14
|
TitleWithHelp.styles = css `
|
|
15
|
-
|
|
15
|
+
md-icon {
|
|
16
16
|
position: relative;
|
|
17
17
|
top: 4px;
|
|
18
18
|
cursor: help;
|
|
19
19
|
opacity: var(--help-icon-opacity);
|
|
20
20
|
color: var(--help-icon-color);
|
|
21
|
-
font-size: var(--help-icon-size);
|
|
22
21
|
line-height: 0;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
|
|
23
|
+
--md-icon-size: var(--help-icon-size);
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
opacity: var(--help-icon-hover-opacity);
|
|
27
|
+
color: var(--help-icon-hover-color);
|
|
28
|
+
}
|
|
27
29
|
}
|
|
28
30
|
`;
|
|
29
31
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-title-with-help.js","sourceRoot":"","sources":["../../../src/components/ox-title-with-help.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-title-with-help.js","sourceRoot":"","sources":["../../../src/components/ox-title-with-help.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGzC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAsB9D,MAAM;QACJ,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mBAAmB,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,GAAG,CAAA;IAC3G,CAAC;;AA1BM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAe;AApB/B,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CA4BzB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { openHelp } from '../controller/help.js'\n\n@customElement('ox-title-with-help')\nexport class TitleWithHelp extends localize(i18next)(LitElement) {\n static styles = css`\n md-icon {\n position: relative;\n top: 4px;\n cursor: help;\n opacity: var(--help-icon-opacity);\n color: var(--help-icon-color);\n line-height: 0;\n\n --md-icon-size: var(--help-icon-size);\n\n &:hover {\n opacity: var(--help-icon-hover-opacity);\n color: var(--help-icon-hover-color);\n }\n }\n `\n\n @property({ type: String }) msgid!: string\n @property({ type: String }) topic!: string\n\n render() {\n const title = i18next.t(this.msgid)\n const topic = this.topic\n\n return html` ${title} ${topic ? html`<md-icon @click=${() => openHelp(topic)}>help</md-icon>` : html``} `\n }\n}\n"]}
|
package/dist/src/help-style.js
CHANGED
|
@@ -21,7 +21,7 @@ export const HelpStyle = css `
|
|
|
21
21
|
font-size: var(--help-panel-h3-title-font-size);
|
|
22
22
|
color: var(--help-panel-h3-title-color);
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
md-icon {
|
|
25
25
|
vertical-align: middle;
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -91,9 +91,10 @@ export const HelpStyle = css `
|
|
|
91
91
|
font-size: var(--fontsize-default);
|
|
92
92
|
text-decoration: underline;
|
|
93
93
|
}
|
|
94
|
-
a
|
|
95
|
-
font-size: var(--help-panel-a-icon-size);
|
|
94
|
+
a md-icon {
|
|
96
95
|
margin: 0;
|
|
96
|
+
|
|
97
|
+
--md-icon-size: var(--help-panel-a-icon-size);
|
|
97
98
|
}
|
|
98
99
|
a:hover {
|
|
99
100
|
background-color: var(--opacity-light-dark-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"help-style.js","sourceRoot":"","sources":["../../src/help-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"help-style.js","sourceRoot":"","sources":["../../src/help-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH3B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const HelpStyle = css`\n h1 {\n background-color: var(--help-panel-title-background-color);\n margin: var(--help-panel-title-margin);\n padding: var(--help-panel-title-padding);\n font-size: var(--help-panel-h1-title-font-size);\n text-transform: capitalize;\n color: var(--help-panel-h1-title-color);\n }\n h2 {\n margin: var(--help-panel-title-margin);\n padding: var(--help-panel-title-padding);\n font-size: var(--help-panel-h2-title-font-size);\n color: var(--help-panel-h2-title-color);\n text-transform: capitalize;\n }\n h3 {\n margin: var(--help-panel-title-margin);\n padding: var(--help-panel-title-padding);\n font-size: var(--help-panel-h3-title-font-size);\n color: var(--help-panel-h3-title-color);\n }\n md-icon {\n vertical-align: middle;\n }\n\n img {\n display: block;\n margin: var(--margin-narrow) var(--margin-default);\n max-width: 100%;\n }\n img[src*='#icon25'] {\n width: 25px;\n height: 25px;\n }\n img[src*='#icon50'] {\n width: 50px;\n height: 50px;\n }\n img[src*='#icon100'] {\n width: 100px;\n height: 100px;\n }\n img[src*='#icon25inlined'],\n img[src*='#icon50inlined'],\n img[src*='#icon100inlined'] {\n display: inline-block;\n margin: var(--margin-narrow);\n }\n p {\n margin: var(--help-panel-paragraph-margin);\n font-size: var(--help-panel-font-size);\n }\n [focusBox] {\n display: block;\n padding: var(--help-panel-focusBox-padding);\n border: var(--help-panel-focusBox-border);\n border-radius: var(--help-panel-focusBox-border-radius);\n background-color: var(--help-panel-focusBox-background-color);\n color: var(--help-panel-focusBox-color);\n }\n\n [subtitle] {\n font-weight: bold;\n }\n [subtitle]::before {\n content: '';\n width: 7px;\n height: 7px;\n display: inline-block;\n border: 3px solid var(--theme-white-color);\n border-radius: 50%;\n margin-right: var(--margin-narrow);\n }\n p + ol,\n p + ul {\n font-size: var(--help-panel-content-font-size);\n }\n ol,\n ul {\n padding: 0 0 0 30px;\n }\n ol li,\n ul li {\n margin: 0 0 2px 0;\n }\n a {\n margin-bottom: 0 !important;\n color: var(--help-panel-a-color);\n font-size: var(--fontsize-default);\n text-decoration: underline;\n }\n a md-icon {\n margin: 0;\n\n --md-icon-size: var(--help-panel-a-icon-size);\n }\n a:hover {\n background-color: var(--opacity-light-dark-color);\n font-weight: bold;\n }\n\n table {\n border-collapse: collapse;\n border: var(--border-dark-color);\n font-size: 0.9em;\n }\n th {\n border-top: 3px solid var(--primary-color);\n background-color: var(--main-section-background-color);\n color: var(--secondary-color);\n }\n th,\n td {\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow);\n }\n tr:nth-child(even) {\n background-color: #f6f6f6;\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import { css, html } from 'lit';
|
|
4
4
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
5
5
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
@@ -23,13 +23,13 @@ let HelpHome = class HelpHome extends connect(store)(localize(i18next)(PageView)
|
|
|
23
23
|
<ox-markdown id="content" .src=${src} toc></ox-markdown>
|
|
24
24
|
|
|
25
25
|
<div id="navigation">
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
</div>
|
|
26
|
+
<md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>
|
|
27
|
+
<md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>
|
|
28
|
+
<md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>
|
|
29
|
+
</div>
|
|
30
30
|
|
|
31
31
|
${this.showGotoTop
|
|
32
|
-
? html ` <
|
|
32
|
+
? html ` <md-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `
|
|
33
33
|
: html ``}
|
|
34
34
|
`;
|
|
35
35
|
}
|
|
@@ -66,6 +66,8 @@ HelpHome.styles = [
|
|
|
66
66
|
flex-direction: column;
|
|
67
67
|
overflow: hidden;
|
|
68
68
|
position: relative;
|
|
69
|
+
|
|
70
|
+
--md-icon-size: 24px;
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
#navigation {
|
|
@@ -77,8 +79,8 @@ HelpHome.styles = [
|
|
|
77
79
|
background-color: white;
|
|
78
80
|
}
|
|
79
81
|
|
|
80
|
-
#navigation
|
|
81
|
-
padding: var(--help-navigation-icon-padding);
|
|
82
|
+
#navigation md-icon {
|
|
83
|
+
padding: var(--help-navigation-icon-padding, var(--padding-default));
|
|
82
84
|
border-right: var(--help-navigation-icon-border);
|
|
83
85
|
cursor: pointer;
|
|
84
86
|
color: var(--help-icon-color);
|
|
@@ -93,7 +95,7 @@ HelpHome.styles = [
|
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
#upward {
|
|
96
|
-
--
|
|
98
|
+
--md-icon-size: 26px;
|
|
97
99
|
position: absolute;
|
|
98
100
|
bottom: var(--data-list-fab-position-vertical);
|
|
99
101
|
right: var(--data-list-fab-position-horizontal);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-help-home.js","sourceRoot":"","sources":["../../../src/pages/ox-help-home.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-help-home.js","sourceRoot":"","sources":["../../../src/pages/ox-help-home.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjE,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAAlE;;QAuD+B,gBAAW,GAAY,KAAK,CAAA;IA0D3D,CAAC;IArDC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;SAC9B,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,CAAA;QAE9D,OAAO,IAAI,CAAA;uCACwB,GAAG;;;0BAGhB,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,OAAO;0BACzD,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE;0BAC3B,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE;;;QAGhD,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,gCAAgC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,0BAA0B;YAC7F,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAEQ,KAAK,CAAC,YAAY;QACzB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;;YACnD,IAAI,CAAC,WAAW,GAAG,CAAA,MAAC,CAAC,CAAC,MAAsB,0CAAE,SAAS,MAAK,CAAC,CAAA;QAC/D,CAAC,CAAC,CAAA;QAEF,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;QAE1B,IAAI,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAA;QACvG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAA;QAEtF,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,OAAO;SACvB,CAAC,CAAA;QAEF,QAAQ,CAAC,IAAI,EAAE,CAAA;IACjB,CAAC;IAEQ,KAAK,CAAC,WAAW,CAAC,OAAY,EAAE,SAAc;QACrD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,OAAO,CAAA;YACjD,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAA;QAE1B,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;;AA/GM,eAAM,GAAG;IACd,eAAe;IACf,cAAc;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CF;CACF,AAnDY,CAmDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAe;AACb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAA6B;AAEtC;IAAlB,KAAK,CAAC,UAAU,CAAC;yCAAsB;AAClB;IAArB,KAAK,CAAC,aAAa,CAAC;4CAAyB;AA1D1C,QAAQ;IADb,aAAa,CAAC,cAAc,CAAC;GACxB,QAAQ,CAiHb","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-home')\nclass HelpHome extends connect(store)(localize(i18next)(PageView)) {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n\n --md-icon-size: 24px;\n }\n\n #navigation {\n position: absolute;\n display: flex;\n width: 100%;\n padding: var(--help-navigation-padding);\n border-bottom: var(--help-navigation-bottom);\n background-color: white;\n }\n\n #navigation md-icon {\n padding: var(--help-navigation-icon-padding, var(--padding-default));\n border-right: var(--help-navigation-icon-border);\n cursor: pointer;\n color: var(--help-icon-color);\n }\n\n #content {\n flex: 1;\n\n overflow: auto;\n padding: var(--help-panel-content-padding);\n margin: var(--help-panel-margin);\n }\n\n #upward {\n --md-icon-size: 26px;\n position: absolute;\n bottom: var(--data-list-fab-position-vertical);\n right: var(--data-list-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 20px;\n color: var(--data-list-fab-color);\n box-shadow: var(--data-list-fab-shadow);\n padding: 7px;\n\n scroll-padding-top: 65px;\n }\n `\n ]\n\n @property({ type: String }) topic!: string\n @property({ type: Boolean }) showGotoTop: boolean = false\n\n @query('#content') content!: HTMLElement\n @query('#navigation') navigation!: HTMLElement\n\n get context() {\n return {\n title: i18next.t('text.help')\n }\n }\n\n render() {\n const src = this.topic && `/helps/${this.topic || 'index'}.md`\n\n return html`\n <ox-markdown id=\"content\" .src=${src} toc></ox-markdown>\n\n <div id=\"navigation\">\n <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>\n <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>\n <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>\n </div>\n\n ${this.showGotoTop\n ? html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `\n : html``}\n `\n }\n\n override async firstUpdated() {\n this.content.addEventListener('scroll', (e: Event) => {\n this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n })\n\n await this.requestUpdate()\n\n var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n var headroom = new Headroom(this.navigation, {\n scroller: this.content\n })\n\n headroom.init()\n }\n\n override async pageUpdated(changes: any, lifecycle: any) {\n if (this.active) {\n this.topic = lifecycle.params['topic'] || 'index'\n this.content.scrollTop = 0\n }\n }\n\n gotoTop(e: Event) {\n this.content.scrollTop = 0\n\n e.stopPropagation()\n }\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import '@material/
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
2
|
import '@operato/markdown/ox-markdown.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
3
|
import '@operato/markdown/ox-markdown.js';
|
|
4
4
|
import { css, html, LitElement } from 'lit';
|
|
5
5
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
@@ -19,28 +19,20 @@ let HelpPanel = class HelpPanel extends connect(store)(LitElement) {
|
|
|
19
19
|
const src = this.topic && `/helps/${this.topic}.md`;
|
|
20
20
|
return html `
|
|
21
21
|
<div id="navigation">
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
></mwc-icon-button>
|
|
32
|
-
<mwc-icon-button
|
|
33
|
-
icon="keyboard_arrow_right"
|
|
34
|
-
@click=${() => this.historyForward()}
|
|
35
|
-
?disabled=${this.historyIndex >= this.history.length - 1}
|
|
36
|
-
></mwc-icon-button>
|
|
37
|
-
<mwc-icon-button icon="open_in_new" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>
|
|
38
|
-
<mwc-icon-button icon="close" id="close" @click=${() => closeOverlay('help')}></mwc-icon-button>
|
|
22
|
+
<md-icon @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>
|
|
23
|
+
home
|
|
24
|
+
</md-icon>
|
|
25
|
+
<md-icon @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}> keyboard_arrow_left </md-icon>
|
|
26
|
+
<md-icon @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>
|
|
27
|
+
keyboard_arrow_right
|
|
28
|
+
</md-icon>
|
|
29
|
+
<md-icon @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>
|
|
30
|
+
<md-icon id="close" @click=${() => closeOverlay('help')}> close </md-icon>
|
|
39
31
|
</div>
|
|
40
32
|
|
|
41
33
|
${!this.showGotoTop
|
|
42
34
|
? html ``
|
|
43
|
-
: html ` <
|
|
35
|
+
: html ` <md-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</md-icon> `}
|
|
44
36
|
<ox-markdown id="content" .src=${src}></ox-markdown>
|
|
45
37
|
`;
|
|
46
38
|
}
|
|
@@ -138,6 +130,9 @@ HelpPanel.styles = [
|
|
|
138
130
|
margin: 4px;
|
|
139
131
|
|
|
140
132
|
overflow: hidden;
|
|
133
|
+
|
|
134
|
+
--md-icon-size: 24px;
|
|
135
|
+
font-variation-settings: 'FILL' 1;
|
|
141
136
|
}
|
|
142
137
|
|
|
143
138
|
:host(:focus) {
|
|
@@ -152,7 +147,9 @@ HelpPanel.styles = [
|
|
|
152
147
|
border-bottom: var(--help-navigation-bottom);
|
|
153
148
|
background-color: white;
|
|
154
149
|
}
|
|
155
|
-
|
|
150
|
+
|
|
151
|
+
#navigation md-icon {
|
|
152
|
+
padding: var(--help-navigation-icon-padding, var(--padding-default));
|
|
156
153
|
border-right: var(--help-navigation-icon-border);
|
|
157
154
|
cursor: pointer;
|
|
158
155
|
color: var(--help-icon-color);
|
|
@@ -171,7 +168,7 @@ HelpPanel.styles = [
|
|
|
171
168
|
}
|
|
172
169
|
|
|
173
170
|
#upward {
|
|
174
|
-
--
|
|
171
|
+
--md-icon-size: 26px;
|
|
175
172
|
position: absolute;
|
|
176
173
|
bottom: var(--data-list-fab-position-vertical);
|
|
177
174
|
right: var(--data-list-fab-position-horizontal);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-help-panel.js","sourceRoot":"","sources":["../../../src/viewparts/ox-help-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@operato/markdown/ox-markdown.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { closeOverlay } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-panel')\nclass HelpPanel extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--help-panel-background-color);\n\n position: relative;\n width: var(--help-panel-width);\n max-height: 90%;\n border-radius: var(--help-panel-border-raidus);\n border: var(--help-panel-border);\n box-shadow: var(--help-panel-box-shadow);\n color: var(--help-panel-color);\n margin: 4px;\n\n overflow: hidden;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n #navigation {\n display: flex;\n position: absolute;\n width: 100%;\n padding: var(--help-navigation-padding);\n border-bottom: var(--help-navigation-bottom);\n background-color: white;\n }\n #navigation mwc-icon-button {\n border-right: var(--help-navigation-icon-border);\n cursor: pointer;\n color: var(--help-icon-color);\n }\n\n #close {\n margin-left: auto;\n border-right: 0;\n }\n\n #content {\n flex: 1;\n overflow: auto;\n padding: var(--help-panel-content-padding);\n margin: var(--help-panel-margin);\n }\n\n #upward {\n --mdc-icon-size: 26px;\n position: absolute;\n bottom: var(--data-list-fab-position-vertical);\n right: var(--data-list-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 20px;\n color: var(--data-list-fab-color);\n box-shadow: var(--data-list-fab-shadow);\n padding: 7px;\n }\n\n @media screen and (max-width: 460px) {\n :host {\n height: 100%;\n max-height: 100%;\n margin: 0;\n }\n }\n `\n ]\n\n @property({ type: String }) topic!: string\n @property({ type: Boolean }) showGotoTop: boolean = false\n\n @state() historyIndex: number = -1\n @state() history: string[] = []\n\n @query('#content') content!: HTMLElement\n @query('#navigation') navigation!: HTMLElement\n\n render() {\n const src = this.topic && `/helps/${this.topic}.md`\n\n return html`\n <div id=\"navigation\">\n <mwc-icon-button\n icon=\"home\"\n @click=${() => this.goHome()}\n ?disabled=${this.history[0] === this.history[this.historyIndex]}\n ></mwc-icon-button>\n <mwc-icon-button\n icon=\"keyboard_arrow_left\"\n @click=${() => this.historyBack()}\n ?disabled=${this.historyIndex < 1}\n ></mwc-icon-button>\n <mwc-icon-button\n icon=\"keyboard_arrow_right\"\n @click=${() => this.historyForward()}\n ?disabled=${this.historyIndex >= this.history.length - 1}\n ></mwc-icon-button>\n <mwc-icon-button icon=\"open_in_new\" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>\n <mwc-icon-button icon=\"close\" id=\"close\" @click=${() => closeOverlay('help')}></mwc-icon-button>\n </div>\n\n ${!this.showGotoTop\n ? html``\n : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n <ox-markdown id=\"content\" .src=${src}></ox-markdown>\n `\n }\n\n async firstUpdated() {\n this.setupRouter()\n\n this.content.addEventListener('scroll', (e: Event) => {\n this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n })\n\n await this.requestUpdate()\n\n var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n var headroom = new Headroom(this.navigation, {\n scroller: this.content\n })\n headroom.init()\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('topic')) {\n if (this.historyIndex === -1) {\n this.history = [this.topic]\n this.historyIndex = 0\n }\n }\n\n if (changes.has('historyIndex')) {\n this.topic = this.history[this.historyIndex]\n this.content.scrollTop = 0\n }\n }\n\n setupRouter() {\n this.addEventListener('click', e => {\n if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n return\n }\n\n const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement\n if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {\n return\n }\n\n const href = anchor.href\n const newUrl = new URL(href, document.baseURI)\n if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {\n return\n }\n\n e.preventDefault()\n e.stopPropagation()\n\n const pathname = newUrl.pathname\n const topic = newUrl.searchParams?.get('topic')\n if (pathname.endsWith('/help') && topic) {\n this.history = [...this.history.slice(0, this.historyIndex + 1), topic]\n this.historyIndex++\n this.topic = topic\n } else {\n navigate(href)\n }\n\n return\n })\n }\n\n gotoTop(e: Event) {\n this.content.scrollTop = 0\n\n e.stopPropagation()\n }\n\n goHome() {\n if (!this.history?.[0] || this.history[0] == this.topic) {\n return\n }\n this.history.push(this.history[0])\n this.historyIndex = this.history.length - 1\n }\n\n historyBack() {\n this.historyIndex > 0 && this.historyIndex--\n }\n\n historyForward() {\n this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-help-panel.js","sourceRoot":"","sources":["../../../src/viewparts/ox-help-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/markdown/ox-markdown.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { closeOverlay } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-help-panel')\nclass HelpPanel extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--help-panel-background-color);\n\n position: relative;\n width: var(--help-panel-width);\n max-height: 90%;\n border-radius: var(--help-panel-border-raidus);\n border: var(--help-panel-border);\n box-shadow: var(--help-panel-box-shadow);\n color: var(--help-panel-color);\n margin: 4px;\n\n overflow: hidden;\n\n --md-icon-size: 24px;\n font-variation-settings: 'FILL' 1;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n #navigation {\n display: flex;\n position: absolute;\n width: 100%;\n padding: var(--help-navigation-padding);\n border-bottom: var(--help-navigation-bottom);\n background-color: white;\n }\n\n #navigation md-icon {\n padding: var(--help-navigation-icon-padding, var(--padding-default));\n border-right: var(--help-navigation-icon-border);\n cursor: pointer;\n color: var(--help-icon-color);\n }\n\n #close {\n margin-left: auto;\n border-right: 0;\n }\n\n #content {\n flex: 1;\n overflow: auto;\n padding: var(--help-panel-content-padding);\n margin: var(--help-panel-margin);\n }\n\n #upward {\n --md-icon-size: 26px;\n position: absolute;\n bottom: var(--data-list-fab-position-vertical);\n right: var(--data-list-fab-position-horizontal);\n background-color: rgba(255, 255, 255, 0.7);\n border-radius: 20px;\n color: var(--data-list-fab-color);\n box-shadow: var(--data-list-fab-shadow);\n padding: 7px;\n }\n\n @media screen and (max-width: 460px) {\n :host {\n height: 100%;\n max-height: 100%;\n margin: 0;\n }\n }\n `\n ]\n\n @property({ type: String }) topic!: string\n @property({ type: Boolean }) showGotoTop: boolean = false\n\n @state() historyIndex: number = -1\n @state() history: string[] = []\n\n @query('#content') content!: HTMLElement\n @query('#navigation') navigation!: HTMLElement\n\n render() {\n const src = this.topic && `/helps/${this.topic}.md`\n\n return html`\n <div id=\"navigation\">\n <md-icon @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>\n home\n </md-icon>\n <md-icon @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}> keyboard_arrow_left </md-icon>\n <md-icon @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>\n keyboard_arrow_right\n </md-icon>\n <md-icon @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>\n <md-icon id=\"close\" @click=${() => closeOverlay('help')}> close </md-icon>\n </div>\n\n ${!this.showGotoTop\n ? html``\n : html` <md-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}\n <ox-markdown id=\"content\" .src=${src}></ox-markdown>\n `\n }\n\n async firstUpdated() {\n this.setupRouter()\n\n this.content.addEventListener('scroll', (e: Event) => {\n this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0\n })\n\n await this.requestUpdate()\n\n var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))\n this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'\n\n var headroom = new Headroom(this.navigation, {\n scroller: this.content\n })\n headroom.init()\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('topic')) {\n if (this.historyIndex === -1) {\n this.history = [this.topic]\n this.historyIndex = 0\n }\n }\n\n if (changes.has('historyIndex')) {\n this.topic = this.history[this.historyIndex]\n this.content.scrollTop = 0\n }\n }\n\n setupRouter() {\n this.addEventListener('click', e => {\n if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n return\n }\n\n const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement\n if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {\n return\n }\n\n const href = anchor.href\n const newUrl = new URL(href, document.baseURI)\n if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {\n return\n }\n\n e.preventDefault()\n e.stopPropagation()\n\n const pathname = newUrl.pathname\n const topic = newUrl.searchParams?.get('topic')\n if (pathname.endsWith('/help') && topic) {\n this.history = [...this.history.slice(0, this.historyIndex + 1), topic]\n this.historyIndex++\n this.topic = topic\n } else {\n navigate(href)\n }\n\n return\n })\n }\n\n gotoTop(e: Event) {\n this.content.scrollTop = 0\n\n e.stopPropagation()\n }\n\n goHome() {\n if (!this.history?.[0] || this.history[0] == this.topic) {\n return\n }\n this.history.push(this.history[0])\n this.historyIndex = this.history.length - 1\n }\n\n historyBack() {\n this.historyIndex > 0 && this.historyIndex--\n }\n\n historyForward() {\n this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++\n }\n}\n"]}
|