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

Make connect button a regular <button> 

It is a button, let the HTML element reflect that. And instead of
having the outer div being clickable, lets only make the inner one
work like a button. Because of that, this commit renames the outer div
to "connect_box" instead of "connect_button".

Note that we remove the disabled :hover-effect for touch on this button.
It doesn't make much difference since this button is one of a kind.
This commit is contained in:
Samuel Mannehed 2022-12-14 13:28:27 +01:00
parent 1ff035c330
commit f983c78d17
3 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/styles/base.css
View File

@ -725,12 +725,9 @@ html {
font-size: calc(25vw - 30px); font-size: calc(25vw - 30px);
} }
} }
#noVNC_connect_button { #noVNC_connect_box {
cursor: pointer; padding: 12px;
padding: 10px;
color: white;
background-color: rgb(110, 132, 163); background-color: rgb(110, 132, 163);
border-radius: 12px; border-radius: 12px;
@ -739,26 +736,26 @@ html {
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
} }
#noVNC_connect_button div { #noVNC_connect_box button {
margin: 2px; width: 100%;
padding: 5px 30px; 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; border-radius: 5px;
background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147)); background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
color: white;
/* This avoids it jumping around when :active */ /* This avoids it jumping around when :active */
vertical-align: middle; vertical-align: middle;
} }
#noVNC_connect_button div:active { #noVNC_connect_box button:hover {
border-bottom-width: 1px;
margin-top: 3px;
}
:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
} }
#noVNC_connect_button img { #noVNC_connect_box img {
vertical-align: bottom; vertical-align: bottom;
height: 1.3em; height: 1.3em;
} }

3
app/ui.js
View File

@ -319,7 +319,8 @@ const UI = {
addConnectionControlHandlers() { addConnectionControlHandlers() {
document.getElementById("noVNC_disconnect_button") document.getElementById("noVNC_disconnect_button")
.addEventListener('click', UI.disconnect); .addEventListener('click', UI.disconnect);
document.getElementById("noVNC_connect_button") document.getElementById("noVNC_connect_box")
.getElementsByTagName('button')[0]
.addEventListener('click', UI.connect); .addEventListener('click', UI.connect);
document.getElementById("noVNC_cancel_reconnect_button") document.getElementById("noVNC_cancel_reconnect_button")
.addEventListener('click', UI.cancelReconnect); .addEventListener('click', UI.cancelReconnect);

4
vnc.html
View File

@ -274,9 +274,9 @@
<div class="noVNC_center"> <div class="noVNC_center">
<div id="noVNC_connect_dlg"> <div id="noVNC_connect_dlg">
<div class="noVNC_logo" translate="no"><span>no</span>VNC</div> <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 <img alt="" src="app/images/connect.svg"> Connect
</div></div> </button></div>
</div> </div>
</div> </div>