@neovici/cosmoz-bottom-bar 4.5.0 → 5.0.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/README.md +19 -19
- package/cosmoz-bottom-bar.html.js +9 -2
- package/package.json +6 -7
- package/cosmoz-bottom-bar-view.js +0 -54
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ Example:
|
|
|
17
17
|
<custom-element-demo>
|
|
18
18
|
<template>
|
|
19
19
|
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
|
20
|
-
<link rel="import" href="cosmoz-bottom-bar
|
|
20
|
+
<link rel="import" href="cosmoz-bottom-bar.html">
|
|
21
21
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
22
22
|
<style>
|
|
23
23
|
body {
|
|
@@ -38,27 +38,27 @@ Example:
|
|
|
38
38
|
```
|
|
39
39
|
-->
|
|
40
40
|
```html
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
41
|
+
<div style="padding: 0 18px;">
|
|
42
|
+
<h3>Sample page</h3>
|
|
43
|
+
<p>Nam non enim vitae mauris pharetra semper nec sed lectus.</p>
|
|
44
|
+
<p>Maecenas gravida sollicitudin mauris, id gravida odio commodo iaculis.</p>
|
|
45
|
+
<p>Nulla pulvinar justo vel sodales sollicitudin.</p>
|
|
46
|
+
<p>Proin turpis tortor, sagittis sit amet consequat ut, tempor non velit.</p>
|
|
47
|
+
<p>Proin finibus elit libero, vitae scelerisque lacus maximus ac.</p>
|
|
48
|
+
<p>Vivamus ut finibus ligula. Mauris sollicitudin vitae orci eu scelerisque.</p>
|
|
49
|
+
<p>Duis nec placerat mauris, at tincidunt libero.</p>
|
|
50
|
+
<p>Nullam non magna eget mauris porta tempor.</p>
|
|
51
|
+
<p>Proin non sagittis enim.</p>
|
|
52
|
+
<p>Sed pharetra ante ipsum, in porta dolor sagittis non.</p>
|
|
53
|
+
<p>Cras odio quam, pretium consectetur finibus eu, elementum at risus.</p>
|
|
54
|
+
<p>Proin feugiat vitae sem eu imperdiet.</p>
|
|
55
|
+
</div>
|
|
56
|
+
<cosmoz-bottom-bar active>
|
|
57
57
|
<div slot="info">5 dummy actions</div>
|
|
58
58
|
<paper-button>Action 1</paper-button>
|
|
59
59
|
<paper-button>Action 2</paper-button>
|
|
60
60
|
<paper-button>Action 3</paper-button>
|
|
61
61
|
<paper-button>Action 4</paper-button>
|
|
62
62
|
<paper-button>Action 5</paper-button>
|
|
63
|
-
</cosmoz-bottom-bar
|
|
64
|
-
```
|
|
63
|
+
</cosmoz-bottom-bar>
|
|
64
|
+
```
|
|
@@ -5,14 +5,16 @@ export default html`
|
|
|
5
5
|
<style>
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
|
-
position: absolute;
|
|
9
8
|
bottom: 0;
|
|
10
9
|
left: 0;
|
|
11
10
|
width: 100%;
|
|
12
11
|
max-width: 100%; /* Firefox fix */
|
|
13
12
|
background-color: inherit;
|
|
14
13
|
transition: max-height 0.3s ease;
|
|
15
|
-
|
|
14
|
+
flex: none;
|
|
15
|
+
background-color: var(--cosmoz-bottom-bar-bg-color, rgba(230, 230, 230, 0.8));
|
|
16
|
+
box-shadow: var(--cosmoz-bottom-bar-shadow, none);
|
|
17
|
+
|
|
16
18
|
--cosmoz-dropdown-anchor-spacing: 12px 6px;
|
|
17
19
|
--paper-button: {
|
|
18
20
|
background-color: inherit;
|
|
@@ -54,6 +56,11 @@ export default html`
|
|
|
54
56
|
font-weight: 500;
|
|
55
57
|
line-height: 40px;
|
|
56
58
|
}
|
|
59
|
+
|
|
60
|
+
#bottomBarToolbar::slotted(:not(slot)[disabled]) {
|
|
61
|
+
opacity: var(--cosmoz-button-disabled-opacity, 0.15);
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
}
|
|
57
64
|
#bottomBarToolbar::slotted(:not(slot):hover) {
|
|
58
65
|
background: var(--cosmoz-bottom-bar-button-hover-bg-color, var(--cosmoz-button-hover-bg-color, #3A3F44));
|
|
59
66
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-bottom-bar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.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",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"lit-html": "^1.4.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@commitlint/cli": "^
|
|
61
|
-
"@commitlint/config-conventional": "^
|
|
62
|
-
"@neovici/
|
|
60
|
+
"@commitlint/cli": "^16.0.0",
|
|
61
|
+
"@commitlint/config-conventional": "^16.0.0",
|
|
62
|
+
"@neovici/cfg": "^1.13.0",
|
|
63
63
|
"@open-wc/testing": "^2.5.0",
|
|
64
64
|
"@polymer/iron-icon": "^3.0.1",
|
|
65
65
|
"@polymer/iron-icons": "^3.0.1",
|
|
@@ -69,10 +69,9 @@
|
|
|
69
69
|
"@semantic-release/git": "^10.0.0",
|
|
70
70
|
"@web/dev-server": "^0.1.0",
|
|
71
71
|
"@web/test-runner": "^0.13.0",
|
|
72
|
-
"@web/test-runner-selenium": "^0.5.0",
|
|
73
72
|
"@webcomponents/webcomponentsjs": "^2.5.0",
|
|
74
73
|
"husky": "^7.0.0",
|
|
75
|
-
"semantic-release": "^
|
|
76
|
-
"sinon": "^
|
|
74
|
+
"semantic-release": "^19.0.0",
|
|
75
|
+
"sinon": "^13.0.0"
|
|
77
76
|
}
|
|
78
77
|
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { component } from 'haunted';
|
|
2
|
-
import { html } from 'lit-html';
|
|
3
|
-
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
4
|
-
import { bottomBarSlots } from './cosmoz-bottom-bar';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* `cosmoz-bottom-bar-view` contains a content section and a bottom bar with actions.
|
|
8
|
-
*
|
|
9
|
-
* __Important:__ Because `cosmoz-bottom-bar-view` is handling scrolling of its content, it must be explicitly sized.
|
|
10
|
-
* By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style,
|
|
11
|
-
* or else is sized by other layout means (e.g. the flex or fit classes).
|
|
12
|
-
*
|
|
13
|
-
* @demo demo/bottom-bar-view.html Basic Demo
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
const CosmozBottomBarView = ({
|
|
17
|
-
active = true,
|
|
18
|
-
barHeight
|
|
19
|
-
}) => html`
|
|
20
|
-
<style>
|
|
21
|
-
:host {
|
|
22
|
-
position: relative;
|
|
23
|
-
display: flex;
|
|
24
|
-
flex-direction: column;
|
|
25
|
-
flex: var(--cosmoz-bottom-bar-view-flex, auto);
|
|
26
|
-
overflow: hidden;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
#content {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
flex: auto;
|
|
33
|
-
-webkit-overflow-scrolling: touch;
|
|
34
|
-
overflow-y: auto;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
#bar {
|
|
38
|
-
background-color: var(--cosmoz-bottom-bar-view-bar-color, rgba(230, 230, 230, 0.8));
|
|
39
|
-
box-shadow: var(--cosmoz-bottom-bar-view-bar-shadow, none);
|
|
40
|
-
position: static;
|
|
41
|
-
flex: none;
|
|
42
|
-
}
|
|
43
|
-
</style>
|
|
44
|
-
<div id="content" part="content">
|
|
45
|
-
<slot name="content"></slot>
|
|
46
|
-
<slot name="scroller-content"></slot>
|
|
47
|
-
</div>
|
|
48
|
-
<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar">
|
|
49
|
-
<slot></slot>
|
|
50
|
-
${ bottomBarSlots }
|
|
51
|
-
</cosmoz-bottom-bar>
|
|
52
|
-
`;
|
|
53
|
-
customElements.define('cosmoz-bottom-bar-view', component(CosmozBottomBarView));
|
|
54
|
-
|