use tachyons

ZhouHansen · Nov 13, 2017 · c7d0866 · c7d0866
1 parent 4f259b7
commit c7d0866
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 185 deletions.
diff --git 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
@@ -1,28 +1,23 @@
 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()
   }
 
   createElement (state, emit) {
     return html`
-      <div class="draw">
+      <div class="dib mt3">
         ${buttons.map(button => {
           return html`
-            <button
-              type="button"
+            <div
               class=${button.class}
               id=${button.id}
-              onclick=${handleClick(emit)}
-              onblur=${handleBlur(state)}>
-                ${button.text}
-            </button>
+              onclick=${handleClick(emit)}>
+              ${button.text}
+            </div>
           `
         })}
       </div>
@@ -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
@@ -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`
-      <div class="canvaswrap">
+      <div class=" ma3 mr0 dib w-100 bw1 b--solid b--white relative overflow-hidden">
         <canvas
           width="1050"
           height="1000"
+          class="absolute"
           id="canvas"
           onmousedown=${onmousedown(state, emit)}
           onmousemove=${onmousemove(state, emit)}
@@ -27,7 +44,7 @@ class Component extends Nanocomponent {
     `
   }
 
-  load (state, emit) {  
+  load (state, emit) {
     window.stage = new createjs.Stage('canvas')
     window.stage.enableMouseOver()
     window.container = new createjs.Container()

diff --git a/app/components/storeButton.js b/app/components/storeButton.js
@@ -1,12 +1,8 @@
 var html = require('choo/html')
-var css = require('sheetify')
 var Nanocomponent = require('nanocomponent')
 var buttons = require('../buttons.json').storeButtons
 var choosriber = require('../choosriber.js')
 
-css('../styles/storeButton.css')
-css('spinkit/css/spinkit.css')
-
 class Component extends Nanocomponent {
   constructor () {
     super()
@@ -17,27 +13,13 @@ class Component extends Nanocomponent {
       <div>
         ${buttons.map(button => {
           return html`
-            <button
-              type="button"
+            <div
               class=${button.class}
               onclick=${handleClick(button.id, state, emit)}
               disabled=${state.fetch || state.save}
               id=${button.id}>
                 ${button.text}
-                ${(() => {
-                  if (state[button.id]) {
-                    return html`
-                      <div class="sk-three-bounce">
-                        <div class="sk-child sk-bounce1"></div>
-                        <div class="sk-child sk-bounce2"></div>
-                        <div class="sk-child sk-bounce3"></div>
-                      </div>
-                    `
-                  } else {
-                    return ''
-                  }
-                })()}
-            </button>
+            </div>
           `
         })}
       </div>
@@ -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
diff --git a/app/styles/scribeButton.css b/app/styles/scribeButton.css
diff --git a/app/styles/scribeCanvas.css b/app/styles/scribeCanvas.css
diff --git a/app/styles/storeButton.css b/app/styles/storeButton.css
diff --git a/build.js b/build.js
@@ -94,6 +94,17 @@ graph.node('favicon', (state, createEdge) => {
   })
 })
 
+graph.node('sqqq', [ 'documents:bundle' ], (state, createEdge) => {
+  var script = `<body class="mv3 mh5 bg-black-05"><div id="ncid-4e02" data-nanocomponent="ncid-4e02">
+        <div id="fetch" class="f5 br2 ba ph3 pv2 mb2 dib blue pointer grow">Fetch</div><div id="save" class="f5 br2 ba ph3 pv2 mb2 dib gold pointer fr grow">Save</div></div><div class="flex"><div class="dib mt3" id="ncid-015e" data-nanocomponent="ncid-015e">
+        <div id="line" class="f5 br2 ba ph2 pv2 mb4 db green pointer tc grow">Line</div><div id="ctrlline" class="f5 br2 ba ph2 pv2 mb4 db green pointer tc grow">Select</div><div id="move" class="f5 br2 ba ph2 pv2 mb4 db green pointer tc grow">Move</div><div id="remove" class="f5 br2 ba ph2 pv2 mb7 db red pointer tc grow">Remove</div></div><div class=" ma3 mr0 dib w-100 bw1 b--solid b--white relative overflow-hidden" id="ncid-9bba" data-nanocomponent="ncid-9bba" data-onloadid8lku="o0"><canvas width="1050" height="1000" id="canvas" class="absolute"></canvas></div></div><a target="_blank" href="https://www.youtube.com/watch?v=ZVMYe-qiKlA" class="link blue">how to use</a></body>`
+    , 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 = '<div></div>'
   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
@@ -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`
-    <body>
-      <div class="container">
-        ${storeButton.render(state, emit)}
-        <div class="flex-box">
-          ${scribeButton.render(state, emit)}
-          ${scribeCanvas.render(state, emit)}
-        </div>
-        <a target="_blank" href="https://www.youtube.com/watch?v=ZVMYe-qiKlA">
-          how to use
-        </a>
+    <body class='mv3 mh5 bg-black-05'>
+      ${storeButton.render(state, emit)}
+      <div class='flex'>
+        ${scribeButton.render(state, emit)}
+        ${scribeCanvas.render(state, emit)}
       </div>
+      <a class='link blue' target='_blank' href='https://www.youtube.com/watch?v=ZVMYe-qiKlA'>
+        how to use
+      </a>
     </body>
   `
 }
diff --git 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": {