diff --git a/app/buttons.json b/app/buttons.json index e9d4f59..a4af6cf 100644 --- a/app/buttons.json +++ b/app/buttons.json @@ -1,37 +1,37 @@ { - "scribeButtons":[ + "scribeButtons": [ { - "text":"Line", - "id":"line", - "class":"btn btn-outline-success", + "text": "Line", + "id": "line", + "class": "f5 br2 ba ph2 pv2 mb4 db green pointer tc grow", }, { - "text":"Select", - "id":"ctrlline", - "class":"btn btn-outline-success", + "text": "Select", + "id": "ctrlline", + "class": "f5 br2 ba ph2 pv2 mb4 db green pointer tc grow", }, { - "text":"Move", - "id":"move", - "class":"btn btn-outline-success", + "text": "Move", + "id": "move", + "class": "f5 br2 ba ph2 pv2 mb4 db green pointer tc grow", }, { - "text":"Remove", - "id":"remove", - "class":"btn btn-outline-danger", + "text": "Remove", + "id": "remove", + "class": "f5 br2 ba ph2 pv2 mb7 db red pointer tc grow", } ], - "storeButtons":[ + "storeButtons": [ { - "text":"Fetch", - "class":"btn btn-outline-primary crud", - "id":"fetch" + "text": "Fetch", + "class": "f5 br2 ba ph3 pv2 mb2 dib blue pointer grow", + "id": "fetch" }, { - "text":"Save", - "class":"btn btn-outline-warning crud", - "id":"save" + "text": "Save", + "class": "f5 br2 ba ph3 pv2 mb2 dib gold pointer fr grow", + "id": "save" } ] } diff --git a/app/components/scribeButton.js b/app/components/scribeButton.js index ef94ba8..294744a 100644 --- a/app/components/scribeButton.js +++ b/app/components/scribeButton.js @@ -1,10 +1,7 @@ var html = require('choo/html') -var css = require('sheetify') var Nanocomponent = require('nanocomponent') var buttons = require('../buttons.json').scribeButtons -css('../styles/scribeButton.css') - class Component extends Nanocomponent { constructor () { super() @@ -12,17 +9,15 @@ class Component extends Nanocomponent { createElement (state, emit) { return html` -
+
${buttons.map(button => { return html` - + onclick=${handleClick(emit)}> + ${button.text} +
` })}
@@ -40,14 +35,4 @@ function handleClick (emit) { } } -function handleBlur (state) { - return e => { - setTimeout(() => { - if (e.target.id === state.drawType) { - e.target.focus() - } - }, 120) - } -} - module.exports = new Component() diff --git a/app/components/scribeCanvas.js b/app/components/scribeCanvas.js index a547adf..6f97130 100644 --- a/app/components/scribeCanvas.js +++ b/app/components/scribeCanvas.js @@ -5,7 +5,23 @@ require('yuki-createjs') window.createjs = createjs -css('../styles/scribeCanvas.css') +css` + #canvas{ + cursor:crosshair + } + #canvas.unable{ + cursor:not-allowed; + } + #canvas.remove{ + cursor: url('./app/assets/remove.png'), auto; + } + #canvas.ctrlline{ + cursor: url('./app/assets/ctrlline.png'), auto; + } + #canvas.move{ + cursor: move + } +` class Component extends Nanocomponent { constructor () { @@ -14,10 +30,11 @@ class Component extends Nanocomponent { createElement (state, emit) { return html` -
+
${buttons.map(button => { return html` - +
` })}
@@ -55,13 +37,13 @@ function handleClick (action, state, emit) { emit('pulling') setTimeout(() => { emit('pulled') - }, 500) + }, 0) } else if (action === 'save') { emit('pushing') setTimeout(() => { emit('pushed') choosriber.put(state) - }, 500) + }, 0) } } } diff --git a/app/main.css b/app/main.css deleted file mode 100644 index f391e98..0000000 --- a/app/main.css +++ /dev/null @@ -1,15 +0,0 @@ -body{ - background-color: whitesmoke; -} - -.flex-box{ - display: flex; -} - -.container { - font-family: 'Avenir', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #2c3e50; - margin-top: 20px; -} diff --git a/app/styles/scribeButton.css b/app/styles/scribeButton.css deleted file mode 100644 index 4549964..0000000 --- a/app/styles/scribeButton.css +++ /dev/null @@ -1,15 +0,0 @@ -.draw{ - margin-top: 30px; - display: inline-block; -} - -.draw button{ - display: block; - margin-bottom: 20px; - float: left; - clear: both; -} - -.draw #remove{ - margin-bottom: 300px; -} diff --git a/app/styles/scribeCanvas.css b/app/styles/scribeCanvas.css deleted file mode 100644 index 6d2061d..0000000 --- a/app/styles/scribeCanvas.css +++ /dev/null @@ -1,31 +0,0 @@ -.canvaswrap{ - overflow: hidden; - margin-left: 15px; - margin-top: 30px; - display: inline-block; - flex-grow: 1; - border:2px solid #eee; - position: relative; -} - -canvas{ - position: absolute; - top:0; - cursor: crosshair; -} - -#canvas.unable{ - cursor:not-allowed; -} - -#canvas.remove{ - cursor: url('./app/assets/remove.png'), auto; -} - -#canvas.ctrlline{ - cursor: url('./app/assets/ctrlline.png'), auto; -} - -#canvas.move{ - cursor: move -} diff --git a/app/styles/storeButton.css b/app/styles/storeButton.css deleted file mode 100644 index 528ba37..0000000 --- a/app/styles/storeButton.css +++ /dev/null @@ -1,36 +0,0 @@ -button{ - cursor: pointer; -} - -#save{ - float: right -} - -#save:focus{ - outline:0 !important; -} - -#fetch:focus{ - outline:0 !important; -} - -.sk-three-bounce{ - width: auto !important; - display: inline-block; - margin: 0 !important; - margin-left: 5px !important; -} - -.sk-three-bounce .sk-child{ - width: 10px !important; - margin-left: 3px !important; - height: 10px !important; -} - -.btn-outline-primary .sk-child{ - background-color: #0275d8 !important; -} - -.btn-outline-warning .sk-child{ - background-color: #f0ad4e !important; -} diff --git a/build.js b/build.js index 8cf3ead..5587fa1 100644 --- a/build.js +++ b/build.js @@ -94,6 +94,17 @@ graph.node('favicon', (state, createEdge) => { }) }) +graph.node('sqqq', [ 'documents:bundle' ], (state, createEdge) => { + var script = `
+
Fetch
Save
+
Line
Select
Move
Remove
how to use` + , style = String(state.scripts.style.buffer) + , bundle = purify(script, style, { minify: true }) + + bundle = clean.minify(bundle).styles + console.log(bundle) +}) + graph.node('documents', [ 'scripts:bundle', 'manifest:bundle', 'serviceWorker:bundle', 'styles:bundle', 'favicon:bundle' ], (state, createEdge) => { var body = '
' var language = 'en' @@ -221,8 +232,9 @@ graph.node('styles', [ 'scripts:style', 'scripts:bundle' ], (state, createEdge) var script = String(state.scripts.bundle.buffer) , style = String(state.scripts.style.buffer) , bundle = purify(script, style, { minify: true }) - + console.log(style.length) bundle = clean.minify(bundle).styles + console.log(bundle.length) createEdge('bundle', Buffer.from(bundle)) }) diff --git a/index.js b/index.js index 9a0ca7b..61f8095 100644 --- a/index.js +++ b/index.js @@ -10,8 +10,7 @@ window.$ = require('jquery') const TITLE = 'choo-scriber' -css('bootstrap') -css('./app/main.css') +css('tachyons') var app = choo() @@ -34,17 +33,15 @@ function mainView (state, emit) { if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) return html` - -
- ${storeButton.render(state, emit)} -
- ${scribeButton.render(state, emit)} - ${scribeCanvas.render(state, emit)} -
- - how to use - + + ${storeButton.render(state, emit)} +
+ ${scribeButton.render(state, emit)} + ${scribeCanvas.render(state, emit)}
+ + how to use + ` } diff --git a/package.json b/package.json index af124e2..38e8c60 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "license": "MIT", "dependencies": { "bankai": "^9.0.0-rc8", - "bootstrap": "4.0.0-beta.2", "budo": "^10.0.4", "buffer-graph": "^4.0.0", "choo": "^6.4.2", @@ -34,8 +33,8 @@ "pump": "^1.0.2", "purify-css": "^1.2.5", "sheetify": "^6.2.0", - "spinkit": "^1.2.5", "standard": "^10.0.3", + "tachyons": "^4.9.0", "yuki-createjs": "0.0.3" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index b265986..680565f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -488,10 +488,6 @@ boom@5.x.x: dependencies: hoek "4.x.x" -bootstrap@4.0.0-beta.2: - version "4.0.0-beta.2" - resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.2.tgz#4d67d2aa2219f062cd90bc1247e6747b9e8fd051" - brace-expansion@^1.0.0, brace-expansion@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292" @@ -5880,10 +5876,6 @@ spdx-license-ids@^1.0.2: version "1.2.2" resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57" -spinkit@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/spinkit/-/spinkit-1.2.5.tgz#90f9f466a20e8e39ef24da959c1e611c2a30dd54" - split2@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/split2/-/split2-0.2.1.tgz#02ddac9adc03ec0bb78c1282ec079ca6e85ae900" @@ -6208,6 +6200,10 @@ table@^3.7.8: slice-ansi "0.0.4" string-width "^2.0.0" +tachyons@^4.9.0: + version "4.9.0" + resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.9.0.tgz#2df058ea6b6eb3d2be12d62a69fecb0f6b1e0534" + tape@^4.6.0, tape@^4.8.0: version "4.8.0" resolved "https://registry.yarnpkg.com/tape/-/tape-4.8.0.tgz#f6a9fec41cc50a1de50fa33603ab580991f6068e"