@neovici/cosmoz-bottom-bar 4.2.0 → 4.3.0
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 +34 -76
- package/cosmoz-bottom-bar.js +5 -8
- package/package.json +3 -8
|
@@ -1,10 +1,4 @@
|
|
|
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';
|
|
1
|
+
import '@neovici/cosmoz-dropdown';
|
|
8
2
|
|
|
9
3
|
import { html } from '@polymer/polymer/lib/utils/html-tag';
|
|
10
4
|
export default html`
|
|
@@ -19,49 +13,35 @@ export default html`
|
|
|
19
13
|
background-color: inherit;
|
|
20
14
|
transition: max-height 0.3s ease;
|
|
21
15
|
z-index: 10;
|
|
16
|
+
--cosmoz-dropdown-spacing: 0 0 5px 0;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
[hidden] {
|
|
25
20
|
display: none !important;
|
|
26
21
|
}
|
|
27
22
|
|
|
28
|
-
#bar, #info, #toolbar, #extraToolbarSlot, #menu, #dropdown ::slotted(:not(slot)) {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
}
|
|
32
23
|
|
|
33
24
|
#bar {
|
|
34
25
|
padding: 0 3%;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
35
28
|
}
|
|
36
29
|
|
|
37
30
|
#info {
|
|
38
31
|
min-width: 5px;
|
|
39
32
|
padding-right: 3%;
|
|
33
|
+
margin-right: auto;
|
|
34
|
+
white-space: nowrap;
|
|
40
35
|
}
|
|
41
36
|
|
|
42
|
-
|
|
43
|
-
|
|
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
|
-
|
|
56
|
-
#toolbar, #extraToolbarSlot {
|
|
57
|
-
overflow: hidden;
|
|
58
|
-
}
|
|
59
|
-
#info,
|
|
60
|
-
#menu > div {
|
|
61
|
-
white-space: nowrap;
|
|
37
|
+
::slotted([disabled]) {
|
|
38
|
+
@apply --cosmoz-bottom-bar-toolbar-item-disabled;
|
|
62
39
|
}
|
|
40
|
+
::slotted([hidden]) {
|
|
41
|
+
display: none !important;
|
|
42
|
+
}
|
|
63
43
|
|
|
64
|
-
#
|
|
44
|
+
#bottomBarToolbar::slotted(:not(slot)) {
|
|
65
45
|
margin: 0 0.29em;
|
|
66
46
|
min-width: 40px;
|
|
67
47
|
min-height: 40px;
|
|
@@ -70,61 +50,39 @@ export default html`
|
|
|
70
50
|
@apply --cosmoz-bottom-bar-toolbar-item;
|
|
71
51
|
}
|
|
72
52
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
#
|
|
80
|
-
display: none !important;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
#dropdown {
|
|
84
|
-
padding: 0;
|
|
85
|
-
--paper-menu-button-content: {
|
|
86
|
-
max-width: 300px !important;
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/** Seems like a shady dom scoping/slotting issue */
|
|
91
|
-
#listboxSizer {
|
|
92
|
-
max-height: 0;
|
|
93
|
-
padding: 0 !important;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
#dropdown ::slotted(:not(slot)) {
|
|
53
|
+
#dropdown::part(anchor) {
|
|
54
|
+
padding: 12px 8px;
|
|
55
|
+
}
|
|
56
|
+
#dropdown::part(dropdown) {
|
|
57
|
+
max-width: 300px;
|
|
58
|
+
}
|
|
59
|
+
#bottomBarMenu::slotted(:not(slot)) {
|
|
97
60
|
position: relative;
|
|
98
61
|
cursor: pointer;
|
|
99
62
|
@apply --cosmoz-bottom-bar-menu-item;
|
|
100
63
|
}
|
|
101
|
-
#
|
|
64
|
+
#bottomBarMenu::slotted(:not(slot):hover) {
|
|
102
65
|
background: #eee;
|
|
103
66
|
}
|
|
67
|
+
|
|
104
68
|
</style>
|
|
105
69
|
|
|
106
70
|
<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
|
|
107
71
|
<div id="info">
|
|
108
|
-
|
|
72
|
+
<slot name="info"></slot>
|
|
73
|
+
</div>
|
|
74
|
+
<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
|
|
75
|
+
<cosmoz-dropdown id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]">
|
|
76
|
+
<svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
77
|
+
<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"/>
|
|
78
|
+
<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"/>
|
|
79
|
+
<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"/>
|
|
80
|
+
</svg>
|
|
81
|
+
<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
|
|
82
|
+
</cosmoz-dropdown>
|
|
83
|
+
<div id="extraToolbarSlot">
|
|
84
|
+
<slot name="extra" id="extraSlot"></slot>
|
|
109
85
|
</div>
|
|
110
|
-
<div id="flex"></div>
|
|
111
|
-
<iron-selector id="toolbar" selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected">
|
|
112
|
-
<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
|
|
113
|
-
</iron-selector>
|
|
114
|
-
<paper-menu-button id="menu" hidden$="[[ !hasMenuItems ]]" no-animations
|
|
115
|
-
vertical-offset="[[ barHeight ]]" vertical-align="bottom" horizontal-align="right">
|
|
116
|
-
|
|
117
|
-
<paper-icon-button id="dropdownButton" class="dropdown-trigger" slot="dropdown-trigger" icon="menu" toggles raised>
|
|
118
|
-
</paper-icon-button>
|
|
119
|
-
<paper-listbox id="dropdown" class="dropdown-content" slot="dropdown-content"
|
|
120
|
-
selected-class="[[ selectedClass ]]" on-iron-select="_onActionSelected">
|
|
121
|
-
<span id="listboxSizer"></span>
|
|
122
|
-
<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
|
|
123
|
-
</paper-listbox>
|
|
124
|
-
</paper-menu-button>
|
|
125
|
-
<iron-selector id="extraToolbarSlot" on-iron-select="_onActionSelected">
|
|
126
|
-
<slot name="extra" id="extraSlot"></slot>
|
|
127
|
-
</iron-selector>
|
|
128
86
|
</div>
|
|
129
87
|
|
|
130
88
|
<div hidden style="display:none">
|
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,10 +242,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
240
242
|
);
|
|
241
243
|
}
|
|
242
244
|
|
|
243
|
-
_dropdownClosed() {
|
|
244
|
-
this.$.dropdownButton.active = false;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
245
|
_fireAction(item) {
|
|
248
246
|
item?.dispatchEvent?.(new window.CustomEvent('action', {
|
|
249
247
|
bubbles: true,
|
|
@@ -317,7 +315,6 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
317
315
|
toolbarElements.forEach(el => this._moveElement(el, true));
|
|
318
316
|
menuElements.forEach(el => this._moveElement(el));
|
|
319
317
|
this._setHasMenuItems(menuElements.length > 0);
|
|
320
|
-
this.$.menu.$.dropdown.notifyResize();
|
|
321
318
|
}
|
|
322
319
|
|
|
323
320
|
_moveElement(element, toToolbar) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
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",
|