@neovici/cosmoz-bottom-bar 6.3.1 → 6.4.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 +56 -11
- package/cosmoz-bottom-bar.js +7 -1
- package/package.json +3 -5
|
@@ -12,7 +12,10 @@ export default html`
|
|
|
12
12
|
background-color: inherit;
|
|
13
13
|
transition: max-height 0.3s ease;
|
|
14
14
|
flex: none;
|
|
15
|
-
background-color: var(
|
|
15
|
+
background-color: var(
|
|
16
|
+
--cosmoz-bottom-bar-bg-color,
|
|
17
|
+
rgba(230, 230, 230, 0.8)
|
|
18
|
+
);
|
|
16
19
|
box-shadow: var(--cosmoz-bottom-bar-shadow, none);
|
|
17
20
|
|
|
18
21
|
--cosmoz-dropdown-anchor-spacing: 12px 6px;
|
|
@@ -26,12 +29,13 @@ export default html`
|
|
|
26
29
|
font-weight: inherit;
|
|
27
30
|
margin: 0;
|
|
28
31
|
padding: 0;
|
|
29
|
-
}
|
|
32
|
+
}
|
|
30
33
|
}
|
|
31
34
|
:host([force-open]) {
|
|
32
35
|
transition: none;
|
|
33
36
|
}
|
|
34
|
-
[hidden],
|
|
37
|
+
[hidden],
|
|
38
|
+
::slotted([hidden]) {
|
|
35
39
|
display: none !important;
|
|
36
40
|
}
|
|
37
41
|
#bar {
|
|
@@ -51,8 +55,14 @@ export default html`
|
|
|
51
55
|
min-height: 40px;
|
|
52
56
|
text-overflow: ellipsis;
|
|
53
57
|
white-space: nowrap;
|
|
54
|
-
background: var(
|
|
55
|
-
|
|
58
|
+
background: var(
|
|
59
|
+
--cosmoz-bottom-bar-button-bg-color,
|
|
60
|
+
var(--cosmoz-button-bg-color, #101010)
|
|
61
|
+
);
|
|
62
|
+
color: var(
|
|
63
|
+
--cosmoz-bottom-bar-button-color,
|
|
64
|
+
var(--cosmoz-button-color, #fff)
|
|
65
|
+
);
|
|
56
66
|
border-radius: 6px;
|
|
57
67
|
padding: 0 18px;
|
|
58
68
|
font-size: 14px;
|
|
@@ -65,20 +75,55 @@ export default html`
|
|
|
65
75
|
pointer-events: none;
|
|
66
76
|
}
|
|
67
77
|
#bottomBarToolbar::slotted(:not(slot):hover) {
|
|
68
|
-
background: var(
|
|
78
|
+
background: var(
|
|
79
|
+
--cosmoz-bottom-bar-button-hover-bg-color,
|
|
80
|
+
var(--cosmoz-button-hover-bg-color, #3a3f44)
|
|
81
|
+
);
|
|
69
82
|
}
|
|
70
83
|
#dropdown::part(content) {
|
|
71
84
|
max-width: 300px;
|
|
72
85
|
}
|
|
86
|
+
|
|
87
|
+
:host([hide-actions]) #bottomBarToolbar,
|
|
88
|
+
:host([hide-actions]) #bottomBarMenu,
|
|
89
|
+
:host([hide-actions]) #dropdown {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
73
92
|
</style>
|
|
74
93
|
<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
|
|
75
94
|
<div id="info"><slot name="info"></slot></div>
|
|
76
95
|
<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
|
|
77
|
-
<cosmoz-dropdown-menu
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
96
|
+
<cosmoz-dropdown-menu
|
|
97
|
+
id="dropdown"
|
|
98
|
+
hidden="[[ !hasMenuItems ]]"
|
|
99
|
+
placement="[[ topPlacement ]]"
|
|
100
|
+
>
|
|
101
|
+
<svg
|
|
102
|
+
slot="button"
|
|
103
|
+
width="4"
|
|
104
|
+
height="16"
|
|
105
|
+
viewBox="0 0 4 16"
|
|
106
|
+
fill="none"
|
|
107
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
108
|
+
>
|
|
109
|
+
<path
|
|
110
|
+
fill-rule="evenodd"
|
|
111
|
+
clip-rule="evenodd"
|
|
112
|
+
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"
|
|
113
|
+
fill="white"
|
|
114
|
+
/>
|
|
115
|
+
<path
|
|
116
|
+
fill-rule="evenodd"
|
|
117
|
+
clip-rule="evenodd"
|
|
118
|
+
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"
|
|
119
|
+
fill="white"
|
|
120
|
+
/>
|
|
121
|
+
<path
|
|
122
|
+
fill-rule="evenodd"
|
|
123
|
+
clip-rule="evenodd"
|
|
124
|
+
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"
|
|
125
|
+
fill="white"
|
|
126
|
+
/>
|
|
82
127
|
</svg>
|
|
83
128
|
<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
|
|
84
129
|
</cosmoz-dropdown-menu>
|
package/cosmoz-bottom-bar.js
CHANGED
|
@@ -53,6 +53,12 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
53
53
|
reflectToAttribute: true,
|
|
54
54
|
},
|
|
55
55
|
|
|
56
|
+
hideActions: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
value: false,
|
|
59
|
+
reflectToAttribute: true,
|
|
60
|
+
},
|
|
61
|
+
|
|
56
62
|
/**
|
|
57
63
|
* Bar height (not used when `matchParent` or `matchElementHeight` is set)
|
|
58
64
|
*/
|
|
@@ -298,7 +304,7 @@ class CosmozBottomBar extends PolymerElement {
|
|
|
298
304
|
if (elements.length === 0) {
|
|
299
305
|
return elements;
|
|
300
306
|
}
|
|
301
|
-
|
|
307
|
+
|
|
302
308
|
const topPriorityAction = elements.reduce(
|
|
303
309
|
(top, element) => {
|
|
304
310
|
return parseInt(top.dataset.priority ?? 0, 10) >=
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.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",
|
|
@@ -66,11 +66,9 @@
|
|
|
66
66
|
"@polymer/paper-toggle-button": "^3.0.0",
|
|
67
67
|
"@semantic-release/changelog": "^6.0.0",
|
|
68
68
|
"@semantic-release/git": "^10.0.0",
|
|
69
|
-
"@web/dev-server": "^0.1.0",
|
|
70
|
-
"@web/test-runner": "^0.13.0",
|
|
71
69
|
"@webcomponents/webcomponentsjs": "^2.5.0",
|
|
72
70
|
"husky": "^8.0.0",
|
|
73
|
-
"semantic-release": "^
|
|
74
|
-
"sinon": "^
|
|
71
|
+
"semantic-release": "^21.0.0",
|
|
72
|
+
"sinon": "^15.0.0"
|
|
75
73
|
}
|
|
76
74
|
}
|