Skip to content

Commit 48d3ad8

Browse files
djthorpedjthorpe
committed
Updated
1 parent 3ce0836 commit 48d3ad8

File tree

10 files changed

+163
-41
lines changed

10 files changed

+163
-41
lines changed

‎src/app/CanvasNavbarElement.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,29 @@ export class CanvasNavbarElement extends CanvasSectionElement {
3333
}
3434

3535
static get styles() {
36-
return css``;
36+
return css`
37+
/* Navbars are flexed to fill the available space */
38+
div {
39+
display: flex;
40+
align-items: start;
41+
flex: 999 0;
42+
}
43+
`;
3744
}
3845

3946
render() {
4047
return html`
41-
<div class=${this.className || nothing}>
48+
<div class=${this.classes.join(' ') || nothing}>
4249
<slot></slot>
4350
</div>
4451
`;
4552
}
4653

47-
get className() {
54+
get classes() {
4855
const classes = [];
4956
if (this.hidden) {
5057
classes.push('hidden');
5158
}
52-
return classes.join(' ');
59+
return classes;
5360
}
5461
}

‎src/app/IconElement.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { LitElement, svg, css, nothing } from 'lit';
2+
import icons from 'bootstrap-icons/bootstrap-icons.svg';
3+
4+
/**
5+
* @class IconElement
6+
*
7+
* This class is used to display a bootstrap icon
8+
*
9+
* @property {Boolean} name - The name of the icon
10+
* @property {Boolean} size - The size of the icon
11+
*
12+
* @example
13+
* <wc-icon name="test" size="medium">
14+
*/
15+
export class IconElement extends LitElement {
16+
static get localName() {
17+
return 'wc-icon';
18+
}
19+
20+
constructor() {
21+
super();
22+
this.name = 'bootstrap-reboot';
23+
this.size = 'default';
24+
}
25+
26+
static get properties() {
27+
return {
28+
name: { type: String },
29+
size: { type: String },
30+
};
31+
}
32+
33+
static get styles() {
34+
return css`
35+
:host {
36+
display: inline-block;
37+
vertical-align: middle;
38+
}
39+
.size-default {
40+
position: relative;
41+
width: var(--icon-size-default);
42+
height: var(--icon-size-default);
43+
}
44+
.size-small {
45+
position: relative;
46+
width: var(--icon-size-small);
47+
height: var(--icon-size-small);
48+
}
49+
.size-medium {
50+
position: relative;
51+
width: var(--icon-size-medium);
52+
height: var(--icon-size-medium);
53+
}
54+
.size-large {
55+
position: relative;
56+
width: var(--icon-size-large);
57+
height: var(--icon-size-large);
58+
}
59+
.size-xlarge {
60+
position: relative;
61+
width: var(--icon-size-xlarge);
62+
height: var(--icon-size-xlarge);
63+
}
64+
svg {
65+
width: 100%;
66+
height: 100%;
67+
fill: currentColor;
68+
}
69+
`;
70+
}
71+
72+
get classes() {
73+
const classes = [];
74+
classes.push(`size-${this.size}`);
75+
return classes;
76+
}
77+
78+
render() {
79+
return svg`<div class=${this.classes.join(' ') || nothing}><svg><use href="${icons}#${this.name}"/></svg></div>`;
80+
}
81+
}

