Home Explore Help
Sign In
cpp
/
ZeroTierOne
mirror of https://github.com/zerotier/ZeroTierOne
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Fixes for Windows WebControl.

Adam Ierymenko 10 years ago
parent
8e888f8df9
commit
257187a284
6 changed files with 88 additions and 53 deletions
Split View Show Diff Stats
  1. 1 0
      ui/Makefile
  2. 1 1
      ui/ZeroTierNetwork.jsx
  3. 6 7
      ui/ZeroTierNode.jsx
  4. 39 16
      ui/index.html
  5. 41 29
      ui/zerotier.css
  6. 0 0
      ui/ztui.min.js

+ 1 - 0
ui/Makefile
View File 

@@ -1,5 +1,6 @@
 
 all:
 
 	mkdir -p build
 
 	jsx --target es3 -x jsx . ./build
 
+	rm -f ztui.min.js
 
 	minify build/*.js >>ztui.min.js
 
 	rm -rf build

+ 1 - 1
ui/ZeroTierNetwork.jsx
View File 

@@ -67,7 +67,7 @@ var ZeroTierNetwork = React.createClass({
 
 						</div>
 
 					</div>
 
 				</div>
 
-				<button className="leaveNetworkButton" onClick={this.leaveNetwork}>Leave&nbsp;Network</button>
 
+				<button type="button" className="leaveNetworkButton" onClick={this.leaveNetwork}>Leave&nbsp;Network</button>
 
 			</div>
 
 		);
 
 	}

+ 6 - 7
ui/ZeroTierNode.jsx
View File 

@@ -96,7 +96,7 @@ var ZeroTierNode = React.createClass({
 
 	},
 
 	handleNetworkIdEntry: function(event) {
 
 		this.networkInputElement = event.target;
 
-		var nid = event.target.value;
 
+		var nid = this.networkInputElement.value;
 
 		if (nid) {
 
 			nid = nid.toLowerCase();
 
 			var nnid = '';
 
@@ -105,10 +105,10 @@ var ZeroTierNode = React.createClass({
 
 					nnid += nid.charAt(i);
 
 			}
 
 			this.networkToJoin = nnid;
 
-			event.target.value = nnid;
 
+			this.networkInputElement.value = nnid;
 
 		} else {
 
 			this.networkToJoin = '';
 
-			event.target.value = '';
 
+			this.networkInputElement.value = '';
 
 		}
 
 	},
 
 
@@ -138,9 +138,8 @@ var ZeroTierNode = React.createClass({
 
 				<div className="top">&nbsp;&nbsp;
 
 					<button disabled={this.tabIndex === 0} onClick={function() {this.tabIndex = 0; this.forceUpdate();}.bind(this)}>Networks</button>
 
 					<button disabled={this.tabIndex === 1} onClick={function() {this.tabIndex = 1; this.forceUpdate();}.bind(this)}>Peers</button>
 
-					<div className="logo">&#x23c1;&nbsp;</div>
 
 				</div>
 
-				<div className="middle">
 
+				<div className="middle"><div className="middleCell">
 
 					<div className="middleScroll">
 
 						{
 
 							(this.tabIndex === 1) ? (
 
@@ -198,13 +197,13 @@ var ZeroTierNode = React.createClass({
 
 							)
 
 						}
 
 					</div>
 
-				</div>
 
+				</div></div>
 
 				<div className="bottom">
 
 					<div className="left">
 
 						<span className="statusLine"><span className="zeroTierAddress">{this.state.address}</span>&nbsp;&nbsp;{this.state.online ? 'ONLINE' : 'OFFLINE'}&nbsp;&nbsp;{this.state.version}</span>
 
 					</div>
 
 					<div className="right">
 
-						<form onSubmit={this.joinNetwork}><input type="text" placeholder="  [ Network ID ]" onChange={this.handleNetworkIdEntry} size="16"/><button type="submit">Join</button></form>
 
+						<form onSubmit={this.joinNetwork}><input type="text" maxlength="16" placeholder="[ Network ID ]" onChange={this.handleNetworkIdEntry} size="16"/><button type="button" onClick={this.joinNetwork}>Join</button></form>
 
 					</div>
 
 				</div>
 
 			</div>

+ 39 - 16
ui/index.html
View File 

@@ -1,16 +1,39 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-	<title>ZeroTier One</title>
 
-	<meta charset="utf-8">
 
-	<meta name="viewport" content="width=device-width, initial-scale=1">
 
-	<link rel="stylesheet" href="zerotier.css">
 
-	<script src="simpleajax.min.js"></script>
 
-	<!-- <script src="https://fb.me/react-0.13.2.js"></script> -->
 
-	<script src="react.min.js"></script>
 
-	<script src="ztui.min.js"></script>
 
-</head>
 
-<body><div style="width: 100%; height: 100%;" id="main"></div></body>
 
-<script src="main.js"></script>
 
-</html>
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta http-equiv="X-UA-Compatible" content="IE=edge">

+	<meta charset="utf-8">

+	<meta name="viewport" content="width=device-width, initial-scale=1">

+	<title>ZeroTier One</title>

+	<link rel="stylesheet" href="zerotier.css">

+	<script src="simpleajax.min.js"></script>

+	<!-- <script src="https://fb.me/react-0.13.2.js"></script> -->

+	<script src="react.min.js"></script>

+	<script src="ztui.min.js"></script>

+</head>

+<body><div style="width: 100%; height: 100%;" id="main"></div></body>

+<script src="main.js"></script>

+<script>

+function isIE() {

+	var myNav = navigator.userAgent.toLowerCase();

+	return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;

+}

+var ieVersion = isIE();

+function resizeMiddleScrollClasses() {

+	var elems = document.getElementsByTagName('*'), i;

+	for (i in elems) {

+		if ((' ' + elems[i].className + ' ').indexOf(' middleScroll ') > -1) {

+			elems[i].style.height = (document.body.clientHeight - (elems[i].parentNode.parentNode.previousElementSibling.clientHeight + elems[i].parentNode.parentNode.nextElementSibling.clientHeight)) + "px";

+		}

+	}

+}

+if (ieVersion !== false) {

+	if (ieVersion < 7) {

+		alert("Upgrade Internet Explorer on your system to use this interface. (detected version: " + ieVersion + ")");

+	} else {

+		resizeMiddleScrollClasses();

+		window.onresize = resizeMiddleScrollClasses;

+	}

+}

+</script>

+</html>

+ 41 - 29
ui/zerotier.css
View File 

@@ -20,7 +20,6 @@ html,body {
 
 .zeroTierNode {
 
 	width: 100%;
 
 	height: 100%;
 
-	max-height: 100%;
 
 	padding: 0;
 
 	margin: 0;
 
 	display: table;
 
@@ -36,14 +35,6 @@ html,body {
 
 	padding: 0;
 
 	margin: 0;
 
 }
 
-.zeroTierNode > .top > .logo {
 
-	display: inline-block;
 
-	padding: 0.1em 0 0 0;
 
-	margin: 0;
 
-	font-size: 12pt;
 
-	font-weight: bold;
 
-	float: right;
 
-}
 
 .zeroTierNode > .top button {
 
 	display: inline-block;
 
 	padding: 0.25rem 0.75rem 0.25rem 0.75rem;
 
@@ -63,33 +54,39 @@ html,body {
 
 }
 
 
 .zeroTierNode > .middle {
 
-	height: 100%;
 
 	width: 100%;
 
+	height: 100%;
 
 	padding: 0;
 
 	margin: 0;
 
 	overflow: hidden;
 
 	display: table-row;
 
 }
 
-.zeroTierNode > .middle > .middleScroll {
 
+.zeroTierNode > .middle > .middleCell {
 
+	width: 100%;
 
+	height: 100%;
 
+	display: table-cell;
 
+}
 
+.zeroTierNode > .middle > .middleCell > .middleScroll {
 
 	display: block;
 
 	width: 100%;
 
 	height: 100%;
 
 	padding: 0;
 
 	margin: 0;
 
+	overflow: scroll;
 
 	overflow-x: hidden;
 
 	overflow-y: scroll;
 
 	background: #dddddd;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .networks {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .networks {
 
 	display: block;
 
 	width: 100%;
 
-	padding: 0;
 
+	padding: 0 0 0.25rem 0;
 
 	margin: 0;
 
 	border: 0;
 
 	text-align: left;
 
 	border-collapse: collapse;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .networks > .network {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .networks > .network {
 
 	display: inline-block;
 
 	padding: 0.25rem;
 
 	margin: 0.25rem 0 0 1%;
 
@@ -98,36 +95,36 @@ html,body {
 
 	border: 1px solid #234447;
 
 	background: #ffffff;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers {
 
 	display: table;
 
 	width: 100%;
 
 	margin: 0;
 
 	border-collapse: collapse;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer {
 
 	width: 100%;
 
 	display: table-row;
 
 	background: #ffffff;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer:nth-child(odd) {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(odd) {
 
 	background: #f3f3f3;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer:nth-child(even) {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(even) {
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathActive {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathActive {
 
 	font-size: 10pt;
 
 	color: #555555;
 
 	font-style: italic;
 
 	font-family: monospace;
 
 	white-space: nowrap;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathPreferred {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathPreferred {
 
 	font-size: 10pt;
 
 	color: #000000;
 
 	font-family: monospace;
 
 	white-space: nowrap;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer .peerPathInactive {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathInactive {
 
 	font-size: 10pt;
 
 	font-family: monospace;
 
 	color: #aaaaaa;
 
@@ -135,18 +132,18 @@ html,body {
 
 	text-decoration: line-through;
 
 	white-space: nowrap;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peer > .f {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer > .f {
 
 	display: table-cell;
 
 	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
 
 	font-size: 10pt;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peerHeader {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader {
 
 	width: 100%;
 
 	display: table-row;
 
 	background: #ffffff;
 
 	border-bottom: 1px solid #000000;
 
 }
 
-.zeroTierNode > .middle > .middleScroll > .peers > .peerHeader > .f {
 
+.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader > .f {
 
 	display: table-cell;
 
 	font-size: 10pt;
 
 	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
 
@@ -154,6 +151,7 @@ html,body {
 
 }
 
 
 .zeroTierNode > .bottom {
 
+	font-size: 12pt;
 
 	width: 100%;
 
 	overflow: hidden;
 
 	display: table-row;
 
@@ -165,17 +163,24 @@ html,body {
 
 	white-space: nowrap;
 
 	float: left;
 
 	padding: 0 0 0 0.5rem;
 
+	font-size: 12pt;
 
+	height: 100%;
 
 }
 
 .zeroTierNode > .bottom > .left > .statusLine {
 
 	font-family: monospace;
 
 	white-space: nowrap;
 
 	font-size: 12pt;
 
+	height: 100%;
 
 }
 
 .zeroTierNode > .bottom > .right {
 
-	background: #91a2a3;
 
 	text-align: right;
 
+	height: 100%;
 
 	white-space: nowrap;
 
 	float: right;
 
+	font-size: 12pt;
 
+}
 
+.zeroTierNode > .bottom > .right form {
 
+	height: 100%;
 
 }
 
 .zeroTierNode > .bottom > .right input {
 
 	font-family: monospace;
 
@@ -183,10 +188,13 @@ html,body {
 
 	background: #ffffff;
 
 	color: #000000;
 
 	outline: none;
 
-	border: 1px solid #234447;
 
+	outline-style: none;
 
+	box-shadow: 0;
 
+	border: 0;
 
 	margin: 0;
 
-	padding: 0.05rem 0.25rem 0.05rem 0.25rem;
 
-	display: inline-block;
 
+	padding: 0 0.25rem 0 0.25rem;
 
+	display: inline;
 
+	height: 100%;
 
 }
 
 .zeroTierNode > .bottom > .right button {
 
 	display: inline-block;
 
@@ -196,10 +204,14 @@ html,body {
 
 	color: #000000;
 
 	margin: 0;
 
 	padding: 0.05rem 0.75rem 0.05rem 0.75rem;
 
+	outline: none;
 
+	outline-style: none;
 
 	height: 100%;
 
 }
 
 .zeroTierNode > .bottom > .right button:hover {
 
 	cursor: pointer;
 
+	outline: none;
 
+	outline-style: none;
 
 	border: 1px solid #000000;
 
 }
 
 
@@ -217,7 +229,7 @@ html,body {
 
 	font-size: 12pt;
 
 }
 
 .zeroTierNetwork .networkInfo .networkId {
 
-	font-size: 10pt;
 
+	font-size: 11pt;
 
 	font-family: monospace;
 
 	color: #91a2a3;
 
 }

File diff suppressed because it is too large
+ 0 - 0
ui/ztui.min.js


Some files were not shown because too many files changed in this diff