Added additionaly styles for the button
MODIFY
examples/buttons/index.html
examples/buttons/index.html
<!DOCTYPE HTML>
<html lang="en">
+
<head>
<meta charset='UTF-8'>
<title>solid-ui UI.widgets.buttons examples page</title>
}
</script>
</head>
+
<body>
<h2 id="addStyleSheet"><a href="#addStyleSheet">addStyleSheet</a></h2>
<script id="script-addStyleSheet">
UI.widgets.addStyleSheet(document, 'https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css')
})
</script>
- <pre id="viewSource-addStyleSheet"></pre><script>showSource('addStyleSheet')</script>
+ <pre id="viewSource-addStyleSheet"></pre>
+ <script>showSource('addStyleSheet')</script>
<h2 id="allClassURIs"><a href="#allClassURIs">allClassURIs</a></h2>
<script id="script-allClassURIs">
})
})
</script>
- <pre id="viewSource-allClassURIs"></pre><script>showSource('allClassURIs')</script>
+ <pre id="viewSource-allClassURIs"></pre>
+ <script>showSource('allClassURIs')</script>
<ul id="ul-allClassURIs"></ul>
}
});
</script>
- <pre id="viewSource-askName"></pre><script>showSource('askName')</script>
+ <pre id="viewSource-askName"></pre>
+ <script>showSource('askName')</script>
<div id="div-askName"></div>
<h2 id="attachmentList"><a href="#attachmentList">attachmentList</a></h2>
UI.widgets.attachmentList(document, UI.rdf.namedNode('https://example-user.inrupt.net/public/some-message.ttl#this'), $('#div-attachmentList'))
})
</script>
- <pre id="viewSource-attachmentList"></pre><script>showSource('attachmentList')</script>
+ <pre id="viewSource-attachmentList"></pre>
+ <script>showSource('attachmentList')</script>
<div id="div-attachmentList"></div>
<h2 id="button with icon"><a href="#button-with-icon">button with icon</a></h2>
)
})
</script>
- <pre id="viewSource-button-with-icon"></pre><script>showSource('button-with-icon')</script>
+ <pre id="viewSource-button-with-icon"></pre>
+ <script>showSource('button-with-icon')</script>
<div id="div-button-with-icon"></div>
<h2 id="button-with-text"><a href="#button-with-text">button with text</a></h2>
$('#div-button-with-text').appendChild(
UI.widgets.button(document, undefined, 'test', () => {
window.alert('clicked!')
- })
+ }, { buttonType: 0, filled: false })
)
})
</script>
- <pre id="viewSource-button-with-text"></pre><script>showSource('button-with-text')</script>
+ <pre id="viewSource-button-with-text"></pre>
+ <script>showSource('button-with-text')</script>
<div id="div-button-with-text"></div>
<h2 id="cancelButton"><a href="#cancelButton">cancelButton</a></h2>
)
})
</script>
- <pre id="viewSource-cancelButton"></pre><script>showSource('cancelButton')</script>
+ <pre id="viewSource-cancelButton"></pre>
+ <script>showSource('cancelButton')</script>
<div id="div-cancelButton"></div>
<h2 id="clearElement"><a href="#clearElement">clearElement</a></h2>
}, 1000)
})
</script>
- <pre id="viewSource-clearElement"></pre><script>showSource('clearElement')</script>
+ <pre id="viewSource-clearElement"></pre>
+ <script>showSource('clearElement')</script>
<div id="div-clearElement" style="height: 2em;"></div>
<h2 id="complain"><a href="#complain">complain</a></h2>
UI.widgets.complain({ div: $('#div-complain'), dom: document }, 'not good!')
})
</script>
- <pre id="viewSource-complain"></pre><script>showSource('complain')</script>
+ <pre id="viewSource-complain"></pre>
+ <script>showSource('complain')</script>
<div id="div-complain" style="height: 2em;"></div>
<h2 id="continueButton"><a href="#continueButton">continueButton</a></h2>
)
})
</script>
- <pre id="viewSource-continueButton"></pre><script>showSource('continueButton')</script>
+ <pre id="viewSource-continueButton"></pre>
+ <script>showSource('continueButton')</script>
<div id="div-continueButton"></div>
<h2 id="defaultAnnotationStore"><a href="#defaultAnnotationStore">defaultAnnotationStore</a></h2>
$('#div-defaultAnnotationStore').appendChild(document.createTextNode(result.uri))
})
</script>
- <pre id="viewSource-defaultAnnotationStore"></pre><script>showSource('defaultAnnotationStore')</script>
+ <pre id="viewSource-defaultAnnotationStore"></pre>
+ <script>showSource('defaultAnnotationStore')</script>
<div id="div-defaultAnnotationStore"></div>
<h2 id="deleteButtonWithCheck"><a href="#deleteButtonWithCheck">deleteButtonWithCheck</a></h2>
$('#div-deleteButtonWithCheck').appendChild(result)
})
</script>
- <pre id="viewSource-deleteButtonWithCheck"></pre><script>showSource('deleteButtonWithCheck')</script>
+ <pre id="viewSource-deleteButtonWithCheck"></pre>
+ <script>showSource('deleteButtonWithCheck')</script>
<div id="div-deleteButtonWithCheck"></div>
<h2 id="extractLogURI"><a href="#extractLogURI">extractLogURI</a></h2>
$('#div-extractLogURI').appendChild(document.createTextNode(extracted))
})
</script>
- <pre id="viewSource-extractLogURI"></pre><script>showSource('extractLogURI')</script>
+ <pre id="viewSource-extractLogURI"></pre>
+ <script>showSource('extractLogURI')</script>
<div id="div-extractLogURI"></div>
<h2 id="formatDateTime"><a href="#formatDateTime">formatDateTime</a></h2>
$('#div-formatDateTime').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-formatDateTime"></pre><script>showSource('formatDateTime')</script>
+ <pre id="viewSource-formatDateTime"></pre>
+ <script>showSource('formatDateTime')</script>
<div id="div-formatDateTime"></div>
<h2 id="faviconOrDefault"><a href="#faviconOrDefault"><a href="#faviconOrDefault">faviconOrDefault</a></a></h2>
$('#div-faviconOrDefault').appendChild(result)
})
</script>
- <pre id="viewSource-faviconOrDefault"></pre><script>showSource('faviconOrDefault')</script>
+ <pre id="viewSource-faviconOrDefault"></pre>
+ <script>showSource('faviconOrDefault')</script>
<div id="div-faviconOrDefault"></div>
-<h2 id="fileUploadButtonDiv"><a href="#fileUploadButtonDiv"><a href="#fileUploadButtonDiv">fileUploadButtonDiv</a></a></h2>
+ <h2 id="fileUploadButtonDiv"><a href="#fileUploadButtonDiv"><a href="#fileUploadButtonDiv">fileUploadButtonDiv</a></a>
+ </h2>
<script id="script-fileUploadButtonDiv">
window.addEventListener('DOMContentLoaded', (event) => {
const result = UI.widgets.fileUploadButtonDiv(document, (files) => {
$('#div-fileUploadButtonDiv').appendChild(result)
})
</script>
- <pre id="viewSource-fileUploadButtonDiv"></pre><script>showSource('fileUploadButtonDiv')</script>
+ <pre id="viewSource-fileUploadButtonDiv"></pre>
+ <script>showSource('fileUploadButtonDiv')</script>
<div id="div-fileUploadButtonDiv"></div>
<h2 id="findImage"><a href="#findImage">findImage</a></h2>
displayFindImageResult(michiel)
})
</script>
- <pre id="viewSource-findImage"></pre><script>showSource('findImage')</script>
+ <pre id="viewSource-findImage"></pre>
+ <script>showSource('findImage')</script>
<div id="div-findImage"></div>
<h2 id="findImageFromURI"><a href="#findImageFromURI">findImageFromURI</a></h2>
displayFindImageFromURIResult('mailto:user@example.com')
})
</script>
- <pre id="viewSource-findImageFromURI"></pre><script>showSource('findImageFromURI')</script>
+ <pre id="viewSource-findImageFromURI"></pre>
+ <script>showSource('findImageFromURI')</script>
<div id="div-findImageFromURI"></div>
<h2 id="iconForClass"><a href="#iconForClass">iconForClass</a></h2>
$('#div-iconForClass').innerHTML = `<ul>${lines.join('')}</ul>`
})
</script>
- <pre id="viewSource-iconForClass"></pre><script>showSource('iconForClass')</script>
+ <pre id="viewSource-iconForClass"></pre>
+ <script>showSource('iconForClass')</script>
<div id="div-iconForClass"></div>
<h2 id="imagesOf"><a href="#imagesOf">imagesOf</a></h2>
})
})
</script>
- <pre id="viewSource-imagesOf"></pre><script>showSource('imagesOf')</script>
+ <pre id="viewSource-imagesOf"></pre>
+ <script>showSource('imagesOf')</script>
<div id="div-imagesOf"></div>
<h2 id="twoLineTransaction"><a href="#twoLineTransaction">twoLineTransaction</a></h2>
$('#div-twoLineTransaction').appendChild(result)
})
</script>
- <pre id="viewSource-twoLineTransaction"></pre><script>showSource('twoLineTransaction')</script>
+ <pre id="viewSource-twoLineTransaction"></pre>
+ <script>showSource('twoLineTransaction')</script>
<div id="div-twoLineTransaction"></div>
<h2 id="twoLineTrip"><a href="#twoLineTrip">twoLineTrip</a></h2>
$('#div-twoLineTrip').appendChild(result)
})
</script>
- <pre id="viewSource-twoLineTrip"></pre><script>showSource('twoLineTrip')</script>
+ <pre id="viewSource-twoLineTrip"></pre>
+ <script>showSource('twoLineTrip')</script>
<div id="div-twoLineTrip"></div>
<h2 id="twoLineWidgetForClass"><a href="#twoLineWidgetForClass">twoLineWidgetForClass</a></h2>
$('#div-twoLineWidgetForClass').appendChild(widget)
})
</script>
- <pre id="viewSource-twoLineWidgetForClass"></pre><script>showSource('twoLineWidgetForClass')</script>
+ <pre id="viewSource-twoLineWidgetForClass"></pre>
+ <script>showSource('twoLineWidgetForClass')</script>
<div id="div-twoLineWidgetForClass"></div>
<h2 id="isAudio"><a href="#isAudio">isAudio</a></h2>
$('#div-isAudio').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-isAudio"></pre><script>showSource('isAudio')</script>
+ <pre id="viewSource-isAudio"></pre>
+ <script>showSource('isAudio')</script>
<div id="div-isAudio"></div>
<h2 id="isImage"><a href="#isImage">isImage</a></h2>
$('#div-isImage').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-isImage"></pre><script>showSource('isImage')</script>
+ <pre id="viewSource-isImage"></pre>
+ <script>showSource('isImage')</script>
<div id="div-isImage"></div>
<h2 id="isVideo"><a href="#isVideo">isVideo</a></h2>
$('#div-isVideo').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-isVideo"></pre><script>showSource('isVideo')</script>
+ <pre id="viewSource-isVideo"></pre>
+ <script>showSource('isVideo')</script>
<div id="div-isVideo"></div>
<h2 id="linkButton"><a href="#linkButton">linkButton</a></h2>
$('#div-linkButton').appendChild(result)
})
</script>
- <pre id="viewSource-linkButton"></pre><script>showSource('linkButton')</script>
+ <pre id="viewSource-linkButton"></pre>
+ <script>showSource('linkButton')</script>
<div id="div-linkButton"></div>
<h2 id="linkIcon"><a href="#linkIcon">linkIcon</a></h2>
)
})
</script>
- <pre id="viewSource-linkIcon"></pre><script>showSource('linkIcon')</script>
+ <pre id="viewSource-linkIcon"></pre>
+ <script>showSource('linkIcon')</script>
<div id="div-linkIcon"></div>
<h2 id="openHrefInOutlineMode"><a href="#openHrefInOutlineMode">openHrefInOutlineMode</a></h2>
$('#div-openHrefInOutlineMode').appendChild(anchor)
})
</script>
- <pre id="viewSource-openHrefInOutlineMode"></pre><script>showSource('openHrefInOutlineMode')</script>
+ <pre id="viewSource-openHrefInOutlineMode"></pre>
+ <script>showSource('openHrefInOutlineMode')</script>
<div id="div-openHrefInOutlineMode"></div>
<h2 id="personTR"><a href="#personTR">personTR</a></h2>
$('#div-personTR').appendChild(result)
})
</script>
- <pre id="viewSource-personTR"></pre><script>showSource('personTR')</script>
+ <pre id="viewSource-personTR"></pre>
+ <script>showSource('personTR')</script>
<div id="div-personTR"></div>
<h2 id="propertyTriage"><a href="#propertyTriage">propertyTriage</a></h2>
$('#div-propertyTriage').appendChild(document.createTextNode(JSON.stringify(result)))
})
</script>
- <pre id="viewSource-propertyTriage"></pre><script>showSource('propertyTriage')</script>
+ <pre id="viewSource-propertyTriage"></pre>
+ <script>showSource('propertyTriage')</script>
<div id="div-propertyTriage"></div>
<h2 id="refreshTree"><a href="#refreshTree">refreshTree</a></h2>
$('#div-refreshTree').appendChild(refreshable)
})
</script>
- <pre id="viewSource-refreshTree"></pre><script>showSource('refreshTree')</script>
+ <pre id="viewSource-refreshTree"></pre>
+ <script>showSource('refreshTree')</script>
<div id="div-refreshTree"></div>
<h2 id="removeButton"><a href="#removeButton">removeButton</a></h2>
$('#div-removeButton').appendChild(button)
})
</script>
- <pre id="viewSource-removeButton"></pre><script>showSource('removeButton')</script>
+ <pre id="viewSource-removeButton"></pre>
+ <script>showSource('removeButton')</script>
<div id="div-removeButton"></div>
<h2 id="shortDate"><a href="#shortDate">shortDate</a></h2>
$('#div-shortDate').innerHTML = `<ul><li>${results.join('</li><li>')}</li></ul>`
})
</script>
- <pre id="viewSource-shortDate"></pre><script>showSource('shortDate')</script>
+ <pre id="viewSource-shortDate"></pre>
+ <script>showSource('shortDate')</script>
<div id="div-shortDate"></div>
<h2 id="shortTime"><a href="#shortTime">shortTime</a></h2>
$('#div-shortTime').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-shortTime"></pre><script>showSource('shortTime')</script>
+ <pre id="viewSource-shortTime"></pre>
+ <script>showSource('shortTime')</script>
<div id="div-shortTime"></div>
<h2 id="selectorPanel"><a href="#selectorPanel">selectorPanel</a></h2>
$('#div-selectorPanel').appendChild(result)
})
</script>
- <pre id="viewSource-selectorPanel"></pre><script>showSource('selectorPanel')</script>
+ <pre id="viewSource-selectorPanel"></pre>
+ <script>showSource('selectorPanel')</script>
<div id="div-selectorPanel"></div>
<h2 id="selectorPanelRefresh"><a href="#selectorPanelRefresh">selectorPanelRefresh</a></h2>
$('#div-selectorPanelRefresh').appendChild(result)
})
</script>
- <pre id="viewSource-selectorPanelRefresh"></pre><script>showSource('selectorPanelRefresh')</script>
+ <pre id="viewSource-selectorPanelRefresh"></pre>
+ <script>showSource('selectorPanelRefresh')</script>
<div id="div-selectorPanelRefresh"></div>
<h2 id="setImage"><a href="#setImage">setImage</a></h2>
$('#div-setImage').appendChild(img)
})
</script>
- <pre id="viewSource-setImage"></pre><script>showSource('setImage')</script>
+ <pre id="viewSource-setImage"></pre>
+ <script>showSource('setImage')</script>
<div id="div-setImage"></div>
<h2 id="setName"><a href="#setName">setName</a></h2>
UI.widgets.setName($('#div-setName'), myTrip)
})
</script>
- <pre id="viewSource-setName"></pre><script>showSource('setName')</script>
+ <pre id="viewSource-setName"></pre>
+ <script>showSource('setName')</script>
<div id="div-setName"></div>
<h2 id="tempSite"><a href="#tempSite">tempSite</a></h2>
$('#div-tempSite').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-tempSite"></pre><script>showSource('tempSite')</script>
+ <pre id="viewSource-tempSite"></pre>
+ <script>showSource('tempSite')</script>
<div id="div-tempSite"></div>
<h2 id="timestamp"><a href="#timestamp">timestamp</a></h2>
$('#div-timestamp').appendChild(document.createTextNode(result))
})
</script>
- <pre id="viewSource-timestamp"></pre><script>showSource('timestamp')</script>
+ <pre id="viewSource-timestamp"></pre>
+ <script>showSource('timestamp')</script>
<div id="div-timestamp"></div>
</body>
+
</html>
\ No newline at end of file

