made changes to fix comments in pr
MODIFY
examples/buttons/index.html
examples/buttons/index.html
<script>showSource('button-with-icon')</script>
<div id="div-button-with-icon"></div>
- <h2 id="button-with-text"><a href="#button-with-text-primary-filled">button with text</a></h2>
- <script id="script-button-with-text">
+ <h2 id="button-with-text-primary-no-border"><a href="#button-with-text-primary-no-border">button with text</a></h2>
+ <script id="script-button-with-text-primary-no-border">
window.addEventListener('DOMContentLoaded', (event) => {
- $('#div-button-with-text').appendChild(
+ $('#div-button-with-text-primary-no-border').appendChild(
UI.widgets.button(document, undefined, 'test', () => {
window.alert('clicked!')
- }, { buttonType: UI.widgets.ButtonType.Primary, filled: true })
+ }, { buttonType: UI.widgets.ButtonType.Primary, needsBorder: false })
)
})
</script>
- <pre id="viewSource-button-with-text"></pre>
- <script>showSource('button-with-text')</script>
- <div id="div-button-with-text"></div>
+ <pre id="viewSource-button-with-text-primary-no-border"></pre>
+ <script>showSource('button-with-text-primary-no-border')</script>
+ <div id="div-button-with-text-primary-no-border"></div>
- <h2 id="button-with-text"><a href="#button-with-text-primary-notfilled">button with text</a></h2>
- <script id="script-button-with-text">
+ <h2 id="button-with-text-primary-needs-border"><a href="#button-with-text-primary-needs-border">button with text</a>
+ </h2>
+ <script id="script-button-with-text-primary-needs-border">
window.addEventListener('DOMContentLoaded', (event) => {
- $('#div-button-with-text').appendChild(
+ $('#div-button-with-text-primary-needs-border').appendChild(
UI.widgets.button(document, undefined, 'test', () => {
window.alert('clicked!')
- }, { buttonType: UI.widgets.ButtonType.Primary, filled: false })
+ }, { buttonType: UI.widgets.ButtonType.Primary, needsBorder: true })
)
})
</script>
- <pre id="viewSource-button-with-text"></pre>
- <script>showSource('button-with-text')</script>
- <div id="div-button-with-text"></div>
+ <pre id="viewSource-button-with-text-primary-needs-border"></pre>
+ <script>showSource('button-with-text-primary-needs-border')</script>
+ <div id="div-button-with-text-primary-needs-border"></div>
- <h2 id="button-with-text"><a href="#button-with-text-secondary-filled">button with text</a></h2>
- <script id="script-button-with-text">
+ <h2 id="button-with-text-secondary-no-border"><a href="#button-with-text-secondary-no-border">button with text</a>
+ </h2>
+ <script id="script-button-with-text-secondary-no-border">
window.addEventListener('DOMContentLoaded', (event) => {
- $('#div-button-with-text').appendChild(
+ $('#div-button-with-text-secondary-no-border').appendChild(
UI.widgets.button(document, undefined, 'test', () => {
window.alert('clicked!')
- }, { buttonType: UI.widgets.ButtonType.Secondary, filled: true })
+ }, { buttonType: UI.widgets.ButtonType.Secondary, needsBorder: false })
)
})
</script>
- <pre id="viewSource-button-with-text"></pre>
- <script>showSource('button-with-text')</script>
- <div id="div-button-with-text"></div>
- <h2 id="button-with-text"><a href="#button-with-text-secondary-notfilled">button with text</a></h2>
- <script id="script-button-with-text">
+ <pre id="viewSource-button-with-text-secondary-no-border"></pre>
+ <script>showSource('button-with-text-secondary-no-border')</script>
+ <div id="div-button-with-text-secondary-no-border"></div>
+
+ <h2 id="button-with-text-secondary-needs-border"><a href="#button-with-text-secondary-needs-border">button with
+ text</a></h2>
+ <script id="script-button-with-text-secondary-needs-border">
window.addEventListener('DOMContentLoaded', (event) => {
- $('#div-button-with-text').appendChild(
+ $('#div-button-with-text-secondary-needs-border').appendChild(
UI.widgets.button(document, undefined, 'test', () => {
window.alert('clicked!')
- }, { buttonType: UI.widgets.ButtonType.Secondary, filled: false })
+ }, { buttonType: UI.widgets.ButtonType.Secondary, needsBorder: true })
)
})
</script>
- <pre id="viewSource-button-with-text"></pre>
- <script>showSource('button-with-text')</script>
- <div id="div-button-with-text"></div>
+ <pre id="viewSource-button-with-text-secondary-needs-border"></pre>
+ <script>showSource('button-with-text-secondary-needs-border')</script>
+ <div id="div-button-with-text-secondary-needs-border"></div>
<h2 id="cancelButton"><a href="#cancelButton">cancelButton</a></h2>
<script id="script-cancelButton">

