@nyaruka/temba-components 0.31.5 → 0.31.8
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 +21 -0
- package/dist/{0dab0c35.js → 41f084a5.js} +98 -17
- package/dist/index.js +98 -17
- package/dist/static/icons/symbol-defs.svg +7 -3
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/anchor/Anchor.js +7 -4
- package/out-tsc/src/anchor/Anchor.js.map +1 -1
- package/out-tsc/src/contacts/ContactNameFetch.js +1 -1
- package/out-tsc/src/contacts/ContactNameFetch.js.map +1 -1
- package/out-tsc/src/contacts/ContactUrn.js +8 -1
- package/out-tsc/src/contacts/ContactUrn.js.map +1 -1
- package/out-tsc/src/interfaces.js.map +1 -1
- package/out-tsc/src/list/RunList.js +3 -2
- package/out-tsc/src/list/RunList.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +102 -17
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +6 -0
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/src/vectoricon/VectorIcon.js +2 -3
- package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
- package/package.json +1 -1
- package/src/anchor/Anchor.ts +7 -4
- package/src/contacts/ContactNameFetch.ts +1 -1
- package/src/contacts/ContactUrn.ts +5 -2
- package/src/interfaces.ts +1 -0
- package/src/list/RunList.ts +3 -2
- package/src/list/TembaMenu.ts +106 -17
- package/src/tabpane/TabPane.ts +6 -0
- package/src/vectoricon/VectorIcon.ts +2 -3
- package/static/icons/Read Me.txt +1 -1
- package/static/icons/SVG/menu-collapse.svg +5 -0
- package/static/icons/SVG/zapier.svg +2 -1
- package/static/icons/demo-external-svg.html +144 -139
- package/static/icons/demo-files/demo.css +4 -4
- package/static/icons/demo.html +151 -142
- package/static/icons/selection.json +250 -200
- package/static/icons/symbol-defs.svg +7 -3
|
@@ -20,6 +20,7 @@ export class TabPane extends RapidElement {
|
|
|
20
20
|
|
|
21
21
|
.tabs {
|
|
22
22
|
display: flex;
|
|
23
|
+
padding-left: 0.18em;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.tab {
|
|
@@ -36,6 +37,7 @@ export class TabPane extends RapidElement {
|
|
|
36
37
|
color: var(--color-text-dark);
|
|
37
38
|
--icon-color: var(--color-text-dark);
|
|
38
39
|
white-space: nowrap;
|
|
40
|
+
transition: all 100ms ease-in-out;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
.tab.hidden {
|
|
@@ -74,6 +76,8 @@ export class TabPane extends RapidElement {
|
|
|
74
76
|
cursor: default;
|
|
75
77
|
box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
|
|
76
78
|
background: #fff;
|
|
79
|
+
transform: scale(1.05) translateY(-0.05em);
|
|
80
|
+
z-index: 0;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.pane {
|
|
@@ -85,10 +89,12 @@ export class TabPane extends RapidElement {
|
|
|
85
89
|
box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
|
|
86
90
|
3px 3px 2px 1px rgba(0, 0, 0, 0.05);
|
|
87
91
|
min-height: 0;
|
|
92
|
+
z-index: 1;
|
|
88
93
|
}
|
|
89
94
|
|
|
90
95
|
.pane.first {
|
|
91
96
|
border-top-left-radius: 0px;
|
|
97
|
+
overflow: hidden;
|
|
92
98
|
}
|
|
93
99
|
|
|
94
100
|
.badge {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,OAAO,OAAQ,SAAQ,YAAY;IAAzC;;
|
|
1
|
+
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .tabs {\n display: flex;\n padding-left: 0.18em;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 1em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms ease-in-out;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n margin-right: 0.4em;\n overflow: hidden;\n transition: max-width 500ms ease-in-out;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .tab.selected {\n cursor: default;\n box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);\n background: #fff;\n transform: scale(1.05) translateY(-0.05em);\n z-index: 0;\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: #fff;\n border-radius: var(--curvature);\n box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n 3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n min-height: 0;\n z-index: 1;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n `;\n }\n\n @property({ type: Boolean })\n collapses = false;\n\n @property({ type: Number })\n index = 0;\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n this.requestUpdate('index');\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index')) {\n if (this.children.length > this.index) {\n for (let i = 0; i < this.children.length; i++) {\n const tab = this.children[i] as Tab;\n tab.selected = i == this.index;\n\n if (tab.selected) {\n tab.style.display = 'flex';\n } else {\n tab.style.display = 'none';\n }\n }\n }\n this.fireEvent(CustomEventType.ContextChanged);\n }\n }\n\n public getTab(index: number): Tab {\n return this.children.item(index) as Tab;\n }\n\n public render(): TemplateResult {\n const tabs: Tab[] = [];\n for (const tab of this.children) {\n tabs.push(tab as Tab);\n }\n\n return html`\n <div\n class=\"tabs ${getClasses({ tabs: true, collapses: this.collapses })}\"\n >\n ${tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n </div>\n `\n )}\n </div>\n <div class=\"pane ${this.index === 0 ? 'first' : null}\">\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit';
|
|
|
3
3
|
import { property } from 'lit/decorators';
|
|
4
4
|
import { getClasses } from '../utils';
|
|
5
5
|
// for cache busting, increase whenever the icon set changes
|
|
6
|
-
const ICON_VERSION =
|
|
6
|
+
const ICON_VERSION = 15;
|
|
7
7
|
export class VectorIcon extends LitElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
@@ -17,7 +17,6 @@ export class VectorIcon extends LitElement {
|
|
|
17
17
|
return css `
|
|
18
18
|
:host {
|
|
19
19
|
margin: auto;
|
|
20
|
-
--color1: var(--icon-color);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.sheet {
|
|
@@ -56,7 +55,7 @@ export class VectorIcon extends LitElement {
|
|
|
56
55
|
|
|
57
56
|
.clickable:hover {
|
|
58
57
|
cursor: pointer;
|
|
59
|
-
fill: var(--color-link-primary);
|
|
58
|
+
fill: var(--color-link-primary) !important;
|
|
60
59
|
background: rgb(255, 255, 255);
|
|
61
60
|
}
|
|
62
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,4DAA4D;AAC5D,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,OAAO,UAAW,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 15;\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: String })\n animateClick: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: String })\n src = '';\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n }\n\n .sheet {\n fill: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n .sheet.spin {\n transform: rotate(0deg);\n }\n\n .sheet.spin-1 {\n transform: rotate(180deg);\n }\n\n .sheet.spin-2 {\n transform: rotate(360deg);\n }\n\n .sheet.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n .sheet.pulse {\n transform: scale(1);\n }\n\n .sheet.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary) !important;\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: rgb(240, 240, 240);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms linear,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n --icon-circle-size: 0.35em;\n --icon-background: var(--icon-color-circle-hover);\n }\n\n .wrapper.clickable {\n padding: var(--icon-circle-size);\n margin: calc(-1 * var(--icon-circle-size));\n background: var(--icon-background);\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public handleClicked() {\n if (this.animateClick) {\n this.animationStep = 1;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div\n @click=${this.handleClicked}\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange || !!this.animateClick,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n sheet: this.src === '',\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n [this.animateClick]: !!this.animateClick,\n [this.animateClick + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.src\n ? this.src\n : `${\n this.prefix || (window as any).static_url || '/static/'\n }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${\n this.lastName || this.name || this.id\n }`}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/anchor/Anchor.ts
CHANGED
|
@@ -5,8 +5,13 @@ export class Anchor extends LitElement {
|
|
|
5
5
|
static get styles() {
|
|
6
6
|
return css`
|
|
7
7
|
:host {
|
|
8
|
-
cursor: pointer;
|
|
9
8
|
color: var(--color-link-primary);
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
slot:hover {
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
text-decoration: underline;
|
|
10
15
|
}
|
|
11
16
|
`;
|
|
12
17
|
}
|
|
@@ -20,8 +25,6 @@ export class Anchor extends LitElement {
|
|
|
20
25
|
}
|
|
21
26
|
|
|
22
27
|
public render(): TemplateResult {
|
|
23
|
-
return html
|
|
24
|
-
<slot href="${this.href}" @click="${this.handleClick}"></slot>
|
|
25
|
-
`;
|
|
28
|
+
return html`<slot href="${this.href}" @click="${this.handleClick}"></slot>`;
|
|
26
29
|
}
|
|
27
30
|
}
|
|
@@ -22,7 +22,7 @@ export class ContactNameFetch extends ContactStoreElement {
|
|
|
22
22
|
public render(): TemplateResult {
|
|
23
23
|
if (this.data) {
|
|
24
24
|
return html` <temba-contact-name
|
|
25
|
-
name=${this.data.name}
|
|
25
|
+
name=${this.data.name || this.data.anon_display}
|
|
26
26
|
urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
|
|
27
27
|
/>
|
|
28
28
|
<slot></slot>`;
|
|
@@ -6,8 +6,11 @@ export class ContactUrn extends RapidElement {
|
|
|
6
6
|
@property({ type: String })
|
|
7
7
|
urn: string;
|
|
8
8
|
|
|
9
|
+
@property({ type: String })
|
|
10
|
+
scheme: string;
|
|
11
|
+
|
|
9
12
|
@property({ type: Number })
|
|
10
|
-
size
|
|
13
|
+
size = 20;
|
|
11
14
|
|
|
12
15
|
static get styles() {
|
|
13
16
|
return css`
|
|
@@ -34,7 +37,7 @@ export class ContactUrn extends RapidElement {
|
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
public render(): TemplateResult {
|
|
37
|
-
const scheme = this.urn.split(':')[0];
|
|
40
|
+
const scheme = this.scheme || this.urn.split(':')[0];
|
|
38
41
|
return html`
|
|
39
42
|
<img
|
|
40
43
|
class="urn ${this.size < 20 ? 'small' : ''}"
|
package/src/interfaces.ts
CHANGED
package/src/list/RunList.ts
CHANGED
|
@@ -128,7 +128,7 @@ export class RunList extends TembaList {
|
|
|
128
128
|
style="width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
|
|
129
129
|
>
|
|
130
130
|
<temba-contact-name
|
|
131
|
-
name=${run.contact.name}
|
|
131
|
+
name=${run.contact.name || run.contact.anon_display}
|
|
132
132
|
urn=${run.contact.urn}
|
|
133
133
|
icon-size="15"
|
|
134
134
|
/>
|
|
@@ -240,7 +240,8 @@ export class RunList extends TembaList {
|
|
|
240
240
|
<div>
|
|
241
241
|
<temba-contact-name
|
|
242
242
|
style="cursor:pointer"
|
|
243
|
-
name=${this.selectedRun.contact.name
|
|
243
|
+
name=${this.selectedRun.contact.name ||
|
|
244
|
+
this.selectedRun.contact.anon_display}
|
|
244
245
|
urn=${this.selectedRun.contact.urn}
|
|
245
246
|
onclick="goto(event, this)"
|
|
246
247
|
href="/contact/read/${this.selectedRun.contact.uuid}/"
|
package/src/list/TembaMenu.ts
CHANGED
|
@@ -17,6 +17,7 @@ export interface MenuItem {
|
|
|
17
17
|
level?: number;
|
|
18
18
|
trigger?: string;
|
|
19
19
|
href?: string;
|
|
20
|
+
show_header?: boolean;
|
|
20
21
|
items?: MenuItem[];
|
|
21
22
|
inline?: boolean;
|
|
22
23
|
type?: string;
|
|
@@ -129,6 +130,9 @@ export class TembaMenu extends RapidElement {
|
|
|
129
130
|
.level-0 > .top {
|
|
130
131
|
padding-top: var(--menu-padding);
|
|
131
132
|
background: var(--color-primary-dark);
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
align-items: center;
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
.level-0 > .empty {
|
|
@@ -395,7 +399,7 @@ export class TembaMenu extends RapidElement {
|
|
|
395
399
|
}
|
|
396
400
|
|
|
397
401
|
.fully-collapsed .level-1 {
|
|
398
|
-
margin-left: -
|
|
402
|
+
margin-left: -208px;
|
|
399
403
|
pointer-events: none;
|
|
400
404
|
border: none;
|
|
401
405
|
overflow: hidden;
|
|
@@ -421,6 +425,54 @@ export class TembaMenu extends RapidElement {
|
|
|
421
425
|
margin-left: 0.75em;
|
|
422
426
|
margin-right: 0.75em;
|
|
423
427
|
}
|
|
428
|
+
|
|
429
|
+
.expand-icon {
|
|
430
|
+
transform: rotate(180deg);
|
|
431
|
+
--icon-color: rgba(255, 255, 255, 0.5);
|
|
432
|
+
cursor: pointer;
|
|
433
|
+
max-height: 0px;
|
|
434
|
+
overflow: hidden;
|
|
435
|
+
opacity: 0;
|
|
436
|
+
transition: all 400ms ease-in-out 400ms;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.expand-icon:hover {
|
|
440
|
+
--icon-color: #fff;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.fully-collapsed .expand-icon {
|
|
444
|
+
padding-top: 0.5em;
|
|
445
|
+
max-height: 2em;
|
|
446
|
+
opacity: 1;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.section-header {
|
|
450
|
+
display: flex;
|
|
451
|
+
align-items: center;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.section-header .section {
|
|
455
|
+
flex-grow: 1;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.section-header temba-icon {
|
|
459
|
+
--icon-color: #ddd;
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
padding-bottom: 0.5em;
|
|
462
|
+
padding-right: 0.5em;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.section-header temba-icon:hover {
|
|
466
|
+
--icon-color: var(--color-link-primary);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
slot[name='header'] {
|
|
470
|
+
display: none;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
slot[name='header'].show-header {
|
|
474
|
+
display: block;
|
|
475
|
+
}
|
|
424
476
|
`;
|
|
425
477
|
}
|
|
426
478
|
|
|
@@ -524,21 +576,24 @@ export class TembaMenu extends RapidElement {
|
|
|
524
576
|
private fireNoPath(missingId: string) {
|
|
525
577
|
const item = this.getMenuItem();
|
|
526
578
|
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
579
|
+
if (item) {
|
|
580
|
+
const details = {
|
|
581
|
+
item: item.id,
|
|
582
|
+
selection: '/' + this.selection.join('/'),
|
|
583
|
+
endpoint: item.endpoint,
|
|
584
|
+
path:
|
|
585
|
+
missingId + '/' + this.pending.join('/') + document.location.search,
|
|
586
|
+
};
|
|
533
587
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
588
|
+
// remove any excess from our selection
|
|
589
|
+
const selection = this.selection.join('/');
|
|
590
|
+
selection.replace(details.path, '');
|
|
591
|
+
this.selection = selection.split('/');
|
|
538
592
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
593
|
+
this.fireCustomEvent(CustomEventType.NoPath, details);
|
|
594
|
+
this.pending = [];
|
|
595
|
+
this.requestUpdate('root');
|
|
596
|
+
}
|
|
542
597
|
}
|
|
543
598
|
|
|
544
599
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -645,7 +700,7 @@ export class TembaMenu extends RapidElement {
|
|
|
645
700
|
}
|
|
646
701
|
|
|
647
702
|
if (menuItem.endpoint) {
|
|
648
|
-
this.loadItems(menuItem,
|
|
703
|
+
this.loadItems(menuItem, true);
|
|
649
704
|
this.dispatchEvent(new Event('change'));
|
|
650
705
|
} else {
|
|
651
706
|
if (this.pending && this.pending.length > 0) {
|
|
@@ -744,6 +799,14 @@ export class TembaMenu extends RapidElement {
|
|
|
744
799
|
}
|
|
745
800
|
}
|
|
746
801
|
|
|
802
|
+
public handleExpand() {
|
|
803
|
+
this.collapsed = false;
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
public handleCollapse() {
|
|
807
|
+
this.collapsed = true;
|
|
808
|
+
}
|
|
809
|
+
|
|
747
810
|
public async setFocusedItem(path: string) {
|
|
748
811
|
const focusedPath = path.split('/').filter(step => !!step);
|
|
749
812
|
|
|
@@ -923,7 +986,15 @@ export class TembaMenu extends RapidElement {
|
|
|
923
986
|
|
|
924
987
|
levels.push(
|
|
925
988
|
html`<div class="level level-0 ${this.submenu ? 'hidden' : ''}">
|
|
926
|
-
<div class="top"
|
|
989
|
+
<div class="top">
|
|
990
|
+
<div class="expand-icon" @click=${this.handleExpand}>
|
|
991
|
+
<temba-icon
|
|
992
|
+
name="menu-collapse"
|
|
993
|
+
class="expand"
|
|
994
|
+
size="1.4"
|
|
995
|
+
></temba-icon>
|
|
996
|
+
</div>
|
|
997
|
+
</div>
|
|
927
998
|
|
|
928
999
|
${items
|
|
929
1000
|
.filter(item => !item.bottom)
|
|
@@ -972,7 +1043,25 @@ export class TembaMenu extends RapidElement {
|
|
|
972
1043
|
})}"
|
|
973
1044
|
>
|
|
974
1045
|
${!this.submenu
|
|
975
|
-
? html
|
|
1046
|
+
? html`
|
|
1047
|
+
<slot
|
|
1048
|
+
class="${getClasses({
|
|
1049
|
+
'show-header': selected.show_header,
|
|
1050
|
+
})}"
|
|
1051
|
+
name="header"
|
|
1052
|
+
></slot>
|
|
1053
|
+
<div class="section-header">
|
|
1054
|
+
<div class="section">${selected.name}</div>
|
|
1055
|
+
|
|
1056
|
+
${index == 0 && !this.collapsed
|
|
1057
|
+
? html`<temba-icon
|
|
1058
|
+
name="menu-collapse"
|
|
1059
|
+
size="1.1"
|
|
1060
|
+
@click=${this.handleCollapse}
|
|
1061
|
+
></temba-icon>`
|
|
1062
|
+
: null}
|
|
1063
|
+
</div>
|
|
1064
|
+
`
|
|
976
1065
|
: null}
|
|
977
1066
|
${items.map((item: MenuItem) => {
|
|
978
1067
|
if (item.inline && item.items) {
|
package/src/tabpane/TabPane.ts
CHANGED
|
@@ -16,6 +16,7 @@ export class TabPane extends RapidElement {
|
|
|
16
16
|
|
|
17
17
|
.tabs {
|
|
18
18
|
display: flex;
|
|
19
|
+
padding-left: 0.18em;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.tab {
|
|
@@ -32,6 +33,7 @@ export class TabPane extends RapidElement {
|
|
|
32
33
|
color: var(--color-text-dark);
|
|
33
34
|
--icon-color: var(--color-text-dark);
|
|
34
35
|
white-space: nowrap;
|
|
36
|
+
transition: all 100ms ease-in-out;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.tab.hidden {
|
|
@@ -70,6 +72,8 @@ export class TabPane extends RapidElement {
|
|
|
70
72
|
cursor: default;
|
|
71
73
|
box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
|
|
72
74
|
background: #fff;
|
|
75
|
+
transform: scale(1.05) translateY(-0.05em);
|
|
76
|
+
z-index: 0;
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
.pane {
|
|
@@ -81,10 +85,12 @@ export class TabPane extends RapidElement {
|
|
|
81
85
|
box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
|
|
82
86
|
3px 3px 2px 1px rgba(0, 0, 0, 0.05);
|
|
83
87
|
min-height: 0;
|
|
88
|
+
z-index: 1;
|
|
84
89
|
}
|
|
85
90
|
|
|
86
91
|
.pane.first {
|
|
87
92
|
border-top-left-radius: 0px;
|
|
93
|
+
overflow: hidden;
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
.badge {
|
|
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
|
|
|
4
4
|
import { getClasses } from '../utils';
|
|
5
5
|
|
|
6
6
|
// for cache busting, increase whenever the icon set changes
|
|
7
|
-
const ICON_VERSION =
|
|
7
|
+
const ICON_VERSION = 15;
|
|
8
8
|
|
|
9
9
|
export class VectorIcon extends LitElement {
|
|
10
10
|
@property({ type: String })
|
|
@@ -51,7 +51,6 @@ export class VectorIcon extends LitElement {
|
|
|
51
51
|
return css`
|
|
52
52
|
:host {
|
|
53
53
|
margin: auto;
|
|
54
|
-
--color1: var(--icon-color);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
.sheet {
|
|
@@ -90,7 +89,7 @@ export class VectorIcon extends LitElement {
|
|
|
90
89
|
|
|
91
90
|
.clickable:hover {
|
|
92
91
|
cursor: pointer;
|
|
93
|
-
fill: var(--color-link-primary);
|
|
92
|
+
fill: var(--color-link-primary) !important;
|
|
94
93
|
background: rgb(255, 255, 255);
|
|
95
94
|
}
|
|
96
95
|
|
package/static/icons/Read Me.txt
CHANGED
|
@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
|
|
|
4
4
|
|
|
5
5
|
*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
|
|
6
6
|
|
|
7
|
-
<svg class="icon icon-
|
|
7
|
+
<svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg>
|
|
8
8
|
|
|
9
9
|
You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
|
|
10
10
|
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<!-- Generated by IcoMoon.io -->
|
|
2
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
3
|
+
<title>menu-collapse</title>
|
|
4
|
+
<path d="M21 15.609l-1.406 1.406-5.016-5.016 5.016-5.016 1.406 1.406-3.563 3.609zM3 6h12.984v2.016h-12.984v-2.016zM3 12.984v-1.969h9.984v1.969h-9.984zM3 18v-2.016h12.984v2.016h-12.984z"></path>
|
|
5
|
+
</svg>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<!-- Generated by IcoMoon.io -->
|
|
2
2
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
3
3
|
<title>zapier</title>
|
|
4
|
-
<path fill="#
|
|
4
|
+
<path fill="#474747" d="M4.8 0h22.4c2.651 0 4.8 2.149 4.8 4.8v22.4c0 2.651-2.149 4.8-4.8 4.8h-22.4c-2.651 0-4.8-2.149-4.8-4.8v-22.4c0-2.651 2.149-4.8 4.8-4.8z"></path>
|
|
5
|
+
<path fill="#fff" d="M4.8 20.8h22.4v6.4h-22.4v-6.4z"></path>
|
|
5
6
|
</svg>
|