merge #225, adds torrent upload (via upload button and drag and drop)…

…, add SPACE pause/play, auto format a few files
jpillora · Apr 27, 2018 · 1a741e3 · 1a741e3 · ti · Apr 28, 2018
1 parent bada577
commit 1a741e3
Show file tree

Hide file tree

Showing 10 changed files with 427 additions and 293 deletions.
diff --git a/static/files.go b/static/files.go
diff --git a/static/files/css/app.css b/static/files/css/app.css
@@ -140,3 +140,46 @@ table.tcld .name {
 .uploads .upload .size {
   width: 100px;
 }
+
+[onfileclick] {
+  cursor: pointer;
+}
+
+[ondropfile] {
+  position: relative;
+}
+
+[ondropfile] .file-drop-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 102%;
+  margin-top: 1%;
+  margin-left: -1%;
+  pointer-events: none;
+  background: rgba(173, 216, 230, 0.5);
+  opacity: 0;
+  transition: opacity ease 0.3s;
+  z-index: 5;
+  overflow: hidden;
+}
+
+[ondropfile] .file-drop-cover.shown {
+  opacity: 1;
+}
+
+[ondropfile] .file-drop-cover .dots {
+  height: 100%;
+  border: 1px dotted #333;
+  border-radius: 3px;
+}
+
+[ondropfile] .file-drop-cover .dots .msg {
+  position: absolute;
+  text-align: center;
+  font-size: 2em;
+  left: 0;
+  top: 30px;
+  width: 100%;
+}
diff --git a/static/files/css/sections/omni.css b/static/files/css/sections/omni.css
@@ -1,82 +1,64 @@
-
-
 .omni {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 
 .omni .buttons {
-	margin-top: 5px;
-	text-align: center;
+  margin-top: 5px;
+  text-align: center;
 }
 
 .omni .results {
-	max-height: 200px;
-	overflow-y: auto;
-	border: 1px solid rgba(0,0,0,.15);
-	margin-top: 5px;
-	border-radius: 4px;
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  margin-top: 5px;
+  border-radius: 4px;
 }
 
 .omni .results .name {
-	/*font-size: .75em;*/
-	text-align: right;
+  /*font-size: .75em;*/
+  text-align: right;
 }
 
 .omni .results .users {
-	width: 75px;
-	text-align: center;
+  width: 75px;
+  text-align: center;
 }
 .omni .results .seeds {
-	color: #5bbd72;
+  color: #5bbd72;
 }
 
 .omni .results .peers {
-	color: rgb(176, 127, 20);
+  color: rgb(176, 127, 20);
 }
 
 .omni .results .loadmore {
-	text-align: right;
+  text-align: right;
 }
 
 .omni .search select {
-	padding: 0 10px;
-	margin-top: 0px;
-	border-radius: 4px;
-	background: #D58686;
-	color: #888;
-	border: none;
-	outline: none;
-	height: 31px;
-	display: inline-block;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	cursor: pointer;
+  padding: 0 10px;
+  margin-top: 0px;
+  border-radius: 4px;
+  background: #d58686;
+  color: #888;
+  border: none;
+  outline: none;
+  height: 31px;
+  display: inline-block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
 }
 .omni .form {
-	margin-top: 5px;
-}
-
-/*omni upload input icon*/
-
-.upload-label {
-	padding: 10px;
-	cursor: pointer;
-}
-.upload-label .icon {
-	margin-top: 8px;
-}
-.upload-icon{
-	z-index: 99;
-	position: absolute;
-	right: 0;
-}
-.upload-icon input {
-	display: none;
+  margin-top: 5px;
 }
 
-.omni input.dragging {
-	opacity: 0.5;
-	background: lightblue;
-	z-index: 100;
+.icon-wrapper {
+  z-index: 6;
+  position: absolute;
+  right: 0;
+  padding: 10px;
+  cursor: pointer;
 }
diff --git a/static/files/index.html b/static/files/index.html
@@ -15,11 +15,11 @@
 </head>
 
 <body class="app">
-	<div ng-cloak class="cage">
+	<div ng-cloak class="cage" ondropfile="uploadTorrent($event)" placeholder="Drop torrent files here">
 		<div ng-if="!connected" class="connect-warning ui inverted vertical masthead center aligned segment">
 			<div class="ui text container">
 				<h1 class="ui inverted header">
-					Disconnected
+					{{ hasConnected ? 'Disconnected' : 'Connecting' }}
 				</h1>
 				<h1 class="ui inverted header">
 					<i class="red lightning icon"></i>

diff --git a/static/files/js/config-controller.js b/static/files/js/config-controller.js
@@ -7,6 +7,7 @@ app.controller("ConfigController", function($scope, $rootScope, storage, api) {
     $scope.edit = b === undefined ? !$scope.edit : b;
   };
   $scope.submitConfig = function() {
-    api.configure($rootScope.state.Config);
+    var data = JSON.stringify($rootScope.state.Config);
+    api.configure(data);
   };
 });