#1471: add "about" and "disconnect" in "xpra" menu

git-svn-id: https://xpra.org/svn/Xpra/trunk@18726 3bb7dfac-3a0b-4e04-842a-767bc560f471
Xpra-org · Mar 15, 2018 · 3a64594 · 3a64594
1 parent 1e9e313
commit 3a64594
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 9 deletions.
diff --git a/src/html5/css/client.css b/src/html5/css/client.css
@@ -263,6 +263,64 @@ div.windowinfocus {
 	font-weight: 300;
 	transform-origin: center center;
 }
+
+.menu-block {
+	position: relative;
+	display: inline-block;
+}
+
+.menu-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 140px;
+    overflow: auto;
+    font-size: 13px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.menu-content a {
+    color: black;
+    padding: 8px 12px;
+    text-decoration: none;
+    display: block;
+}
+.menu-block a:hover {
+	background-color: #ddd;
+}
+
+.menu-button {
+    background-color: #3498DB;
+    color: white;
+    padding: 14px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+#about {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	background-color: #eee;
+	border: 2px solid #ddd;
+	display: none;
+	z-index: 1000000;
+	position: fixed;
+	margin: auto;
+	width: 640px;
+	height: 280px;
+	top: 50%;
+	left: 50%;
+	margin-left: -320px;
+	margin-top: -140px;
+	text-align: center;
+	padding: 20px;
+}
+
+.menu-button:hover, .menu-button:focus {
+    background-color: #2980B9;
+}
+
 @media screen {
 	.notifications .alert.visible {
 		margin-top: 0;

diff --git a/src/html5/index.html b/src/html5/index.html
@@ -3,7 +3,7 @@
 	<head>
 
 		<!--
-			Copyright (c) 2013-2017 Antoine Martin <[email protected]>
+			Copyright (c) 2013-2018 Antoine Martin <[email protected]>
 			Copyright (c) 2014 Joshua Higgins <[email protected]>
 			Licensed under MPL 2.0
  		-->
@@ -55,12 +55,34 @@
 
 		<div id="screen" style="width: 100%; height:100%;">
 			<div id="top_bar">
+				<div class="menu-block">
+					<button onclick="show_menu('xpra_menu', event);" class="menu-button">Xpra <span class="caret"></span></button>
+					<div id="xpra_menu" class="menu-content">
+						<a href="#" onclick="show_about(event); return false">About</a>
+						<a href="#" onclick="client.close(); return false">Disconnect</a>
+					</div>
+				</div>
 			</div>
 		</div>
 
 		<div class="notifications">
 		</div>
 
+		<div id="about">
+			<h2>Xpra HTML5 Client</h2>
+			<h3>Version 2.3</h3>
+			<span>
+				Copyright (c) 2013-2018 Antoine Martin &lt;[email protected]&gt;
+				<br />
+				Copyright (c) 2014 Joshua Higgins &lt;[email protected]&gt;
+			</span>
+			<br />
+			<br />
+			<span class="info">
+			For more information, see <a href="https://xpra.org/trac/wiki/HTML5">xpra HTML5 wiki</a>.
+			</span>
+		</div>
+
 	    <div>
 		    <textarea id="pasteboard" onblur="this.focus()" autofocus style="display: block; position: absolute; left: -99em;"></textarea>
 	    </div>
@@ -76,6 +98,22 @@
 			var cdebug = console.debug;
 			var clog = console.log;
 
+			function show_menu(menu_id, event) {
+				$("#"+menu_id).toggle();
+				event.stopPropagation();
+			}
+
+			$("body").click(function() {
+				$('.menu-content').hide();
+				$('#about').hide();
+			});
+
+			function show_about(event) {
+				$('#about').show();
+				$('.menu-content').hide();
+				event.stopPropagation();
+			}
+
 			function init_client() {
 				if (typeof jQuery == 'undefined') {
 					window.alert("Incomplete Xpra HTML5 client installation: jQuery is missing, cannot continue.");
@@ -454,8 +492,9 @@
 				screen.addEventListener('drop', handleFileSelect, false);
 			}
 
+			var client = null;
 			$(document).ready(function() {
-				var client = init_client();
+				client = init_client();
 			    client.connect();
 
 			    //from now on, send log and debug to client function

diff --git a/src/html5/js/Client.js b/src/html5/js/Client.js
@@ -1533,22 +1533,26 @@ XpraClient.prototype._process_close = function(packet, ctx) {
 		ctx.do_reconnect();
 	}
 	else {
-		ctx.close_windows();
-		ctx.close_audio();
-		ctx.clear_timers();
-		ctx.close_protocol();
-		// call the client's close callback
-		ctx.callback_close(ctx.disconnect_reason);
+		ctx.close();
 	}
 }
 
+XpraClient.prototype.close = function() {
+	this.close_windows();
+	this.close_audio();
+	this.clear_timers();
+	this.close_protocol();
+	// call the client's close callback
+	this.callback_close(this.disconnect_reason);
+}
+
 XpraClient.prototype._process_disconnect = function(packet, ctx) {
 	// save the disconnect reason
 	var reason = packet[1];
 	ctx.debug("main", "disconnect reason:", reason);
 	if (ctx.reconnect_in_progress) {
 		return;
-	}	
+	}
 	ctx.disconnect_reason = reason;
 	ctx.close();
 	// call the client's close callback