From b5f16e7a5241026937c83a3d377c5f861a66e564 Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Wed, 2 Mar 2022 15:29:29 -0800
Subject: [PATCH] Improved remote desktop multi-display selector, #3730

---
 public/images/icon-monitor1.png | Bin 0 -> 396 bytes
 public/images/icon-monitor2.png | Bin 0 -> 461 bytes
 public/images/monitor32.png     | Bin 0 -> 848 bytes
 public/styles/style.css         |   2 +-
 views/default.handlebars        |  21 +++++++++++----------
 5 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 public/images/icon-monitor1.png
 create mode 100644 public/images/icon-monitor2.png
 create mode 100644 public/images/monitor32.png

diff --git a/public/images/icon-monitor1.png b/public/images/icon-monitor1.png
new file mode 100644
index 0000000000000000000000000000000000000000..76380d010baf564fc447f6e8de81d94d9cde4e69
GIT binary patch
literal 396
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBufiR<}hF1engQBO4V~B-+a!FyK_3wYz<CWQj7#{!s&+}hG
zQsPI1#5qH$_T_)Xb>=coRpQ<AUOOQniD{OLUP9WB^9PPFIHfez_arcDFfV2cILyE`
ziIMqpy&9XF^8XY6V>(R(6a^T#oFaRA&LsS@H+cE)|9}1?Oq@)UjXHjv|B&h^&b)Zp
zrd{{{=ih%=`H=sz{esOBl0R5kh2r+ts`6hssi33t=fmma`rHjZ8xqg()Jyy`*krU}
z<L3FzS%+D&v`%gGD&qR@7!ej^C8pKGsF3Hvl;?L&YSSen%QI)zxZdAiFUpWA78n?)
z9GaTSC@MNt{JZ>}dgf3rHVL+Z!ouhEzyIxhcYgkTrZ+M&JZskE@YMhNBlzRr-`$6Q
n^UK@qsr_DNAEGH>V8Fo8R2j{vBz_ghVqoxe^>bP0l+XkKiyxHe

literal 0
HcmV?d00001

diff --git a/public/images/icon-monitor2.png b/public/images/icon-monitor2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3b438362db3215e10a64aeb9ec0509b5dec4e14
GIT binary patch
literal 461
zcmV;;0W$uHP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!T<mc!T}X1N`L?W0b)r+K~y+T#goBH
z0znkUzu9%wjBI7`5N1icWnDTL-J`@~9jk*-5T2qU=oaC*L&xY6_@DF_<e^(9?G~kJ
zWe(K1)66<Vv?Q2^e$4P5-<$b(?7kt{Z0@@8-pQa32<LDK5DlPA7S?xo?C3(3`lE4n
z08JB4e?<p}2C)J!z{rh%OTAakB^&|iG*kuBMcs4#&TX;d#a=bh!C?Hq0a@HAaI0|c
zeTSdWR5$)st6lDOJ77`Zb>6?F-m4}VWDKBl4J5O+$s^mxN|FdsWrTEp9~Yy`xhpd%
zicyw<qg6TunX}WYyiLE}0@Ga47QtxD+<L4(Op2SZEbFfI+$xFGGt<Gqh=E`zR94sg
z%s6&_Y9htuPL3t=O7`I!vE1^?Y%(#vtLw%grEjKuEb(|eGi}?Z<2d(~YNe)*diV??
zk>UL|r6-Jin4xeOh7kl~%%qeqHJZ(4{i%MXjtYQJLD`1mp=IDV00000NkvXXu0mjf
D+jGtF

literal 0
HcmV?d00001

diff --git a/public/images/monitor32.png b/public/images/monitor32.png
new file mode 100644
index 0000000000000000000000000000000000000000..d11f8744d46d56a4dc43bf38880e0bd238175076
GIT binary patch
literal 848
zcmWkrZA=>l0KJM1oop-p;(Fh`_Ih`vAN1>by}Qy+x|U!e44ovHw57l(PRaVm6=SAL
zjQ%h~C`0$FWLv@*AT7pq&5XpwE!hmeH-F7e=ElS&k{HD$c>D3*%X{zNd!P5EjvhJ)
z9RvX2P%;tgmz9-4yxJslt+LP}i=xnfGy<${B2Q%V@>uwdFaT7}z5YD&irlUB^$c|F
z@9(GIIv(J?LBZGQ=R%@S^0||oAaa4sn}a8E85km{U=I`NrNb$vGs#B#h<K8Xr_iom
z7{P`HyB&5bCB<StKc~8eoD3`2?bcAz+B3}CXvyAAhePd=jO3t2r;F~4w<nKz>>WWz
z2OEgnV?!aUjdM9n(FEQ7j?2PGE+@r$+_THxxm8bT#XYm;nXPzBRc>zGJ^hXJb<ID2
zUHGcbmA>Q8*Q5(KT+>zem+P)`Yr<UBb$&&dt_0>Qq$47Ba8`?r(!nf*GkVO7Vnzry
z>LD7%%m_-s2(Hzk>Q+OWmIQT#PD7(`2Z<XrEhe<hhEc70glCw^cgM{njw5YG0w!??
zg|vmq36?SwFisIB5;dS8Vk8L?!;Ls$Krxd{dT4wsk0CgTp++2|jiiadF-U(RHyn>d
zW1(=sF9@8EGLSyECn!ph&R{eg;W?j1rA8nahY<onF$hLLy;iL;n<$@`3y6{=h<+b0
z@P5%RL|f`9`ODWP6N3c+IDGR36t~}B%*ltc$yj)R?;TF3bJ@|+%&n%k2k+hU^LnsW
zJN?1we?y-gX@1bA)Tnf=BTDr=aUjv{Oxz9K|L5an<m`=?N?+iN#mQWK5iI?(*!^RA
zfO4KO&22+{+(+drKb2RSMjkfTi!FNxK8?q35xH!Bbo9M!W_;x2@X3j>XX$)Co6YC*
zj~@T_M`QcZ=Ej3xpKNXIZ0+pqJbd~)t^}1DL<Q+oi0;p4xKgPEL9kV?Mb&rDC>jm5
zYIa6F(_j8jBD}VMF<?{Qx!GK;7EbL}cNZk7TwYtOU0VEh8M$-&u*Gt9>Dc=2U)4hX
zRR6@&ZMfV3%atqFsUN)8yfp0-udQ7E{_;h&<*cG!pDIoji}k6!y<%~1d+EQ0MrdOL
Y0P262td9Z3ro1GO>`KK}Bk5262jk%ly#N3J

literal 0
HcmV?d00001

diff --git a/public/styles/style.css b/public/styles/style.css
index 8b39ed80..2d7ecbad 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -2654,7 +2654,7 @@ a {
     -ms-grid-row: 4;
 }
 
-#DeskChatButton, #DeskNotifyButton, #DeskOpenWebButton, #DeskBackgroundButton, #DeskSaveImageButton, #DeskRecordButton, #DeskClipboardInButton, #DeskClipboardOutButton, #DeskRefreshButton, #DeskLockButton, #DeskInputLockedButton, #DeskInputUnLockedButton, #DeskGuestShareButton {
+#DeskChatButton, #DeskNotifyButton, #DeskOpenWebButton, #DeskBackgroundButton, #DeskSaveImageButton, #DeskRecordButton, #DeskClipboardInButton, #DeskClipboardOutButton, #DeskRefreshButton, #DeskLockButton, #DeskInputLockedButton, #DeskInputUnLockedButton, #DeskGuestShareButton, #DeskMonitorSelectionSpan {
     float: right;
     margin-top: 1px;
     margin-right: 4px;
diff --git a/views/default.handlebars b/views/default.handlebars
index 21721a3b..df40fe97 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -676,9 +676,8 @@
                     <div id=deskarea4 class="areaFoot">
                         <div class="toright2">
                             <span id="DeskLatency" title="Desktop Session Latency"></span>
-                            <span id="DeskTimer" title="Session time"></span>&nbsp;
-                            <select id=termdisplays style="display:none" onchange=deskSetDisplay(event) onkeypress="return false" onkeydown="return false"></select>&nbsp;
-                            <input id=DeskToolsButton type=button value=Tools title="Toggle tools view" onkeypress="return false" onkeydown="return false" onclick="toggleDeskTools()" />&nbsp;
+                            <span id="DeskTimer" title="Session time"></span>
+                            <input id=DeskToolsButton type=button value=Tools title="Toggle tools view" onkeypress="return false" onkeydown="return false" onclick="toggleDeskTools()" />
                             <span id=DeskChatButton class="deskarea" title="Open chat window to this computer"><img class="desktopButtons" src='images/icon-chat.png' onclick=deviceChat(event) height=16 width=16 style=padding-top:2px /></span>
                             <span id=DeskNotifyButton title="Display a notification on the remote computer"><img class="desktopButtons" src='images/icon-notify.png' onclick=deviceToastFunction() height=16 width=16 style=padding-top:2px /></span>
                             <span id=DeskLockButton title="Lock the remote computer"><img src='images/icon-lock.png' class="desktopButtons" onclick=deviceLockFunction() height=16 width=16 /></span>
@@ -692,7 +691,9 @@
                             <span id=DeskInputLockedButton title="Remote input is locked"><img class="desktopButtons" id=DeskInputLockedButtonImage src='images/icon-keylock-red.png' onclick=deskInputLockFunction(0) height=16 width=16 /></span>
                             <span id=DeskInputUnLockedButton title="Remote input is unlocked"><img class="desktopButtons" id=DeskInputUnLockedButtonImage src='images/icon-keylock.png' onclick=deskInputLockFunction(1) height=16 width=16 /></span>
                             <span id=DeskGuestShareButton title="Share the device with a guest"><img class="desktopButtons" id=DeskInputUnLockedButtonImage src='images/icon-share2.png' onclick=showShareDevice() height=16 width=16 /></span>
+
                         </div>
+                        <div class="toright2"><span id=DeskMonitorSelectionSpan></span></div>
                         <div>
                             <select id="deskkeys" cmenu=deskKeyShortcutContextMenu></select>
                             <input id="DeskWD" type=button value="Send" onkeypress="return false" onkeydown="return false" onclick="deskSendKeys()" />
@@ -8551,7 +8552,7 @@
                     desktop.Stop();
                     desktopNode = desktop = null;
                     QV('DeskFocus', false);
-                    QV('termdisplays', false);
+                    QV('DeskMonitorSelectionSpan', false);
                     QV('deskRecordIcon', false);
                     QV('DeskInputLockedButton', false);
                     QV('DeskInputUnLockedButton', false);
@@ -9313,20 +9314,20 @@
             var displayCount = 0, displaySelector = '';
             for (var i in displays) {
                 displayCount++;
-                var str = displays[i];
-                if (str == 'All Displays') { str = "All Displays"; } // Language translation
+                var str = displays[i], allDisplays = 1;
+                if (str == 'All Displays') { str = "All Displays"; allDisplays = 2; } // Language translation
                 if (str.startsWith('Display ')) { str = format("Display {0}", str.substring(8)); } // Language translation
-                displaySelector += '<option' + ((selDisplay == i) ? ' selected' : '') + ' value=' + i + '>' + str + '</option>';
+                displaySelector += '<img id=DeskMonitorSelectionX' + i + ' class="' + ((selDisplay == i) ? '' : ' gray') + '" src=\'images/icon-monitor' + allDisplays + '.png\' title="' + EscapeHtml(str) + '" onclick=deskSetDisplay(' + i + ') height=16 width=16 style=padding-top:2px;margin-left:2px />';
                 if ((deskPreferedStickyDisplay == i) && (selDisplay != deskPreferedStickyDisplay)) { desktop.m.SetDisplay(i); }
                 deskPreferedStickyDisplay = -1;
             }
-            QH('termdisplays', displaySelector);
-            QV('termdisplays', displayCount > 1);
+            QH('DeskMonitorSelectionSpan', displaySelector);
+            QV('DeskMonitorSelectionSpan', displayCount > 1);
         }
 
         function deskGetDisplayNumbers(e) { desktop.m.GetDisplayNumbers(); }
         var deskPreferedStickyDisplay = -1;
-        function deskSetDisplay(e) { desktop.m.SetDisplay(deskPreferedStickyDisplay = parseInt(Q('termdisplays').value)); Q('termdisplays').blur(); }
+        function deskSetDisplay(v) { desktop.m.SetDisplay(deskPreferedStickyDisplay = parseInt(v)); }
 
         // Double click detection. This is important for macOS.
         var dblClickDetectArgs = { t:0, x:0, y:0 };