make the terminal resize by drag
This commit is contained in:
Raven Scott
parent
4f31d0657c
commit
b0a1446ce0
67
index.html
67
index.html
@ -1,17 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Docker P2P Manager</title>
|
||||
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
||||
|
||||
<!-- xterm.css for Terminal -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
@ -21,6 +22,7 @@
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
-webkit-app-region: drag;
|
||||
height: 30px;
|
||||
@ -30,11 +32,13 @@
|
||||
background-color: #2c2c2c;
|
||||
z-index: 1000;
|
||||
}
|
||||
pear-ctrl[data-platform="darwin"] {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
|
||||
pear-ctrl[data-platform="darwin"] {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
@ -45,12 +49,15 @@
|
||||
overflow-y: auto;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#sidebar.collapsed .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#collapse-sidebar-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -66,6 +73,7 @@
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 250px;
|
||||
flex: 1;
|
||||
@ -73,9 +81,11 @@
|
||||
overflow-y: auto;
|
||||
transition: margin-left 0.3s ease-in-out;
|
||||
}
|
||||
#sidebar.collapsed ~ #content {
|
||||
|
||||
#sidebar.collapsed~#content {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
@ -83,38 +93,57 @@
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#terminal-modal {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: 400px;
|
||||
max-height: 90vh;
|
||||
height: 300px;
|
||||
background-color: #1a1a1a;
|
||||
border-top: 2px solid #444;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#terminal-modal .header {
|
||||
background-color: #444;
|
||||
cursor: move;
|
||||
/* Change cursor to indicate drag is possible */
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#terminal-resize-handle {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
cursor: ns-resize;
|
||||
background-color: #444;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#terminal-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#tray {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -128,6 +157,7 @@
|
||||
white-space: nowrap;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#tray .tray-item {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
@ -136,25 +166,26 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="titlebar">
|
||||
<pear-ctrl></pear-ctrl>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<button id="collapse-sidebar-btn"><</button>
|
||||
<div class="content">
|
||||
<h4 class="text-center mt-3">Connections</h4>
|
||||
<ul id="connection-list" class="list-group mb-3"></ul>
|
||||
<form id="add-connection-form" class="px-3">
|
||||
<input type="text" id="new-connection-topic" class="form-control mb-2" placeholder="Enter server topic" required>
|
||||
<input type="text" id="new-connection-topic" class="form-control mb-2" placeholder="Enter server topic"
|
||||
required>
|
||||
<button type="submit" class="btn btn-primary w-100">Add Connection</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="content">
|
||||
<h1 id="connection-title">Add a Connection</h1>
|
||||
<div id="dashboard" class="hidden">
|
||||
@ -175,7 +206,7 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Duplicate Container Modal -->
|
||||
<div class="modal fade" id="duplicateModal" tabindex="-1" aria-labelledby="duplicateModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
@ -221,7 +252,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Terminal Modal -->
|
||||
<div id="terminal-modal">
|
||||
<div class="header">
|
||||
@ -231,18 +262,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="terminal-container"></div>
|
||||
<div id="terminal-resize-handle"></div> <!-- Resize handle -->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tray"></div>
|
||||
|
||||
|
||||
<!-- xterm.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
|
||||
|
||||
|
||||
<!-- Bootstrap JS for Modal Functionality -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<!-- Your App JS -->
|
||||
<script type="module" src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -6,11 +6,17 @@ const terminalModal = document.getElementById('terminal-modal');
|
||||
const terminalTitle = document.getElementById('terminal-title');
|
||||
const terminalContainer = document.getElementById('terminal-container');
|
||||
const tray = document.getElementById('tray');
|
||||
const terminalHeader = document.querySelector('#terminal-modal .header');
|
||||
|
||||
// Terminal variables
|
||||
let terminalSessions = {}; // Track terminal sessions per containerId
|
||||
let activeContainerId = null; // Currently displayed containerId
|
||||
|
||||
// Variables for resizing
|
||||
let isResizing = false;
|
||||
let startY = 0;
|
||||
let startHeight = 0;
|
||||
|
||||
// Kill Terminal button functionality
|
||||
document.getElementById('kill-terminal-btn').onclick = () => {
|
||||
killActiveTerminal();
|
||||
@ -39,6 +45,42 @@ function killActiveTerminal() {
|
||||
}
|
||||
}
|
||||
|
||||
// Start resizing when the mouse is down on the header
|
||||
terminalHeader.addEventListener('mousedown', (e) => {
|
||||
isResizing = true;
|
||||
startY = e.clientY; // Track the initial Y position
|
||||
startHeight = terminalModal.offsetHeight; // Track the initial height
|
||||
document.body.style.cursor = 'ns-resize'; // Change cursor to indicate resizing
|
||||
e.preventDefault(); // Prevent text selection
|
||||
});
|
||||
|
||||
// Resize the modal while dragging
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (isResizing) {
|
||||
const deltaY = startY - e.clientY; // Calculate how much the mouse moved
|
||||
const newHeight = Math.min(
|
||||
Math.max(startHeight + deltaY, 150), // Minimum height: 150px
|
||||
window.innerHeight * 0.9 // Maximum height: 90% of viewport height
|
||||
);
|
||||
|
||||
terminalModal.style.height = `${newHeight}px`; // Set new height
|
||||
terminalContainer.style.height = `${newHeight - 40}px`; // Adjust terminal container height
|
||||
|
||||
const activeSession = terminalSessions[activeContainerId];
|
||||
if (activeSession) {
|
||||
setTimeout(() => activeSession.fitAddon.fit(), 10); // Adjust terminal content
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Stop resizing when the mouse is released
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (isResizing) {
|
||||
isResizing = false;
|
||||
document.body.style.cursor = 'default'; // Reset cursor
|
||||
}
|
||||
});
|
||||
|
||||
// Start terminal session
|
||||
function startTerminal(containerId, containerName) {
|
||||
if (!window.activePeer) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user