Merge pull request #1730 from novnc/media_touch

Replace JavaScript .noVNC_touch with CSS @media (any-pointer: coarse)
2022-12-14 15:50:12 +01:00 · 2022-12-14 15:50:12 +01:00 · e7ef963a8f
parent 90f120c139 f1550c69d9
commit e7ef963a8f
4 changed files with 84 additions and 54 deletions
--- a/app/styles/base.css
+++ b/app/styles/base.css
@ -22,8 +22,6 @@
 /*
 * State variables (set on :root):
 *
- * noVNC_touch: Device has touch input
- *
 * noVNC_loading: Page is still loading
 * noVNC_connecting: Connecting to server
 * noVNC_reconnecting: Re-establishing a connection
@ -321,16 +319,20 @@ html {
 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
  transform: none;
 }
+/* Larger touch area for the handle, used when a touch screen is available */
 #noVNC_control_bar_handle div {
  position: absolute;
  right: -35px;
  top: 0;
  width: 50px;
  height: 100%;
-}
-:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
  display: none;
 }
+@media (any-pointer: coarse) {
+  #noVNC_control_bar_handle div {
+    display: unset;
+  }
+}
 .noVNC_right #noVNC_control_bar_handle div {
  left: -35px;
  right: auto;
@ -389,19 +391,18 @@ html {
  vertical-align: middle;
  border:1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
+  background-color: transparent;
  background-image: unset; /* we don't want the gradiant from input.css */
 }
 #noVNC_control_bar .noVNC_button.noVNC_selected {
  border-color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.5);
 }
-/* Android browsers don't properly update hover state if touch events are
- * intercepted, like they are when clicking on the remote screen. */
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+#noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
  border-color: rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.2);
 }
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+#noVNC_control_bar .noVNC_button:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.2);
 }
 #noVNC_control_bar .noVNC_button:not(:disabled):active {
@ -412,6 +413,19 @@ html {
  display: none !important;
 }

+/* Android browsers don't properly update hover state if touch events are
+ * intercepted, like they are when clicking on the remote screen. */
+@media (any-pointer: coarse) {
+  #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+    background-color: transparent;
+  }
+  #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+    border-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+
 /* Panels */
 .noVNC_panel {
  transform: translateX(25px);
@ -539,8 +553,10 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
  display: none;
 }
-:root:not(.noVNC_touch) #noVNC_mobile_buttons {
-  display: none;
+@media not (any-pointer: coarse) {
+  :root.noVNC_connected #noVNC_mobile_buttons {
+    display: none;
+  }
 }

 /* Extra manual keys */
@ -714,12 +730,9 @@ html {
    font-size: calc(25vw - 30px);
  }
 }
-#noVNC_connect_button {
-  cursor: pointer;
+#noVNC_connect_box {
+  padding: 12px;

-  padding: 10px;
-
-  color: white;
  background-color: rgb(110, 132, 163);
  border-radius: 12px;

@ -728,26 +741,26 @@ html {

  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
-#noVNC_connect_button div {
-  margin: 2px;
+#noVNC_connect_box button {
+  width: 100%;
  padding: 5px 30px;
-  border: 1px solid rgb(83, 99, 122);
-  border-bottom-width: 2px;
+
+  cursor: pointer;
+
+  border-color: rgb(83, 99, 122);
  border-radius: 5px;
+
  background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  color: white;

  /* This avoids it jumping around when :active */
  vertical-align: middle;
 }
-#noVNC_connect_button div:active {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+#noVNC_connect_box button:hover {
  background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }

-#noVNC_connect_button img {
+#noVNC_connect_box img {
  vertical-align: bottom;
  height: 1.3em;
 }
