diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rwxr-xr-x | bin/post-build.js | 9 | ||||
| -rw-r--r-- | chrome/img/folder.png | bin | 0 -> 16622 bytes | |||
| -rw-r--r-- | chrome/window.html | 58 | ||||
| -rw-r--r-- | css/main.styl | 152 | ||||
| -rw-r--r-- | css/util.styl | 6 | ||||
| -rw-r--r-- | lib/app.js | 16 | ||||
| -rw-r--r-- | package.json | 7 |
8 files changed, 233 insertions, 18 deletions
@@ -1,3 +1,4 @@ -chrome/main.css chrome/bundle.js +chrome/font-awesome +chrome/main.css node_modules/
\ No newline at end of file diff --git a/bin/post-build.js b/bin/post-build.js new file mode 100755 index 0000000..f415d76 --- /dev/null +++ b/bin/post-build.js @@ -0,0 +1,9 @@ +#!/usr/bin/env node + +var cp = require('child_process') +var path = require('path') + +var rootPath = path.join(__dirname, '..') +cp.exec('cp -r node_modules/font-awesome chrome/', { cwd: rootPath }, function (err) { + if (err) throw err +})
\ No newline at end of file diff --git a/chrome/img/folder.png b/chrome/img/folder.png Binary files differnew file mode 100644 index 0000000..ac860c7 --- /dev/null +++ b/chrome/img/folder.png diff --git a/chrome/window.html b/chrome/window.html index ef700cf..db9acf0 100644 --- a/chrome/window.html +++ b/chrome/window.html @@ -2,10 +2,59 @@ <html> <head> <title>WebTorrent</title> - <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="main.css"> + <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> </head> <body> - <h3>Torrent Info</h4> + + <header> + <div class="system"> + <i class="close fa fa-times-circle fa-lg"></i> + <i class="minimize fa fa-minus-circle fa-lg"></i> + <i class="maximize fa fa-plus-circle fa-lg"></i> + <i class="close fa fa-circle fa-lg"></i> + <i class="minimize fa fa-circle fa-lg"></i> + <i class="maximize fa fa-circle fa-lg"></i> + </div> + <div class="title">WebTorrent</div> + <div class="buttons"></div> + </header> + <div class="overallStats"> + <span class="ratio"><i class="fa fa-bolt"></i>Ratio: <span>0.10</span></span> + <span class="upload"><i class="fa fa-arrow-up"></i><span>0.0 KB/s</span></span> + <span class="download"><i class="fa fa-arrow-down"></i><span>0.0 KB/s</span></span> + </div> + + <main> + <section class="torrent" id="torrent_XXX"> + <div class="image"> + <img src="img/folder.png"> + </div> + <div class="info"> + <div class="title">Leaves of Grass by Walt Whitman</div> + <div class="stats">362 KB, uploaded 0 KB (Ratio: 0.00)</div> + <progress max="100" value="70"></progress> + <div class="stats2">Seeding to 0 of 0 peers - UL: 0.0 KB/s</div> + </div> + </section> + <section class="torrent" id="torrent_XXX"> + <div class="image"> + <img src="img/folder.png"> + </div> + <div class="info"> + <div class="title">Leaves of Grass by Walt Whitman</div> + <div class="stats">362 KB, uploaded 0 KB (Ratio: 0.00)</div> + <progress max="100" value="10"></progress> + <div class="stats2">Seeding to 0 of 0 peers - UL: 0.0 KB/s</div> + </div> + </section> + </main> + + <footer> + <span class="numTransfers">1 transfer</span> + </footer> + +<!-- <h3>Torrent Info</h4> <ul> <li class="displayName">Display Name: <span></span></li> <li class="infoHash">Info Hash: <span></span></li> @@ -13,10 +62,7 @@ <li class="dhtPeers">DHT Peers: <span>0</span></li> <li class="connectedPeers">Connected Peers: <span>0</span></li> <li class="downloadMetadata"><a href="#">Download .torrent</a></li> - </ul> - - <h3>Console</h4> - <div id="console"></div> + </ul> --> <script src="bundle.js"></script> </body> diff --git a/css/main.styl b/css/main.styl index 4ecdb3a..b4a3a85 100644 --- a/css/main.styl +++ b/css/main.styl @@ -1,8 +1,144 @@ -#console { - height: 400px; - overflow: scroll; -} - -.highlight { - font-weight: bold; -}
\ No newline at end of file +@import 'nib' +@import 'util' + +*, *:before, *:after + box-sizing: border-box + +FONT_COLOR = #444 +LIGHT_FONT_COLOR = #777 + +body + color: FONT_COLOR + font-size: 11px + margin: 0 + +header, .overallStats, footer + -webkit-app-region: drag + box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5) + text-shadow: 0 0 1px rgba(255, 255, 255, 0.75) + width: 100% + +header + background: linear-gradient(top, 20% #F0F0F0, #B0B0B0) + height: 60px + + .system + left: 0 + position: absolute + top: 0 + margin: 5px + z-index: 20 + i + -webkit-app-region: no-drag + margin-left: 3px + :not(.fa-circle) + display: none + &:hover + .fa-circle + display: none + :not(.fa-circle) + display: inline-block + .close + color: rgb(195, 0, 4) + .minimize + color: rgb(241, 175, 68) + .maximize + color: rgb(67, 142, 12) + + .title + font-size: 13px + left: 0 + position: absolute + right: 0 + text-align: center + top: 3px + z-index: 10 + +toolbar() + background: linear-gradient(top, 20% #D0D0D0, #A2A2A2) + border-top: 1px solid #666 + height: 24px + padding: 4px 12px + +.overallStats + toolbar() + border-bottom: 1px solid #666 + i + font-size: 12.5px + margin-right: 6px + position: relative + top: 1px + vertical-align: baseline + .ratio + float: left + .upload, .download + float: right + margin-left: 20px + +footer + toolbar() + position: absolute + bottom: 0 + text-align: center + +@keyframes animate-stripes + 100% + background-position: -40px 0 + +main + height: 100% + + .torrent + height: 65px + padding: 4px 10px + width: 100% + &:nth-child(odd) + background-color: #FFF + &:nth-child(even) + background-color: #E5F0FA + .image + float: left + height: 57px + margin-right: 5px + position: relative + width: 50px + img + bottom: 0 + left: 0 + margin: auto + position: absolute + right: 0 + top: 0 + max-width: 50px + max-height: 40px + .info + margin-left: 55px + .title + color: #000 + font-size: 13px + .stats, .stats2 + font-size: 9px + color: LIGHT_FONT_COLOR + +progress[value] + appearance: none + border-radius: 3px + border: none + height: 15px + margin: 2px 0 + position: relative + width: 100% +progress[value]::-webkit-progress-bar + background-color: #DDD + border-radius: 3px + box-shadow: 0 1px 2px rgba(0,0,0,.5) inset +progress[value]::-webkit-progress-value + position: relative + background-size: 40px 15px, 100% 100%, 100% 100% + border-radius: 3px + animation: animate-stripes 2s linear infinite +::-webkit-progress-value + background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), + linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0.2)), + linear-gradient(left, #09c, #0BF) + diff --git a/css/util.styl b/css/util.styl new file mode 100644 index 0000000..08785bd --- /dev/null +++ b/css/util.styl @@ -0,0 +1,6 @@ +.clearfix:before, .clearfix:after + content: "" + display: table + +.clearfix:after + clear: both
\ No newline at end of file @@ -1,5 +1,19 @@ +var $ = require('jquery') var key = require('keymaster') module.exports = function () { - + setupWindow() } + +function setupWindow () { + $('.system .close').on('click', function () { + console.log('CLOSE') + chrome.app.window.current().close() + }) + $('.system .minimize').on('click', function () { + chrome.app.window.current().minimize() + }) + $('.system .maximize').on('click', function () { + chrome.app.window.current().maximize() + }) +}
\ No newline at end of file diff --git a/package.json b/package.json index 7d4059c..95b5d9a 100644 --- a/package.json +++ b/package.json @@ -30,10 +30,13 @@ "browserify": "3.x", "browserify-shim": "~3.2.2", "chrome-portfinder": "~0.2.4", + "font-awesome": "git://github.com/FortAwesome/Font-Awesome", "hat": "0.0.3", "inherits": "~2.0.1", "jquery": "~2.1.0", + "keymaster": "git://github.com/feross/keymaster", "magnet-uri": "1.x", + "nib": "~1.0.2", "read-torrent": "~0.2.0", "speedometer": "~0.1.2", "stylus": "~0.42.2" @@ -59,10 +62,10 @@ "url": "git://github.com/feross/webtorrent.git" }, "scripts": { - "build-css": "stylus css/main.styl -o chrome/ -c", + "build-css": "stylus -u nib css/main.styl -o chrome/ -c && ./bin/post-build.js", "build-js": "browserify --debug index.js > chrome/bundle.js", "build": "npm run build-js && npm run build-css", - "watch-css": "stylus css/main.styl -o chrome/ -w", + "watch-css": "stylus -u nib css/main.styl -o chrome/ -w", "watch-js": "watchify index.js -o chrome/bundle.js -dv", "watch": "npm run watch-js & npm run watch-css", "start": "npm run build && ./bin/start.js", |
