Skip to content

Commit 4710dad

Browse files
SharonStratsSharonStrats
committed
made changes to fix comments in pr
1 parent 462cddf commit 4710dad

3 files changed

Lines changed: 57 additions & 45 deletions

File tree

‎examples/buttons/index.html‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -100,60 +100,64 @@ <h2 id="button with icon"><a href="#button-with-icon">button with icon</a></h2>
100100
<script>showSource('button-with-icon')</script>
101101
<div id="div-button-with-icon"></div>
102102

103-
<h2 id="button-with-text"><a href="#button-with-text-primary-filled">button with text</a></h2>
104-
<script id="script-button-with-text">
103+
<h2 id="button-with-text-primary-no-border"><a href="#button-with-text-primary-no-border">button with text</a></h2>
104+
<script id="script-button-with-text-primary-no-border">
105105
window.addEventListener('DOMContentLoaded', (event) => {
106-
$('#div-button-with-text').appendChild(
106+
$('#div-button-with-text-primary-no-border').appendChild(
107107
UI.widgets.button(document, undefined, 'test', () => {
108108
window.alert('clicked!')
109-
}, { buttonType: UI.widgets.ButtonType.Primary, filled: true })
109+
}, { buttonType: UI.widgets.ButtonType.Primary, needsBorder: false })
110110
)
111111
})
112112
</script>
113-
<pre id="viewSource-button-with-text"></pre>
114-
<script>showSource('button-with-text')</script>
115-
<div id="div-button-with-text"></div>
113+
<pre id="viewSource-button-with-text-primary-no-border"></pre>
114+
<script>showSource('button-with-text-primary-no-border')</script>
115+
<div id="div-button-with-text-primary-no-border"></div>
116116

117-
<h2 id="button-with-text"><a href="#button-with-text-primary-notfilled">button with text</a></h2>
118-
<script id="script-button-with-text">
117+
<h2 id="button-with-text-primary-needs-border"><a href="#button-with-text-primary-needs-border">button with text</a>
118+
</h2>
119+
<script id="script-button-with-text-primary-needs-border">
119120
window.addEventListener('DOMContentLoaded', (event) => {
120-
$('#div-button-with-text').appendChild(
121+
$('#div-button-with-text-primary-needs-border').appendChild(
121122
UI.widgets.button(document, undefined, 'test', () => {
122123
window.alert('clicked!')
123-
}, { buttonType: UI.widgets.ButtonType.Primary, filled: false })
124+
}, { buttonType: UI.widgets.ButtonType.Primary, needsBorder: true })
124125
)
125126
})
126127
</script>
127-
<pre id="viewSource-button-with-text"></pre>
128-
<script>showSource('button-with-text')</script>
129-
<div id="div-button-with-text"></div>
128+
<pre id="viewSource-button-with-text-primary-needs-border"></pre>
129+
<script>showSource('button-with-text-primary-needs-border')</script>
130+
<div id="div-button-with-text-primary-needs-border"></div>
130131

131-
<h2 id="button-with-text"><a href="#button-with-text-secondary-filled">button with text</a></h2>
132-
<script id="script-button-with-text">
132+
<h2 id="button-with-text-secondary-no-border"><a href="#button-with-text-secondary-no-border">button with text</a>
133+
</h2>
134+
<script id="script-button-with-text-secondary-no-border">
133135
window.addEventListener('DOMContentLoaded', (event) => {
134-
$('#div-button-with-text').appendChild(
136+
$('#div-button-with-text-secondary-no-border').appendChild(
135137
UI.widgets.button(document, undefined, 'test', () => {
136138
window.alert('clicked!')
137-
}, { buttonType: UI.widgets.ButtonType.Secondary, filled: true })
139+
}, { buttonType: UI.widgets.ButtonType.Secondary, needsBorder: false })
138140
)
139141
})
140142
</script>
141-
<pre id="viewSource-button-with-text"></pre>
142-
<script>showSource('button-with-text')</script>
143-
<div id="div-button-with-text"></div>
144-
<h2 id="button-with-text"><a href="#button-with-text-secondary-notfilled">button with text</a></h2>
145-
<script id="script-button-with-text">
143+
<pre id="viewSource-button-with-text-secondary-no-border"></pre>
144+
<script>showSource('button-with-text-secondary-no-border')</script>
145+
<div id="div-button-with-text-secondary-no-border"></div>
146+
147+
<h2 id="button-with-text-secondary-needs-border"><a href="#button-with-text-secondary-needs-border">button with
148+
text</a></h2>
149+
<script id="script-button-with-text-secondary-needs-border">
146150
window.addEventListener('DOMContentLoaded', (event) => {
147-
$('#div-button-with-text').appendChild(
151+
$('#div-button-with-text-secondary-needs-border').appendChild(
148152
UI.widgets.button(document, undefined, 'test', () => {
149153
window.alert('clicked!')
150-
}, { buttonType: UI.widgets.ButtonType.Secondary, filled: false })
154+
}, { buttonType: UI.widgets.ButtonType.Secondary, needsBorder: true })
151155
)
152156
})
153157
</script>
154-
<pre id="viewSource-button-with-text"></pre>
155-
<script>showSource('button-with-text')</script>
156-
<div id="div-button-with-text"></div>
158+
<pre id="viewSource-button-with-text-secondary-needs-border"></pre>
159+
<script>showSource('button-with-text-secondary-needs-border')</script>
160+
<div id="div-button-with-text-secondary-needs-border"></div>
157161

