From af3a7e82e9b844f130e6374531fdc00e7f27ea93 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Fri, 24 Feb 2017 16:54:19 +0100 Subject: [PATCH 01/16] implement button component --- elements/button.js | 122 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 93 insertions(+), 29 deletions(-) diff --git a/elements/button.js b/elements/button.js index 88d08a29..41e8d320 100644 --- a/elements/button.js +++ b/elements/button.js @@ -2,13 +2,15 @@ const html = require('choo/html') const css = require('sheetify') -const icon = require('./icon') +const xtend = require('xtend') -const prefix = css` +const iconElement = require('./icon') + +const baseStyles = css` :host { text-transform: uppercase; letter-spacing: .025em; - .btn-wrapper { + .btn-inner-wrapper { display: flex; flex-wrap: nowrap; flex-direction: row; @@ -17,10 +19,11 @@ const prefix = css` } } .icon-only { - .btn-text { - display: none; - } + .btn-text { display: none } } +` + +var greenStyles = css` .filled-green { padding: .5rem .75rem; font-size: .75rem; @@ -32,6 +35,9 @@ const prefix = css` background-color: var(--color-green-hover); color: var(--color-white); } +` + +var redStyles = css` .filled-red { padding: .5rem .75rem; font-size: .75rem; @@ -43,6 +49,9 @@ const prefix = css` background-color: var(--color-red-hover); color: var(--color-white); } +` + +var plainStyles = css` .plain { padding: .5rem .75rem; font-size: .75rem; @@ -55,33 +64,88 @@ const prefix = css` } ` -module.exports = (props, click) => { - if (typeof click === 'function') props.click = click - - var child - if (props.icon) { - child = html` -
- ${icon({ - id: props.icon - })} - ${props.text} -
` +buttonElement.green = greenButton +buttonElement.red = redButton +module.exports = plainButton + +// States: +// - Text only +// - Icon only +// - Text and icon +function buttonElement (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + var iconId = opts.icon + var innerHTML = null + + if (innerText && !iconId) { + innerHTML = html` +
+ ${innerText} +
+ ` + } else if (!innerText && iconId) { + innerHTML = html` +
+ ${iconElement({ id: iconId })} +
+ ` } else { - child = html` -
- ${props.text} -
` + innerHTML = html` +
+ ${iconElement({ id: iconId })} + ${innerText} +
+ ` + } + + var defaultProps = { + 'aria-label': opts.text, + 'title': opts.text } + var buttonProps = xtend(defaultProps, opts) + buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class + return html` - ` } + +function greenButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? greenStyles + ' ' + opts.class : greenStyles + return buttonElement(innerText, opts) +} + +function redButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? redStyles + ' ' + opts.class : redStyles + return buttonElement(innerText, opts) +} + +function plainButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? plainStyles + ' ' + opts.class : plainStyles + return buttonElement(innerText, opts) +} From f1aec20e89802b300076ea473c7b668e359788e2 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Fri, 24 Feb 2017 17:38:36 +0100 Subject: [PATCH 02/16] fixup! add newButton --- elements/button.js | 122 +++++++--------------------- elements/newButton.js | 179 ++++++++++++++++++++++++++++++++++++++++++ elements/table.js | 30 +++---- 3 files changed, 220 insertions(+), 111 deletions(-) create mode 100644 elements/newButton.js diff --git a/elements/button.js b/elements/button.js index 41e8d320..88d08a29 100644 --- a/elements/button.js +++ b/elements/button.js @@ -2,15 +2,13 @@ const html = require('choo/html') const css = require('sheetify') -const xtend = require('xtend') +const icon = require('./icon') -const iconElement = require('./icon') - -const baseStyles = css` +const prefix = css` :host { text-transform: uppercase; letter-spacing: .025em; - .btn-inner-wrapper { + .btn-wrapper { display: flex; flex-wrap: nowrap; flex-direction: row; @@ -19,11 +17,10 @@ const baseStyles = css` } } .icon-only { - .btn-text { display: none } + .btn-text { + display: none; + } } -` - -var greenStyles = css` .filled-green { padding: .5rem .75rem; font-size: .75rem; @@ -35,9 +32,6 @@ var greenStyles = css` background-color: var(--color-green-hover); color: var(--color-white); } -` - -var redStyles = css` .filled-red { padding: .5rem .75rem; font-size: .75rem; @@ -49,9 +43,6 @@ var redStyles = css` background-color: var(--color-red-hover); color: var(--color-white); } -` - -var plainStyles = css` .plain { padding: .5rem .75rem; font-size: .75rem; @@ -64,88 +55,33 @@ var plainStyles = css` } ` -buttonElement.green = greenButton -buttonElement.red = redButton -module.exports = plainButton - -// States: -// - Text only -// - Icon only -// - Text and icon -function buttonElement (innerText, opts) { - if (!opts) { - opts = innerText - innerText = '' - } - - var iconId = opts.icon - var innerHTML = null - - if (innerText && !iconId) { - innerHTML = html` -
- ${innerText} -
- ` - } else if (!innerText && iconId) { - innerHTML = html` -
- ${iconElement({ id: iconId })} -
- ` +module.exports = (props, click) => { + if (typeof click === 'function') props.click = click + + var child + if (props.icon) { + child = html` +
+ ${icon({ + id: props.icon + })} + ${props.text} +
` } else { - innerHTML = html` -
- ${iconElement({ id: iconId })} - ${innerText} -
- ` - } - - var defaultProps = { - 'aria-label': opts.text, - 'title': opts.text + child = html` +
+ ${props.text} +
` } - var buttonProps = xtend(defaultProps, opts) - buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class - return html` - ` } - -function greenButton (innerText, opts) { - if (!opts) { - opts = innerText - innerText = '' - } - - opts = opts || {} - opts.class = (opts.class) ? greenStyles + ' ' + opts.class : greenStyles - return buttonElement(innerText, opts) -} - -function redButton (innerText, opts) { - if (!opts) { - opts = innerText - innerText = '' - } - - opts = opts || {} - opts.class = (opts.class) ? redStyles + ' ' + opts.class : redStyles - return buttonElement(innerText, opts) -} - -function plainButton (innerText, opts) { - if (!opts) { - opts = innerText - innerText = '' - } - - opts = opts || {} - opts.class = (opts.class) ? plainStyles + ' ' + opts.class : plainStyles - return buttonElement(innerText, opts) -} diff --git a/elements/newButton.js b/elements/newButton.js new file mode 100644 index 00000000..688b885d --- /dev/null +++ b/elements/newButton.js @@ -0,0 +1,179 @@ +'use strict' + +const html = require('choo/html') +const assert = require('assert') +const css = require('sheetify') +const xtend = require('xtend') + +const iconElement = require('./icon') + +const baseStyles = css` + :host { + text-transform: uppercase; + letter-spacing: .025em; + .btn-inner-wrapper { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + justify-content: center; + align-items: center; + } + } + .icon-only { + .btn-text { display: none } + } +` + +var greenStyles = css` + .filled-green { + padding: .5rem .75rem; + font-size: .75rem; + background-color: var(--color-green); + color: var(--color-neutral-04); + } + .filled-green:hover, + .filled-green:focus { + background-color: var(--color-green-hover); + color: var(--color-white); + } +` + +var redStyles = css` + .filled-red { + padding: .5rem .75rem; + font-size: .75rem; + background-color: var(--color-red); + color: var(--color-neutral-04); + } + .filled-red:hover, + .filled-red:focus { + background-color: var(--color-red-hover); + color: var(--color-white); + } +` + +var plainStyles = css` + .plain { + padding: .5rem .75rem; + font-size: .75rem; + background-color: transparent; + color: var(--color-neutral-40); + } + .plain:hover, + .plain:focus { + color: var(--color-neutral-70); + } +` + +plainButton.green = greenButton +plainButton.icon = iconButton +plainButton.red = redButton +module.exports = plainButton + +// States: +// - Text only +// - Text and icon +function buttonElement (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + var iconId = opts.icon + var innerHTML = null + + if (innerText && !iconId) { + innerHTML = html` +
+ ${innerText} +
+ ` + } else { + innerHTML = html` +
+ ${iconElement({ id: iconId })} + ${innerText} +
+ ` + } + + var defaultProps = { + 'aria-label': innerText, + 'title': innerText + } + + var buttonProps = xtend(defaultProps, opts) + buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class + + return html` + + ` +} + +// - Icon only +function iconButton (innerText, opts) { + assert.equal(typeof innerText, 'string', 'elements/button: innerText should by type string') + assert.ok(innerText.length, 'elements/button: innerText should have a length >= 0') + assert.equal(typeof opts, 'object', 'elements/button: opts should by type object') + assert.ok(opts.icon, 'elements/button: opts.icon should exist') + + var icon = opts.icon + opts.class = (opts.class) + ? plainStyles + ' ' + opts.class + : plainStyles + + var innerHTML = html` +
+ ${icon} +
+ ` + + var defaultProps = { + 'aria-label': innerText, + 'title': innerText + } + + var buttonProps = xtend(defaultProps, opts) + buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class + + return html` + + ` +} + +function greenButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? greenStyles + ' ' + opts.class : greenStyles + return buttonElement(innerText, opts) +} + +function redButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? redStyles + ' ' + opts.class : redStyles + return buttonElement(innerText, opts) +} + +function plainButton (innerText, opts) { + if (!opts) { + opts = innerText + innerText = '' + } + + opts = opts || {} + opts.class = (opts.class) ? plainStyles + ' ' + opts.class : plainStyles + return buttonElement(innerText, opts) +} diff --git a/elements/table.js b/elements/table.js index a8c085b9..96cd0bcb 100644 --- a/elements/table.js +++ b/elements/table.js @@ -4,8 +4,8 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') +const button = require('./newButton') const status = require('./status') -const button = require('./button') const icon = require('./icon') const table = css` @@ -173,28 +173,22 @@ function row (dat, send) { complete: icon({id: 'hexagon-up', cls: 'color-green hover-color-green-hover'}) }[stats.state] - var finderButton = button({ - text: 'Open in Finder', - style: 'icon-only', - icon: 'open-in-finder', - cls: 'row-action', + var finderButton = button.icon('Open in Finder', { + icon: icon('open-in-finder'), + class: 'row-action', click: () => send('repos:open', dat) }) - var linkButton = button({ - text: 'Copy Dat Link', - style: 'icon-only', - icon: 'link', - cls: 'row-action', + var linkButton = button.icon('Share Dat', { + icon: icon('link'), + class: 'row-action', click: () => send('repos:share', dat) }) - var deleteButton = button({ - text: 'Remove Dat', - style: 'icon-only', - icon: 'delete', - cls: 'row-action', - click: function (e) { + var deleteButton = button.icon('Remove Dat', { + icon: icon('my-icon'), + class: 'row-action', + onclick: function (e) { // TODO: we're relying on DOM ordering here. Fix this in choo by moving // to nanomorph; e.g. events are still copied over when reordering var target = e.target @@ -210,7 +204,7 @@ function row (dat, send) { var networkIcon = icon({ id: 'network', - cls: (peers > 1) + class: (peers > 1) ? 'network-peers-many' : (peers > 0) ? 'network-peers-1' From 2c741d82eacb2dbd7e1c19fc14470024b4a96352 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Fri, 24 Feb 2017 17:51:54 +0100 Subject: [PATCH 03/16] add newIcon, newButton pkgs --- elements/newButton.js | 8 +++----- elements/newIcon.js | 28 ++++++++++++++++++++++++++++ elements/table.js | 11 +++++------ 3 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 elements/newIcon.js diff --git a/elements/newButton.js b/elements/newButton.js index 688b885d..895c5058 100644 --- a/elements/newButton.js +++ b/elements/newButton.js @@ -5,8 +5,6 @@ const assert = require('assert') const css = require('sheetify') const xtend = require('xtend') -const iconElement = require('./icon') - const baseStyles = css` :host { text-transform: uppercase; @@ -79,10 +77,10 @@ function buttonElement (innerText, opts) { innerText = '' } - var iconId = opts.icon + var icon = opts.icon var innerHTML = null - if (innerText && !iconId) { + if (innerText && !icon) { innerHTML = html`
${innerText} @@ -91,7 +89,7 @@ function buttonElement (innerText, opts) { } else { innerHTML = html`
- ${iconElement({ id: iconId })} + ${icon} ${innerText}
` diff --git a/elements/newIcon.js b/elements/newIcon.js new file mode 100644 index 00000000..2bca01a1 --- /dev/null +++ b/elements/newIcon.js @@ -0,0 +1,28 @@ +'use strict' + +const html = require('choo/html') +const assert = require('assert') +const css = require('sheetify') + +var prefix = css` + :host { fill: currentColor } +` + +module.exports = iconElement + +function iconElement (iconName, opts) { + console.log(iconName) + opts = opts || {} + + assert.equal(typeof iconName, 'string', 'elements/icon: iconName should be type string') + assert.equal(typeof opts, 'object', 'elements/icon: opts should be type object') + + var classNames = 'icon-' + iconName + ' ' + prefix + if (opts.class) classNames += (' ' + opts.class) + + return html` + + + + ` +} diff --git a/elements/table.js b/elements/table.js index 96cd0bcb..dc2042ee 100644 --- a/elements/table.js +++ b/elements/table.js @@ -6,7 +6,7 @@ const css = require('sheetify') const button = require('./newButton') const status = require('./status') -const icon = require('./icon') +const icon = require('./newIcon') const table = css` :host { @@ -168,9 +168,9 @@ function row (dat, send) { : 'loading' const hexContent = { - loading: icon({id: 'hexagon-down', cls: 'color-blue hover-color-blue-hover'}), - paused: icon({id: 'hexagon-x', cls: 'color-neutral-30 hover-color-neutral-40'}), - complete: icon({id: 'hexagon-up', cls: 'color-green hover-color-green-hover'}) + loading: icon('hexagon-down', {class: 'color-blue hover-color-blue-hover'}), + paused: icon('hexagon-x', {class: 'color-neutral-30 hover-color-neutral-40'}), + complete: icon('hexagon-up', {class: 'color-green hover-color-green-hover'}) }[stats.state] var finderButton = button.icon('Open in Finder', { @@ -202,8 +202,7 @@ function row (dat, send) { } }) - var networkIcon = icon({ - id: 'network', + var networkIcon = icon('network', { class: (peers > 1) ? 'network-peers-many' : (peers > 0) From 4aae8d2653a47e2dbd864ea0faf8004b4e79586b Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Mon, 27 Feb 2017 12:14:03 +0100 Subject: [PATCH 04/16] update icon --- elements/table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/table.js b/elements/table.js index dc2042ee..fc9b22c3 100644 --- a/elements/table.js +++ b/elements/table.js @@ -186,7 +186,7 @@ function row (dat, send) { }) var deleteButton = button.icon('Remove Dat', { - icon: icon('my-icon'), + icon: icon('delete'), class: 'row-action', onclick: function (e) { // TODO: we're relying on DOM ordering here. Fix this in choo by moving From 860e219c347902131c8f0f501dc0f79b36e96c38 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Mon, 27 Feb 2017 17:36:22 +0100 Subject: [PATCH 05/16] fixup! more progress --- elements/newIcon.js | 1 - elements/table.js | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/elements/newIcon.js b/elements/newIcon.js index 2bca01a1..b79f601f 100644 --- a/elements/newIcon.js +++ b/elements/newIcon.js @@ -11,7 +11,6 @@ var prefix = css` module.exports = iconElement function iconElement (iconName, opts) { - console.log(iconName) opts = opts || {} assert.equal(typeof iconName, 'string', 'elements/icon: iconName should be type string') diff --git a/elements/table.js b/elements/table.js index fc9b22c3..d6883ec5 100644 --- a/elements/table.js +++ b/elements/table.js @@ -176,20 +176,20 @@ function row (dat, send) { var finderButton = button.icon('Open in Finder', { icon: icon('open-in-finder'), class: 'row-action', - click: () => send('repos:open', dat) + onclick: () => send('repos:open', dat) }) var linkButton = button.icon('Share Dat', { icon: icon('link'), class: 'row-action', - click: () => send('repos:share', dat) + onclick: () => send('repos:share', dat) }) var deleteButton = button.icon('Remove Dat', { icon: icon('delete'), class: 'row-action', onclick: function (e) { - // TODO: we're relying on DOM ordering here. Fix this in choo by moving + // FIXME: we're relying on DOM ordering here. Fix this in choo by moving // to nanomorph; e.g. events are still copied over when reordering var target = e.target while (target.parentNode) { From 1e698d8f8ffd21f9f2c0dcf429782a38589263f8 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Mon, 27 Feb 2017 17:52:33 +0100 Subject: [PATCH 06/16] fixup! migrate main.js --- pages/main.js | 32 ++++++-------------------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/pages/main.js b/pages/main.js index 5858ddd1..90cbe965 100644 --- a/pages/main.js +++ b/pages/main.js @@ -4,10 +4,10 @@ const html = require('choo/html') const css = require('sheetify') const Header = require('../elements/header') -const button = require('../elements/button') +const button = require('../elements/newButton') const sprite = require('../elements/sprite') const Table = require('../elements/table') -const icon = require('../elements/icon') +const icon = require('../elements/newIcon') const skeleton = css` :host { @@ -40,15 +40,6 @@ const skeleton = css` right: 8.5rem; color: red; } - .icon-create-new-dat, - .icon-link { - width: 2rem; - height: 2rem; - fill: currentColor; - } - .icon-link { - margin-bottom: -.75rem; - } } ` @@ -129,7 +120,7 @@ function mainView (state, prev, send) { } function WelcomeScreen (methods) { - const onExit = methods.onexit + const onexit = methods.onexit const onLoad = methods.onload return html` @@ -138,12 +129,7 @@ function WelcomeScreen (methods) {

Share data on the distributed web.

- ${button({ - text: 'Get Started', - style: 'filled-green', - cls: '', - click: onExit - })} + ${button.green('Get Started', { onclick: onexit })} ` } @@ -155,10 +141,7 @@ function EmptyState () {
- ${icon({ - id: 'link', - cls: 'color-blue-disabled' - })} + ${icon('link', { class: 'color-blue-disabled' })}

Import Dat

Download an existing dataset @@ -167,10 +150,7 @@ function EmptyState () {

- ${icon({ - id: 'create-new-dat', - cls: 'color-green-disabled' - })} + ${icon('create-new-dat', { class: 'color-green-disabled' })}

Create New Dat

… or select one of your local From 91b419d4121ea32bfb57be6f95fe8ca0c390985c Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Tue, 28 Feb 2017 00:17:55 +0100 Subject: [PATCH 07/16] fixup! all aboard the button train --- elements/confirm-modal.js | 22 +++++++++------------- elements/crash-modal.js | 24 +++++++++--------------- elements/error-modal.js | 10 ++++------ elements/header.js | 18 ++++++++---------- 4 files changed, 30 insertions(+), 44 deletions(-) diff --git a/elements/confirm-modal.js b/elements/confirm-modal.js index ac993510..4ea4ad03 100644 --- a/elements/confirm-modal.js +++ b/elements/confirm-modal.js @@ -3,8 +3,8 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const button = require('./button') -const icon = require('./icon') +const button = require('./newButton') +const icon = require('./newIcon') const prefix = css` :host { @@ -46,18 +46,14 @@ function createWidget () { function render (cb) { assert.equal(typeof cb, 'function', 'elements/confirm-modal: cb should be a function') - var deleteButton = button({ - text: 'Yes, Remove Dat', - style: 'filled-green', - cls: 'fr ml3', - click: ondelete + var deleteButton = button.green('Yes, Remove Dat', { + class: 'fr ml3', + onclick: ondelete }) - var exitButton = button({ - text: 'No, Cancel', - style: 'plain', - cls: 'fr', - click: onexit + var exitButton = button('No, Cancel', { + class: 'fr', + onclick: onexit }) return html` @@ -78,7 +74,7 @@ function createWidget () { onclick=${onexit} class="absolute pointer pa0 top-0 right-0 h2 w2 bg-transparent tc exit" aria-label="Close Modal"> - ${icon({id: 'cross'})} + ${icon('cross')} ` diff --git a/elements/crash-modal.js b/elements/crash-modal.js index fc6afbb7..34b8cf4a 100644 --- a/elements/crash-modal.js +++ b/elements/crash-modal.js @@ -52,11 +52,9 @@ function createWidget () { possible.

- ${button({ - text: 'Exit Application', - style: 'filled-green', - cls: 'fr ml3', - click: onexit + ${button.green('Exit Application', { + class: 'fr ml3', + onclick: onexit })}

@@ -67,17 +65,13 @@ function createWidget () { be reversed.

- ${button({ - text: 'Clear Database & exit', - style: 'filled-red', - cls: 'fr ml3', - click: clearDatabase + ${button.red('Clear Database & exit', { + class: 'fr ml3', + onclick: clearDatabase })} - ${button({ - text: 'Delete All Data & exit', - style: 'filled-red', - cls: 'fr ml3', - click: deleteData + ${button.red('Delete All Data & exit', { + class: 'fr ml3', + onclick: deleteData })}

diff --git a/elements/error-modal.js b/elements/error-modal.js index 0658083b..eae4270a 100644 --- a/elements/error-modal.js +++ b/elements/error-modal.js @@ -2,7 +2,7 @@ const Modal = require('base-elements/modal') const html = require('choo/html') const css = require('sheetify') -const button = require('./button') +const button = require('./newButton') const prefix = css` :host { @@ -35,11 +35,9 @@ function createWidget () { }) function render (message, onexit) { - var exitButton = button({ - text: 'Ok', - style: 'filled-green', - cls: 'fr ml3', - click: onexit + var exitButton = button.green('Ok', { + class: 'fr ml3', + onclick: onexit }) return html` diff --git a/elements/header.js b/elements/header.js index 0a7deb9b..35cbba19 100644 --- a/elements/header.js +++ b/elements/header.js @@ -3,8 +3,10 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const button = require('./button') + +const button = require('./newButton') const datImport = require('./dat-import') +const icon = require('./newIcon') module.exports = headerElement @@ -76,17 +78,13 @@ function headerElement (props) { var importButton = datImport({ onsubmit: onimport }) - var createButton = button({ - icon: 'create-new-dat', - text: 'Create New Dat', - cls: 'ml2 b--transparent header-action header-action-no-border', - click: oncreate + var createButton = button('Create New Dat', { + icon: icon('create-new-dat'), + class: 'ml2 b--transparent header-action header-action-no-border', + onclick: oncreate }) - var loginButton = button({ - text: 'Log In', - cls: 'ml2 header-action log-in-button' - }) + var loginButton = button('Log In', { class: 'ml2 header-action log-in-button' }) var menuButton = button({ icon: 'menu', From 2bc9a9e13a622795c9fe4909a9f08c134142875c Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Tue, 28 Feb 2017 00:46:28 +0100 Subject: [PATCH 08/16] fixup! move icons over --- elements/button.js | 87 ------------------------------------------ elements/dat-import.js | 9 +---- elements/icon.js | 16 -------- elements/link-modal.js | 10 ++--- 4 files changed, 7 insertions(+), 115 deletions(-) delete mode 100644 elements/button.js delete mode 100644 elements/icon.js diff --git a/elements/button.js b/elements/button.js deleted file mode 100644 index 88d08a29..00000000 --- a/elements/button.js +++ /dev/null @@ -1,87 +0,0 @@ -'use strict' - -const html = require('choo/html') -const css = require('sheetify') -const icon = require('./icon') - -const prefix = css` - :host { - text-transform: uppercase; - letter-spacing: .025em; - .btn-wrapper { - display: flex; - flex-wrap: nowrap; - flex-direction: row; - justify-content: center; - align-items: center; - } - } - .icon-only { - .btn-text { - display: none; - } - } - .filled-green { - padding: .5rem .75rem; - font-size: .75rem; - background-color: var(--color-green); - color: var(--color-neutral-04); - } - .filled-green:hover, - .filled-green:focus { - background-color: var(--color-green-hover); - color: var(--color-white); - } - .filled-red { - padding: .5rem .75rem; - font-size: .75rem; - background-color: var(--color-red); - color: var(--color-neutral-04); - } - .filled-red:hover, - .filled-red:focus { - background-color: var(--color-red-hover); - color: var(--color-white); - } - .plain { - padding: .5rem .75rem; - font-size: .75rem; - background-color: transparent; - color: var(--color-neutral-40); - } - .plain:hover, - .plain:focus { - color: var(--color-neutral-70); - } -` - -module.exports = (props, click) => { - if (typeof click === 'function') props.click = click - - var child - if (props.icon) { - child = html` -
- ${icon({ - id: props.icon - })} - ${props.text} -
` - } else { - child = html` -
- ${props.text} -
` - } - - return html` - - ` -} diff --git a/elements/dat-import.js b/elements/dat-import.js index 21830f9f..ffaf5bf9 100644 --- a/elements/dat-import.js +++ b/elements/dat-import.js @@ -3,7 +3,7 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const icon = require('./icon') +const icon = require('./newIcon') module.exports = datImportElement @@ -64,11 +64,6 @@ function datImportElement (props) { assert.equal(typeof onsubmit, 'function', 'dat-import: onsubmit should be type function') - const linkIcon = icon({ - id: 'link', - cls: 'absolute top-0 bottom-0 left-0' - }) - return html` ` diff --git a/elements/icon.js b/elements/icon.js deleted file mode 100644 index 265ef4f9..00000000 --- a/elements/icon.js +++ /dev/null @@ -1,16 +0,0 @@ -'use strict' - -const html = require('choo/html') -const css = require('yo-css') - -module.exports = (props) => { - const style = { - fill: 'currentColor' - } - - return html` - - - - ` -} diff --git a/elements/link-modal.js b/elements/link-modal.js index c2425b2e..a28a75ab 100644 --- a/elements/link-modal.js +++ b/elements/link-modal.js @@ -3,7 +3,7 @@ const Modal = require('base-elements/modal') const morph = require('nanomorph') const html = require('choo/html') const css = require('sheetify') -const icon = require('./icon') +const icon = require('./newIcon') const prefix = css` :host { @@ -151,13 +151,13 @@ function createModal () {

@@ -167,7 +167,7 @@ function createModal () { onclick=${onexit} class="absolute pointer pa0 top-0 right-0 h2 w2 bg-transparent tc exit" aria-label="Close Modal"> - ${icon({id: 'cross'})} + ${icon('cross')} ` From 25e91848c5393e57f627be34b38228d2b0c42b1f Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Tue, 28 Feb 2017 00:48:17 +0100 Subject: [PATCH 09/16] fixup! restore file names --- elements/{newButton.js => button.js} | 0 elements/confirm-modal.js | 4 ++-- elements/dat-import.js | 2 +- elements/error-modal.js | 2 +- elements/header.js | 4 ++-- elements/{newIcon.js => icon.js} | 0 elements/link-modal.js | 2 +- elements/table.js | 4 ++-- pages/main.js | 4 ++-- 9 files changed, 11 insertions(+), 11 deletions(-) rename elements/{newButton.js => button.js} (100%) rename elements/{newIcon.js => icon.js} (100%) diff --git a/elements/newButton.js b/elements/button.js similarity index 100% rename from elements/newButton.js rename to elements/button.js diff --git a/elements/confirm-modal.js b/elements/confirm-modal.js index 4ea4ad03..f57c24d2 100644 --- a/elements/confirm-modal.js +++ b/elements/confirm-modal.js @@ -3,8 +3,8 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const button = require('./newButton') -const icon = require('./newIcon') +const button = require('./button') +const icon = require('./icon') const prefix = css` :host { diff --git a/elements/dat-import.js b/elements/dat-import.js index ffaf5bf9..7cc239e5 100644 --- a/elements/dat-import.js +++ b/elements/dat-import.js @@ -3,7 +3,7 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const icon = require('./newIcon') +const icon = require('./icon') module.exports = datImportElement diff --git a/elements/error-modal.js b/elements/error-modal.js index eae4270a..37ff4b94 100644 --- a/elements/error-modal.js +++ b/elements/error-modal.js @@ -2,7 +2,7 @@ const Modal = require('base-elements/modal') const html = require('choo/html') const css = require('sheetify') -const button = require('./newButton') +const button = require('./button') const prefix = css` :host { diff --git a/elements/header.js b/elements/header.js index 35cbba19..1f3342f9 100644 --- a/elements/header.js +++ b/elements/header.js @@ -4,9 +4,9 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const button = require('./newButton') +const button = require('./button') const datImport = require('./dat-import') -const icon = require('./newIcon') +const icon = require('./icon') module.exports = headerElement diff --git a/elements/newIcon.js b/elements/icon.js similarity index 100% rename from elements/newIcon.js rename to elements/icon.js diff --git a/elements/link-modal.js b/elements/link-modal.js index a28a75ab..2e870516 100644 --- a/elements/link-modal.js +++ b/elements/link-modal.js @@ -3,7 +3,7 @@ const Modal = require('base-elements/modal') const morph = require('nanomorph') const html = require('choo/html') const css = require('sheetify') -const icon = require('./newIcon') +const icon = require('./icon') const prefix = css` :host { diff --git a/elements/table.js b/elements/table.js index d6883ec5..75a4d21a 100644 --- a/elements/table.js +++ b/elements/table.js @@ -4,9 +4,9 @@ const html = require('choo/html') const assert = require('assert') const css = require('sheetify') -const button = require('./newButton') +const button = require('./button') const status = require('./status') -const icon = require('./newIcon') +const icon = require('./icon') const table = css` :host { diff --git a/pages/main.js b/pages/main.js index 90cbe965..d20bf2fd 100644 --- a/pages/main.js +++ b/pages/main.js @@ -4,10 +4,10 @@ const html = require('choo/html') const css = require('sheetify') const Header = require('../elements/header') -const button = require('../elements/newButton') +const button = require('../elements/button') const sprite = require('../elements/sprite') const Table = require('../elements/table') -const icon = require('../elements/newIcon') +const icon = require('../elements/icon') const skeleton = css` :host { From e638cc49807d8eae20fa0f1320fc18f86690f0a9 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Tue, 28 Feb 2017 03:37:42 +0100 Subject: [PATCH 10/16] fixup! fix tests --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 05d5b970..06e07c58 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,7 @@ "tachyons": "^4.5.4", "toiletdb": "^1.2.0", "xhr": "^2.3.3", - "xtend": "^4.0.1", - "yo-css": "^1.1.0" + "xtend": "^4.0.1" }, "scripts": { "bundle": "./scripts/build bundle", From 896be75a755e02924819bb489a248fa197d024f3 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Wed, 1 Mar 2017 00:09:43 +0100 Subject: [PATCH 11/16] fixup! fix missing buttons --- elements/header.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/elements/header.js b/elements/header.js index 1f3342f9..bd1a58e6 100644 --- a/elements/header.js +++ b/elements/header.js @@ -86,10 +86,9 @@ function headerElement (props) { var loginButton = button('Log In', { class: 'ml2 header-action log-in-button' }) - var menuButton = button({ - icon: 'menu', - text: '', - cls: 'ml2 header-action header-action-no-border menu-trigger' + var menuButton = button.icon('Open Menu', { + icon: icon('menu'), + class: 'ml2 header-action header-action-no-border menu-trigger' }) return html` From e7cc70bee3f366e75744f4b795023d8165a41035 Mon Sep 17 00:00:00 2001 From: Yoshua Wuyts Date: Thu, 2 Mar 2017 10:14:55 +0100 Subject: [PATCH 12/16] fix final button styles --- elements/button.js | 18 +++++++++--------- elements/icon.js | 7 ++++++- pages/main.js | 4 +++- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/elements/button.js b/elements/button.js index 895c5058..dc95f561 100644 --- a/elements/button.js +++ b/elements/button.js @@ -23,42 +23,42 @@ const baseStyles = css` ` var greenStyles = css` - .filled-green { + :host { padding: .5rem .75rem; font-size: .75rem; background-color: var(--color-green); color: var(--color-neutral-04); } - .filled-green:hover, - .filled-green:focus { + :host:hover, + :host:focus { background-color: var(--color-green-hover); color: var(--color-white); } ` var redStyles = css` - .filled-red { + :host { padding: .5rem .75rem; font-size: .75rem; background-color: var(--color-red); color: var(--color-neutral-04); } - .filled-red:hover, - .filled-red:focus { + :host:hover, + :host:focus { background-color: var(--color-red-hover); color: var(--color-white); } ` var plainStyles = css` - .plain { + :host { padding: .5rem .75rem; font-size: .75rem; background-color: transparent; color: var(--color-neutral-40); } - .plain:hover, - .plain:focus { + :host:hover, + :host:focus { color: var(--color-neutral-70); } ` diff --git a/elements/icon.js b/elements/icon.js index b79f601f..585ed39d 100644 --- a/elements/icon.js +++ b/elements/icon.js @@ -5,7 +5,12 @@ const assert = require('assert') const css = require('sheetify') var prefix = css` - :host { fill: currentColor } + :host { + display: block; + width: var(--icon-height); + height: var(--icon-height); + fill: currentColor; + } ` module.exports = iconElement diff --git a/pages/main.js b/pages/main.js index d20bf2fd..2ee77680 100644 --- a/pages/main.js +++ b/pages/main.js @@ -142,7 +142,9 @@ function EmptyState () {

${icon('link', { class: 'color-blue-disabled' })} -

Import Dat

+

+ Import Dat +

Download an existing dataset
From 743bcb237e52931540a167749c3a430ec38efa70 Mon Sep 17 00:00:00 2001 From: Kristina Schneider Date: Thu, 2 Mar 2017 12:04:59 +0100 Subject: [PATCH 13/16] fix alignment of network icon --- elements/table.js | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/table.js b/elements/table.js index 75a4d21a..79d48c3e 100644 --- a/elements/table.js +++ b/elements/table.js @@ -90,6 +90,7 @@ const table = css` } } .icon-network { + display: inline-block; color: var(--color-neutral-20); vertical-align: middle; width: 1.1em; From dc109985805de90586512bcb97995a74e8827039 Mon Sep 17 00:00:00 2001 From: Kristina Schneider Date: Thu, 2 Mar 2017 12:09:13 +0100 Subject: [PATCH 14/16] fix alignment of checkmark icon in copy link modal --- elements/link-modal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/link-modal.js b/elements/link-modal.js index 2e870516..48a17d40 100644 --- a/elements/link-modal.js +++ b/elements/link-modal.js @@ -95,6 +95,7 @@ const input = css` top: 2rem; } .icon-check { + display: inline-block; width: var(--icon-height); height: .875rem; vertical-align: -.15rem; From 6d6f0d39c1e26d392fb75a946ba892c3628e824b Mon Sep 17 00:00:00 2001 From: Kristina Schneider Date: Thu, 2 Mar 2017 14:08:28 +0100 Subject: [PATCH 15/16] remove color variables from default icon styles --- elements/icon.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/elements/icon.js b/elements/icon.js index 585ed39d..1ab2f6eb 100644 --- a/elements/icon.js +++ b/elements/icon.js @@ -7,8 +7,6 @@ const css = require('sheetify') var prefix = css` :host { display: block; - width: var(--icon-height); - height: var(--icon-height); fill: currentColor; } ` From 37f8e6a3ee4edf00425b6f82637f4155c0aadd36 Mon Sep 17 00:00:00 2001 From: Kristina Schneider Date: Thu, 2 Mar 2017 14:16:56 +0100 Subject: [PATCH 16/16] fix size and alignment of intro screen svgs --- pages/main.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/pages/main.js b/pages/main.js index 2ee77680..dd6404ac 100644 --- a/pages/main.js +++ b/pages/main.js @@ -34,11 +34,22 @@ const skeleton = css` .create-new-dat { top: 14.5rem; right: 4rem; + svg { + display: inline-block; + width: 2rem; + height: 2rem; + } } .link { top: 6rem; right: 8.5rem; color: red; + svg { + display: inline-block; + width: 2rem; + height: 2rem; + margin-bottom: -.75rem; + } } } `