fixed rpc and modal issues

angular.html

@@ -12,7 +12,9 @@
 
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/font-awesome.css">
+
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/download.css">
 
 
   <!-- external javascript dependencies -->

css/download.css

@@ -0,0 +1,82 @@
+.download-name {
+  font-size: 12px;
+}
+.active-download {
+  width: 100%;
+  margin-bottom: 10px;
+  background-color: rgb(245, 245, 245);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.waiting-download {
+  width: 100%;
+  margin-bottom: 10px;
+  background-color: rgb(245, 245, 245);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.stopped-download {
+  width: 100%;
+  margin-bottom: 10px;
+  background-color: rgb(245, 245, 245);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.stats {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+.stats li {
+  padding: 5px;
+}
+
+.download-controls {
+  width: 60px;
+}
+.download-controls .btn-group {
+  height: 70px;
+  width: 100%;
+  float: right;
+}
+.download-controls .btn-group .btn:nth-child(1) {
+  width: 70%;
+}
+.download-controls .btn-group .btn:nth-child(2) {
+  width: 30%;
+}
+
+.download-controls .btn-group .btn {
+  height: 100%;
+}
+.download-controls .btn-group .btn i {
+  height: 100%;
+  font-size: 28px;
+  color: gray;
+}
+.download-overview {
+  padding: 10px;
+  cursor: pointer;
+}
+.download-detail {
+  cursor: pointer;
+}
+.download-detail .stats li {
+  width: 150px;
+  margin-bottom: 5px;
+}
+.download-detail h4 {
+  margin-left: 10px;
+}
+.download-files {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+.download-files li {
+  padding: 5px;
+  margin: 5px;
+}

css/style.css

@@ -1,84 +1,6 @@
-.download-name {
+/* fix modal overflow on low resolutions */
-  font-size: 12px;
+.modal {
-}
+  position: absolute;
-.active-download {
-  width: 100%;
-  margin-bottom: 10px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.waiting-download {
-  width: 100%;
-  margin-bottom: 10px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.stopped-download {
-  width: 100%;
-  margin-bottom: 10px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.stats {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-.stats li {
-  padding: 5px;
-}
-
-.download-controls {
-  width: 60px;
-}
-.download-controls .btn-group {
-  height: 70px;
-  width: 100%;
-  float: right;
-}
-.download-controls .btn-group .btn:nth-child(1) {
-  width: 70%;
-}
-.download-controls .btn-group .btn:nth-child(2) {
-  width: 30%;
-}
-
-.download-controls .btn-group .btn {
-  height: 100%;
-}
-.download-controls .btn-group .btn i {
-  height: 100%;
-  font-size: 28px;
-  color: gray;
-}
-.download-overview {
-  padding: 10px;
-  cursor: pointer;
-}
-.download-detail {
-  cursor: pointer;
-}
-.download-detail .stats li {
-  width: 150px;
-  margin-bottom: 5px;
-}
-.download-detail h4 {
-  margin-left: 10px;
-}
-.download-files {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.download-files li {
-  padding: 5px;
-  margin: 5px;
 }
 @media all and (min-width: 980px) {
   body {

index.html

@@ -12,7 +12,9 @@
 
 	<link rel="stylesheet" href="css/bootstrap.css">
 	<link rel="stylesheet" href="css/font-awesome.css">
+
 	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="css/download.css">
 
 
 	<!-- external javascript dependencies -->

js/connection.js

@@ -79,10 +79,15 @@ var SocketRPC = function(conf) {
     return new SocketRPC();
 
   var rpc = this;
-	rpc.serverConf = conf;
   rpc.initialized = false;
+  rpc.serverConf = conf;
   rpc.handles = [];
   var scheme = rpc.serverConf.encryption ? 'wss' : 'ws';
+
+  if (typeof WebSocket == "undefined")
+    return;
+
+  try {
     rpc.sock = new WebSocket(scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc');
     rpc.sock.onopen = function() {
       rpc.initialized = true;
@@ -104,6 +109,10 @@ var SocketRPC = function(conf) {
         }
       }
     };
+  }
+  catch(ex) {
+    rpc.initialized = false;
+  }
 }
 SocketRPC.prototype = {
   invoke: function(opts) {

js/services/rpc/sockcall.js

@@ -78,10 +78,15 @@ app.factory('$sockcall', ['$_', '$json', '$name', '$utils', function(_, JSON, na
         this.onerror();
       }
 
+      try {
         this.sock = new WebSocket(this.scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc');
         this.sock.onopen = this.onopen;
         this.sock.onclose = this.sock.onerror = this.onerror;
         this.sock.onmessage = this.onmessage;
+      }
+      catch (ex) {
+        // ignoring IE securty exception on local ip addresses
+      }
     },
   };
 }]);