158162
<h2 id="cancelButton"><a href="#cancelButton">cancelButton</a></h2>
159163
<script id="script-cancelButton">

‎src/widgets/buttons.ts‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ const dragAndDrop = require('./dragAndDrop')
2222
const cancelIconURI = iconBase + 'noun_1180156.svg' // black X
2323
const checkIconURI = iconBase + 'noun_1180158.svg' // green checkmark; Continue
2424

25+
const PRIMARY_COLOR = '#7c4dff'
26+
const SECONDARY_COLOR = '#01C9EA'
27+
28+
2529
export type StatusAreaContext = {
2630
statusArea?: HTMLElement
2731
div?: HTMLElement
@@ -34,8 +38,8 @@ export enum ButtonType {
3438
Continue = ''
3539
}
3640
export type ButtonWidgetOptions = {
37-
buttonType?: ButtonType,
38-
filled?: boolean
41+
buttonColor?: ButtonType,
42+
needsBorder?: boolean
3943
}
4044
function getStatusArea (context?: StatusAreaContext) {
4145
var box = (context && context.statusArea) || (context && context.div) || null
@@ -488,18 +492,22 @@ export function deleteButtonWithCheck (
488492
return deleteButtonElt
489493
}
490494

491-
function getButtonStyle (options: ButtonWidgetOptions = { buttonType: ButtonType.Primary, filled: true }) {
495+
function getButtonStyle (options: ButtonWidgetOptions = { buttonColor: ButtonType.Primary, needsBorder: false }) {
492496
// We need to accomadate for legacy code, which is why we have to allow buttonType and filled to be optional
493-
let backgroundColor: (ButtonType | string | undefined) = options.buttonType
494-
let fontColor: (ButtonType | string | undefined) = '#ffffff'
495-
let borderColor: (ButtonType | string | undefined) = options.buttonType
496-
let hoverBackgroundColor: (ButtonType | string | undefined) = `lighten(${options.buttonType}, 5%)`
497-
let hoverFontColor: (ButtonType | string | undefined) = fontColor
498-
if (!options.filled) {
497+
let color = PRIMARY_COLOR
498+
if (options.buttonColor === ButtonType.Secondary) {
499+
color = SECONDARY_COLOR
500+
}
501+
let backgroundColor: string = color
502+
let fontColor: string = '#ffffff'
503+
let borderColor: string = color
504+
let hoverBackgroundColor: string = `lighten(${color}, 5%)`
505+
let hoverFontColor: string = fontColor
506+
if (options.needsBorder) {
499507
backgroundColor = '#ffffff'
500-
fontColor = options.buttonType
501-
borderColor = options.buttonType
502-
hoverBackgroundColor = options.buttonType
508+
fontColor = color
509+
borderColor = color
510+
hoverBackgroundColor = color
503511
hoverFontColor = backgroundColor
504512
}
505513

@@ -533,7 +541,7 @@ function getButtonStyle (options: ButtonWidgetOptions = { buttonType: ButtonType
533541
*
534542
* @returns <dDomElement> - the button
535543
*/
536-
export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void, options: ButtonWidgetOptions = { buttonType: ButtonType.Primary, filled: true }) {
544+
export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void, options: ButtonWidgetOptions = { buttonColor: ButtonType.Primary, needsBorder: false }) {
537545
var button = dom.createElement('button')
538546
button.setAttribute('type', 'button')
539547
// button.innerHTML = text // later, user preferences may make text preferred for some
@@ -566,7 +574,7 @@ export function button (dom: HTMLDocument, iconURI: string | undefined, text: st
566574
* @returns <dDomElement> - the button
567575
*/
568576
export function cancelButton (dom: HTMLDocument, handler: (event: any) => void) {
569-
return button(dom, cancelIconURI, 'Cancel', handler, {})
577+
return button(dom, cancelIconURI, 'Cancel', handler)
570578
}
571579

572580
/* Make a continue button
@@ -577,7 +585,7 @@ export function cancelButton (dom: HTMLDocument, handler: (event: any) => void)
577585
* @returns <dDomElement> - the button
578586
*/
579587
export function continueButton (dom: HTMLDocument, handler: (event: any) => void) {
580-
return button(dom, checkIconURI, 'Continue', handler, {})
588+
return button(dom, checkIconURI, 'Continue', handler)
581589
}
582590

583591
/* Grab a name for a new thing
@@ -1287,7 +1295,7 @@ export function fileUploadButtonDiv (
12871295
false
12881296
)
12891297

1290-
; (input as any).style = 'display:none'
1298+
; (input as any).style = 'display:none'
12911299
const buttonElt = div.appendChild(
12921300
button(
12931301
dom,

‎test/unit/widgets/buttons.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ describe('button', () => {
119119
head: {},
120120
createElement: dom.createElement.bind(dom)
121121
}
122-
expect(button(domCopy as unknown as HTMLDocument, iconURI, text, handler, {})).toBeTruthy()
122+
expect(button(domCopy as unknown as HTMLDocument, iconURI, text, handler)).toBeTruthy()
123123
})
124124
})
125125

0 commit comments

Comments
 (0)