Skip to content

Commit 3aa9bda

Browse files
dinusvdinusv
committed
live-web-view: Updated TopNav and NavigationDoc.
1 parent 5d6080d commit 3aa9bda

File tree

8 files changed

+301
-61
lines changed

8 files changed

+301
-61
lines changed

‎packages/live-web-view/content/Tooltip.lv‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ component Tooltip < Div{
2828
let timeoutTime = parseInt(current.dataset.timeout)
2929
let timeout = null
3030

31-
current.addEventListener('mouseenter', function () {
31+
current.addEventListener('pointerenter', function (e){
3232
const rect = d.getBoundingClientRect()
3333
const midX = rect.left + rect.width / 2
3434
const midY = rect.top + rect.height / 2
@@ -64,7 +64,7 @@ component Tooltip < Div{
6464
}, 500)
6565
})
6666

67-
current.addEventListener('mouseleave', function () {
67+
current.addEventListener('pointerleave', function () {
6868
window.clearTimeout(timeout)
6969
current.classList.remove('active')
7070
})

‎packages/live-web-view/content/style/card.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ section p{
3535
@apply py-2;
3636
}
3737
button{
38-
@apply text-lg px-4 py-2 text-mono-1 dark:text-mono-f transition-colors duration-300 transform border border-mono-b;
39-
@apply dark:border-mono-4 rounded hover:bg-mono-e dark:hover:bg-mono-4 text-lg;
38+
@apply px-4 py-2 text-mono-1 dark:text-mono-f transition-colors duration-300 transform border border-mono-b;
39+
@apply dark:border-mono-4 rounded hover:bg-mono-e dark:hover:bg-mono-4 text-base;
4040
@apply dark:bg-mono-3 dark:hover:bg-mono-4;
4141
}

‎packages/live-web-view/docs/components/NavigationDoc.lv‎

Lines changed: 259 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,18 @@ component NavigationDoc{
2222
Example{
2323
render: Example.RenderType.CSRSSR
2424
element: CardDisplay{
25-
TopNav{ position: 'static'
26-
NavContent{
27-
NavBrand{ A{ href: `#` T`Brand` } }
28-
NavToggleButton{}
29-
}
30-
NavContentToggle{
31-
Ul{
32-
Li{ A{ href: `#` T`Home` } }
33-
Li{ A{ href: `#` T`Install` } }
34-
Li{ A{ href: `#` T`Documentation` } }
25+
TopNav{
26+
NavSections{
27+
NavContent{
28+
NavBrand{ A{ href: `#` T`Brand` } }
29+
NavToggleButton{}
30+
}
31+
NavContentToggle{
32+
Ul{
33+
Li{ A{ href: `#` T`Home` } }
34+
Li{ A{ href: `#` T`Install` } }
35+
Li{ A{ href: `#` T`Documentation` } }
36+
}
3537
}
3638
}
3739
}
@@ -45,16 +47,80 @@ component NavigationDoc{
4547
static any[] use = [TopNav]
4648
```
4749
ContentSource```
48-
TopNav{ position: 'static'
49-
NavContent{
50-
NavBrand{ A{ href: \`#\` T\`Brand\` } }
51-
NavToggleButton{}
50+
TopNav{
51+
NavSections{
52+
NavContent{
53+
NavBrand{ A{ href: \`#\` T\`Brand\` } }
54+
NavToggleButton{}
55+
}
56+
NavContentToggle{
57+
Ul{
58+
Li{ A{ href: \`#\` T\`Home\` } }
59+
Li{ A{ href: \`#\` T\`Install\` } }
60+
Li{ A{ href: \`#\` T\`Documentation\` } }
61+
}
62+
}
5263
}
53-
NavContentToggle{
54-
Ul{
55-
Li{ A{ href: \`#\` T\`Home\` } }
56-
Li{ A{ href: \`#\` T\`Install\` } }
57-
Li{ A{ href: \`#\` T\`Documentation\` } }
64+
}
65+
```
66+
}
67+
68+
69+
Content{
70+
H2S`Center Column`
71+
P{
72+
T`Navigation menu with 3 sections.`
73+
}
74+
}
75+
76+
Example{
77+
render: Example.RenderType.CSRSSR
78+
element: CardDisplay{
79+
TopNav{
80+
NavSections{
81+
NavContent{
82+
NavBrand{ A{ href: `#` T`Brand` } }
83+
NavToggleButton{}
84+
}
85+
NavContentToggle{
86+
Ul{
87+
Li{ A{ href: '#' T`Home` }}
88+
Li{ A{ href: '#' T`Documentation` }}
89+
}
90+
}
91+
NavContentToggle{
92+
Ul{
93+
Li{ A{ href: `#` T`Source` } }
94+
}
95+
}
96+
}
97+
}
98+
}
99+
100+
ImportsSource```
101+
import live-web.dom
102+
import live-web-view.navigation
103+
```
104+
UseSource```
105+
static any[] use = [TopNav]
106+
```
107+
ContentSource```
108+
TopNav{
109+
NavSections{
110+
NavContent{
111+
NavBrand{ A{ href: \`#\` T\`Brand\` } }
112+
NavToggleButton{}
113+
}
114+
NavContentWide{
115+
Ul{
116+
Li{ A{ href: \'#\' T\`Wide Link\` }}
117+
}
118+
}
119+
NavContentToggle{
120+
Ul{
121+
Li{ A{ href: \`#\` T\`Home\` } }
122+
Li{ A{ href: \`#\` T\`Documentation\` } }
123+
}
58124
}
59125
}
60126
}
@@ -71,23 +137,92 @@ component NavigationDoc{
71137
Example{
72138
render: Example.RenderType.CSRSSR
73139
element: CardDisplay{
74-
TopNav{ position: 'static'
75-
NavContent{
76-
NavBrand{ A{ href: `#` T`Brand` } }
77-
NavToggleButton{}
78-
}
79-
NavContentWide{
80-
Ul{
81-
Li{ A{ href: '#' T`Wide Screen Link` }}
140+
TopNav{
141+
NavSections{
142+
NavContent{
143+
NavBrand{ A{ href: `#` T`Brand` } }
144+
NavToggleButton{}
145+
}
146+
NavContentWide{
147+
Ul{
148+
Li{ A{ href: '#' T`Wide` }}
149+
}
150+
}
151+
NavContentToggle{
152+
Ul{
153+
Li{ A{ href: `#` T`Home` } }
154+
Li{ A{ href: `#` T`Documentation` } }
155+
}
82156
}
83157
}
84-
NavContentToggle{
85-
Ul{
86-
Li{ A{ href: `#` T`Home` } }
87-
Li{ A{ href: `#` T`Documentation` } }
158+
}
159+
}
160+
161+
ImportsSource```
162+
import live-web.dom
163+
import live-web-view.navigation
164+
```
165+
UseSource```
166+
static any[] use = [TopNav]
167+
```
168+
ContentSource```
169+
TopNav{
170+
NavSections{
171+
NavContent{
172+
NavBrand{ A{ href: \`#\` T\`Brand\` } }
173+
NavToggleButton{}
174+
}
175+
NavContentWide{
176+
Ul{
177+
Li{ A{ href: \'#\' T\`Wide Link\` }}
178+
}
179+
}
180+
NavContentToggle{
181+
Ul{
182+
Li{ A{ href: \`#\` T\`Home\` } }
183+
Li{ A{ href: \`#\` T\`Documentation\` } }
184+
}
88185
}
89186
}
90187
}
188+
```
189+
}
190+
191+
Content{
192+
H2S`Navigation from data`
193+
P{
194+
Code`TopNav`T` can be created from data received on the server side.`
195+
}
196+
}
197+
198+
Example{
199+
render: Example.RenderType.CSRSSR
200+
element: CardDisplay{
201+
TopNav{
202+
NavSections{
203+
data: [
204+
{
205+
links: [
206+
{ type: 'brand', href: '#', label: 'Brand' },
207+
{ type: 'toggle' }
208+
]
209+
},
210+
{
211+
toggle: true,
212+
links: [
213+
{ href: '#', label: 'Home' },
214+
{ href: '#', label: 'About' }
215+
]
216+
},
217+
{
218+
toggle: true,
219+
links: [
220+
{ href: '#', label: 'Source' }
221+
]
222+
}
223+
]
224+
}
225+
}
91226
}
92227

93228
ImportsSource```
@@ -98,20 +233,102 @@ component NavigationDoc{
98233
static any[] use = [TopNav]
99234
```
100235
ContentSource```
101-
TopNav{ position: 'static'
102-
NavContent{
103-
NavBrand{ A{ href: \`#\` T\`Brand\` } }
104-
NavToggleButton{}
236+
TopNav{
237+
NavSections{
238+
data: [
239+
{
240+
links: [
241+
{ type: 'brand', href: '#', label: 'Brand' },
242+
{ type: 'toggle' }
243+
]
244+
},
245+
{
246+
toggle: true,
247+
links: [
248+
{ href: '#', label: 'Home' },
249+
{ href: '#', label: 'About' }
250+
]
251+
},
252+
{
253+
toggle: true,
254+
links: [
255+
{ href: '#', label: 'Source' }
256+
]
257+
}
258+
]
105259
}
106-
NavContentWide{
107-
Ul{
108-
Li{ A{ href: \'#\' T\`Wide Screen Link\` }}
260+
}
261+
```
262+
}
263+
264+
Content{
265+
H2S`Navigation Fixed`
266+
P{
267+
T`You can create a navigation fixed on top of the screen using the `Code`NavFixed`T` component:`
268+
}
269+
}
270+
271+
Example{
272+
ContentSource```
273+
TopNav{
274+
NavFixed{
275+
NavSections{
276+
// ...
277+
}
278+
}
279+
}
280+
```
281+
}
282+
283+
284+
Content{
285+
H2S`Navigation With Secondary Menu`
286+
}
287+
288+
Example{
289+
render: Example.RenderType.CSRSSR
290+
element: CardDisplay{
291+
TopNav{
292+
NavSections{
293+
NavContent{
294+
NavBrand{ A{ href: `#` T`Brand` } }
295+
NavToggleButton{}
296+
}
297+
NavContentToggle{
298+
Ul{
299+
Li{ A{ href: `#` T`Home` } }
300+
Li{ A{ classes: ['dropdown'] href: '#' T`Install` }
301+
Ul{ classes: ['secondary', 'right']
302+
Li{ A{ href: '#' T`Link #1` }}
303+
Li{ A{ href: '#' T`Link #2` }}
304+
}
305+
}
306+
}
109307
}
110308
}
111-
NavContentToggle{
112-
Ul{
113-
Li{ A{ href: \`#\` T\`Home\` } }
114-
Li{ A{ href: \`#\` T\`Documentation\` } }
309+
}
310+
}
311+
312+
ImportsSource```
313+
import live-web.dom
314+
import live-web-view.navigation
315+
```
316+
UseSource```
317+
static any[] use = [TopNav]
318+
```
319+
ContentSource```
320+
TopNav{
321+
NavSections{
322+
NavContent{
323+
NavBrand{ A{ href: \`#\` T\`Brand\` } }
324+
NavToggleButton{}
325+
}
326+
NavContentToggle{
327+
Ul{
328+
Li{ A{ href: \`#\` T\`Home\` } }
329+
Li{ A{ href: \`#\` T\`Install\` } }
330+
Li{ A{ href: \`#\` T\`Documentation\` } }
331+
}
115332
}
116333
}
117334
}

‎packages/live-web-view/navigation/NavFixed.lv‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
component NavFixed{
1+
import live-web.dom
2+
3+
component NavFixed < Div{
24
classes: ['nav-fixed']
35
}

‎packages/live-web-view/navigation/NavSections.lv‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ component NavSections < Div{
2222
}
2323
}
2424
}
25+
} else if ( link.type === 'toggle' ){
26+
return Li{
27+
NavToggleButton{}
28+
}
2529
} else if ( link.type === 'dropdown' ){
2630
return Li{ classes: ['dropdown-item']
2731
Dropdown{
@@ -52,7 +56,8 @@ component NavSections < Div{
5256

5357
static fn createFromData(data:Object, active:string){
5458
return data.map(d => {
55-
return NavContent{
59+
const C = d.toggle ? NavContentToggle : NavContent
60+
return C{
5661
Ul{
5762
children: d.links.map(link => {
5863
return NavSections.createFromLink(link, active)

0 commit comments

Comments
 (0)