From c9692e54244d2dd3c3324da0dc77053712f60cb3 Mon Sep 17 00:00:00 2001
From: Jared Goodwin <translucency@outlook.com>
Date: Thu, 26 Oct 2023 18:21:09 -0700
Subject: [PATCH] Add touchpad mobile button to the control bar.

- Add touchpad.svg to images.
- Add #noVNC_touchpad_button button to #noVNC_mobile_buttons div.
- Add/modify css rules so margin applies to mobile buttons, not the surrounding div.
---
 app/images/touchpad.svg | 62 +++++++++++++++++++++++++++++++++++++++++
 app/styles/base.css     | 11 +++++++-
 vnc.html                |  3 ++
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 app/images/touchpad.svg

diff --git a/app/images/touchpad.svg b/app/images/touchpad.svg
new file mode 100644
index 00000000..0bdd7a1f
--- /dev/null
+++ b/app/images/touchpad.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   version="1.1"
+   id="touchpad"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="touchpad.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="11.588216"
+     inkscape:cx="9.7081384"
+     inkscape:cy="15.921347"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g1">
+      <rect
+         style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-dasharray:none;stroke-opacity:1"
+         id="rect1"
+         width="20.896252"
+         height="20.896252"
+         x="1.8494672"
+         y="2.1561899"
+         rx="3.3434002"
+         ry="3.3434005" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1.43009;stroke-dasharray:none;stroke-opacity:1"
+         d="m 1.8115321,15.999996 c 21.1096929,0 21.1096929,0 21.1096929,0"
+         id="path1" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-dasharray:none;stroke-opacity:1"
+         d="m 12.439821,15.80482 v 7.70143"
+         id="path2" />
+    </g>
+  </g>
+</svg>
diff --git a/app/styles/base.css b/app/styles/base.css
index f83ad4b9..7a74ff7d 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -345,7 +345,10 @@ html {
   padding: 0 10px;
 }
 
-#noVNC_control_bar > .noVNC_scroll > * {
+/* Do not apply margin to #noVNC_mobilebuttons div. There is now
+   more than one button inside it, so we'll apply margins directly
+   to the buttons in another rule. */
+#noVNC_control_bar > .noVNC_scroll > *:not(#noVNC_mobile_buttons) {
   display: block;
   margin: 10px auto;
 }
@@ -553,6 +556,12 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
+
+#noVNC_mobile_buttons > .noVNC_button {
+  display: block;
+  margin: 10px auto;
+}
+
 @media not all and (any-pointer: coarse) {
   /* FIXME: The button for the virtual keyboard is the only button in this
             group of "mobile buttons". It is bad to assume that no touch
diff --git a/vnc.html b/vnc.html
index 24a118db..6ac6e63b 100644
--- a/vnc.html
+++ b/vnc.html
@@ -79,6 +79,9 @@
             <div id="noVNC_mobile_buttons">
                 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button" title="Show Keyboard">
+
+                <input type="image" alt="Touchpad Mode" src="app/images/touchpad.svg"
+                    id="noVNC_touchpad_button" class="noVNC_button" title="Touchpad Mode">
             </div>
 
             <!-- Extra manual keys -->