Skip to content

Commit f42a6c9

Browse files
timea-solidtimea-solid
committed
imporved some code around styles
1 parent 69262fe commit f42a6c9

7 files changed

Lines changed: 21 additions & 18 deletions

File tree

‎src/login/login.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -354,10 +354,6 @@ export async function registrationList (context: AuthenticationContext, options:
354354
return context
355355
} // registrationList
356356

357-
function getDefaultSignInButtonStyle (): string {
358-
return 'padding: 1em; border-radius:0.5em; font-size: 100%;'
359-
}
360-
361357
/**
362358
* Bootstrapping identity
363359
* (Called by `loginStatusBox()`)
@@ -375,7 +371,7 @@ function signInOrSignUpBox (
375371
} = {}
376372
): HTMLElement {
377373
options = options || {}
378-
const signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle()
374+
const signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle
379375

380376
const box: any = dom.createElement('div')
381377
const magicClassName = 'SolidSignInOrSignUpBox'
@@ -389,7 +385,7 @@ function signInOrSignUpBox (
389385
box.appendChild(signInPopUpButton)
390386
signInPopUpButton.setAttribute('type', 'button')
391387
signInPopUpButton.setAttribute('value', 'Log in')
392-
signInPopUpButton.setAttribute('style', `${signInButtonStyle}background-color: #eef;${style.headerBannerLoginInput}`)
388+
signInPopUpButton.setAttribute('style', `${signInButtonStyle}${style.headerBannerLoginInput}` + style.signUpBackground)
393389

394390
authSession.onLogin(() => {
395391
const me = authn.currentUser()
@@ -437,7 +433,7 @@ function signInOrSignUpBox (
437433
box.appendChild(signupButton)
438434
signupButton.setAttribute('type', 'button')
439435
signupButton.setAttribute('value', 'Sign Up for Solid')
440-
signupButton.setAttribute('style', `${signInButtonStyle}background-color: #efe;${style.headerBannerLoginInput}`)
436+
signupButton.setAttribute('style', `${signInButtonStyle}${style.headerBannerLoginInput}` + style.signInBackground)
441437

442438
signupButton.addEventListener(
443439
'click',
@@ -653,7 +649,7 @@ export function loginStatusBox (
653649
}
654650

655651
function logoutButton (me, options) {
656-
const signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle()
652+
const signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle
657653
let logoutLabel = 'WebID logout'
658654
if (me) {
659655
const nick =
@@ -667,7 +663,7 @@ export function loginStatusBox (
667663
// signOutButton.className = 'WebIDCancelButton'
668664
signOutButton.setAttribute('type', 'button')
669665
signOutButton.setAttribute('value', logoutLabel)
670-
signOutButton.setAttribute('style', `${signInButtonStyle}background-color: #eee;`)
666+
signOutButton.setAttribute('style', `${signInButtonStyle}`)
671667
signOutButton.addEventListener('click', logoutButtonHandler, false)
672668
return signOutButton
673669
}

‎src/participation.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { syncTableToArray } from './utils'
1010
import { lightColorHash } from './pad'
1111
import { log } from './debug'
1212
import * as style from './style'
13+
import styleConstants from './styleConstants'
1314
import { solidLogicSingleton, authn } from 'solid-logic'
1415

1516
type ParticipationOptions = {
@@ -44,7 +45,7 @@ export function renderParticipants (dom: HTMLDocument, table: ParticipationTable
4445
tr.textContent = '???' // Don't crash - invalid part'n entry
4546
return tr
4647
}
47-
const bg = store.anyValue(parp, ns.ui('backgroundColor')) || 'white'
48+
const bg = store.anyValue(parp, ns.ui('backgroundColor')) || styleConstants.participationDefaultBackground
4849

4950
const block = dom.createElement('div')
5051
block.setAttribute(

‎src/style.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ export const style = { // styleModule
3434
autocompleteRowStyle: 'border: 0.2em solid straw;',
3535

3636
// Login buttons
37-
signInButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;', // was 0.5em radius
37+
signInAndUpButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;', // was 0.5em radius
38+
headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important;',
39+
signUpBackground: 'background-color: #eef;',
40+
signInBackground: 'background-color: #efe;',
3841

3942
// Forms
4043
heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;', // originally was brown; now grey
@@ -103,7 +106,6 @@ export const style = { // styleModule
103106
headerBannerRightMenu: 'display: flex',
104107
headerBannerLogin: 'margin-left: auto',
105108
allChildrenVisible: 'display:true',
106-
headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important',
107109
headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto',
108110
headerBannerHelpMenu: 'border-left: solid 1px #000000; margin.left: auto',
109111
headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important', // may just be 65px round($icon-size * 352 / 322);

‎src/styleConstants.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,9 @@ export default {
1919
textInputColor: '#000',
2020
textInputColorPending: '#888',
2121

22-
defaultErrorBackgroundColor: '#fee'
22+
defaultErrorBackgroundColor: '#fee',
23+
24+
participationDefaultBackground: 'white',
25+
26+
basicMaxLength: '4096'
2327
}

‎src/widgets/forms/basic.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export function basicField (
141141
field.setAttribute('size', size)
142142

143143
const maxLength = kb.any(form, ns.ui('maxLength'))
144-
field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096')
144+
field.setAttribute('maxLength', maxLength ? '' + maxLength : styleConstants.basicMaxLength)
145145

146146
doc = doc || fieldStore(subject, property as any, doc)
147147

‎test/unit/header/__snapshots__/index.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -311,12 +311,12 @@ exports[`createLoginSignUpButtons creates div 1`] = `
311311
style="display:flex;"
312312
>
313313
<input
314-
style="padding: 1em; border-radius:0.5em; font-size: 100%;background-color: #eef;margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important"
314+
style="padding: 1em; border-radius:0.2em; font-size: 100%;margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important;background-color: #eef;"
315315
type="button"
316316
value="Log in"
317317
/>
318318
<input
319-
style="padding: 1em; border-radius:0.5em; font-size: 100%;background-color: #efe;margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important"
319+
style="padding: 1em; border-radius:0.2em; font-size: 100%;margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important;background-color: #efe;"
320320
type="button"
321321
value="Sign Up for Solid"
322322
/>

‎test/unit/style.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
messageBodyStyle,
88
multilineTextInputStyle,
99
pendingeditModifier,
10-
signInButtonStyle,
10+
signInAndUpButtonStyle,
1111
textInputStyle
1212
} from '../../src/style'
1313

@@ -46,7 +46,7 @@ describe('pendingeditModifier', () => {
4646
})
4747
describe('signInButtonStyle', () => {
4848
it('exists', () => {
49-
expect(typeof signInButtonStyle).toEqual('string')
49+
expect(typeof signInAndUpButtonStyle).toEqual('string')
5050
})
5151
})
5252
describe('formTextInput', () => {

0 commit comments

Comments
 (0)