From 90d3dc1f60e8a53a86cbcbf8fb7aaa34affc8690 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 12:50:17 +0000 Subject: [PATCH 01/23] Remove useless CSS --- examples/exchange-files-in-browser/.gitignore | 1 + .../public/css/app.css | 21 ++----------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/examples/exchange-files-in-browser/.gitignore b/examples/exchange-files-in-browser/.gitignore index 74e9f3ccf0..e4615cfea1 100644 --- a/examples/exchange-files-in-browser/.gitignore +++ b/examples/exchange-files-in-browser/.gitignore @@ -1 +1,2 @@ public/js/ipfs.js +*.lock \ No newline at end of file diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 59cfeb2d1a..13980526d9 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -149,15 +149,11 @@ button:hover { font-family: monospace } +.disabled, +input:disabled, button:disabled { opacity: 0.2; } -input:disabled { - opacity: 0.2; -} -.disabled { - opacity: 0.2; -} input { width: 100%; @@ -177,25 +173,12 @@ button:focus, input:focus { outline: 3px solid #6acad1; } -.picture { - margin-top: 1em; - width: 100%; - background-color: rgba(196, 196, 196, 0.1); - /*padding: 0.25em;*/ - /*font-size: 1.2em;*/ -} - .settings { padding: 15px; } .left { box-sizing: border-box; - /* background-color: red; */ -} - -.right { - /* background-color: green; */ } .setting-item { From 1d4afafca2b0e8e8d19df79b8d8e28d4878868f6 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 12:51:08 +0000 Subject: [PATCH 02/23] Make box sizing simpler --- .../public/css/app.css | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 13980526d9..9a66558a38 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body { height: 100vh; font-family: sans-serif; @@ -73,13 +77,11 @@ h3 { .ipfs { padding-bottom: 50px; border-radius: 1px; - box-sizing: border-box; } #details { padding: 10px; width: 100%; - box-sizing: border-box; } ul { @@ -111,7 +113,6 @@ button { height: 40px; margin-left: 1%; font-size: 16px; - box-sizing: border-box; } .multihash-wrapper button { @@ -162,7 +163,6 @@ input { padding: 7px; border-radius: 2px; font-size: 9px; - box-sizing: border-box; } textarea, input, button { @@ -173,29 +173,14 @@ button:focus, input:focus { outline: 3px solid #6acad1; } -.settings { - padding: 15px; -} - -.left { - box-sizing: border-box; -} - -.setting-item { - margin-top: 20px; -} - .left, .right { width: 48%; float: left; background-color: rgba(255, 255, 255, 0.05); - box-sizing: border-box; margin: 1%; padding: 10px; } - - #files { padding-top: 10px; background-color: rgba(255, 255, 255, 0.05); From 79f85264229cf9ceec302ea7292a6219eb609761 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 13:40:55 +0000 Subject: [PATCH 03/23] Use grid and simplify css --- .../public/css/app.css | 39 +++++++---- .../public/index.html | 66 +++++++++---------- 2 files changed, 58 insertions(+), 47 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 9a66558a38..2700c6e2ca 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -8,6 +8,8 @@ body { color: white; background: linear-gradient(to bottom,#041727 0%,#062b3f 100%); pointer-events: auto; + padding: 0; + margin: 0; } .dragover-popup { @@ -21,7 +23,7 @@ body { } .wrapper { - width: 900px; + width: 800px; margin: 0 auto; /* filter: blur(5px); */ } @@ -74,11 +76,6 @@ h3 { color: red; } -.ipfs { - padding-bottom: 50px; - border-radius: 1px; -} - #details { padding: 10px; width: 100%; @@ -173,22 +170,36 @@ button:focus, input:focus { outline: 3px solid #6acad1; } -.left, .right { - width: 48%; - float: left; +.wrapper { + display: grid; + grid-gap: 1em; + grid-template-columns: 50% 50%; + grid-template-rows: repeat(3, 1fr); + grid-template-areas: "daemon peers" "files files" "errors errors"; +} + +#daemon { + grid-area: daemon; +} + +#peers { + grid-area: peers; +} + +.box { background-color: rgba(255, 255, 255, 0.05); - margin: 1%; padding: 10px; } #files { - padding-top: 10px; - background-color: rgba(255, 255, 255, 0.05); - margin: 1%; + grid-area: files; +} + +#errors { + grid-area: errors; } .left.centered { - float: none; margin: 0px auto; text-align: center; } diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 6602f7c52e..ff3c33c3ba 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -22,43 +22,43 @@

Transfer Files

-
-
-
- - -
-
-

Your daemon

-

ID

- 
N/A
-

Addresses

-
    -
  • Not yet online
    • -
-
+
+
+ +
-
-
-

Peers

-
-
- - -
+
+

Your daemon

+

ID

+ 
N/A
+

Addresses

+
    +
  • Not yet online
    • +
-
-
-
- - -
-
-
-
+
+ +
+
+

Peers

+
+
+ +
-
+ +
+
+ + +
+
+
+
+
+ +
From a942fbd39aca4e0be4c1acd384ea48a7c90d0068 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 13:42:54 +0000 Subject: [PATCH 04/23] Improve rows size --- examples/exchange-files-in-browser/public/css/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 2700c6e2ca..0634c0643b 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -174,7 +174,7 @@ button:focus, input:focus { display: grid; grid-gap: 1em; grid-template-columns: 50% 50%; - grid-template-rows: repeat(3, 1fr); + grid-template-rows: 20em auto auto; grid-template-areas: "daemon peers" "files files" "errors errors"; } From 8ac1f64fb0118fab8ec5dc1a5ab94bc2f379335f Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 13:48:17 +0000 Subject: [PATCH 05/23] Less JS, more CSS --- .../public/css/app.css | 39 ++++++++----------- .../public/index.html | 14 +++---- .../public/js/app.js | 6 +-- 3 files changed, 25 insertions(+), 34 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 0634c0643b..b6305108f8 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -22,13 +22,17 @@ body { pointer-events: none; } -.wrapper { - width: 800px; - margin: 0 auto; - /* filter: blur(5px); */ +main, +header { + filter: none; } -.header { +body.dragging main, +body.dragging header { + filter: blur(5px); +} + +header { text-align: center; /* filter: blur(5px); */ } @@ -56,8 +60,7 @@ h3 { font-weight: 700; } - -.header h1 { +header h1 { margin-top: 20px; margin-bottom: 20px; } @@ -170,7 +173,9 @@ button:focus, input:focus { outline: 3px solid #6acad1; } -.wrapper { +main { + width: 800px; + margin: 0 auto; display: grid; grid-gap: 1em; grid-template-columns: 50% 50%; @@ -199,21 +204,11 @@ button:focus, input:focus { grid-area: errors; } -.left.centered { - margin: 0px auto; - text-align: center; -} - -.clear { - clear: both; -} - -.note { +#note { position: absolute; - top: 10px; - right: 10px; - font-size: 10px; - font-size: 10px; + top: 1em; + right: 1em; + font-size: 0.625em; } #peers i { diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index ff3c33c3ba..135c74749e 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -11,17 +11,16 @@

Drop file to upload

-
+

Transfer Files

-
- P.S. drop files anywhere to upload them! -
-
-
+ P.S. drop files anywhere to upload them! + + +
@@ -52,14 +51,13 @@

Peers

-
-
+
diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 7b54655be5..3c423ea07b 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -215,14 +215,12 @@ window.onerror = onError function onDragEnter () { $dragoverPopup.style.display = 'block' - $wrapper.style.filter = 'blur(5px)' - $header.style.filter = 'blur(5px)' + $body.classList.add('dragging') } function onDragExit () { $dragoverPopup.style.display = 'none' - $wrapper.style.filter = '' - $header.style.filter = '' + $body.classList.remove('dragging') } /* From d2bec0615faa8500e525c92aea1fbb89abecd7d3 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 20:15:35 +0000 Subject: [PATCH 06/23] More cleaning --- .../public/css/app.css | 85 ++++++++++--------- .../public/index.html | 6 +- .../public/js/app.js | 15 ++-- 3 files changed, 58 insertions(+), 48 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index b6305108f8..2bfc4bb354 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -3,7 +3,7 @@ } body { - height: 100vh; + min-height: 100vh; font-family: sans-serif; color: white; background: linear-gradient(to bottom,#041727 0%,#062b3f 100%); @@ -12,6 +12,30 @@ body { margin: 0; } +h1, h2, h3 { + margin: 0px; +} + +h1 { + font-size: 2em; + font-weight: 300; +} + +h2 { + font-size: 1.25em; + font-weight: 700; +} + +h3 { + font-size: 1.0em; + font-weight: 700; +} + +main, +header { + filter: none; +} + .dragover-popup { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; @@ -22,42 +46,22 @@ body { pointer-events: none; } -main, -header { - filter: none; -} - body.dragging main, body.dragging header { filter: blur(5px); } -header { - text-align: center; - /* filter: blur(5px); */ +body.dragging .dragover-popup { + display: block; } #filesStatus { padding: 10px; } -h1, h2, h3 { - margin: 0px; -} - -h1 { - font-size: 2em; - font-weight: 300; -} - -h2 { - font-size: 1.25em; - font-weight: 700; -} -h3 { - font-size: 1.0em; - font-weight: 700; +header { + text-align: center; } header h1 { @@ -107,20 +111,21 @@ button { margin: 5px; } +.multihash-wrapper { + display: flex; + justify-content: space-between; +} + .multihash-wrapper input { width: 80%; - float: left; height: 40px; margin-left: 1%; font-size: 16px; } .multihash-wrapper button { - width: 17%; - float: left; - height: 40px; - margin: 0px; - margin-left: 1%; + width: 20%; + margin: 0 0 0 1em; } .file-list { @@ -191,6 +196,17 @@ main { grid-area: peers; } +#peers i { + display: none; + margin-top: 5px; + margin-bottom: 5px; + font-size: 14px; +} + +#peers.waiting i { + display: block; +} + .box { background-color: rgba(255, 255, 255, 0.05); padding: 10px; @@ -211,13 +227,6 @@ main { font-size: 0.625em; } -#peers i { - display: block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 14px; -} - .error { font-size: 18px; } diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 135c74749e..38b3023c6d 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -38,9 +38,9 @@

Addresses

-
-

Peers

-
+

Peers

+ Waiting for peers... +
    diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 3c423ea07b..1718c6106d 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -58,7 +58,7 @@ function start () { info = id updateView('ready', node) setInterval(refreshPeerList, 1000) - $peers.innerHTML = '

    peers

    waiting for peers...' + $peers.classList.add('waiting') })) } } @@ -188,9 +188,12 @@ function refreshPeerList () { return '
  • ' + addr + '
    • ' }).join('') - $peers.innerHTML = peers.length > 0 - ? '

    Remote Peers

      ' + peersAsHtml + '
    ' - : '

    Remote Peers

    Waiting for peers...' + if (peers.length === 0) { + $peers.classList.add('waiting') + } else { + $peers.classList.remove('waiting') + console.log(peersAsHtml) + } }) } @@ -214,12 +217,10 @@ function onError (err) { window.onerror = onError function onDragEnter () { - $dragoverPopup.style.display = 'block' $body.classList.add('dragging') } function onDragExit () { - $dragoverPopup.style.display = 'none' $body.classList.remove('dragging') } @@ -235,7 +236,7 @@ const states = { $addressesContainer.innerHTML = addressesHtml $allDisabledButtons.forEach(b => { b.disabled = false }) $allDisabledInputs.forEach(b => { b.disabled = false }) - $peers.className = '' + $peers.querySelector('h2').classList.remove('disabled') $details.className = '' $stopButton.disabled = false $startButton.disabled = true From f2b7cbe893e8097cd4a8815dc3b1c537e9feac7a Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 20:33:27 +0000 Subject: [PATCH 07/23] Simplify CSS and JS --- .../public/css/app.css | 22 +++++++------------ .../public/js/app.js | 14 +++++------- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 2bfc4bb354..8f9a232936 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -69,20 +69,6 @@ header h1 { margin-bottom: 20px; } -.hidden { - display: none; -} - -.visible { - display: inherit; - font-size: 0.8em; -} - -.error { - font-style: italic; - color: red; -} - #details { padding: 10px; width: 100%; @@ -218,6 +204,14 @@ main { #errors { grid-area: errors; + color: red; + font-style: italic; + font-size: 0.8em; + display: block; +} + +#errors.hidden { + display: none; } #note { diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 1718c6106d..82722a5a15 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -4,15 +4,13 @@ const $startButton = document.querySelector('#start') const $stopButton = document.querySelector('#stop') const $peers = document.querySelector('#peers') +const $peersList = $peers.querySelector('ul') const $errors = document.querySelector('#errors') const $filesStatus = document.querySelector('#filesStatus') const $multihashInput = document.querySelector('#multihash') const $catButton = document.querySelector('#cat') const $connectPeer = document.querySelector('input.connect-peer') const $connectPeerButton = document.querySelector('button.connect-peer') -const $dragoverPopup = document.querySelector('.dragover-popup') -const $wrapper = document.querySelector('.wrapper') -const $header = document.querySelector('.header') const $body = document.querySelector('body') const $idContainer = document.querySelector('.id-container') const $addressesContainer = document.querySelector('.addresses-container') @@ -91,7 +89,7 @@ function getFile () { $multihashInput.value = '' - $errors.className = 'hidden' + $errors.classList.add('hidden') if (!cid) { return console.log('no multihash was inserted') } @@ -112,7 +110,7 @@ function getFile () { */ function onDrop (event) { onDragExit() - $errors.className = 'hidden' + $errors.classList.add('hidden') event.preventDefault() if (!node) { @@ -192,7 +190,7 @@ function refreshPeerList () { $peers.classList.add('waiting') } else { $peers.classList.remove('waiting') - console.log(peersAsHtml) + $peersList.innerHTML = peersAsHtml } }) } @@ -210,8 +208,8 @@ function onError (err) { msg = err } - $errors.innerHTML = '' + msg + '' - $errors.className = 'error visible' + $errors.innerHTML = msg + $errors.className.remove('hidden') } window.onerror = onError From 430549c07e6f29198db44b2e980e995f3a1acf05 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 21:00:09 +0000 Subject: [PATCH 08/23] Reduce CSS --- examples/exchange-files-in-browser/public/css/app.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 8f9a232936..02fe381b2d 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -62,6 +62,7 @@ body.dragging .dragover-popup { header { text-align: center; + padding-top: 1em; } header h1 { @@ -180,6 +181,7 @@ main { #peers { grid-area: peers; + overflow-y: auto; } #peers i { From 4780ac46af5c75bc0e23595a2ed4e983d7f7c8fc Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 21:03:02 +0000 Subject: [PATCH 09/23] Updates on CSS and JS --- examples/exchange-files-in-browser/public/css/app.css | 7 ++----- examples/exchange-files-in-browser/public/js/app.js | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 02fe381b2d..d300a04e4e 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -208,8 +208,9 @@ main { grid-area: errors; color: red; font-style: italic; - font-size: 0.8em; + font-size: 1.125em; display: block; + margin: 0; } #errors.hidden { @@ -222,7 +223,3 @@ main { right: 1em; font-size: 0.625em; } - -.error { - font-size: 18px; -} diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 82722a5a15..6654b37b8b 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -209,7 +209,7 @@ function onError (err) { } $errors.innerHTML = msg - $errors.className.remove('hidden') + $errors.classList.remove('hidden') } window.onerror = onError From 15ef8d488b70a0d49363f2a85c3c1d351f98fe78 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 9 Dec 2017 21:18:15 +0000 Subject: [PATCH 10/23] Update Header styles --- .../public/css/app.css | 18 +++++++++++++----- .../public/index.html | 2 +- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index d300a04e4e..864936b4ce 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -59,15 +59,23 @@ body.dragging .dragover-popup { padding: 10px; } - header { text-align: center; - padding-top: 1em; + display: flex; + justify-content: center; + align-items: center; + padding: 3em 0; } -header h1 { - margin-top: 20px; - margin-bottom: 20px; +header a { + font-size: 0; + border-right: 2px solid white; + padding-right: 6px; + margin-right: 6px; +} + +header img { + height: 40px; } #details { diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 38b3023c6d..80c8f58c85 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -13,7 +13,7 @@

    Drop file to upload

    - + ipfs logo

    Transfer Files

    From da3543eaaef01e03c5493b67f49772c61f424d21 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 10:43:22 +0000 Subject: [PATCH 11/23] Cleaning --- .../public/css/app.css | 113 +++++++----------- .../public/index.html | 56 ++++----- .../public/js/app.js | 14 +-- 3 files changed, 80 insertions(+), 103 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 864936b4ce..323d403e17 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -13,7 +13,7 @@ body { } h1, h2, h3 { - margin: 0px; + margin: 0; } h1 { @@ -55,9 +55,7 @@ body.dragging .dragover-popup { display: block; } -#filesStatus { - padding: 10px; -} +#filesStatus {word-wrap: break-word;margin: 1em 0;} header { text-align: center; @@ -67,22 +65,6 @@ header { padding: 3em 0; } -header a { - font-size: 0; - border-right: 2px solid white; - padding-right: 6px; - margin-right: 6px; -} - -header img { - height: 40px; -} - -#details { - padding: 10px; - width: 100%; -} - ul { margin: 0px; padding: 0px; list-style: none; @@ -103,40 +85,23 @@ button { font-size: 15px; padding: 10px 25px 10px 25px; border-radius: 2px; - margin: 5px; -} - -.multihash-wrapper { - display: flex; - justify-content: space-between; -} - -.multihash-wrapper input { - width: 80%; - height: 40px; - margin-left: 1%; - font-size: 16px; -} - -.multihash-wrapper button { - width: 20%; - margin: 0 0 0 1em; + margin: 1em; } .file-list { display: block; - margin: 10px; + margin: 1em 0; } .file-list a { - font-size: 16px; color: white; display: block; + word-wrap: break-word; } -button.connect-peer { - margin: 0px; - margin-top: 2px; +button.full { + margin: 0; + margin-top: 1em; width: 100%; } @@ -158,38 +123,57 @@ button:disabled { input { width: 100%; - border: 2px solid #444; + border: 2px solid rgba(0,0,0,0.2); color: black; - padding: 7px; + padding: 0.7em; border-radius: 2px; - font-size: 9px; } -textarea, input, button { - outline: none; +input:hover, input:focus, input:active { + border-color: #6acad1; } -button:focus, input:focus { - outline: 3px solid #6acad1; +input, button { + outline: none; } main { width: 800px; margin: 0 auto; - display: grid; - grid-gap: 1em; - grid-template-columns: 50% 50%; - grid-template-rows: 20em auto auto; - grid-template-areas: "daemon peers" "files files" "errors errors"; } -#daemon { - grid-area: daemon; +.buttons, +.columns { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.buttons > button, +.columns > div { + width: calc(50% - 0.5em); } -#peers { - grid-area: peers; - overflow-y: auto; +.buttons > button { + margin-top: 0; + margin-left: 0; + margin-right: 0; +} + +.columns > div { + background-color: rgba(255, 255, 255, 0.05); + padding: 1em; +} + +main h2 { + display: block; + border-bottom: 2px solid rgba(255, 255, 255, 0.1); + border-right: 0; + border-left: 0; + text-align: center; + line-height: 1; + padding-bottom: 0.5em; + margin-bottom: 1em; } #peers i { @@ -203,15 +187,6 @@ main { display: block; } -.box { - background-color: rgba(255, 255, 255, 0.05); - padding: 10px; -} - -#files { - grid-area: files; -} - #errors { grid-area: errors; color: red; diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 80c8f58c85..54373dc20f 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -12,51 +12,53 @@

    Drop file to upload

    - - ipfs logo - -

    Transfer Files

    +

    InterPlanetary File Exchange

    P.S. drop files anywhere to upload them!
    -
    + + +
    - - -
    -
    +
    + + +
    +

    Your daemon

    +

    ID

    + 
    N/A
    +

    Addresses

    +
    • Not yet online
    -
    -
    -
    -

    Peers

    - Waiting for peers... -
      -
      - - +
      +

      Peers

      + + + + + Waiting for peers... + +
        +
        -
        -
        -
        +
        +

        Files

        - -
        -
        -
        -
        + - +
        +
        +
        diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 6654b37b8b..f1b79d75f9 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -9,8 +9,8 @@ const $errors = document.querySelector('#errors') const $filesStatus = document.querySelector('#filesStatus') const $multihashInput = document.querySelector('#multihash') const $catButton = document.querySelector('#cat') -const $connectPeer = document.querySelector('input.connect-peer') -const $connectPeerButton = document.querySelector('button.connect-peer') +const $connectPeer = document.querySelector('#peer-input') +const $connectPeerButton = document.querySelector('#peer-btn') const $body = document.querySelector('body') const $idContainer = document.querySelector('.id-container') const $addressesContainer = document.querySelector('.addresses-container') @@ -56,7 +56,7 @@ function start () { info = id updateView('ready', node) setInterval(refreshPeerList, 1000) - $peers.classList.add('waiting') + // $peers.classList.add('waiting') })) } } @@ -187,9 +187,9 @@ function refreshPeerList () { }).join('') if (peers.length === 0) { - $peers.classList.add('waiting') + // $peers.classList.add('waiting') } else { - $peers.classList.remove('waiting') + // $peers.classList.remove('waiting') $peersList.innerHTML = peersAsHtml } }) @@ -234,8 +234,8 @@ const states = { $addressesContainer.innerHTML = addressesHtml $allDisabledButtons.forEach(b => { b.disabled = false }) $allDisabledInputs.forEach(b => { b.disabled = false }) - $peers.querySelector('h2').classList.remove('disabled') - $details.className = '' + // $peers.querySelector('h2').classList.remove('disabled') + // $details.className = '' $stopButton.disabled = false $startButton.disabled = true }, From 2000f9be24657bf4b02ed1da0859f9226870fb5c Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 10:53:09 +0000 Subject: [PATCH 12/23] Disabled --- .../public/css/app.css | 32 +++++++++---------- .../public/index.html | 31 ++++++++++-------- .../public/js/app.js | 8 +++-- 3 files changed, 38 insertions(+), 33 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 323d403e17..93b675b480 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -66,15 +66,15 @@ header { } ul { - margin: 0px; padding: 0px; + margin: 0; + padding: 0; list-style: none; - font-size: 11px; } ul li { - margin-top: 10px; - margin-bottom: 10px; - font-size: 9px; + margin: 1em 0; + font-size: 0.7em; + font-family: monospace; word-wrap: break-word; } @@ -82,9 +82,9 @@ button { background-color: rgba(0,0,0,0.2); color: #6acad1; border: 2px solid #6acad1; - font-size: 15px; - padding: 10px 25px 10px 25px; - border-radius: 2px; + font-size: 1em; + padding: 0.625em 1.5em; + border-radius: 0.125em; margin: 1em; } @@ -100,8 +100,8 @@ button { } button.full { - margin: 0; - margin-top: 1em; + margin-right: 0; + margin-left: 0; width: 100%; } @@ -115,7 +115,7 @@ button:hover { font-family: monospace } -.disabled, +.disabled *, input:disabled, button:disabled { opacity: 0.2; @@ -155,23 +155,21 @@ main { } .buttons > button { - margin-top: 0; - margin-left: 0; - margin-right: 0; + margin: 0; } -.columns > div { +.box { background-color: rgba(255, 255, 255, 0.05); padding: 1em; + margin-bottom: 1em; } -main h2 { +.box > h2 { display: block; border-bottom: 2px solid rgba(255, 255, 255, 0.1); border-right: 0; border-left: 0; text-align: center; - line-height: 1; padding-bottom: 0.5em; margin-bottom: 1em; } diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 54373dc20f..cfc1ef6f88 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -22,24 +22,26 @@

        InterPlanetary File Exchange

        -
        +
        -

        Your daemon

        - -

        ID

        - - 
        N/A
        - -

        Addresses

        - -
          -
        • Not yet online
          • -
        +
        +

        Your daemon

        + +

        ID

        + + 
        N/A
        + +

        Addresses

        + +
          +
        • Not yet online
          • +
        +
        -
        +

        Peers

        @@ -51,8 +53,9 @@

        Peers

        -
        +

        Files

        + diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index f1b79d75f9..b6a0c3caa5 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -14,9 +14,11 @@ const $connectPeerButton = document.querySelector('#peer-btn') const $body = document.querySelector('body') const $idContainer = document.querySelector('.id-container') const $addressesContainer = document.querySelector('.addresses-container') -const $details = document.querySelector('#details') const $allDisabledButtons = document.querySelectorAll('button:disabled') const $allDisabledInputs = document.querySelectorAll('input:disabled') + +const $allDisabledElements = document.querySelectorAll('.disabled') + const $filesList = document.querySelector('.file-list') let node @@ -235,7 +237,9 @@ const states = { $allDisabledButtons.forEach(b => { b.disabled = false }) $allDisabledInputs.forEach(b => { b.disabled = false }) // $peers.querySelector('h2').classList.remove('disabled') - // $details.className = '' + + $allDisabledElements.forEach(el => { el.classList.remove('disabled') }) + $stopButton.disabled = false $startButton.disabled = true }, From 0ea1e9580690447ace324273cbaad427188daa42 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 11:01:51 +0000 Subject: [PATCH 13/23] Tweaks :) --- .../public/css/app.css | 18 +++++++++++++----- .../public/index.html | 7 ------- .../exchange-files-in-browser/public/js/app.js | 9 +++------ 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 93b675b480..e23f622760 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -37,15 +37,23 @@ header { } .dragover-popup { - position: absolute; - top: 10px; right: 10px; bottom: 10px; left: 10px; + position: fixed; + top: 0.5em; + left: 0.5em; + width: calc(100% - 1em); + height: calc(100% - 1em); background-color: rgba(0, 0, 0, 0.5); - text-align: center; - padding-top: 30%; display: none; pointer-events: none; } +.dragover-popup h1 { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) +} + body.dragging main, body.dragging header { filter: blur(5px); @@ -85,7 +93,7 @@ button { font-size: 1em; padding: 0.625em 1.5em; border-radius: 0.125em; - margin: 1em; + margin: .5em 0; } .file-list { diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index cfc1ef6f88..5c12414a99 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -29,13 +29,9 @@

        InterPlanetary File Exchange

        Your daemon

        -

        ID

        - 
        N/A
        -

        Addresses

        -
        • Not yet online
        @@ -43,12 +39,9 @@

        Addresses

        Peers

        - - Waiting for peers... -
          diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index b6a0c3caa5..2a62d728a4 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -58,7 +58,7 @@ function start () { info = id updateView('ready', node) setInterval(refreshPeerList, 1000) - // $peers.classList.add('waiting') + $peers.classList.add('waiting') })) } } @@ -189,9 +189,9 @@ function refreshPeerList () { }).join('') if (peers.length === 0) { - // $peers.classList.add('waiting') + $peers.classList.add('waiting') } else { - // $peers.classList.remove('waiting') + $peers.classList.remove('waiting') $peersList.innerHTML = peersAsHtml } }) @@ -236,10 +236,7 @@ const states = { $addressesContainer.innerHTML = addressesHtml $allDisabledButtons.forEach(b => { b.disabled = false }) $allDisabledInputs.forEach(b => { b.disabled = false }) - // $peers.querySelector('h2').classList.remove('disabled') - $allDisabledElements.forEach(el => { el.classList.remove('disabled') }) - $stopButton.disabled = false $startButton.disabled = true }, From 9e43834286e6b70a22b9d35d45008640d82607f2 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 11:02:25 +0000 Subject: [PATCH 14/23] Update Errors margin --- examples/exchange-files-in-browser/public/css/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index e23f622760..aafedcfa72 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -199,7 +199,7 @@ main { font-style: italic; font-size: 1.125em; display: block; - margin: 0; + margin: 0 0 1em; } #errors.hidden { From 8795300eb9834b5e058657d7eee54dedad9f778b Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 11:05:47 +0000 Subject: [PATCH 15/23] File history tweak --- examples/exchange-files-in-browser/public/css/app.css | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index aafedcfa72..569101ca7e 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -105,6 +105,7 @@ button { color: white; display: block; word-wrap: break-word; + margin: 1em 0; } button.full { From b1bf978c9c32a12cc2ebdbdcd294ab714e1a6df2 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 11:11:17 +0000 Subject: [PATCH 16/23] Add buffer --- examples/exchange-files-in-browser/public/js/app.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 2a62d728a4..a9d83108de 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -23,6 +23,7 @@ const $filesList = document.querySelector('.file-list') let node let info +let Buffer /* * Start and stop the IPFS node @@ -52,6 +53,8 @@ function start () { // EXAMPLE // node = new self.Ipfs(options) + Buffer = node.types.Buffer + node.once('start', () => node.id((err, id) => { if (err) { return onError(err) } From af436ebf4e527883a3854caabad1ff747df227d3 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 11:29:14 +0000 Subject: [PATCH 17/23] Buffer from node and use IPFS from dist without nodejs --- examples/exchange-files-in-browser/public/index.html | 6 +++--- examples/exchange-files-in-browser/public/js/app.js | 9 +++------ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 5c12414a99..7138892017 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -58,8 +58,8 @@

          Files

          - - - + + + diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index a9d83108de..a9529cb591 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -16,9 +16,7 @@ const $idContainer = document.querySelector('.id-container') const $addressesContainer = document.querySelector('.addresses-container') const $allDisabledButtons = document.querySelectorAll('button:disabled') const $allDisabledInputs = document.querySelectorAll('input:disabled') - const $allDisabledElements = document.querySelectorAll('.disabled') - const $filesList = document.querySelector('.file-list') let node @@ -46,12 +44,12 @@ function start () { } // IFDEV: To test with latest js-ipfs - const IPFS = require('ipfs') - node = new IPFS(options) + // const IPFS = require('ipfs') + // node = new IPFS(options) // VEDIF // EXAMPLE - // node = new self.Ipfs(options) + node = new self.Ipfs(options) Buffer = node.types.Buffer @@ -263,7 +261,6 @@ const startApplication = () => { // Setup event listeners $body.addEventListener('dragenter', onDragEnter) $body.addEventListener('drop', onDrop) - // TODO should work to hide the dragover-popup but doesn't... $body.addEventListener('dragleave', onDragExit) $startButton.addEventListener('click', start) From 3eff0889363ef784ef71cbb33d1b76fdfd4c675e Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sun, 10 Dec 2017 21:51:58 +0000 Subject: [PATCH 18/23] tweaks :) --- .../public/css/app.css | 5 ++-- .../public/index.html | 28 +++++++++---------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 569101ca7e..01b0c7e575 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -147,7 +147,8 @@ input, button { } main { - width: 800px; + width: 90%; + max-width: 1000px; margin: 0 auto; } @@ -164,7 +165,7 @@ main { } .buttons > button { - margin: 0; + margin: 0 0 1em; } .box { diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 7138892017..6e57258d17 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -12,8 +12,7 @@

          Drop file to upload

          -

          InterPlanetary File Exchange

          - +

          IPFS | InterPlanetary File Exchange

          P.S. drop files anywhere to upload them!
          @@ -22,19 +21,20 @@

          InterPlanetary File Exchange

          -
          - - -
          - -
          +

          Your daemon

          -

          ID

          - 
          N/A
          -

          Addresses

          -
            -
          • Not yet online
            • -
          +
          + + +
          +
          +

          ID

          + 
          N/A
          +

          Addresses

          +
            +
          • Not yet online
            • +
          +
          From 03ac91070a0a2fbb36dec73975d381670c55538d Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Tue, 12 Dec 2017 22:31:03 +0000 Subject: [PATCH 19/23] add table :) --- .../public/css/app.css | 56 ++++++++++++++----- .../public/index.html | 13 ++++- .../public/js/app.js | 48 ++++++++-------- 3 files changed, 79 insertions(+), 38 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 01b0c7e575..0bfadf9427 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -63,8 +63,6 @@ body.dragging .dragover-popup { display: block; } -#filesStatus {word-wrap: break-word;margin: 1em 0;} - header { text-align: center; display: flex; @@ -96,18 +94,6 @@ button { margin: .5em 0; } -.file-list { - display: block; - margin: 1em 0; -} - -.file-list a { - color: white; - display: block; - word-wrap: break-word; - margin: 1em 0; -} - button.full { margin-right: 0; margin-left: 0; @@ -214,3 +200,45 @@ main { right: 1em; font-size: 0.625em; } + +#file-status { + font-style: italic; + color: cyan; + font-size: 0.8em; + margin: 1em 0; +} + +table { + width: 100%; + margin: 1em 0; + word-break: break-all; + border-collapse: collapse; +} + +table thead { + background-color: rgba(255, 255, 255, 0.1); + font-weight: normal +} + +table th, table td { + padding: 0.5em 0; +} + +table td { + cursor: pointer; +} + +table td:last-child, +table th:last-child { + width: 20%; + text-align: center; +} + +table td:first-child { + width: 80%; + font-family: monospace; +} + +table tr:hover { + background-color: rgba(0, 0, 0, 0.2) +} \ No newline at end of file diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 6e57258d17..d3547d658a 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -51,9 +51,18 @@

          Files

          + +

          -
          -
          + + + + + + + + +
          CIDSize
          diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index a9529cb591..76a8810d4f 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -6,7 +6,8 @@ const $stopButton = document.querySelector('#stop') const $peers = document.querySelector('#peers') const $peersList = $peers.querySelector('ul') const $errors = document.querySelector('#errors') -const $filesStatus = document.querySelector('#filesStatus') +const $fileHistory = document.querySelector('#file-history tbody') +const $fileStatus = document.querySelector('#file-status') const $multihashInput = document.querySelector('#multihash') const $catButton = document.querySelector('#cat') const $connectPeer = document.querySelector('#peer-input') @@ -17,7 +18,6 @@ const $addressesContainer = document.querySelector('.addresses-container') const $allDisabledButtons = document.querySelectorAll('button:disabled') const $allDisabledInputs = document.querySelectorAll('input:disabled') const $allDisabledElements = document.querySelectorAll('.disabled') -const $filesList = document.querySelector('.file-list') let node let info @@ -68,23 +68,24 @@ function stop () { window.location.href = window.location.href // refresh page } -/* - * Fetch files and display them to the user - */ +function appendFile (hash, size, data) { + const row = document.createElement('tr') + row.innerHTML = `${hash}${size}` + row.addEventListener('click', (event) => { + event.preventDefault() -function createFileBlob (data, multihash) { - const file = new window.Blob([data], { type: 'application/octet-binary' }) - const fileUrl = window.URL.createObjectURL(file) + const file = new window.Blob([data], { type: 'application/octet-binary' }) + const url = window.URL.createObjectURL(file) + const link = document.createElement('a') - const listItem = document.createElement('div') - const link = document.createElement('a') - link.setAttribute('href', fileUrl) - link.setAttribute('download', multihash) - const date = (new Date()).toLocaleTimeString() + link.setAttribute('href', url) + link.setAttribute('download', hash) + link.click() - link.innerText = date + ' - ' + multihash + ' - Size: ' + file.size - listItem.appendChild(link) - return listItem + window.URL.revokeObjectURL(url) + }) + + $fileHistory.insertBefore(row, $fileHistory.firstChild) } function getFile () { @@ -101,8 +102,7 @@ function getFile () { files.forEach((file) => { if (file.content) { - const listItem = createFileBlob(file.content, cid) - $filesList.insertBefore(listItem, $filesList.firstChild) + appendFile(cid, file.size, file.content) } }) }) @@ -138,12 +138,16 @@ function onDrop (event) { files.forEach((file) => { readFileContents(file) .then((buffer) => { - node.files.add(Buffer.from(buffer), (err, filesAdded) => { + node.files.add({ + path: file.name, + content: Buffer.from(buffer) + }, (err, filesAdded) => { if (err) { return onError(err) } - const fl = filesAdded[0] - $multihashInput.value = fl.hash - $filesStatus.innerHTML = `Added ${file.name} as ${fl.hash}` + console.log(filesAdded) + + $multihashInput.value = filesAdded[0].hash + $fileStatus.innerHTML = `${file.name} added! Try to hit 'Fetch' button!` }) }) .catch(onError) From cc465e29e5469c15f64abb6c30f58f9f77c5699d Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Tue, 12 Dec 2017 22:32:35 +0000 Subject: [PATCH 20/23] change btn name --- examples/exchange-files-in-browser/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index d3547d658a..8eba424902 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -50,7 +50,7 @@

          Peers

          Files

          - +

          From c088d20b8923341818fa5a0c6afa7badebc7f613 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Wed, 13 Dec 2017 08:39:53 +0000 Subject: [PATCH 21/23] Name's working --- examples/exchange-files-in-browser/public/css/app.css | 6 +++++- examples/exchange-files-in-browser/public/index.html | 1 + examples/exchange-files-in-browser/public/js/app.js | 10 ++++------ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index 0bfadf9427..e1b4ca817c 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -235,7 +235,11 @@ table th:last-child { } table td:first-child { - width: 80%; + width: 45%; +} + +table td:nth-child(2) { + width: 35%; font-family: monospace; } diff --git a/examples/exchange-files-in-browser/public/index.html b/examples/exchange-files-in-browser/public/index.html index 8eba424902..a526f9a26d 100644 --- a/examples/exchange-files-in-browser/public/index.html +++ b/examples/exchange-files-in-browser/public/index.html @@ -57,6 +57,7 @@

          Files

          + diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index 76a8810d4f..b1eb980fa0 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -68,9 +68,9 @@ function stop () { window.location.href = window.location.href // refresh page } -function appendFile (hash, size, data) { +function appendFile (name, hash, size, data) { const row = document.createElement('tr') - row.innerHTML = `` + row.innerHTML = `` row.addEventListener('click', (event) => { event.preventDefault() @@ -102,7 +102,7 @@ function getFile () { files.forEach((file) => { if (file.content) { - appendFile(cid, file.size, file.content) + appendFile(file.name, cid, file.size, file.content) } }) }) @@ -141,11 +141,9 @@ function onDrop (event) { node.files.add({ path: file.name, content: Buffer.from(buffer) - }, (err, filesAdded) => { + }, { wrap: true }, (err, filesAdded) => { if (err) { return onError(err) } - console.log(filesAdded) - $multihashInput.value = filesAdded[0].hash $fileStatus.innerHTML = `${file.name} added! Try to hit 'Fetch' button!` }) From 472315d6a1c3e8b46a9a2328bfd6677084eb5429 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Wed, 13 Dec 2017 08:41:35 +0000 Subject: [PATCH 22/23] fix: file name on download --- examples/exchange-files-in-browser/public/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index b1eb980fa0..e671f803ad 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -79,7 +79,7 @@ function appendFile (name, hash, size, data) { const link = document.createElement('a') link.setAttribute('href', url) - link.setAttribute('download', hash) + link.setAttribute('download', name) link.click() window.URL.revokeObjectURL(url) From 1cf56c62afe9595d92bcedb9dade8f1d055cb822 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Wed, 13 Dec 2017 09:06:10 +0000 Subject: [PATCH 23/23] update width and file download --- .../public/css/app.css | 9 +++-- .../public/js/app.js | 33 +++++++++++-------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/examples/exchange-files-in-browser/public/css/app.css b/examples/exchange-files-in-browser/public/css/app.css index e1b4ca817c..32667fc685 100644 --- a/examples/exchange-files-in-browser/public/css/app.css +++ b/examples/exchange-files-in-browser/public/css/app.css @@ -134,7 +134,6 @@ input, button { main { width: 90%; - max-width: 1000px; margin: 0 auto; } @@ -224,10 +223,6 @@ table th, table td { padding: 0.5em 0; } -table td { - cursor: pointer; -} - table td:last-child, table th:last-child { width: 20%; @@ -245,4 +240,8 @@ table td:nth-child(2) { table tr:hover { background-color: rgba(0, 0, 0, 0.2) +} + +table a { + color: inherit; } \ No newline at end of file diff --git a/examples/exchange-files-in-browser/public/js/app.js b/examples/exchange-files-in-browser/public/js/app.js index e671f803ad..778ca44c1c 100644 --- a/examples/exchange-files-in-browser/public/js/app.js +++ b/examples/exchange-files-in-browser/public/js/app.js @@ -69,21 +69,26 @@ function stop () { } function appendFile (name, hash, size, data) { + const file = new window.Blob([data], { type: 'application/octet-binary' }) + const url = window.URL.createObjectURL(file) const row = document.createElement('tr') - row.innerHTML = `` - row.addEventListener('click', (event) => { - event.preventDefault() - - const file = new window.Blob([data], { type: 'application/octet-binary' }) - const url = window.URL.createObjectURL(file) - const link = document.createElement('a') - - link.setAttribute('href', url) - link.setAttribute('download', name) - link.click() - - window.URL.revokeObjectURL(url) - }) + + const nameCell = document.createElement('td') + nameCell.innerHTML = name + + const hashCell = document.createElement('td') + const link = document.createElement('a') + link.innerHTML = hash + link.setAttribute('href', url) + link.setAttribute('download', name) + hashCell.appendChild(link) + + const sizeCell = document.createElement('td') + sizeCell.innerText = size + + row.appendChild(nameCell) + row.appendChild(hashCell) + row.appendChild(sizeCell) $fileHistory.insertBefore(row, $fileHistory.firstChild) }
          Name CID Size
          ${hash}${size}${name}${hash}${size}${name}${hash}${size}