From 0196f20fae001d3eede7c570cb5373b73e0b1f0f Mon Sep 17 00:00:00 2001 From: Antoine Martin Date: Sat, 20 Jan 2018 15:41:23 +0000 Subject: [PATCH] #1735: add top bar to the html5 client where we can dock the system trays git-svn-id: https://xpra.org/svn/Xpra/trunk@18080 3bb7dfac-3a0b-4e04-842a-767bc560f471 --- src/html5/css/client.css | 19 +++++++++-- src/html5/index.html | 2 ++ src/html5/js/Client.js | 70 ++++++++++++++++++++++++++++++++++++++-- src/html5/js/Window.js | 11 +++++-- 4 files changed, 95 insertions(+), 7 deletions(-) diff --git a/src/html5/css/client.css b/src/html5/css/client.css index 3914958aa0..e4b3729070 100644 --- a/src/html5/css/client.css +++ b/src/html5/css/client.css @@ -10,6 +10,16 @@ body.desktop { background-color: #555; } +div#top_bar { + background-color: #444; + width: 100%; + height: 48px; +} +div#top_bar img { + width: 48px; + height: 48px; +} + div#connect_form { display: none; } @@ -23,6 +33,7 @@ div#disconnect_form { opacity: 0.5; z-index: 100000; text-align: center; + padding-top: 3em; } #progress-label { font-size: 1.4em; @@ -53,8 +64,6 @@ canvas { padding: 0; overflow: hidden; } -.override-redirect { -} .window { border: 1px; position: absolute; @@ -62,6 +71,12 @@ canvas { padding: 0; overflow: hidden; /* required for radius clip */ } +.window.override-redirect { +} +.window.tray { + position: relative; + float: left; +} .window.desktop { border-radius: 0; box-shadow: none; diff --git a/src/html5/index.html b/src/html5/index.html index 4159603dbb..1d0caaf754 100644 --- a/src/html5/index.html +++ b/src/html5/index.html @@ -54,6 +54,8 @@
+
+
diff --git a/src/html5/js/Client.js b/src/html5/js/Client.js index 7073e69964..d7f14e62b5 100644 --- a/src/html5/js/Client.js +++ b/src/html5/js/Client.js @@ -319,6 +319,7 @@ XpraClient.prototype.init_packet_handlers = function() { 'hello': this._process_hello, 'ping': this._process_ping, 'ping_echo': this._process_ping_echo, + 'new-tray': this._process_new_tray, 'new-window': this._process_new_window, 'new-override-redirect': this._process_new_override_redirect, 'window-metadata': this._process_window_metadata, @@ -1108,7 +1109,7 @@ XpraClient.prototype._make_hello = function() { "notifications.actions" : true, "cursors" : true, "bell" : true, - "system_tray" : false, + "system_tray" : true, //we cannot handle this (GTK only): "named_cursors" : false, // printing @@ -1149,6 +1150,7 @@ XpraClient.prototype._new_window = function(wid, x, y, w, h, metadata, override_ var win = new XpraWindow(this, mycanvas, wid, x, y, w, h, metadata, override_redirect, + false, client_properties, this._window_geometry_changed, this._window_mouse_move, @@ -1201,7 +1203,7 @@ XpraClient.prototype._window_geometry_changed = function(win) { var geom = win.get_internal_geometry(); var wid = win.wid; - if (!win.override_redirect) { + if (!win.override_redirect && !win.tray) { win.client._window_set_focus(win); } win.client.send(["configure-window", wid, geom.x, geom.y, geom.w, geom.h, win.client._get_client_properties(win)]); @@ -1226,7 +1228,7 @@ XpraClient.prototype._window_mouse_click = function(win, button, pressed, x, y, XpraClient.prototype._window_set_focus = function(win) { // don't send focus packet for override_redirect windows! - if (win.override_redirect) { + if (win.override_redirect || win.tray) { return; } var client = win.client; @@ -1811,6 +1813,55 @@ XpraClient.prototype._process_ping_echo = function(packet, ctx) { ctx._check_server_echo(0); } +XpraClient.prototype._process_new_tray = function(packet, ctx) { + var wid = packet[1], + w = packet[2], + h = packet[3], + metadata = packet[4]; + var mydiv = document.createElement("div"); + mydiv.id = String(wid); + var mycanvas = document.createElement("canvas"); + mydiv.appendChild(mycanvas); + var top_bar = document.getElementById("top_bar"); + top_bar.appendChild(mydiv); + var x = 100; + var y = 0; + w = 48; + h = 48; + mycanvas.width = w; + mycanvas.height = h; + var win = new XpraWindow(ctx, mycanvas, wid, x, y, w, h, + metadata, + false, + true, + {}, + ctx._tray_geometry_changed, + ctx._window_mouse_move, + ctx._window_mouse_click, + ctx._tray_set_focus, + ctx._tray_closed, + ); + ctx.id_to_window[wid] = win; + ctx.send_tray_configure(wid); +} +XpraClient.prototype.send_tray_configure = function(wid) { + var div = jQuery("#" + String(wid)); + var x = Math.round(div.offset().left); + var y = Math.round(div.offset().top); + var w = 48, h = 48; + console.log("tray", wid, "position:", x, y); + this.send(["configure-window", Number(wid), x, y, w, h, {}]); +} +XpraClient.prototype._tray_geometry_changed = function(win) { + ctx.debug("main", "tray geometry changed (ignored)"); +} +XpraClient.prototype._tray_set_focus = function(win) { + ctx.debug("main", "tray set focus (ignored)"); +} +XpraClient.prototype._tray_closed = function(win) { + ctx.debug("main", "tray closed (ignored)"); +} + XpraClient.prototype._process_new_window = function(packet, ctx) { ctx._new_window_common(packet, false); } @@ -1855,6 +1906,19 @@ XpraClient.prototype._process_lost_window = function(packet, ctx) { catch (e) {} if (win!=null) { win.destroy(); + console.log("lost window, was tray=", win.tray); + if (win.tray) { + //other trays may have moved: + for (var twid in ctx.id_to_window) { + console.log("testing", twid); + var twin = ctx.id_to_window[twid]; + console.log("testing", twin); + if (twin && twin.tray) { + console.log("is tray!"); + ctx.send_tray_configure(twid); + } + } + } } console.log("lost window", wid, ", remaining: ", Object.keys(ctx.id_to_window)); if (Object.keys(ctx.id_to_window).length==0) { diff --git a/src/html5/js/Window.js b/src/html5/js/Window.js index a363381652..af63a2ca37 100644 --- a/src/html5/js/Window.js +++ b/src/html5/js/Window.js @@ -20,7 +20,7 @@ * The contents of the window is an image, which gets updated * when we receive pixels from the server. */ -function XpraWindow(client, canvas_state, wid, x, y, w, h, metadata, override_redirect, client_properties, geometry_cb, mouse_move_cb, mouse_click_cb, set_focus_cb, window_closed_cb, htmldiv) { +function XpraWindow(client, canvas_state, wid, x, y, w, h, metadata, override_redirect, tray, client_properties, geometry_cb, mouse_move_cb, mouse_click_cb, set_focus_cb, window_closed_cb, htmldiv) { // use me in jquery callbacks as we lose 'this' var me = this; // there might be more than one client @@ -54,6 +54,7 @@ function XpraWindow(client, canvas_state, wid, x, y, w, h, metadata, override_re this.wid = wid; this.metadata = {}; this.override_redirect = override_redirect; + this.tray = tray; this.client_properties = client_properties; //window attributes: @@ -118,6 +119,9 @@ function XpraWindow(client, canvas_state, wid, x, y, w, h, metadata, override_re jQuery(this.div).addClass("desktop"); this.resizable = false; } + else if(this.tray) { + jQuery(this.div).addClass("tray"); + } else if(this.override_redirect) { jQuery(this.div).addClass("override-redirect"); } @@ -432,7 +436,10 @@ XpraWindow.prototype.toString = function() { XpraWindow.prototype.update_zindex = function() { var z = 5000 + this.stacking_layer; - if (this.override_redirect || this.client.server_is_desktop) { + if (this.tray) { + z = 0; + } + else if (this.override_redirect || this.client.server_is_desktop) { z = 15000; } else if (this.windowtype=="DROPDOWN" || this.windowtype=="TOOLTIP" ||