jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get rid of noVNC_touch in favor for @media queries 

This commit removes our dependency on the class "noVNC_touch" which was
set by Javascript. Instead, we can use the CSS media query
"any-pointer: coarse", which means that any pointing device that isn't
accurate is available. In practice this seems to basically be equal to
that a touch screen is available.

This change lets us simplify the selectors in many cases as well, which
is a nice bonus.
This commit is contained in:
Samuel Mannehed 2022-12-14 14:06:16 +01:00
parent 6d7d45ba08
commit f1550c69d9
3 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/styles/base.css
View File

@ -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
@ -328,10 +326,13 @@ html {
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;
@ -414,12 +415,14 @@ html {
/* Android browsers don't properly update hover state if touch events are
* intercepted, like they are when clicking on the remote screen. */
:root.noVNC_touch #noVNC_control_bar .noVNC_button:not(:disabled):hover {
background-color: transparent;
}
:root.noVNC_touch #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);
@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);
}
}
@ -550,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 */

44
app/styles/input.css
View File

@ -198,18 +198,20 @@ select:hover {
background-position: calc(100% - 7px), left top;
background-repeat: no-repeat;
}
/* We don't want a hover style after touch input */
:root.noVNC_touch input[type=button]:hover,
:root.noVNC_touch input[type=color]:hover,
:root.noVNC_touch input[type=image]:hover,
:root.noVNC_touch input[type=reset]:hover,
:root.noVNC_touch input[type=submit]:hover,
:root.noVNC_touch input::file-selector-button:hover,
:root.noVNC_touch button:hover {
background-image: var(--bg-gradient);
}
:root.noVNC_touch select:hover {
background-image: var(--select-arrow), var(--bg-gradient);
@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);
}
}
/*
@ -252,14 +254,14 @@ 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 {
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;
@ -267,7 +269,7 @@ textarea:disabled {
input[type=file]:disabled {
background-image: none;
}
:root:not(.noVNC_touch) select:disabled {
select:disabled {
background-image: var(--select-arrow), var(--bg-gradient);
}
input[type=image]:disabled {

1
app/ui.js
View File

@ -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);
}