‎src/app/NavGroupElement.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ export class NavGroupElement extends LitElement {
3434

3535
static get styles() {
3636
return css`
37-
ul {
37+
:host {
38+
flex: 999 0;
39+
height: 100%;
40+
}
41+
ul {
3842
display: flex;
3943
flex-direction: row;
4044
list-style-type: none;
@@ -43,6 +47,25 @@ export class NavGroupElement extends LitElement {
4347
}
4448
ul.vertical {
4549
flex-direction: column;
50+
height: 100%;
51+
}
52+
::slotted(*) {
53+
cursor: pointer;
54+
user-select: none;
55+
}
56+
::slotted(wc-nav-item) {
57+
flex: 0;
58+
padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
59+
}
60+
::slotted(wc-nav-spacer) {
61+
flex: 999;
62+
}
63+
::slotted(wc-nav-item:hover) {
64+
font-weight: var(--nav-item-hover-font-weight);
65+
}
66+
::slotted(wc-nav-item[selected]) {
67+
color: var(--nav-item-selected-color);
68+
background-color: var(--nav-item-selected-background-color,red);
4669
}
4770
`;
4871
}

‎src/app/NavItemElement.js

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { LitElement, html, css, nothing } from 'lit';
55
*
66
* This class is used as a navigation item within a group of navigational items
77
*
8-
* @property {Boolean} vertical - Fill the canvas vertically rather than horizontally, default false
9-
*
108
* @example
119
* <wc-nav-group name="group" vertical>
1210
* <wc-nav-item name="item-top">....</wc-nav-item>
@@ -19,34 +17,17 @@ export class NavItemElement extends LitElement {
1917
return 'wc-nav-item';
2018
}
2119

22-
constructor() {
23-
super();
24-
this.vertical = false;
25-
}
26-
27-
static get properties() {
28-
return {
29-
vertical: { type: Boolean },
30-
};
31-
}
32-
33-
static get styles() {
34-
return css``;
35-
}
36-
3720
render() {
3821
return html`
39-
<li class=${this.className || nothing}>
22+
<li class=${this.classes.join(' ') || nothing}>
4023
<slot></slot>
4124
</li>
4225
`;
4326
}
4427

45-
get className() {
28+
// eslint-disable-next-line class-methods-use-this
29+
get classes() {
4630
const classes = [];
47-
if (this.vertical) {
48-
classes.push('vertical');
49-
}
50-
return classes.join(' ');
31+
return classes;
5132
}
5233
}

‎src/app/NavSpacerElement.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ export class NavSpacerElement extends LitElement {
1818
}
1919

2020
static get styles() {
21-
return css``;
21+
return css`
22+
:host {
23+
flex: 999 0;
24+
}
25+
`;
2226
}
2327

2428
render() {

‎src/app/app.css

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
/* Theme variables go here */
1+
:root {
2+
/* Navigational items */
3+
--nav-item-padding-x: 0.5em;
4+
--nav-item-padding-y: 0.5em;
5+
--nav-item-hover-font-weight: var(--font-weight-semibold);
6+
--nav-item-selected-color: var(--light-color);
7+
--nav-item-selected-background-color: var(--primary-color);
8+
9+
/* icon */
10+
--icon-size-default: 1.5em;
11+
--icon-size-small: 1em;
12+
--icon-size-medium: 1.5em;
13+
--icon-size-large: 2em;
14+
--icon-size-xlarge: 3em;
15+
}

‎src/app/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CanvasNavbarElement } from './CanvasNavbarElement';
88
import { NavGroupElement } from './NavGroupElement';
99
import { NavItemElement } from './NavItemElement';
1010
import { NavSpacerElement } from './NavSpacerElement';
11+
import { IconElement } from './IconElement';
1112

1213
// Web Components
1314
customElements.define(CanvasElement.localName, CanvasElement); // wc-canvas
@@ -16,3 +17,4 @@ customElements.define(CanvasNavbarElement.localName, CanvasNavbarElement); // wc
1617
customElements.define(NavGroupElement.localName, NavGroupElement); // wc-nav-group
1718
customElements.define(NavItemElement.localName, NavItemElement); // wc-nav-item
1819
customElements.define(NavSpacerElement.localName, NavSpacerElement); // wc-nav-spacer
20+
customElements.define(IconElement.localName, IconElement); // wc-icon

‎src/core.css

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,6 @@
115115
--badge-border-radius-right: var(--badge-border-radius);
116116
--badge-group-divider-color: var(--light-color);
117117

118-
/* icon */
119-
--icon-size-default: 1.5em;
120-
--icon-size-small: 1em;
121-
--icon-size-medium: 1.5em;
122-
--icon-size-large: 2em;
123-
--icon-size-xlarge: 3em;
124-
125118
/* modal */
126119
--modal-margin-x: 20%;
127120
--modal-padding: calc(var(--spacer) * 1.5);

‎src/form/form.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* Theme variables go here */
21
:root {
32
/* General controls */
43
--form-control-padding-x: 0.5em;

‎src/index.html

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,28 @@
1313
<wc-canvas vertical backgroundColor="light">
1414
<wc-canvas-navbar>
1515
<wc-nav-group>
16+
<wc-nav-item selected>
17+
<nobr><wc-icon name="house"></wc-icon> Home</nobr>
18+
</wc-nav-item>
1619
<wc-nav-item>
17-
<wc-form-switch name="theme">Dark Theme</wc-form-switch>
20+
<nobr><wc-icon name="speedometer" size="medium"></wc-icon> Dashboard</nobr>
21+
</wc-nav-item>
22+
<wc-nav-item>
23+
<nobr><wc-icon name="table" size="medium"></wc-icon> Orders</nobr>
24+
</wc-nav-item>
25+
<wc-nav-item>
26+
<nobr><wc-icon name="grid" size="medium"></wc-icon> Products</nobr>
27+
</wc-nav-item>
28+
<wc-nav-item>
29+
<nobr><wc-icon name="person-circle" size="medium"></wc-icon> Customers</nobr>
30+
</wc-nav-item>
31+
<wc-nav-item>
32+
<nobr><wc-icon name="question-circle" size="medium"></wc-icon> Help</nobr>
1833
</wc-nav-item>
1934
<wc-nav-spacer></wc-nav-spacer>
35+
<wc-nav-item>
36+
<wc-form-switch name="theme">Dark Theme</wc-form-switch>
37+
</wc-nav-item>
2038
<wc-nav-item>
2139
<wc-form-switch id="vertical" name="vertical">Vertical</wc-form-switch>
2240
</wc-nav-item>
@@ -31,15 +49,15 @@
3149
document.querySelector('wc-form-switch#vertical').addEventListener('change', (e) => {
3250
if (e.target.selected) {
3351
document.querySelector('wc-canvas').removeAttribute('vertical');
34-
document.querySelector('wc-nav-group').setAttribute('vertical',true);
52+
document.querySelector('wc-nav-group').setAttribute('vertical', true);
3553
} else {
3654
document.querySelector('wc-canvas').setAttribute('vertical', true);
3755
document.querySelector('wc-nav-group').removeAttribute('vertical');
3856
}
3957
});
4058
document.querySelector('wc-form-switch#end').addEventListener('change', (e) => {
4159
if (e.target.selected) {
42-
document.querySelector('wc-canvas-navbar#end').setAttribute('hidden',true);
60+
document.querySelector('wc-canvas-navbar#end').setAttribute('hidden', true);
4361
} else {
4462
document.querySelector('wc-canvas-navbar#end').removeAttribute('hidden');
4563
}

0 commit comments

Comments
 (0)