--- a/app/styles/input.css
+++ b/app/styles/input.css
@ -20,7 +20,8 @@ input, input::file-selector-button, button, select, textarea {
  border: 1px solid rgb(192, 192, 192);
  border-radius: 5px;
  color: black;
-  background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
 }

 /*
@ -41,6 +42,9 @@ select {

  padding-left: 20px;
  padding-right: 20px;
+
+  /* Disable Chrome's touch tap highlight */
+  -webkit-tap-highlight-color: transparent;
 }

 /*
@ -54,8 +58,7 @@ select {
                stroke="rgb(31,31,31)" fill="none" \
                stroke-linecap="round" stroke-linejoin="round" /> \
      </svg>');
-  background-image: var(--select-arrow),
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--select-arrow), var(--bg-gradient);
  background-position: calc(100% - 7px), left top;
  background-repeat: no-repeat;
  padding-right: calc(2*7px + 8px);
@ -65,13 +68,13 @@ select {
          https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */
 select:active {
  /* Rotated arrow */
-  --select-arrow: url('data:image/svg+xml;utf8, \
+  background-image: url('data:image/svg+xml;utf8, \
      <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
           xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \
          <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
                stroke="rgb(31,31,31)" fill="none" \
                stroke-linecap="round" stroke-linejoin="round" /> \
-      </svg>');
+      </svg>'), var(--bg-gradient);
 }
 option {
  color: black;
@ -180,21 +183,36 @@ input::file-selector-button {
 /*
 * Hover
 */
-:root:not(.noVNC_touch) input[type=button]:hover,
-:root:not(.noVNC_touch) input[type=color]:hover,
-:root:not(.noVNC_touch) input[type=image]:hover,
-:root:not(.noVNC_touch) input[type=reset]:hover,
-:root:not(.noVNC_touch) input[type=submit]:hover,
-:root:not(.noVNC_touch) input::file-selector-button:hover,
-:root:not(.noVNC_touch) button:hover {
+input[type=button]:hover,
+input[type=color]:hover,
+input[type=image]:hover,
+input[type=reset]:hover,
+input[type=submit]:hover,
+input::file-selector-button:hover,
+button:hover {
  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
-:root:not(.noVNC_touch) select:hover {
+select:hover {
  background-image: var(--select-arrow),
    linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
  background-position: calc(100% - 7px), left top;
  background-repeat: no-repeat;
 }
+@media (any-pointer: coarse) {
+  /* We don't want a hover style after touch input */
+  input[type=button]:hover,
+  input[type=color]:hover,
+  input[type=image]:hover,
+  input[type=reset]:hover,
+  input[type=submit]:hover,
+  input::file-selector-button:hover,
+  button:hover {
+    background-image: var(--bg-gradient);
+  }
+  select:hover {
+    background-image: var(--select-arrow), var(--bg-gradient);
+  }
+}

 /*
 * Active (clicked)
@ -236,24 +254,23 @@ select:disabled,
 textarea:disabled {
  opacity: 0.4;
 }
-:root:not(.noVNC_touch) input[type=button]:disabled,
-:root:not(.noVNC_touch) input[type=color]:disabled,
-:root:not(.noVNC_touch) input[type=image]:disabled,
-:root:not(.noVNC_touch) input[type=reset]:disabled,
-:root:not(.noVNC_touch) input[type=submit]:disabled,
-:root:not(.noVNC_touch) input:disabled::file-selector-button,
-:root:not(.noVNC_touch) button:disabled,
-:root:not(.noVNC_touch) select:disabled {
-  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+input[type=button]:disabled,
+input[type=color]:disabled,
+input[type=image]:disabled,
+input[type=reset]:disabled,
+input[type=submit]:disabled,
+input:disabled::file-selector-button,
+button:disabled,
+select:disabled {
+  background-image: var(--bg-gradient);
  border-bottom-width: 2px;
  margin-top: 0;
 }
 input[type=file]:disabled {
  background-image: none;
 }
-:root:not(.noVNC_touch) select:disabled {
-  background-image: var(--select-arrow),
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+select:disabled {
+  background-image: var(--select-arrow), var(--bg-gradient);
 }
 input[type=image]:disabled {
  /* See Firefox bug:
--- a/app/ui.js
+++ b/app/ui.js
@ -88,7 +88,6 @@ const UI = {

        // Adapt the interface for touch screen devices
        if (isTouchDevice) {
-            document.documentElement.classList.add("noVNC_touch");
            // Remove the address bar
            setTimeout(() => window.scrollTo(0, 1), 100);
        }
@ -319,7 +318,8 @@ const UI = {
    addConnectionControlHandlers() {
        document.getElementById("noVNC_disconnect_button")
            .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_button")
+        document.getElementById("noVNC_connect_box")
+            .getElementsByTagName('button')[0]
            .addEventListener('click', UI.connect);
        document.getElementById("noVNC_cancel_reconnect_button")
            .addEventListener('click', UI.cancelReconnect);
--- a/vnc.html
+++ b/vnc.html
@ -274,9 +274,9 @@
    <div class="noVNC_center">
        <div id="noVNC_connect_dlg">
            <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_button"><div>
+            <div id="noVNC_connect_box"><button>
                <img alt="" src="app/images/connect.svg"> Connect
-            </div></div>
+            </button></div>
        </div>
    </div>