GitHub issue #241 -- and also some appearance updates. Eventually this might get replaced by a native Mac app.

ui/ZeroTierNetwork.jsx

@@ -4,19 +4,17 @@ var ZeroTierNetwork = React.createClass({
 	},
 
 	leaveNetwork: function(event) {
-		if (confirm("Are you sure you want to leave this network?")) {
-			Ajax.call({
-				url: 'network/'+this.props.nwid+'?auth='+this.props.authToken,
-				cache: false,
-				type: 'DELETE',
-				success: function(data) {
-					if (this.props.onNetworkDeleted)
-						this.props.onNetworkDeleted(this.props.nwid);
-				}.bind(this),
-				error: function(error) {
-				}.bind(this)
-			});
-		}
+		Ajax.call({
+			url: 'network/'+this.props.nwid+'?auth='+this.props.authToken,
+			cache: false,
+			type: 'DELETE',
+			success: function(data) {
+				if (this.props.onNetworkDeleted)
+					this.props.onNetworkDeleted(this.props.nwid);
+			}.bind(this),
+			error: function(error) {
+			}.bind(this)
+		});
 		event.preventDefault();
 	},
 

ui/ZeroTierNode.jsx

@@ -122,7 +122,6 @@ var ZeroTierNode = React.createClass({
 	},
 
 	componentDidMount: function() {
-		this.tabIndex = 0;
 		this.updateAll();
 		this.updateIntervalId = setInterval(this.updateAll,2500);
 	},
@@ -130,74 +129,19 @@ var ZeroTierNode = React.createClass({
 		clearInterval(this.updateIntervalId);
 	},
 	render: function() {
-		/* We implement tabs in a very simple way here with a React JSX conditional. The tabIndex
-		 * local variable indicates the tab, and switching it determines which set of things we
-		 * render in the main middle portion. On tab switch calls forceUpdate(). */
 		return (
 			<div className="zeroTierNode">
-				<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>
 				<div className="middle"><div className="middleCell">
 					<div className="middleScroll">
-						{
-							(this.tabIndex === 1) ? (
-								<div className="peers" key="_peers">
-									<div className="peerHeader" key="_peersHeader">
-										<div className="f">Address</div>
-										<div className="f">Version</div>
-										<div className="f">Latency</div>
-										<div className="f">Data&nbsp;Paths</div>
-										<div className="f">Last&nbsp;Unicast</div>
-										<div className="f">Last&nbsp;Multicast</div>
-										<div className="f">Role</div>
-									</div>
-									{
-										this.state._peers.map(function(peer) {
-											return (
-												<div className="peer" key={peer['address']}>
-													<div className="f zeroTierAddress">{peer['address']}</div>
-													<div className="f">{(peer['version'] === '-1.-1.-1') ? '-' : peer['version']}</div>
-													<div className="f">{peer['latency']}</div>
-													<div className="f">
-														{
-															(peer['paths'].length === 0) ? (
-																<div className="peerPath"></div>
-															) : (
-																<div>
-																{
-																	peer['paths'].map(function(path) {
-																		var cn = ((path.active)||(path.fixed)) ? (path.preferred ? 'peerPathPreferred' : 'peerPathActive') : 'peerPathInactive';
-																		return (
-																			<div className={cn}>{path.address}&nbsp;&nbsp;{this.ago(path.lastSend)}/{this.ago(path.lastReceive)}</div>
-																		);
-																	}.bind(this))
-																}
-																</div>
-															)
-														}
-													</div>
-													<div className="f">{this.ago(peer['lastUnicastFrame'])}</div>
-													<div className="f">{this.ago(peer['lastMulticastFrame'])}</div>
-													<div className="f">{peer['role']}</div>
-												</div>
-											);
-										}.bind(this))
-									}
-								</div>
-							) : (
-								<div className="networks" key="_networks">
-									{
-										this.state._networks.map(function(network) {
-											network['authToken'] = this.props.authToken;
-											network['onNetworkDeleted'] = this.handleNetworkDelete;
-											return React.createElement('div',{className: 'network',key: network.nwid},React.createElement(ZeroTierNetwork,network));
-										}.bind(this))
-									}
-								</div>
-							)
-						}
+						<div className="networks" key="_networks">
+							{
+								this.state._networks.map(function(network) {
+									network['authToken'] = this.props.authToken;
+									network['onNetworkDeleted'] = this.handleNetworkDelete;
+									return React.createElement('div',{className: 'network',key: network.nwid},React.createElement(ZeroTierNetwork,network));
+								}.bind(this))
+							}
+						</div>
 					</div>
 				</div></div>
 				<div className="bottom">

ui/zerotier.css

@@ -25,34 +25,6 @@ html,body {
 	display: table;
 }
 
-.zeroTierNode > .top {
-	width: 100%;
-	overflow: hidden;
-	display: table-row;
-	white-space: nowrap;
-	background: #234447;
-	color: #ffffff;
-	padding: 0;
-	margin: 0;
-}
-.zeroTierNode > .top button {
-	display: inline-block;
-	padding: 0.25rem 0.75rem 0.25rem 0.75rem;
-	color: #ffffff;
-	margin: 0;
-	border: 0;
-	outline: none;
-	background: #234447;
-	font-size: 12pt;
-	cursor: pointer;
-}
-.zeroTierNode > .top button:hover {
-	background: #91a2a3;
-}
-.zeroTierNode > .top button:disabled {
-	background: #91a2a3;
-}
-
 .zeroTierNode > .middle {
 	width: 100%;
 	height: 100%;
@@ -65,6 +37,7 @@ html,body {
 	width: 100%;
 	height: 100%;
 	display: table-cell;
+	border-bottom: 1px solid #000000;
 }
 .zeroTierNode > .middle > .middleCell > .middleScroll {
 	display: block;
@@ -87,76 +60,19 @@ html,body {
 	border-collapse: collapse;
 }
 .zeroTierNode > .middle > .middleCell > .middleScroll > .networks > .network {
-	display: inline-block;
+	display: block;
+	border-top: 0.12rem solid #dddddd;
+	border-bottom: 0.12rem solid #dddddd;
 	padding: 0.25rem;
-	margin: 0.25rem 0 0 1%;
-	min-width: 31%;
-	max-width: 98%;
-	border: 1px solid #234447;
 	background: #ffffff;
 }
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers {
-	display: table;
-	width: 100%;
-	margin: 0;
-	border-collapse: collapse;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer {
-	width: 100%;
-	display: table-row;
-	background: #ffffff;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(odd) {
-	background: #f3f3f3;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer:nth-child(even) {
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathActive {
-	font-size: 8pt;
-	color: #555555;
-	font-style: italic;
-	font-family: monospace;
-	white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathPreferred {
-	font-size: 8pt;
-	color: #000000;
-	font-family: monospace;
-	white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer .peerPathInactive {
-	font-size: 8pt;
-	font-family: monospace;
-	color: #aaaaaa;
-	font-style: italic;
-	text-decoration: line-through;
-	white-space: nowrap;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peer > .f {
-	display: table-cell;
-	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
-	font-size: 8pt;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader {
-	width: 100%;
-	font-size: 8pt;
-	display: table-row;
-	background: #ffffff;
-	border-bottom: 1px solid #000000;
-}
-.zeroTierNode > .middle > .middleCell > .middleScroll > .peers > .peerHeader > .f {
-	display: table-cell;
-	font-size: 8pt;
-	padding: 0.05rem 0.15rem 0.05rem 0.15rem;
-	font-weight: bold;
-}
 
 .zeroTierNode > .bottom {
 	font-size: 12pt;
 	width: 100%;
 	overflow: hidden;
 	display: table-row;
-	background: #234447;
+	background: #000000;
 	color: #ffffff;
 }
 .zeroTierNode > .bottom > .left {
@@ -233,7 +149,7 @@ html,body {
 .zeroTierNetwork .networkInfo .networkId {
 	font-size: 11pt;
 	font-family: monospace;
-	color: #91a2a3;
+	color: #000000;
 }
 .zeroTierNetwork .networkInfo .networkName {
 	padding: 0 0 0 1rem;
@@ -271,7 +187,7 @@ html,body {
 .zeroTierNetwork .leaveNetworkButton {
 	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 	margin: 0.25rem 0 0 0;
-	font-size: 10pt;
+	font-size: 9pt;
 	background: #ffffff;
 	outline: none;
 	background: #ffb354;