Skip to content

Commit 754ff0b

Browse files
TemplarianTemplarian
committed
Basic app container component.
1 parent fe49b9d commit 754ff0b

File tree

6 files changed

+137
-16
lines changed

6 files changed

+137
-16
lines changed

‎src/pg/annoy/README.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,3 @@ import '@pictogrammers/components/pgAnnoy';
1111
```
1212

1313
A `localStorage` variable switches between the list of items below.
14-
15-
- `contextMenu` - Right Click Menu
16-
- `extension` - Chrome / Firefox Extension
17-
- `react` - React Component
18-
- `upgrade` - Read the upgrade guide

‎src/pg/app/__examples__/basic/basic.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
}
44

55
.example {
6-
border: 10px solid #EEE;
6+
border: 0.25rem solid #111;
77
height: 10rem;
88
}

‎src/pg/app/__examples__/basic/basic.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<div class="example">
22
<pg-app>
3+
<pg-icon slot="icon" path="M13 3H16V4H21V14H18L20 23H18L16.7998 17H13V21H11V17H7.2002L6 23H4L6 14H3V4H8V3H11V1H13V3ZM7.59961 16H11V14H8L7.59961 16ZM13 16H16.4004L16 14H13V16ZM5 12H19V6H5V12Z"></pg-icon>
34
<div slot="top">Top Bar</div>
45
<div slot="side">
56
Sidebar
67
</div>
78
<div slot="main">
89
Content Area
910
</div>
10-
<div slot="main">
11-
Content Area
12-
</div>
1311
<div slot="home">
1412
Home is the initial page containing helpful info.
1513
</div>

‎src/pg/app/app.css‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,105 @@
44

55
[part=grid] {
66
display: grid;
7-
grid-template-columns: auto;
7+
grid-template-columns: auto 0.5rem 1fr;
8+
grid-template-rows: auto 1fr;
9+
height: 100%;
810
}
911

1012
[part=header] {
1113
display: flex;
14+
grid-column: 1 / 4;
15+
grid-row: 1;
16+
border-bottom: 2px solid #453C4F;
1217
}
18+
19+
[part=header] > button {
20+
display: flex;
21+
border: 0;
22+
padding: 0.5rem;
23+
background-color: transparent;
24+
border-right: 1px solid rgba(69, 60, 79, 0.5);
25+
outline: none;
26+
}
27+
28+
[part=header] > button:hover {
29+
background-color: rgba(69, 60, 79, 0.10);
30+
}
31+
32+
[part=header] > button:focus-visible {
33+
position: relative;
34+
}
35+
36+
[part=header] > button:focus-visible::before {
37+
pointer-events: none;
38+
content: '';
39+
position: absolute;
40+
top: 3px;
41+
right: 3px;
42+
bottom: 3px;
43+
left: 3px;
44+
box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));
45+
}
46+
47+
[part=header] > button.selected {
48+
--pg-icon-color: rgb(79, 143, 249);
49+
}
50+
51+
[part=header] > button.selected:hover {
52+
background-color: #fff;
53+
}
54+
55+
[part=side] {
56+
display: flex;
57+
grid-column: 1;
58+
grid-row: 2;
59+
min-width: 10rem;
60+
max-width: 20rem;
61+
}
62+
63+
slot[name=main] {
64+
display: flex;
65+
grid-column: 3;
66+
grid-row: 2;
67+
}
68+
69+
[part=resize] {
70+
display: flex;
71+
grid-column: 2;
72+
grid-row: 2;
73+
border: 0;
74+
padding: 0;
75+
cursor: ew-resize;
76+
border-left: 1px solid #453C4F;
77+
border-right: 1px solid #453C4F;
78+
background-color: transparent;
79+
}
80+
81+
[part=resize].dragging {
82+
background-color: var(--pg-focus-color, rgb(79, 143, 249, 0.5))
83+
}
84+
85+
[part=home] {
86+
display: flex;
87+
grid-column: 1 / 4;
88+
grid-row: 2;
89+
background-color: #fff;
90+
position: relative;
91+
}
92+
93+
[part=home]::before {
94+
content: ' ';
95+
position: absolute;
96+
top: -2px;
97+
width: 2.5rem;
98+
height: 2px;
99+
background-color: #fff;
100+
}
101+
102+
[part=home].selected {
103+
background-color: #fff;
104+
}
105+
106+
.hide {
107+
display: none;
108+
}

‎src/pg/app/app.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<div part="grid">
22
<header part="header">
33
<button part="logo">
4-
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
5-
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 5H22V6H30V24H27L29 34H25L23.7998 28H20V31H16V28H12.2002L11 34H7L9 24H6V6H14V5H16V2H20V5ZM12.5996 26H16V24H13L12.5996 26ZM20 26H23.4004L23 24H20V26ZM8 22H28V8H8V22Z" fill="#453C4F"/>
6-
<path d="M22 19H14V11H22V19Z" fill="#453C4F"/>
7-
</svg>
4+
<slot name="icon"></slot>
85
</button>
96
<slot name="top"></slot>
107
</header>
11-
<slot name="side"></slot>
8+
<div part="side">
9+
<slot name="side"></slot>
10+
</div>
11+
<button part="resize"></button>
1212
<slot name="main"></slot>
13-
<slot name="home"></slot>
13+
<div part="home" class="hide">
14+
<slot name="home"></slot>
15+
</div>
1416
</div>

‎src/pg/app/app.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,36 @@ import style from './app.css';
1010
})
1111
export default class PgApp extends HTMLElement {
1212
@Part() $logo: HTMLButtonElement;
13+
@Part() $home: HTMLDivElement;
14+
@Part() $side: HTMLDivElement;
15+
@Part() $resize: HTMLButtonElement;
1316

17+
connectedCallback() {
18+
this.$logo.addEventListener('click', this.#handleClick.bind(this));
19+
this.$resize.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
20+
}
1421

22+
#handleClick() {
23+
this.$logo.classList.toggle('selected');
24+
this.$home.classList.toggle('hide');
25+
}
26+
27+
#handlePointerDown(e: PointerEvent) {
28+
const { clientX } = e;
29+
this.$resize.classList.add('dragging');
30+
const currentWidth = this.$side.getBoundingClientRect().width;
31+
let currentX = clientX;
32+
const handlePointerMove = (ee: PointerEvent) => {
33+
const x = currentX - ee.clientX;
34+
const width = currentWidth - x;
35+
this.$side.style.width = `${width}px`;
36+
}
37+
const handlePointerUp = () => {
38+
this.$resize.classList.remove('dragging');
39+
document.removeEventListener('pointermove', handlePointerMove);
40+
document.removeEventListener('pointerup', handlePointerUp);
41+
}
42+
document.addEventListener('pointermove', handlePointerMove);
43+
document.addEventListener('pointerup', handlePointerUp);
44+
}
1545
}

0 commit comments

Comments
 (0)