mirrors/Remotely
3
0
Fork 0
mirror of https://github.com/immense/Remotely.git synced 2025-10-26 11:27:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesigned the remote control options menu.

Browse Source
This commit is contained in:
Jared Goodwin 2019-06-21 17:14:44 -07:00
parent 21af3c5b99
commit 70eec05c23
5 changed files with 125 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Server/Pages/RemoteControl.cshtml
View File

@ -40,29 +40,47 @@
</div>
<div class="logo-subtitle">Do IT Remotely</div>
</div>
<div id="connectionBar" class="connection-bar">
<i id="menuButton" class="fas fa-bars"></i>
<div class="connection-bar-footer">
<i id="menuButton" class="fas fa-chevron-circle-right"></i>
<div id="menuFrame">
<div class="menu-options-header">
Actions
</div>
<div class="connection-bar-body">
<button id="actionsButton" class="bar-button">Actions <i class="fas fa-bolt"></i></button>
<button id="viewButton" class="bar-button">View <i class="fas fa-eye"></i></button>
<button id="disconnectButton" class="bar-button">Disconnect <i class="fas fa-window-close"></i></button>
<div>
<button id="inviteButton" class="option-button">Invite Others <i class="fas fa-user-plus"></i></button>
<button id="fileTransferButton" class="option-button">File Transfer <i class="fas fa-file-upload"></i></button>
<button id="ctrlAltDelButton" class="option-button">Ctrl+Alt+Del <i class="fas fa-sign-in-alt"></i></button>
<button id="keyboardButton" hidden="hidden" class="option-button">Keyboard <i class="fas fa-keyboard"></i></button>
<button id="disconnectButton" class="option-button">Disconnect <i class="fas fa-window-close"></i></button>
</div>
<div class="menu-options-header">
View
</div>
<div>
<button id="changeScreenButton" class="option-button">Monitors <i class="fas fa-desktop"></i></button>
<button id="fitToScreenButton" class="toggled option-button">Fit <i class="fas fa-expand"></i></button>
<button id="qualityButton" class="option-button">Quality <i class="far fa-image"></i></button>
</div>
</div>
<div id="actionsBar" class="horizontal-button-bar">
<button id="inviteButton" class="bar-button">Invite Others <i class="fas fa-user-plus"></i></button>
<button id="keyboardButton" hidden="hidden" class="bar-button">Keyboard <i class="fas fa-keyboard"></i></button>
<button id="fileTransferButton" class="bar-button">File Transfer <i class="fas fa-file-upload"></i></button>
<button id="ctrlAltDelButton" class="bar-button">Ctrl+Alt+Del <i class="fas fa-sign-in-alt"></i></button>
<div id="screenSelectBar" class="horizontal-button-bar">
</div>
<div id="viewBar" class="horizontal-button-bar">
<button id="changeScreenButton" class="bar-button">Monitors <i class="fas fa-desktop"></i></button>
<button id="fitToScreenButton" class="toggled bar-button">Fit <i class="fas fa-expand"></i></button>
<button id="qualityButton" class="bar-button">Quality <i class="far fa-image"></i></button>
<div id="qualityBar" class="horizontal-button-bar">
<div class="center-aligned" style="color:white; font-size:12px">
Image Quality
</div>
<input id="qualityRangeInput" value="50" max="100" class="form-control-range" type="range" />
</div>
<div id="connectBox">
<h3>Connect to a client:</h3>
<div class="form-block">
@ -82,16 +100,7 @@
</div>
</div>
<div id="screenSelectBar" class="horizontal-button-bar">
</div>
<div id="qualityBar" class="horizontal-button-bar">
<div class="center-aligned" style="color:white; font-size:12px">
Image Quality
</div>
<input id="qualityRangeInput" value="50" max="100" class="form-control-range" type="range" />
</div>
<div class="center-aligned">
<canvas id="screenViewer" hidden="hidden"></canvas>

81
Server/wwwroot/css/remote-control.css
View File

