Skip to content

Commit 9daf358

Browse files
timea-solidtimea-solid
committed
fixing some more styles
1 parent d980bb0 commit 9daf358

3 files changed

Lines changed: 44 additions & 105 deletions

File tree

‎src/header/index.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,12 @@ export function createLoginSignUpButtons () {
170170
export function createUserMenuButton (label: string, onClick: EventListenerOrEventListenerObject): HTMLElement {
171171
const button = document.createElement('button')
172172
button.setAttribute('style', style.headerUserMenuButton)
173+
button.onmouseover = function () {
174+
button.setAttribute('style', style.headerUserMenuButtonHover)
175+
}
176+
button.onmouseout = function () {
177+
button.setAttribute('style', style.headerUserMenuButton)
178+
}
173179
button.addEventListener('click', onClick)
174180
button.innerText = label
175181
return button
@@ -180,6 +186,12 @@ export function createUserMenuButton (label: string, onClick: EventListenerOrEve
180186
export function createUserMenuLink (label: string, href: string, target?: string): HTMLElement {
181187
const link = document.createElement('a')
182188
link.setAttribute('style', style.headerUserMenuLink)
189+
link.onmouseover = function () {
190+
link.setAttribute('style', style.headerUserMenuLinkHover)
191+
}
192+
link.onmouseout = function () {
193+
link.setAttribute('style', style.headerUserMenuLink)
194+
}
183195
link.href = href
184196
link.innerText = label
185197
if (target) link.target = target

‎src/login/login.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ import {
4343
WebOperationError
4444
} from 'solid-logic'
4545
import * as debug from '../debug'
46+
import * as style from '../style'
4647
import { alert } from '../log'
4748
import * as ns from '../ns.js'
4849
import { Signup } from '../signup/signup.js'
49-
import { buttonStyle, commentStyle, textInputStyle } from '../style'
5050
import * as utils from '../utils'
5151
import * as widgets from '../widgets'
5252

@@ -389,7 +389,7 @@ function signInOrSignUpBox (
389389
box.appendChild(signInPopUpButton)
390390
signInPopUpButton.setAttribute('type', 'button')
391391
signInPopUpButton.setAttribute('value', 'Log in')
392-
signInPopUpButton.setAttribute('style', `${signInButtonStyle}background-color: #eef;`)
392+
signInPopUpButton.setAttribute('style', `${signInButtonStyle}background-color: #eef;${style.headerBannerLoginInput}`)
393393

394394
authSession.onLogin(() => {
395395
const me = authn.currentUser()
@@ -864,15 +864,15 @@ export function selectWorkspace (
864864
// const hr = box.appendChild(dom.createElement('hr')) // @@
865865
box.appendChild(dom.createElement('hr')) // @@
866866

867-
const p = box.appendChild(dom.createElement('p'));
868-
(p as any).style = commentStyle
867+
const p = box.appendChild(dom.createElement('p'))
868+
p.setAttribute('style', style.commentStyle)
869869
p.textContent = `Where would you like to store the data for the ${noun}?
870870
Give the URL of the folder where you would like the data stored.
871871
It can be anywhere in solid world - this URI is just an idea.`
872872
// @@ TODO Remove the need to cast baseField to any
873873
const baseField: any = box.appendChild(dom.createElement('input'))
874-
baseField.setAttribute('type', 'text');
875-
(baseField as any).style = textInputStyle
874+
baseField.setAttribute('type', 'text')
875+
baseField.setAttribute('style', style.textInputStyle)
876876
baseField.size = 80 // really a string
877877
baseField.label = 'base URL'
878878
baseField.autocomplete = 'on'
@@ -885,8 +885,8 @@ export function selectWorkspace (
885885

886886
box.appendChild(dom.createElement('br')) // @@
887887

888-
const button = box.appendChild(dom.createElement('button'));
889-
(button as any).style = buttonStyle
888+
const button = box.appendChild(dom.createElement('button'))
889+
button.setAttribute('style', style.buttonStyle)
890890
button.textContent = `Start new ${noun} at this URI`
891891
button.addEventListener('click', function (_event) {
892892
let newBase = baseField.value.replace(' ', '%20') // do not re-encode in general, as % encodings may exist
@@ -906,7 +906,7 @@ export function selectWorkspace (
906906
ns.space('MasterWorkspace')
907907
)
908908
})
909-
let col1, col2, col3, tr, ws, style, comment
909+
let col1, col2, col3, tr, ws, localStyle, comment
910910
const cellStyle = 'height: 3em; margin: 1em; padding: 1em white; border-radius: 0.3em;'
911911
const deselectedStyle = `${cellStyle}border: 0px;`
912912
// const selectedStyle = cellStyle + 'border: 1px solid black;'
@@ -921,8 +921,8 @@ export function selectWorkspace (
921921
tr.appendChild(col1)
922922
}
923923
col2 = dom.createElement('td')
924-
style = solidLogicSingleton.store.anyValue(ws, ns.ui('style'))
925-
if (!style) {
924+
localStyle = solidLogicSingleton.store.anyValue(ws, ns.ui('style'))
925+
if (!localStyle) {
926926
// Otherwise make up arbitrary colour
927927
const hash = function (x) {
928928
return x.split('').reduce(function (a, b) {
@@ -931,9 +931,9 @@ export function selectWorkspace (
931931
}, 0)
932932
}
933933
const bgcolor = `#${((hash(ws.uri) & 0xffffff) | 0xc0c0c0).toString(16)}` // c0c0c0 forces pale
934-
style = `color: black ; background-color: ${bgcolor};`
934+
localStyle = `color: black ; background-color: ${bgcolor};`
935935
}
936-
col2.setAttribute('style', deselectedStyle + style)
936+
col2.setAttribute('style', deselectedStyle + localStyle)
937937
tr.target = ws.uri
938938
let label = solidLogicSingleton.store.any(ws, ns.rdfs('label'))
939939
if (!label) {
@@ -956,7 +956,7 @@ export function selectWorkspace (
956956
'click',
957957
function (_event) {
958958
col3.textContent = comment ? comment.value : ''
959-
col3.setAttribute('style', deselectedStyle + style)
959+
col3.setAttribute('style', deselectedStyle + localStyle)
960960
const button = dom.createElement('button')
961961
button.textContent = 'Continue'
962962
// button.setAttribute('style', style);

‎src/style.js‎

Lines changed: 18 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to li
1212

1313
export const style = { // styleModule
1414

15-
checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
15+
checkboxStyle: 'color: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
1616
checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
1717

1818
fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
@@ -106,96 +106,23 @@ export const style = { // styleModule
106106

107107
headerUserMenuTrigger: 'background: none, border: 0, cursor: pointer, width: 60px, height: 60px',
108108
headerUserMenuTriggerImg: 'borderRadius: 50%, height: 56px, width: 56px, width: 28px !important',
109-
headerUserMenuButton: {
110-
background: 'none',
111-
border: '0',
112-
color: 'black',
113-
cursor: 'pointer',
114-
display: 'block',
115-
fontFamily: 'Arial',
116-
fontSize: '1em',
117-
textAlign: 'left',
118-
padding: '1em',
119-
width: '100%',
120-
'&:focus, &:hover': {
121-
backgroundColor: 'linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)'
122-
}
123-
},
124-
headerUserMenuList: {
125-
listStyle: 'none',
126-
margin: '0',
127-
padding: '0'
128-
},
129-
headerUserMenuNavigationMenu: {
130-
background: 'white',
131-
border: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
132-
borderRight: '0',
133-
position: 'absolute',
134-
right: '0',
135-
top: '60px', // defined in mashlib as a SASS variable $icon_size
136-
width: '200px',
137-
'z-index': '1',
138-
'&[aria-hidden = true]': {
139-
display: 'none'
140-
}
141-
},
142-
headerUserMenuListItem: {
143-
borderBottom: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
144-
'&:last-child': {
145-
border: '0'
146-
}
147-
},
148-
headerUserMenuPhoto: {
149-
borderRadius: '50%',
150-
backgroundPosition: 'center',
151-
backgroundRepeat: 'no-repeat',
152-
backgroundSize: 'cover',
153-
height: '50px', // $icon-size - $image-margin * 2 image-margin was 5px in mashlib and icon size 60px
154-
width: '50px'
155-
},
156-
headerBanner: {
157-
boxShadow: '0px 1px 4px #000000', // the color was defined in mashlib as a SASS variable $divider_color
158-
display: 'flex',
159-
justifyContent: 'space-between',
160-
padding: '0 1.5em',
161-
marginBottom: '4px'
162-
},
163-
headerBannerLink: {
164-
display: 'block'
165-
},
166-
headerBannerRightMenu: {
167-
display: 'flex'
168-
},
169-
headerBannerLogin: {
170-
marginLeft: 'auto',
171-
input: {
172-
// hacks to override the default style of login and signup button from solid-ui
173-
margin: '0.75em 0 0.75em 0.5em !important',
174-
padding: '0.5em !important'
175-
}
176-
},
177-
headerBannerUserMenu: {
178-
borderLeft: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
179-
marginLeft: 'auto'
180-
},
181-
headerBannerHelpMenu: {
182-
borderLeft: 'solid 1px #000000', // the color was defined in mashlib as a SASS variable $divider_color
183-
marginLeft: 'auto'
184-
},
185-
headerBannerIcon: {
186-
backgroundSize: '65px 60px',
187-
height: '60px !important', // this is the icon size
188-
width: '65px !important' // may just be 65px round($icon-size * 352 / 322);
189-
},
190-
headerBannerHelpIcon: {
191-
192-
},
109+
headerUserMenuButton: 'background: none, border: 0, color: black, cursor: pointer, display: block, fontFamily: Arial, fontSize: 1em, textAlign: left, padding: 1em, width: 100%',
110+
headerUserMenuButtonHover: 'backgroundColor: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
111+
headerUserMenuList: 'listStyle: none, margin: 0, padding: 0',
112+
headerUserMenuNavigationMenu: 'background: white, border: solid 1px #000000, borderRight: 0,position: absolute, right: 0, top: 60px, width: 200px, z-index: 1',
113+
headerUserMenuListItem: 'borderBottom: solid 1px #000000',
114+
headerUserMenuPhoto: 'borderRadius: 50%, backgroundPosition: center, backgroundRepeat: no-repeat,backgroundSize: cover,height: 50px, width: 50px',
115+
headerBanner: 'boxShadow: 0px 1px 4px #000000, display: flex, justifyContent: space-between,padding: 0 1.5em, marginBottom: 4px',
116+
headerBannerLink: 'display: block',
117+
headerBannerRightMenu: 'display: flex',
118+
headerBannerLogin: 'marginLeft: auto',
119+
headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important, padding: 0.5em !important',
120+
headerBannerUserMenu: 'borderLeft: solid 1px #000000, marginLeft: auto',
121+
headerBannerHelpMenu: 'borderLeft: solid 1px #000000, marginLeft: auto',
122+
headerBannerIcon: 'backgroundSize: 65px 60px, height: 60px !important, width: 65px !important', // may just be 65px round($icon-size * 352 / 322);
123+
193124
// footer
194-
footer: {
195-
borderTop: 'solid 1px $divider-color',
196-
fontSize: '0.9em',
197-
padding: '0.5em 1.5em'
198-
},
125+
footer: 'borderTop: solid 1px $divider-color, fontSize: 0.9em, padding: 0.5em 1.5em',
199126

200127
// buttons
201128
primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
@@ -204,7 +131,7 @@ export const style = { // styleModule
204131

205132
primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
206133

207-
primaryButtonNoBorderHover: 'background-color: #7c4dff; color: ##ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
134+
primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
208135

209136
secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
210137

0 commit comments

Comments
 (0)