MODIFY
src/widgets/buttons.ts
src/widgets/buttons.ts
@@ -27,6 +27,16 @@ export type StatusAreaContext = {
div?: HTMLElement
dom?: HTMLDocument
}
+enum ButtonType {
+ primary,
+ secondary,
+ cancel,
+ continue
+}
+type ButtonWidgetOptions = {
+ buttonType?: ButtonType
+ filled?: boolean
+}
function getStatusArea (context?: StatusAreaContext) {
var box = (context && context.statusArea) || (context && context.div) || null
if (box) return box
@@ -478,6 +488,34 @@ export function deleteButtonWithCheck (
return deleteButtonElt
}
+function getButtonStyle (options: ButtonWidgetOptions) {
+ const color = '#7c4dff'
+
+ const backgroundColor = options.filled ? color : '#ffffff'
+ const fontColor = options.filled ? '#ffffff' : color
+ const borderColor = options.filled ? 'none' : color
+ const hoverBackgroundColor = 'lighten(color, 5%)'
+
+ // See https://design.inrupt.com/atomic-core/?cat=Atoms#Buttons
+ return {
+ 'background-color': `${backgroundColor}`,
+ color: `${fontColor}`,
+ 'font-family': 'Raleway, Roboto, sans-serif',
+ 'border-radius': '0.25em',
+ 'border-color': `${borderColor}`,
+ border: '1px solid',
+ cursor: 'pointer',
+ 'font-size': '.8em',
+ 'text-decoration': 'none',
+ padding: '0.5em 4em',
+ transition: '0.25s all ease-in-out',
+ outline: 'none',
+ '&:hover': {
+ 'background-color': `${hoverBackgroundColor}`,
+ transition: '0.25s all ease-in-out'
+ }
+ }
+}
/* Make a button
*
* @param dom - the DOM document object
@@ -487,7 +525,7 @@ export function deleteButtonWithCheck (
*
* @returns <dDomElement> - the button
*/
-export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void) {
+export function button (dom: HTMLDocument, iconURI: string | undefined, text: string, handler: (event: any) => void, options: ButtonWidgetOptions) {
var button = dom.createElement('button')
button.setAttribute('type', 'button')
// button.innerHTML = text // later, user preferences may make text preferred for some
@@ -499,25 +537,11 @@ export function button (dom: HTMLDocument, iconURI: string | undefined, text: st
button.setAttribute('style', style.buttonStyle)
} else {
button.innerText = text.toLocaleUpperCase()
+ const style = getButtonStyle(options)
const { classes } = getClasses(dom.head, {
- textButton: { // See https://design.inrupt.com/atomic-core/?cat=Atoms#Buttons
- 'background-color': '#7c4dff',
- color: '#fff',
- 'font-family': 'Raleway, Roboto, sans-serif',
- 'border-radius': '0.25em',
- border: 'none',
- cursor: 'pointer',
- 'font-size': '.8em',
- 'text-decoration': 'none',
- padding: '0.5em 4em',
- transition: '0.25s all ease-in-out',
- outline: 'none',
- '&:hover': {
- 'background-color': '#8f67ff',
- transition: '0.25s all ease-in-out'
- }
- }
+ textButton: style
})
+
button.classList.add(classes.textButton)
}
if (handler) {
@@ -534,7 +558,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
@@ -545,7 +569,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
@@ -1263,7 +1287,7 @@ export function fileUploadButtonDiv (
'Upload files',
_event => {
input.click()
- }
+ }, {}
)
)
dragAndDrop.makeDropTarget(buttonElt, null, droppedFileHandler) // Can also just drop on button

MODIFY
test/unit/widgets/buttons.test.ts
test/unit/widgets/buttons.test.ts
@@ -118,7 +118,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()
})
})

Added additionaly styles for the button