MODIFY
src/widgets/buttons.ts
src/widgets/buttons.ts
@@ -22,6 +22,10 @@ const dragAndDrop = require('./dragAndDrop')
const cancelIconURI = iconBase + 'noun_1180156.svg' // black X
const checkIconURI = iconBase + 'noun_1180158.svg' // green checkmark; Continue
+const PRIMARY_COLOR = '#7c4dff'
+const SECONDARY_COLOR = '#01C9EA'
+
+
export type StatusAreaContext = {
statusArea?: HTMLElement
div?: HTMLElement
@@ -34,8 +38,8 @@ export enum ButtonType {
Continue = ''
}
export type ButtonWidgetOptions = {
- buttonType?: ButtonType,
- filled?: boolean
+ buttonColor?: ButtonType,
+ needsBorder?: boolean
}
function getStatusArea (context?: StatusAreaContext) {
var box = (context && context.statusArea) || (context && context.div) || null
@@ -488,18 +492,22 @@ export function deleteButtonWithCheck (
return deleteButtonElt
}
-function getButtonStyle (options: ButtonWidgetOptions = { buttonType: ButtonType.Primary, filled: true }) {
+function getButtonStyle (options: ButtonWidgetOptions = { buttonColor: ButtonType.Primary, needsBorder: false }) {
// We need to accomadate for legacy code, which is why we have to allow buttonType and filled to be optional
- let backgroundColor: (ButtonType | string | undefined) = options.buttonType
- let fontColor: (ButtonType | string | undefined) = '#ffffff'
- let borderColor: (ButtonType | string | undefined) = options.buttonType
- let hoverBackgroundColor: (ButtonType | string | undefined) = `lighten(${options.buttonType}, 5%)`
- let hoverFontColor: (ButtonType | string | undefined) = fontColor
- if (!options.filled) {
+ let color = PRIMARY_COLOR
+ if (options.buttonColor === ButtonType.Secondary) {
+ color = SECONDARY_COLOR
+ }
+ let backgroundColor: string = color
+ let fontColor: string = '#ffffff'
+ let borderColor: string = color
+ let hoverBackgroundColor: string = `lighten(${color}, 5%)`
+ let hoverFontColor: string = fontColor
+ if (options.needsBorder) {
backgroundColor = '#ffffff'
- fontColor = options.buttonType
- borderColor = options.buttonType
- hoverBackgroundColor = options.buttonType
+ fontColor = color
+ borderColor = color
+ hoverBackgroundColor = color
hoverFontColor = backgroundColor
}
@@ -533,7 +541,7 @@ function getButtonStyle (options: ButtonWidgetOptions = { buttonType: ButtonType
*
* @returns <dDomElement> - the button
*/
-export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void, options: ButtonWidgetOptions = { buttonType: ButtonType.Primary, filled: true }) {
+export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void, options: ButtonWidgetOptions = { buttonColor: ButtonType.Primary, needsBorder: false }) {
var button = dom.createElement('button')
button.setAttribute('type', 'button')
// 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
* @returns <dDomElement> - the button
*/
export function cancelButton (dom: HTMLDocument, handler: (event: any) => void) {
- return button(dom, cancelIconURI, 'Cancel', handler, {})
+ return button(dom, cancelIconURI, 'Cancel', handler)
}
/* Make a continue button
@@ -577,7 +585,7 @@ export function cancelButton (dom: HTMLDocument, handler: (event: any) => void)
* @returns <dDomElement> - the button
*/
export function continueButton (dom: HTMLDocument, handler: (event: any) => void) {
- return button(dom, checkIconURI, 'Continue', handler, {})
+ return button(dom, checkIconURI, 'Continue', handler)
}
/* Grab a name for a new thing

MODIFY
test/unit/widgets/buttons.test.ts
test/unit/widgets/buttons.test.ts
@@ -119,7 +119,7 @@ describe('button', () => {
head: {},
createElement: dom.createElement.bind(dom)
}
- expect(button(domCopy as unknown as HTMLDocument, iconURI, text, handler, {})).toBeTruthy()
+ expect(button(domCopy as unknown as HTMLDocument, iconURI, text, handler)).toBeTruthy()
})
})

made changes to fix comments in pr