Skip to content

Commit e6bf000

Browse files
timea-solidtimea-solid
committed
1 parent f989f0a commit e6bf000

3 files changed

Lines changed: 113 additions & 3 deletions

File tree

‎src/header/index.ts‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
work in solid-ui by adjusting where imported functions are found.
55
*/
66
import { IndexedFormula, NamedNode } from 'rdflib'
7+
import { icons } from '..'
78
import { loginStatusBox, authSession, currentUser } from '../authn/authn'
89
import * as widgets from '../widgets'
910
import { emptyProfile } from './empty-profile'
@@ -24,7 +25,7 @@ export type MenuItems = MenuItemLink | MenuItemButton
2425
/*
2526
HeaderOptions allow for customizing the logo and menu list. If a logo is not provided the default
2627
is solid. Menulist will always show a link to logout and to the users profile.
27-
*/
28+
*/
2829
export type HeaderOptions = {
2930
logo?: string,
3031
menuList?: MenuItems[]
@@ -71,17 +72,44 @@ export async function createBanner (store: IndexedFormula, pod: NamedNode, user:
7172
addStyleClassToElement(image, ['header-banner__icon'])
7273
podLink.appendChild(image)
7374

74-
const menu = user
75+
const userMenu = user
7576
? await createUserMenu(store, user, options)
7677
: createLoginSignUpButtons()
7778

79+
const helpMenu = createHelpMenu()
80+
alert('HERE')
81+
7882
const banner = document.createElement('div')
7983
addStyleClassToElement(banner, ['header-banner'])
8084
banner.appendChild(podLink)
81-
banner.appendChild(menu)
85+
banner.appendChild(userMenu)
86+
banner.appendChild(helpMenu)
8287

8388
return banner
8489
}
90+
91+
function createHelpMenu () {
92+
const helpMenuList = document.createElement('ul')
93+
addStyleClassToElement(helpMenuList, ['header-user-menu__list'])
94+
helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('User guide', 'https://github.com/solid/userguide')))
95+
helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('Report a problem', 'https://github.com/solid/solidos/issues')))
96+
97+
const helpMenu = document.createElement('nav')
98+
99+
addStyleClassToElement(helpMenu, ['header-help-menu__navigation-menu'])
100+
helpMenu.setAttribute('aria-hidden', 'true')
101+
helpMenu.appendChild(helpMenuList)
102+
103+
const helpIcon = icons.iconBase + 'noun_help.svg'
104+
105+
const helpMenuContainer = document.createElement('div')
106+
addStyleClassToElement(helpMenuContainer, ['header-banner__help-menu'])
107+
addStyleClassToElement(helpMenuContainer, ['header-help-menu'])
108+
helpMenuContainer.style.backgroundImage = `url("${helpIcon}")`
109+
helpMenuContainer.appendChild(helpMenu)
110+
111+
return helpMenuContainer
112+
}
85113
/**
86114
* @ignore exporting this only for the unit test
87115
*/

‎src/header/styleMap.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,83 @@ export const styleMap = {
7676
height: '50px', // $icon-size - $image-margin * 2 image-margin was 5px in mashlib and icon size 60px
7777
width: '50px'
7878
},
79+
'header-help-menu': {
80+
},
81+
'header-help-menu__link': {
82+
background: 'none',
83+
border: '0',
84+
color: 'black',
85+
cursor: 'pointer',
86+
display: 'block',
87+
fontFamily: 'Arial',
88+
fontSize: '1em',
89+
textAlign: 'left',
90+
padding: '1em',
91+
width: '100%',
92+
'&:focus, &:hover': {
93+
backgroundColor: 'linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)'
94+
}
95+
},
96+
'header-help-menu__trigger': {
97+
background: 'none',
98+
border: '0',
99+
cursor: 'pointer',
100+
width: '60px', // defined in mashlib as a SASS variable $icon_size
101+
height: '60px', // defined in mashlib as a SASS variable $icon_size
102+
img: {
103+
borderRadius: '50%',
104+
height: '56px', // defined in mashlib as a SASS variable $icon_size - 4px
105+
width: '56px'
106+
}
107+
},
108+
'header-help-menu__button': {
109+
background: 'none',
110+
border: '0',
111+
color: 'black',
112+
cursor: 'pointer',
113+
display: 'block',
114+
fontFamily: 'Arial',
115+
fontSize: '1em',
116+
textAlign: 'left',
117+
padding: '1em',
118+
width: '100%',
119+
'&:focus, &:hover': {
120+
backgroundColor: 'linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)'
121+
}
122+
},
123+
'header-help-menu__list': {
124+
listStyle: 'none',
125+
margin: '0',
126+
padding: '0'
127+
},
128+
'header-help-menu__navigation-menu': {
129+
background: 'white',
130+
border: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
131+
borderRight: '0',
132+
position: 'absolute',
133+
right: '0',
134+
top: '60px', // defined in mashlib as a SASS variable $icon_size
135+
width: '200px',
136+
'z-index': '1',
137+
'&[aria-hidden = true]': {
138+
display: 'none'
139+
}
140+
},
141+
'header-help-menu__list-item': {
142+
borderBottom: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
143+
'&:last-child': {
144+
border: '0'
145+
}
146+
},
147+
'header-help-menu__photo': {
148+
borderRadius: '50%',
149+
backgroundPosition: 'center',
150+
backgroundRepeat: 'no-repeat',
151+
backgroundSize: 'cover',
152+
margin: '5px',
153+
height: '50px', // $icon-size - $image-margin * 2 image-margin was 5px in mashlib and icon size 60px
154+
width: '50px'
155+
},
79156
'header-banner': {
80157
boxShadow: '0px 1px 4px #000000', // the color was defined in mashlib as a SASS variable $divider_color
81158
display: 'flex',
@@ -98,6 +175,10 @@ export const styleMap = {
98175
borderLeft: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
99176
marginLeft: 'auto'
100177
},
178+
'header-banner__help-menu': {
179+
borderLeft: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
180+
marginLeft: 'auto'
181+
},
101182
'header-banner__icon': {
102183
backgroundSize: '65px 60px',
103184
height: '60px !important', // this is the icon size

‎src/icons/noun_help.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)