update ui
This commit is contained in:
parent
7cf77935b3
commit
653ab1d9cd
4 changed files with 103 additions and 82 deletions
12
rice-box.go
12
rice-box.go
File diff suppressed because one or more lines are too long
|
|
@ -3,146 +3,164 @@
|
|||
--bs-link-color: var(--link-color);
|
||||
}
|
||||
|
||||
* {
|
||||
overscroll-behavior: contain !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #1e3650;
|
||||
border-color: #0e2640;
|
||||
background: #1e3650;
|
||||
border-color: #0e2640;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link.active {
|
||||
background: #1e3650;
|
||||
background: #1e3650;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
color: #777;
|
||||
margin: 3px 0;
|
||||
padding: 3px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: #777;
|
||||
margin: 3px 0;
|
||||
padding: 3px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 9px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.select2 {
|
||||
min-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.pane {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.no-radius {
|
||||
border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#pointer {
|
||||
height: calc(100vh - 33px - 38px);
|
||||
top: calc(33px + 38px);
|
||||
margin: auto;
|
||||
background: #ccc;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: calc(100% - 50px);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
height: calc(100vh - 33px);
|
||||
bottom: 33px;
|
||||
margin: auto;
|
||||
background: #ccc;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: calc(100% - 50px);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#scrollbar {
|
||||
height: calc(100vh - 80px);
|
||||
width: 50px;
|
||||
background: #333;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
height: calc(100vh - 33px);
|
||||
width: 50px;
|
||||
background: #333;
|
||||
position: fixed;
|
||||
bottom: 33px;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#mouse {
|
||||
position: fixed;
|
||||
bottom: 83px;
|
||||
z-index: 200;
|
||||
width: calc(100vw - 50px);
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#pane-pointer .form-group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#pointer-buttons {
|
||||
margin-top: -42px;
|
||||
width: 100%;
|
||||
z-index: 110;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-top: -42px;
|
||||
width: 100%;
|
||||
z-index: 110;
|
||||
position: fixed;
|
||||
bottom: 31px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#pointer-buttons .btn {
|
||||
height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#disconneced {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: #ff6161;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: #ff6161;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#disconneced a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nav {
|
||||
border-bottom: 2px solid #1e3650;
|
||||
border-top: 2px solid #1e3650;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
#shortcuts_special_keys input {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#response {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #748c26;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background: #748c26;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#screenshot img {
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mouse-screenshot-live {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ let scrollLastTimestamp, scrollLastValue
|
|||
let mousePosX, mousePosY, mouseInitPosX, mouseInitPosY
|
||||
let isLive = false
|
||||
let isPointerLive = false
|
||||
let isScreenshotWaiting = false
|
||||
let isScreenshotWaiting = null
|
||||
let isPointerScreenshotWaiting = false
|
||||
|
||||
function createWebSocketConnection() {
|
||||
|
|
@ -33,8 +33,11 @@ function createWebSocketConnection() {
|
|||
response.style.display = 'none'
|
||||
}, 2500)
|
||||
} else if (data.type === 'screenshot') {
|
||||
if (isScreenshotWaiting) {
|
||||
isScreenshotWaiting = false
|
||||
if (isScreenshotWaiting || isScreenshotWaiting === null) {
|
||||
if (isScreenshotWaiting) {
|
||||
isScreenshotWaiting = false
|
||||
}
|
||||
|
||||
screenshotImg.setAttribute('src', 'data:image/png;base64, ' + data.value)
|
||||
}
|
||||
|
||||
|
|
@ -181,7 +184,7 @@ function pointerTouchStartHandler(e) {
|
|||
function pointerLiveHandler(e) {
|
||||
if (!e.target.checked) {
|
||||
isPointerLive = false
|
||||
isPointerScreenshotWaiting = false
|
||||
isPointerScreenshotWaiting = null
|
||||
|
||||
return
|
||||
}
|
||||
|
|
@ -233,7 +236,7 @@ function liveLqClickHandler(e) {
|
|||
function liveClickHandler(e, quality) {
|
||||
if (isLive) {
|
||||
isLive = false
|
||||
isScreenshotWaiting = false
|
||||
isScreenshotWaiting = null
|
||||
|
||||
document.querySelector('#live-hq').innerText = 'Live HQ'
|
||||
document.querySelector('#live-lq').innerText = 'Live LQ'
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="/static/css/main.css" type="text/css">
|
||||
<link rel="stylesheet" href="/static/css/main.css?2" type="text/css">
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<link rel="icon" type="image/png" href="/static/img/icon.png">
|
||||
<title>Remote i3-wm</title>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue