Skip to content

Commit af5bdb8

Browse files
SharonStratsSharonmichielbdejong
authored
Add header styles (SolidOS#302)
* added style sheet and functions * all styling but banner icon * ran lint fix * took out the extra banner styling * Added typedoc, started tests, and updated examples * completed examples, typedoc, typescript * added tests * Only build src/, since we can't get flattened output to lib/ working (SolidOS#334) Co-authored-by: Sharon <sstratsianis@student.unimelb.edu.au> Co-authored-by: Michiel de Jong <michiel@unhosted.org> Co-authored-by: Michiel de Jong <michielbdejong@users.noreply.github.com>
1 parent 34fe0c6 commit af5bdb8

9 files changed

Lines changed: 779 additions & 132 deletions

File tree

‎examples/header/index.html‎

Lines changed: 93 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,102 @@
11
<!DOCTYPE HTML>
22
<html lang="en">
3+
34
<head>
4-
<meta charset='UTF-8'>
5-
<title>solid-ui UI.widgets.header examples page</title>
6-
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7-
<script>
8-
const $ = document.querySelector.bind(document)
9-
function showSource(widgetName) {
10-
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
11-
.replace(/&/g, "&amp;")
12-
.replace(/</g, "&lt;")
13-
.replace(/>/g, "&gt;")
14-
.replace(/"/g, "&quot;")
15-
.replace(/'/g, "&#039;")
16-
}
17-
</script>
5+
<meta charset='UTF-8'>
6+
<title>solid-ui UI.widgets.header examples page</title>
7+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
8+
<script src="https://solid.github.io/solid-auth-client/dist/solid-auth-client.bundle.js"></script>
9+
<script>
10+
const $ = document.querySelector.bind(document)
11+
function showSource(widgetName) {
12+
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
13+
.replace(/&/g, "&amp;")
14+
.replace(/</g, "&lt;")
15+
.replace(/>/g, "&gt;")
16+
.replace(/"/g, "&quot;")
17+
.replace(/'/g, "&#039;")
18+
}
19+
</script>
20+
<style>
21+
.loginButton {
22+
border-radius: 0.2em;
23+
margin: 1em;
24+
font-size: 85%;
25+
background-color: #fff;
26+
border-style: .01em solid #7C4DFF;
27+
color: #7C4DFF;
28+
}
29+
30+
.loginButton:hover {
31+
background-color: #7C4DFF;
32+
color: #fff;
33+
}
34+
</style>
1835
</head>
36+
1937
<body>
2038

21-
<h2 id="header"><a href="#header">Header</a></h2>
22-
<div id='PageHeader'></div>
23-
<script id="script-header">
24-
window.addEventListener('DOMContentLoaded', async () => {
25-
try {
26-
await UI.initHeader(UI.store)
27-
} catch (error) {
28-
window.alert(`Error loading header. You need to have a div with id = PageHeader on your page.`)
29-
}
30-
});
31-
</script>
32-
<pre id="viewSource-header"></pre><script>showSource('header')</script>
33-
<div id="div-header"></div>
34-
35-
<h2 id="headerNotLoggedIn"><a href="#headerNotLoggedIn">Header</a></h2>
36-
<div id='PageHeader2'></div>
37-
<script id="script-headerNotLoggedIn">
38-
window.addEventListener('DOMContentLoaded', async () => {
39-
try {
40-
await UI.initHeader(UI.store)
41-
} catch (error) {
42-
window.alert(`Error loading header. You need to have a div with id = PageHeader on your page.`)
39+
<h2 id="header"><a href="#header">Header</a>
40+
<button class="loginButton" onclick="login('https://solid.community')">Login</button>
41+
<script>
42+
async function login(idp) {
43+
const session = await solid.auth.currentSession();
44+
if (!session)
45+
await solid.auth.login(idp);
46+
}
47+
</script>
48+
</h2>
49+
<p>This example demonstrates how to use the header component. The header has a different view depending
50+
on whether or not you are logged in. </p>
51+
<p>Unless you are already logged into your pod identity provider you
52+
should see the logged out view. To see the logged in view click the login button above. </p>
53+
<p>The header is customizable through the options parameter.</p>
54+
<p>The logo can be a url of your personalized logo, otherwise it will default to Solid. </p>
55+
<p>The menu list is an array of either links or buttons. </p>
56+
<p>The details are below. </p>
57+
<p><strong>options:</strong>
58+
<code>
59+
type HeaderOptions {
60+
logo?: string,
61+
menuList?: MenuItems[]
62+
}</code></p>
63+
<p><strong>MenuItems</strong> can be either a MenuItemLink or a MenuItemButton:
64+
<code>
65+
<p>type MenuItemLink = {
66+
label: string,
67+
url: string
4368
}
44-
});
45-
</script>
46-
<pre id="viewSource-headerNotLoggedIn"></pre><script>showSource('headerNotLoggedIn')</script>
47-
<div id="div-headerNotLoggedIn"></div>
69+
</p>
70+
<p>type MenuItemButton = {
71+
label: string,
72+
onclick: () => {}
73+
}
74+
</p>
75+
76+
</code>
77+
</p>
78+
79+
80+
<div id='PageHeader'></div>
81+
<p>In the code below you can see that you can have a mixture of buttons and links. When you pass in an onclick
82+
initHeader will create a
83+
button, however if you pass in a url it will create a link. Either way, as you can see, they appear the same in the
84+
menu.
85+
</p>
86+
<script id="script-header">
87+
window.addEventListener('DOMContentLoaded', async () => {
88+
try {
89+
options = { menuList: [{ label: "Testing Button", onclick: () => { alert('hello') } }, { label: "Testing Link", url: 'https://reflectechblog.wordpress.com/' }] }
90+
await UI.initHeader(UI.store, options)
91+
} catch (error) {
92+
window.alert(`Error loading header. You need to have a div with id = PageHeader on your page.`)
93+
}
94+
});
95+
</script>
96+
<pre id="viewSource-header"></pre>
97+
<script>showSource('header')</script>
98+
<div id="div-header"></div>
99+
48100
</body>
101+
49102
</html>

‎src/header/headerHelpers.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,41 @@
33
*/
44
import { NamedNode, sym } from 'rdflib'
55
import { log } from '../debug'
6+
import { styleMap } from './styleMap'
7+
import { getClasses } from '../jss'
68

79
type ThrottleOptions = {
810
leading?: boolean;
911
throttling?: boolean;
1012
trailing?: boolean;
1113
}
14+
/**
15+
* @internal
16+
*/
17+
function getStyle (styleClass) {
18+
return styleMap[styleClass]
19+
}
1220

21+
/**
22+
* @ignore exporting this only for the unit test
23+
*/
24+
export function addStyleClassToElement (element: any, styleClasses: string[]) {
25+
styleClasses.map((styleClass) => {
26+
const style = getStyle(styleClass)
27+
const { classes } = getClasses(document.head, { [styleClass]: style })
28+
element.classList.add(classes[styleClass])
29+
})
30+
}
31+
/**
32+
* @ignore exporting this only for the unit test
33+
*/
1334
export function getPod (): NamedNode {
1435
// @@ TODO: This is given that mashlib runs on NSS - might need to change when we want it to run on other Pod servers
1536
return sym(document.location.origin).site()
1637
}
17-
38+
/**
39+
* @ignore exporting this only for the unit test
40+
*/
1841
export function throttle (func: Function, wait: number, options: ThrottleOptions = {}): (...args: any[]) => any {
1942
let context: any,
2043
args: any,

‎src/header/icon.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)