Tor status, Topright fadein on hover

Author: shortcutme

content.json

@@ -32,8 +32,8 @@
    "size": 2700
   }, 
   "js/all.js": {
-   "sha512": "9eb0331718696fa28a4a0e3deabca0d85496a54ca0826f3c91a0d37daa28e098", 
-   "size": 128969
+   "sha512": "d2dea1d04750a1cd80fd859751e41aba844fa6c23d065405391e65be1a1968a8", 
+   "size": 130828
   }, 
   "test/jquery.min.js": {
    "sha512": "eda31b5c7d371d4b3acced51fa92f27a417515317cf437aae09a47c3acc8a36b", 
@@ -53,10 +53,10 @@
   }
  }, 
  "ignore": "(js|css)/(?!all.(js|css))", 
- "modified": 1449780690.029, 
+ "modified": 1450206105.502, 
  "sign": [
-  42358599513687854655700957130861396358086955517123500015244897460190619166669, 
-  27200718880115340847505557693050839493998194776739787970383068787553748692290
+  51257551727086594000582199816561591646916335532896571336997247307418689992883, 
+  94018707298280014245012871574013121361285296769815448052134087753541882097536
  ], 
  "signers_sign": null, 
  "signs_required": 1, 

css/ZeroHello.css

@@ -40,28 +40,30 @@ ul, li { margin: 0px; padding: 0px; list-style-type: none }
 
 
 /* Version info */
