@neovici/cosmoz-bottom-bar 4.2.0 → 4.5.1
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/cosmoz-bottom-bar.html.js +82 -130
- package/cosmoz-bottom-bar.js +5 -23
- package/package.json +3 -8
|
@@ -1,133 +1,85 @@
|
|
|
1
|
-
import '@
|
|
2
|
-
|
|
3
|
-
import '@polymer/iron-icons';
|
|
4
|
-
import '@polymer/paper-icon-button';
|
|
5
|
-
import '@polymer/paper-menu-button';
|
|
6
|
-
import '@polymer/paper-listbox';
|
|
7
|
-
import '@polymer/iron-selector/iron-selector';
|
|
8
|
-
|
|
1
|
+
import '@neovici/cosmoz-dropdown';
|
|
9
2
|
import { html } from '@polymer/polymer/lib/utils/html-tag';
|
|
10
|
-
export default html`
|
|
11
|
-
<style>
|
|
12
|
-
:host {
|
|
13
|
-
display: block;
|
|
14
|
-
position: absolute;
|
|
15
|
-
bottom: 0;
|
|
16
|
-
left: 0;
|
|
17
|
-
width: 100%;
|
|
18
|
-
max-width: 100%; /* Firefox fix */
|
|
19
|
-
background-color: inherit;
|
|
20
|
-
transition: max-height 0.3s ease;
|
|
21
|
-
z-index: 10;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
[hidden] {
|
|
25
|
-
display: none !important;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
#bar, #info, #toolbar, #extraToolbarSlot, #menu, #dropdown ::slotted(:not(slot)) {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
#bar {
|
|
34
|
-
padding: 0 3%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
#info {
|
|
38
|
-
min-width: 5px;
|
|
39
|
-
padding-right: 3%;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
#dropdownButton {
|
|
43
|
-
color: var(--cosmoz-bottom-bar-menubutton-color, var(--light-primary-color));
|
|
44
|
-
background-color: var(--cosmoz-bottom-bar-menubutton-background-color, var(--dark-primary-color));
|
|
45
|
-
@apply --cosmoz-bottom-bar-menubutton;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
#extraToolbarSlot ::slotted(:not(slot)) {
|
|
49
|
-
@apply --cosmoz-bottom-bar-extra-toolbar-item;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
#flex {
|
|
53
|
-
flex: 1 0.000000000001px;
|
|
54
|
-
}
|
|
55
3
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
4
|
+
export default html`
|
|
5
|
+
<style>
|
|
6
|
+
:host {
|
|
7
|
+
display: block;
|
|
8
|
+
position: absolute;
|
|
9
|
+
bottom: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
width: 100%;
|
|
12
|
+
max-width: 100%; /* Firefox fix */
|
|
13
|
+
background-color: inherit;
|
|
14
|
+
transition: max-height 0.3s ease;
|
|
15
|
+
z-index: 10;
|
|
16
|
+
--cosmoz-dropdown-anchor-spacing: 12px 6px;
|
|
17
|
+
--paper-button: {
|
|
18
|
+
background-color: inherit;
|
|
19
|
+
text-transform: none;
|
|
20
|
+
border: 0;
|
|
21
|
+
border-radius: 0;
|
|
22
|
+
font-size: inherit;
|
|
23
|
+
color: inherit;
|
|
24
|
+
font-weight: inherit;
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
[hidden], ::slotted([hidden]) {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
32
|
+
#bar {
|
|
33
|
+
padding: 0 3%;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
#info {
|
|
38
|
+
min-width: 5px;
|
|
39
|
+
padding-right: 3%;
|
|
40
|
+
margin-right: auto;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
}
|
|
43
|
+
#bottomBarToolbar::slotted(:not(slot)) {
|
|
44
|
+
margin: 0 0.29em;
|
|
45
|
+
min-width: 40px;
|
|
46
|
+
min-height: 40px;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
background: var(--cosmoz-bottom-bar-button-bg-color, var(--cosmoz-button-bg-color, #101010));
|
|
50
|
+
color: var(--cosmoz-bottom-bar-button-color, var(--cosmoz-button-color, #fff));
|
|
51
|
+
border-radius: 6px;
|
|
52
|
+
padding: 0 18px;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
line-height: 40px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
#bottomBarToolbar::slotted(:not(slot)[disabled]) {
|
|
59
|
+
opacity: var(--cosmoz-button-disabled-opacity, 0.15);
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
}
|
|
62
|
+
#bottomBarToolbar::slotted(:not(slot):hover) {
|
|
63
|
+
background: var(--cosmoz-bottom-bar-button-hover-bg-color, var(--cosmoz-button-hover-bg-color, #3A3F44));
|
|
64
|
+
}
|
|
65
|
+
#dropdown::part(dropdown) {
|
|
66
|
+
max-width: 300px;
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
69
|
+
<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
|
|
70
|
+
<div id="info"><slot name="info"></slot></div>
|
|
71
|
+
<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
|
|
72
|
+
<cosmoz-dropdown-menu id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]">
|
|
73
|
+
<svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
74
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z" fill="white"/>
|
|
75
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z" fill="white"/>
|
|
76
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z" fill="white"/>
|
|
77
|
+
</svg>
|
|
78
|
+
<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
|
|
79
|
+
</cosmoz-dropdown-menu>
|
|
80
|
+
<slot name="extra" id="extraSlot"></slot>
|
|
81
|
+
</div>
|
|
82
|
+
<div hidden style="display:none">
|
|
83
|
+
<slot id="content"></slot>
|
|
84
|
+
</div>
|
|
133
85
|
`;
|
package/cosmoz-bottom-bar.js
CHANGED
|
@@ -7,6 +7,7 @@ import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
|
|
|
7
7
|
import { timeOut } from '@polymer/polymer/lib/utils/async';
|
|
8
8
|
import template from './cosmoz-bottom-bar.html.js';
|
|
9
9
|
import { html } from 'haunted';
|
|
10
|
+
import { defaultPlacement } from '@neovici/cosmoz-dropdown';
|
|
10
11
|
|
|
11
12
|
const
|
|
12
13
|
BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
|
|
@@ -155,6 +156,10 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
155
156
|
_matchHeightElement: {
|
|
156
157
|
type: Object,
|
|
157
158
|
computed: '_getHeightMatchingElement(matchParent)'
|
|
159
|
+
},
|
|
160
|
+
|
|
161
|
+
topPlacement: {
|
|
162
|
+
value: ['top-right', ...defaultPlacement]
|
|
158
163
|
}
|
|
159
164
|
};
|
|
160
165
|
}
|
|
@@ -167,7 +172,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
167
172
|
|
|
168
173
|
constructor() {
|
|
169
174
|
super();
|
|
170
|
-
this._boundDropdownClosed = this._dropdownClosed.bind(this);
|
|
171
175
|
this._boundChildrenUpdated = this._childrenUpdated.bind(this);
|
|
172
176
|
this._boundLayoutActions = this._layoutActions.bind(this);
|
|
173
177
|
this._resizeObserver = new ResizeObserver((...args) => {
|
|
@@ -179,7 +183,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
179
183
|
connectedCallback() {
|
|
180
184
|
super.connectedCallback();
|
|
181
185
|
|
|
182
|
-
this.addEventListener('iron-closed-overlay', this._boundDropdownClosed);
|
|
183
186
|
|
|
184
187
|
const layoutOnRemove = info => info.removedNodes.filter(this._isActionNode) && this._debounceLayoutActions();
|
|
185
188
|
this._nodeObservers = [
|
|
@@ -196,7 +199,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
196
199
|
disconnectedCallback() {
|
|
197
200
|
super.disconnectedCallback();
|
|
198
201
|
|
|
199
|
-
this.removeEventListener('iron-closed-overlay', this._boundDropdownClosed);
|
|
200
202
|
[...this._nodeObservers, this._hiddenMutationObserver].forEach(e => e.disconnect(e));
|
|
201
203
|
this._layoutDebouncer?.cancel(); /* eslint-disable-line no-unused-expressions */
|
|
202
204
|
this._resizeObserver.unobserve(this);
|
|
@@ -240,20 +242,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
240
242
|
);
|
|
241
243
|
}
|
|
242
244
|
|
|
243
|
-
_dropdownClosed() {
|
|
244
|
-
this.$.dropdownButton.active = false;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
_fireAction(item) {
|
|
248
|
-
item?.dispatchEvent?.(new window.CustomEvent('action', {
|
|
249
|
-
bubbles: true,
|
|
250
|
-
cancelable: true,
|
|
251
|
-
detail: {
|
|
252
|
-
item
|
|
253
|
-
}
|
|
254
|
-
}));
|
|
255
|
-
}
|
|
256
|
-
|
|
257
245
|
_getHeightMatchingElement(matchParent) {
|
|
258
246
|
if (matchParent) {
|
|
259
247
|
return this.parentElement;
|
|
@@ -317,7 +305,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
317
305
|
toolbarElements.forEach(el => this._moveElement(el, true));
|
|
318
306
|
menuElements.forEach(el => this._moveElement(el));
|
|
319
307
|
this._setHasMenuItems(menuElements.length > 0);
|
|
320
|
-
this.$.menu.$.dropdown.notifyResize();
|
|
321
308
|
}
|
|
322
309
|
|
|
323
310
|
_moveElement(element, toToolbar) {
|
|
@@ -330,11 +317,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
330
317
|
this.updateStyles();
|
|
331
318
|
}
|
|
332
319
|
|
|
333
|
-
_onActionSelected(event, detail) {
|
|
334
|
-
this._fireAction(detail.item);
|
|
335
|
-
event.currentTarget.selected = undefined;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
320
|
_onResize([entry]) {
|
|
339
321
|
const hidden = entry.borderBoxSize?.[0]?.inlineSize === 0 || entry.contentRect?.width === 0;
|
|
340
322
|
if (hidden) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.5.1",
|
|
4
4
|
"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"polymer",
|
|
@@ -51,14 +51,8 @@
|
|
|
51
51
|
]
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@neovici/cosmoz-
|
|
55
|
-
"@polymer/iron-icons": "^3.0.1",
|
|
56
|
-
"@polymer/iron-selector": "^3.0.0",
|
|
57
|
-
"@polymer/paper-icon-button": "^3.0.0",
|
|
58
|
-
"@polymer/paper-listbox": "^3.0.0",
|
|
59
|
-
"@polymer/paper-menu-button": "^3.0.0",
|
|
54
|
+
"@neovici/cosmoz-dropdown": "^1.1.0",
|
|
60
55
|
"@polymer/polymer": "^3.3.1",
|
|
61
|
-
"@webcomponents/shadycss": "^1.10.2",
|
|
62
56
|
"haunted": "^4.8.0",
|
|
63
57
|
"lit-html": "^1.4.0"
|
|
64
58
|
},
|
|
@@ -68,6 +62,7 @@
|
|
|
68
62
|
"@neovici/eslint-config": "^1.3.0",
|
|
69
63
|
"@open-wc/testing": "^2.5.0",
|
|
70
64
|
"@polymer/iron-icon": "^3.0.1",
|
|
65
|
+
"@polymer/iron-icons": "^3.0.1",
|
|
71
66
|
"@polymer/paper-button": "^3.0.0",
|
|
72
67
|
"@polymer/paper-toggle-button": "^3.0.0",
|
|
73
68
|
"@semantic-release/changelog": "^6.0.0",
|