Skip to content

Commit 30308cd

Browse files
djthorpedjthorpe
committed
Updated
1 parent 8c2f4f5 commit 30308cd

File tree

7 files changed

+210
-23
lines changed

7 files changed

+210
-23
lines changed

‎npm/helloworld/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
"description": "Static files",
55
"main": "dist/index.js",
66
"scripts": {
7-
"dev": "esbuild src/index.ts src/index.html --bundle --loader:.html=copy --loader:.ttf=copy --watch --outdir=dist --allow-overwrite --servedir=dist --banner:js=\"document.addEventListener('DOMContentLoaded', () => { new EventSource('/esbuild').addEventListener('change', () => location.reload()) });\"",
8-
"dist": "rm -fr dist && install -d dist && esbuild src/index.ts src/index.html --bundle --sourcemap --loader:.html=copy --loader:.ttf=copy --outdir=dist --allow-overwrite",
7+
"dev": "esbuild src/index.ts src/index.html --bundle --loader:.html=copy --loader:.ttf=file --loader:.svg=file --watch --outdir=dist --allow-overwrite --servedir=dist --banner:js=\"document.addEventListener('DOMContentLoaded', () => { new EventSource('/esbuild').addEventListener('change', () => location.reload()) });\"",
8+
"dist": "rm -fr dist && install -d dist && esbuild src/index.ts src/index.html --bundle --sourcemap --loader:.html=copy --loader:.ttf=file --loader:.svg=file --outdir=dist --allow-overwrite",
99
"clean": "rm -fr dist"
1010
},
1111
"dependencies": {
12-
"tslib": "^2.5.2",
13-
"lit":"^3.3.0"
12+
"bootstrap-icons": "^1.13.1",
13+
"lit": "^3.3.0",
14+
"tslib": "^2.5.2"
1415
},
1516
"devDependencies": {
1617
"esbuild": "^0.25.3",

‎npm/helloworld/src/index.html

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,29 @@
1313
<wc-canvas vertical>
1414

1515
<wc-nav>
16-
<wc-navitem>NAV1</wc-navitem>
17-
<wc-navitem>NAV2</wc-navitem>
18-
<wc-navspace>Spacer</wc-navspace>
16+
<wc-icon></wc-icon>
17+
<wc-navitem>Postgres</wc-navitem>
18+
<wc-navitem>Queue</wc-navitem>
19+
<wc-navitem>Auth</wc-navitem>
20+
<wc-navitem>LDAP</wc-navitem>
21+
<wc-navitem>Cert</wc-navitem>
22+
<wc-navspace></wc-navspace>
23+
<wc-navitem>
24+
<wc-icon>info-circle</wc-icon>
25+
</wc-navitem>
1926
<wc-navitem>
2027
<wc-google-auth id="auth"></wc-google-auth>
2128
</wc-navitem>
2229
</wc-nav>
2330

2431
<wc-content>
2532
<wc-nav vertical>
26-
<wc-navitem>NAV3</wc-navitem>
27-
<wc-navitem>NAV4</wc-navitem>
33+
<wc-navitem>Databases</wc-navitem>
34+
<wc-navitem>Schemas</wc-navitem>
35+
<wc-navitem>Objects</wc-navitem>
36+
<wc-navitem>Roles</wc-navitem>
37+
<wc-navitem>Tablespaces</wc-navitem>
38+
<wc-navitem>Connections</wc-navitem>
2839
</wc-nav>
2940

3041
<wc-content>
@@ -48,6 +59,8 @@
4859
</wc-content>
4960

5061
</wc-canvas>
62+
63+
<wc-toast visible>HELLO</wc-toast>
5164
</body>
5265

53-
</html>
66+
</html>

‎npm/helloworld/src/wc/layout/Icon.ts

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

‎npm/helloworld/src/wc/layout/Nav.ts

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,25 +50,40 @@ export class Nav extends LitElement {
5050
}
5151
}
5252
53-
::slotted(*) {
53+
/* Set cursor and flex for slotted elements */
54+
ul ::slotted(*) {
5455
cursor: pointer;
5556
user-select: none;
5657
padding: var(--space-default);
57-
background-color: var(--nav-background-color);
58-
color: var(--nav-text-color);
58+
align-items: center;
59+
justify-content: center;
5960
}
6061
61-
::slotted(:not(wc-navspace):hover) {
62-
background-color: var(--nav-background-color-hover);
63-
color: var(--nav-text-color-hover);
62+
ul ::slotted(wc-navspace) {
63+
cursor: default;
64+
flex: 1 0;
6465
}
6566
67+
/* Hover */
68+
ul.vertical ::slotted(wc-navitem) {
69+
border-right: var(--nav-border-item);
70+
}
6671
67-
::slotted(wc-navspace) {
68-
cursor: default;
69-
flex: 1 0;
70-
background-color: inherit;
71-
color: inherit;
72+
ul.vertical ::slotted(wc-navitem:hover) {
73+
border-right: var(--nav-border-item-hover);
74+
}
75+
76+
ul:not(.vertical) ::slotted(wc-navitem) {
77+
border-bottom: var(--nav-border-item);
78+
}
79+
80+
ul:not(.vertical) ::slotted(wc-navitem:hover) {
81+
border-bottom: var(--nav-border-item-hover);
82+
}
83+
84+
/* Active */
85+
ul ::slotted(wc-navitem:active) {
86+
font-weight: var(--nav-font-weight-active);
7287
}
7388
`;
7489
}

‎npm/helloworld/src/wc/layout/Toast.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class Toast
6+
*
7+
* This class is a container for a toast message, which pops up from the bottom of the screen
8+
* and can be dismissed by the user, or automatically after a certain time.
9+
*
10+
* @example
11+
* <wc-toast visible>...</wc-toast>
12+
*/
13+
@customElement('wc-toast')
14+
export class Toast extends LitElement {
15+
@property({ type: Boolean }) visible: boolean = false;
16+
@property({ type: String }) color?: string;
17+
18+
render() {
19+
return html`
20+
<div class=${this.className || nothing}>
21+
<slot></slot>
22+
</div>
23+
`;
24+
}
25+
26+
static get styles() {
27+
return css`
28+
:host {
29+
position: fixed;
30+
z-index: 1000;
31+
right: 0;
32+
bottom: 0;
33+
34+
margin: var(--toast-margin);
35+
background-color: var(--toast-background-color);
36+
text-color: var(--toast-text-color);
37+
}
38+
39+
:host div {
40+
transition: visibility 0.2s, opacity 0.2s ease-in-out;
41+
42+
&.visible {
43+
display: block;
44+
visibility: visible;
45+
opacity: 1;
46+
}
47+
48+
&:not(.visible) {
49+
display: none;
50+
visibility: hidden;
51+
opacity: 0;
52+
}
53+
}
54+
`;
55+
}
56+
57+
get className() {
58+
const classes = [];
59+
if (this.visible) {
60+
classes.push('visible');
61+
}
62+
if (this.color) {
63+
classes.push(`color-${this.color}`);
64+
}
65+
return classes.join(' ');
66+
}
67+
}

‎npm/helloworld/src/wc/root.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import './tokens.css';
55
// Web Components
66
import './layout/Canvas'
77
import './layout/Content'
8+
import './layout/Icon'
89
import './layout/Nav'
910
import './layout/NavItem'
1011
import './layout/NavSpace'
12+
import './layout/Toast'

‎npm/helloworld/src/wc/tokens.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* Import fonts */
22
@import url(../assets/font/ibmplexsans.css);
33
@import url(../assets/font/ibmplexmono.css);
4+
@import url(../assets/font/opensans.css);
45

56
:root {
67
color-scheme: light dark;
@@ -28,7 +29,7 @@ body {
2829
:root {
2930
--font-family-base: 'IBM Plex Sans', sans-serif;
3031
--font-family-mono: 'IBM Plex Mono', monospace;
31-
--font-size-default: 1em;
32+
--font-size-default: 0.9em;
3233
--font-size-small: 0.8em;
3334
--font-size-large: 1.2em;
3435
--font-size-xlarge: 1.5em;
@@ -65,11 +66,29 @@ body {
6566
--space-default: 0.5em;
6667
}
6768

69+
/* icons */
70+
:root {
71+
--icon-size-small: 1.1em;
72+
--icon-size-medium: 1.5em;
73+
--icon-size-large: 2em;
74+
--icon-size-xlarge: 3em;
75+
}
76+
6877
/* navigation */
6978
:root {
7079
--nav-background-color: light-dark(var(--grey-20-color),var(--grey-80-color));
7180
--nav-background-color-hover: inherit;
72-
--nav-text-color: light-dark(var(--light-color),var(--dark-color));
81+
--nav-text-color: light-dark(var(--dark-color), var(--light-color));
7382
--nav-text-color-hover: inherit;
7483
--nav-border: 0.05rem solid light-dark(var(--grey-50-color),var(--grey-50-color));
84+
--nav-border-item: 0.25rem solid light-dark(var(--grey-20-color),var(--grey-80-color));
85+
--nav-border-item-hover: 0.25rem solid red;
86+
--nav-font-weight-active: var(--font-weight-semibold);
87+
}
88+
89+
/* toast */
90+
:root {
91+
--toast-background-color: light-dark(var(--grey-20-color),var(--grey-80-color));
92+
--toast-text-color: light-dark(var(--light-color),var(--dark-color));
93+
--toast-margin: var(--space-default);
7594
}

0 commit comments

Comments
 (0)