-.topright { float: right; margin-right: 80px; margin-top: 2px; text-align: right; font-size: 12px; text-transform: uppercase; color: #A99D9B; opacity: 0; transition: all 1s }
+.topright { float: right; margin-right: 80px; margin-top: 2px; text-align: right; font-size: 12px; text-transform: uppercase; color: #6F6B6B; opacity: 0; transition: all 1s }
+.topright:hover { opacity: 1 !important }
+.topright a { color: #6F6B6B; transition: all 0.3s }
 .version.latest, .version.current { padding: 2px 5px }
-.version a { color: #A99D9B; text-transform: none }
+.version a { color: #6F6B6B; text-transform: none }
 .version.latest { display: inline-block }
 .version.latest.new { background-color: #FFF85F; margin-right: -3px; display: none }
 
-.port { padding: 5px }
+.status { padding: 5px }
+
 .port a { transition: all 1s; background-position: -20px center }
-.port.closed a { color: #C58276 }
-.port.opened a { color: #24A26E }
+.port.closed a { color: #DC4F36 }
+.port.opened a, .status .ok { color: #00B16A }
 .port.loading a { color: rgba(0,0,0,0); background: transparent url(../img/loading.gif) no-repeat center center }
 
 .donate { padding: 5px; }
-.donate a { color: #A99D9B }
 .donate .heart { color: #DA3D32; font-family: Tahoma, Arial }
 
 .plugin-multiuser { display: none }
 .plugin-uipassword { display: none }
 .identicon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-bottom: 2px; margin-right: 10px; margin-left: 5px; border: 1px solid #F0F0F0 }
 .button-logout { margin-top: -2px }
 .button-logout:hover { color: black }
-.button-update { margin-top: 10px; color: black; display: none }
+.button-update { margin-top: 10px; color: black !important; display: none }
 .broken-autoupdate { display: inline-block; padding-top: 5px; color: #666; display: none }
 .broken-autoupdate a { color: black }
 
@@ -99,7 +101,7 @@ ul, li { margin: 0px; padding: 0px; list-style-type: none }
 .site .notify.success { background-color: #00B16A }
 
 .site h3 { font-size: 50px; line-height: 47px; padding-bottom: 7px; overflow: hidden; text-overflow: ellipsis; clear: both; }
-.site h3.long { font-size: 40px }
+.site h3.long { font-size: 24px; line-height: 29px }
 .site .bottom { bottom: 8px }
 .site .description { overflow: hidden; text-overflow: ellipsis; max-height: 2.5em; }
 

css/all.css

@@ -16,9 +16,12 @@
  <div class="plugin-multiuser">Current user: <a class='identicon' href='#Show+Private+key' title='Show private key'></a><a href="#Logout" class="button button-logout">Logout</a></div>
  <div class="plugin-uipassword"><a href="#Logout" class="button button-logout">Logout</a></div>
  <div class="donate"><span class='heart'>♥</span> <a href="http://zeronet.readthedocs.org/en/latest/help_zeronet/donate/" target="_blank">Help to keep this project alive</a></div>
- <div class="port closed" style="display: none">Port: <a href="#Re+check">Closed</a></div>
+ <div class='status'>
+  <span class="port closed" style="display: none">Port: <a href="#Re+check" title='Re-check'>Closed</a></span>
+  <span class="tor disabled" style="display: none">Tor: <span>Disabled</span></span>
+ </div>
  <div class="version current">Version: <a href="https://github.com/HelloZeroNet/ZeroNet" target="_top">Unknown</a></div>
- <div class="version latest new" title="New update available">Latest: <a href="https://github.com/HelloZeroNet/ZeroNet" target="_top">0.3.4</a></div>
+ <div class="version latest new" title="New update available">Latest: <a href="https://github.com/HelloZeroNet/ZeroNet" target="_top">0.3.5</a></div>
  <br><a href="#Update" class="button button-update button-submit">Update to new version</a>
  <br><span class='broken-autoupdate'></span>
 </div>

index.html

@@ -241,6 +241,7 @@ class ZeroHello extends ZeroFrame
 	reloadServerInfo: ->
 		@cmd "serverInfo", {}, (server_info) =>
 			@server_info = server_info
+			$(".topright").css("opacity", 0.5)
 
 			# Check verion info
 			version = server_info.version
@@ -251,6 +252,7 @@ class ZeroHello extends ZeroFrame
 				$(".version.latest").css "display", "none"
 				$(".button-update").css "display", "none"
 			else
+				$(".topright").css("opacity", 1)
 				$(".version.latest").css "display", "inline-block"
 				$(".button-update").css "display", "inline-block"
 				if parseInt(version.replace(/[^0-9]/g, "0")) == 207 # Auto update broken
@@ -260,15 +262,14 @@ class ZeroHello extends ZeroFrame
 					$(".broken-autoupdate").css "display", "block"
 					$(".broken-autoupdate").html "It's possible that ZeroNet will not comes back automatically<br>after the update process. In this case please start it manually."
 
-			$(".topright").css("opacity", 1)
 
 			# Port info
 			if server_info.ip_external
 				$(".port").removeClass("closed").addClass("opened")
 				$(".port a").text("opened")
 			else
-				$(".port").removeClass("opened").addClass("closed").css("display", "block")
-				$(".port a").text("closed")
+				$(".port").removeClass("opened").addClass("closed").css("display", "initial")
+				$(".port a").text("closed").attr("title", "(Re-check port #{server_info.fileserver_port})")
 			$(".port a").off("click").on "click", =>
 				$(".port").addClass("loading")
 				@cmd "serverPortcheck", [], (res) =>
@@ -278,6 +279,12 @@ class ZeroHello extends ZeroFrame
 					@log "Port open result:", res
 					@reloadServerInfo()
 
+			# Tor status
+			if server_info.tor_status
+				$(".tor").css("display", "initial")
+				title = server_info.tor_status.replace(/.*\((.*)\)/, "$1")
+				$(".tor span").html server_info.tor_status.replace(/\(.*\)/, "").replace("OK", "<span class='ok' title='#{title}'>OK</span>")
+
 			# Multiuser info
 			if server_info.multiuser
 				$(".plugin-multiuser").css("display", "block")

js/ZeroHello.coffee

@@ -82,7 +82,6 @@
 }).call(this);
 
 
-
 /* ---- data/1EU1tbG9oC1A8jz2ouVwGZyQ5asrNsE4Vr/js/lib/Utils.coffee ---- */
 
 
@@ -1288,8 +1287,9 @@ jQuery.extend( jQuery.easing,
     ZeroHello.prototype.reloadServerInfo = function() {
       return this.cmd("serverInfo", {}, (function(_this) {
         return function(server_info) {
-          var imagedata, rev, version;
+          var imagedata, rev, title, version;
           _this.server_info = server_info;
+          $(".topright").css("opacity", 0.5);
           version = server_info.version;
           if (!version) {
             version = "Unknown, please update";
@@ -1304,6 +1304,7 @@ jQuery.extend( jQuery.easing,
             $(".version.latest").css("display", "none");
             $(".button-update").css("display", "none");
           } else {
+            $(".topright").css("opacity", 1);
             $(".version.latest").css("display", "inline-block");
             $(".button-update").css("display", "inline-block");
             if (parseInt(version.replace(/[^0-9]/g, "0")) === 207) {
@@ -1314,13 +1315,12 @@ jQuery.extend( jQuery.easing,
               $(".broken-autoupdate").html("It's possible that ZeroNet will not comes back automatically<br>after the update process. In this case please start it manually.");
             }
           }
-          $(".topright").css("opacity", 1);
           if (server_info.ip_external) {
             $(".port").removeClass("closed").addClass("opened");
             $(".port a").text("opened");
           } else {
-            $(".port").removeClass("opened").addClass("closed").css("display", "block");
-            $(".port a").text("closed");
+            $(".port").removeClass("opened").addClass("closed").css("display", "initial");
+            $(".port a").text("closed").attr("title", "(Re-check port " + server_info.fileserver_port + ")");
           }
           $(".port a").off("click").on("click", function() {
             $(".port").addClass("loading");
@@ -1333,6 +1333,11 @@ jQuery.extend( jQuery.easing,
               return _this.reloadServerInfo();
             });
           });
+          if (server_info.tor_status) {
+            $(".tor").css("display", "initial");
+            title = server_info.tor_status.replace(/.*\((.*)\)/, "$1");
+            $(".tor span").html(server_info.tor_status.replace(/\(.*\)/, "").replace("OK", "<span class='ok' title='" + title + "'>OK</span>"));
+          }
           if (server_info.multiuser) {
             $(".plugin-multiuser").css("display", "block");
             imagedata = new Identicon(server_info["master_address"], 25).toString();
@@ -1419,4 +1424,4 @@ jQuery.extend( jQuery.easing,
 
   window.zero_hello = new ZeroHello();
 
-}).call(this);
+}).call(this);