@ -16,9 +16,6 @@ button {
border: none;
}
.bar-button {
height: 100%;
}
button:hover {
background-color: rgb(100,100,100);
@ -41,46 +38,62 @@ button[disabled] {
text-align: center;
}
.connection-bar {
display: inline-block;
position: fixed;
top: 10px;
border: none;
border-radius: 5px;
background-color: rgb(60, 60, 60);
left: 50%;
transform: translateX(-50%);
z-index: 3;
overflow: visible;
height: 0;
transition: height 250ms;
padding-right: 1px;
pointer-events: none;
}
.connection-bar.open {
.option-button {
position: relative;
height: 40px;
transition: height 250ms;
border: 1px solid white;
pointer-events: all;
margin: 5px 0;
width: 90%;
}
.connection-bar-body {
overflow: hidden;
height: 100%;
white-space: nowrap;
.menu-options-header {
text-align: center;
color: lightgray;
margin: 20px 0 5px 0;
font-family: monospace;
font-size: .9em;
}
#menuButton {
background-color: rgb(40,40,40);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: rgb(50,50,50);
font-size: 1.5em;
padding: 5px;
border-radius: 3px;
padding: 20px 5px;
border-radius: 0 3px 3px 0;
pointer-events: all;
margin-right: -1.5em;
float: right;
cursor: pointer;
transition: .5s ease left;
}
#menuButton.open {
left: 150px;
transform: translateY(-50%) rotateY(180deg);
border-radius: 3px 0 0 3px;
transition: .5s ease left;
}
#menuFrame {
position: absolute;
color: white;
left: 0;
top: 0;
height: 100%;
background-color: rgb(50,50,50);
width: 0;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
opacity: 0;
transition: .5s ease all;
}
#menuFrame.open {
width: 150px;
opacity: 1;
transition: .5s ease all;
}
#menuButton:hover {
@ -92,7 +105,7 @@ button[disabled] {
background-color: rgb(90, 90, 90);
height: 0;
padding: 0;
top: 55px;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 3;

31
Server/wwwroot/scripts/RemoteControl/UI.js
View File

@ -2,6 +2,7 @@ import { ConnectToClient, RemoteControl } from "./RemoteControl.js";
import { FloatMessage } from "../UI.js";
import { RemoteControlMode } from "../Enums/RemoteControlMode.js";
export var MenuButton = document.getElementById("menuButton");
export var MenuFrame = document.getElementById("menuFrame");
export var SessionIDInput = document.getElementById("sessionIDInput");
export var ConnectButton = document.getElementById("connectButton");
export var RequesterNameInput = document.getElementById("nameInput");
@ -12,12 +13,9 @@ export var HorizontalBars = document.querySelectorAll(".horizontal-button-bar");
export var ConnectBox = document.getElementById("connectBox");
export var ScreenSelectBar = document.getElementById("screenSelectBar");
export var QualityBar = document.getElementById("qualityBar");
export var ConnectionBar = document.getElementById("connectionBar");
export var QualitySlider = document.getElementById("qualityRangeInput");
export var ActionsBar = document.getElementById("actionsBar");
export var ViewBar = document.getElementById("viewBar");
export var ActionsButton = document.getElementById("actionsButton");
export var ViewButton = document.getElementById("viewButton");
export var ChangeScreenButton = document.getElementById("changeScreenButton");
export var QualityButton = document.getElementById("qualityButton");
export var FitToScreenButton = document.getElementById("fitToScreenButton");
@ -37,18 +35,29 @@ var cancelNextClick;
var isPinchZooming;
var startPinchPoint1;
var startPinchPoint2;
var isMenuButtonDragging;
export function ApplyInputHandlers(sockets) {
MenuButton.addEventListener("click", (ev) => {
if (isMenuButtonDragging) {
isMenuButtonDragging = false;
ev.preventDefault();
return;
}
MenuFrame.classList.toggle("open");
MenuButton.classList.toggle("open");
closeAllHorizontalBars(null);
ConnectionBar.classList.toggle("open");
});
ActionsButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("actionsBar");
ActionsBar.classList.toggle("open");
MenuButton.addEventListener("mousemove", (ev) => {
if (ev.buttons == 1) {
ev.preventDefault();
isMenuButtonDragging = true;
MenuButton.style.top = `${ev.clientY}px`;
}
});
ViewButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("viewBar");
ViewBar.classList.toggle("open");
MenuButton.addEventListener("touchmove", (ev) => {
ev.preventDefault();
isMenuButtonDragging = true;
MenuButton.style.top = `${ev.touches[0].clientY}px`;
});
ChangeScreenButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("screenSelectBar");
@ -76,7 +85,6 @@ export function ApplyInputHandlers(sockets) {
});
KeyboardButton.addEventListener("click", (ev) => {
closeAllHorizontalBars(null);
ConnectionBar.classList.remove("open");
OnScreenKeyboard.classList.toggle("open");
});
InviteButton.addEventListener("click", (ev) => {
@ -110,7 +118,6 @@ export function ApplyInputHandlers(sockets) {
return;
}
closeAllHorizontalBars(null);
ConnectionBar.classList.remove("open");
RemoteControl.RCBrowserSockets.SendCtrlAltDel();
});
document.querySelectorAll("#sessionIDInput, #nameInput").forEach(x => {

2
Server/wwwroot/scripts/RemoteControl/UI.js.map
View File

File diff suppressed because one or more lines are too long

41
Server/wwwroot/scripts/RemoteControl/UI.ts
View File

@ -6,6 +6,7 @@ import { RemoteControlMode } from "../Enums/RemoteControlMode.js";
import { Point } from "../Models/Point.js";
export var MenuButton = document.getElementById("menuButton") as HTMLButtonElement;
export var MenuFrame = document.getElementById("menuFrame") as HTMLDivElement;
export var SessionIDInput = document.getElementById("sessionIDInput") as HTMLInputElement;
export var ConnectButton = document.getElementById("connectButton") as HTMLButtonElement;
export var RequesterNameInput = document.getElementById("nameInput") as HTMLInputElement;
@ -16,12 +17,9 @@ export var HorizontalBars = document.querySelectorAll(".horizontal-button-bar");
export var ConnectBox = document.getElementById("connectBox") as HTMLDivElement;
export var ScreenSelectBar = document.getElementById("screenSelectBar") as HTMLDivElement;
export var QualityBar = document.getElementById("qualityBar") as HTMLDivElement;
export var ConnectionBar = document.getElementById("connectionBar") as HTMLDivElement;
export var QualitySlider = document.getElementById("qualityRangeInput") as HTMLInputElement;
export var ActionsBar = document.getElementById("actionsBar") as HTMLDivElement;
export var ViewBar = document.getElementById("viewBar") as HTMLDivElement;
export var ActionsButton = document.getElementById("actionsButton") as HTMLButtonElement;
export var ViewButton = document.getElementById("viewButton") as HTMLButtonElement;
export var ChangeScreenButton = document.getElementById("changeScreenButton") as HTMLButtonElement;
export var QualityButton = document.getElementById("qualityButton") as HTMLButtonElement;
export var FitToScreenButton = document.getElementById("fitToScreenButton") as HTMLButtonElement;
@ -34,8 +32,6 @@ export var InviteButton = document.getElementById("inviteButton") as HTMLButtonE
export var FileTransferButton = document.getElementById("fileTransferButton") as HTMLButtonElement;
export var CtrlAltDelButton = document.getElementById("ctrlAltDelButton") as HTMLButtonElement;
var lastPointerMove = Date.now();
var isDragging: boolean;
var currentPointerDevice: string;
@ -44,21 +40,34 @@ var cancelNextClick: boolean;
var isPinchZooming: boolean;
var startPinchPoint1: Point;
var startPinchPoint2: Point;
var isMenuButtonDragging: boolean;
export function ApplyInputHandlers(sockets: RCBrowserSockets) {
MenuButton.addEventListener("click", (ev) => {
if (isMenuButtonDragging) {
isMenuButtonDragging = false;
ev.preventDefault();
return;
}
MenuFrame.classList.toggle("open");
MenuButton.classList.toggle("open");
closeAllHorizontalBars(null);
ConnectionBar.classList.toggle("open");
})
ActionsButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("actionsBar");
ActionsBar.classList.toggle("open");
})
});
MenuButton.addEventListener("mousemove", (ev) => {
if (ev.buttons == 1) {
ev.preventDefault();
isMenuButtonDragging = true;
MenuButton.style.top = `${ev.clientY}px`;
}
});
MenuButton.addEventListener("touchmove", (ev) => {
ev.preventDefault();
isMenuButtonDragging = true;
MenuButton.style.top = `${ev.touches[0].clientY}px`;
});
ViewButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("viewBar");
ViewBar.classList.toggle("open");
})
ChangeScreenButton.addEventListener("click", (ev) => {
closeAllHorizontalBars("screenSelectBar");
ScreenSelectBar.classList.toggle("open");
@ -85,7 +94,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
});
KeyboardButton.addEventListener("click", (ev) => {
closeAllHorizontalBars(null);
ConnectionBar.classList.remove("open");
OnScreenKeyboard.classList.toggle("open");
});
InviteButton.addEventListener("click", (ev) => {
@ -121,7 +129,6 @@ export function ApplyInputHandlers(sockets: RCBrowserSockets) {
return;
}
closeAllHorizontalBars(null);
ConnectionBar.classList.remove("open");
RemoteControl.RCBrowserSockets.SendCtrlAltDel();
});
document.querySelectorAll("#sessionIDInput, #nameInput").forEach(x => {