ExternalVendorCode/ZeroTierOne
1
0
Fork 0
mirror of https://github.com/zerotier/ZeroTierOne.git synced 2025-04-14 06:16:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes for Windows WebControl.

Browse Source
This commit is contained in:
Adam Ierymenko 2015-05-08 14:47:01 -07:00
parent 8e888f8df9
commit 257187a284
6 changed files with 89 additions and 56 deletions

1
ui/Makefile

@ -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

2
ui/ZeroTierNetwork.jsx

@ -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>
);
}

13
ui/ZeroTierNode.jsx

@ -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>

55
ui/index.html

@ -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>

70
ui/zerotier.css

@ -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;
}

4
ui/ztui.min.js vendored

File diff suppressed because one or more lines are too long