Made some UI changes and code cleanup. Split screen working great, readying for release for user testing (without persistence or launchpad for now).
This commit is contained in:
Karmaa
@@ -9,8 +9,8 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
<Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
|
||||
<ModalDialog
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
borderColor: theme.palette.neutral[100],
|
||||
backgroundColor: theme.palette.general.tertiary,
|
||||
borderColor: theme.palette.general.secondary,
|
||||
color: theme.palette.text.primary,
|
||||
padding: 3,
|
||||
borderRadius: 10,
|
||||
@@ -31,7 +31,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
required={false}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
@@ -43,7 +43,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
onChange={(e) => setForm({ ...form, ip: e.target.value })}
|
||||
required
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
@@ -55,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
onChange={(e) => setForm({ ...form, user: e.target.value })}
|
||||
required
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
@@ -68,7 +68,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
required
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
@@ -83,7 +83,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
required
|
||||
error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
@@ -91,9 +91,9 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
|
||||
<Button
|
||||
type="submit"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[500],
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.neutral[900],
|
||||
backgroundColor: theme.palette.general.disabled,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
53
src/App.jsx
53
src/App.jsx
@@ -24,7 +24,6 @@ function App() {
|
||||
const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
|
||||
const [splitTabIds, setSplitTabIds] = useState([]);
|
||||
|
||||
// Handle keypress for opening launchpad
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.ctrlKey && e.key === "l") {
|
||||
@@ -39,7 +38,6 @@ function App() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle adding a host
|
||||
const handleAddHost = () => {
|
||||
if (form.ip && form.user && form.password && form.port) {
|
||||
const newTerminal = {
|
||||
@@ -63,7 +61,6 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Close a terminal tab
|
||||
const closeTab = (id) => {
|
||||
const newTerminals = terminals.filter((t) => t.id !== id);
|
||||
setTerminals(newTerminals);
|
||||
@@ -72,20 +69,23 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle split for a terminal tab
|
||||
const toggleSplit = (id) => {
|
||||
if (splitTabIds.length >= 3) return; // Prevent more than 2 tabs from splitting
|
||||
if (splitTabIds.includes(id)) {
|
||||
setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
|
||||
return;
|
||||
}
|
||||
|
||||
if (splitTabIds.length >= 3) return;
|
||||
|
||||
setSplitTabIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id]
|
||||
);
|
||||
|
||||
if (splitTabIds.includes(id)) {
|
||||
setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
|
||||
}
|
||||
};
|
||||
|
||||
// Determine the layout based on the number of split tabs
|
||||
const handleSetActiveTab = (tabId) => {
|
||||
setActiveTab(tabId);
|
||||
};
|
||||
|
||||
const getLayoutStyle = () => {
|
||||
if (splitTabIds.length === 1) {
|
||||
// Horizontal split (2 tabs: left-right)
|
||||
@@ -104,9 +104,9 @@ function App() {
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Topbar */}
|
||||
<div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[75px] max-h-[75px] shadow-xl border-b-5 border-neutral-700">
|
||||
<div className="bg-neutral-700 flex justify-center items-center gap-2 p-3 rounded-lg h-[52px]">
|
||||
<img src={TermixIcon} alt="Termix Icon" className="w-[30px] h-[30px]" />
|
||||
<h2 className="text-lg font-bold ml-[-2px]">Termix</h2>
|
||||
<div className="bg-neutral-700 flex justify-center items-center gap-1 p-2 rounded-lg h-[52px]">
|
||||
<img src={TermixIcon} alt="Termix Icon" className="w-[25px] h-[25px] object-contain" />
|
||||
<h2 className="text-lg font-bold">Termix</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-neutral-700 rounded-lg overflow-hidden h-[52px] flex items-center">
|
||||
@@ -114,7 +114,7 @@ function App() {
|
||||
<TabList
|
||||
terminals={terminals}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
setActiveTab={handleSetActiveTab}
|
||||
closeTab={closeTab}
|
||||
toggleSplit={toggleSplit}
|
||||
splitTabIds={splitTabIds}
|
||||
@@ -127,8 +127,8 @@ function App() {
|
||||
<Button
|
||||
onClick={() => setIsLaunchpadOpen(true)}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
backgroundColor: theme.palette.general.tertiary,
|
||||
"&:hover": { backgroundColor: theme.palette.general.secondary },
|
||||
flexShrink: 0,
|
||||
height: "52px",
|
||||
width: "52px",
|
||||
@@ -142,8 +142,8 @@ function App() {
|
||||
<Button
|
||||
onClick={() => setIsAddHostHidden(false)}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
backgroundColor: theme.palette.general.tertiary,
|
||||
"&:hover": { backgroundColor: theme.palette.general.secondary },
|
||||
flexShrink: 0,
|
||||
height: "52px",
|
||||
width: "52px",
|
||||
@@ -163,7 +163,16 @@ function App() {
|
||||
{terminals.map((terminal) => (
|
||||
<div
|
||||
key={terminal.id}
|
||||
className={`bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 ${splitTabIds.includes(terminal.id) || activeTab === terminal.id ? "block" : "hidden"} flex-1`}
|
||||
className={`bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 ${
|
||||
splitTabIds.includes(terminal.id) || activeTab === terminal.id ? "block" : "hidden"
|
||||
} flex-1`}
|
||||
style={{
|
||||
order: splitTabIds.includes(terminal.id)
|
||||
? splitTabIds.indexOf(terminal.id) + 1
|
||||
: activeTab === terminal.id
|
||||
? 0
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
<NewTerminal
|
||||
key={terminal.id}
|
||||
@@ -172,9 +181,7 @@ function App() {
|
||||
if (ref && !terminal.terminalRef) {
|
||||
setTerminals((prev) =>
|
||||
prev.map((t) =>
|
||||
t.id === terminal.id
|
||||
? { ...t, terminalRef: ref }
|
||||
: t
|
||||
t.id === terminal.id ? { ...t, terminalRef: ref } : t
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -199,4 +206,4 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
@@ -1,29 +1,78 @@
|
||||
import {Button} from "@mui/joy";
|
||||
import PropTypes from 'prop-types';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { CssVarsProvider } from '@mui/joy/styles';
|
||||
import { Button } from '@mui/joy';
|
||||
import theme from './theme';
|
||||
|
||||
function Launchpad({ onClose }) {
|
||||
const launchpadRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (launchpadRef.current && !launchpadRef.current.contains(event.target)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "20%",
|
||||
left: "20%",
|
||||
width: "60%",
|
||||
height: "60%",
|
||||
backgroundColor: "gray",
|
||||
zIndex: 1000,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-4">Launchpad</h2>
|
||||
<p className="mb-4">This is your all-in-one launchpad panel.</p>
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
<CssVarsProvider theme={theme}>
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.2)",
|
||||
zIndex: 1000,
|
||||
backdropFilter: "blur(5px)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={launchpadRef}
|
||||
style={{
|
||||
width: "75%",
|
||||
height: "75%",
|
||||
backgroundColor: theme.palette.general.tertiary,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
|
||||
border: `1px solid ${theme.palette.general.secondary}`,
|
||||
color: theme.palette.text.primary,
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold mb-4">Launchpad</h2>
|
||||
<p className="mb-4">W.I.P. Feature</p>
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.general.disabled,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CssVarsProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,22 +10,21 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
|
||||
const isActive = terminal.id === activeTab;
|
||||
const isSplit = splitTabIds.includes(terminal.id);
|
||||
|
||||
// Disable split screen button for the active tab (before and after splitting)
|
||||
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
|
||||
|
||||
return (
|
||||
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
|
||||
<ButtonGroup>
|
||||
{/* Set active tab button */}
|
||||
{/* Set Active Tab Button */}
|
||||
<Button
|
||||
onClick={() => setActiveTab(terminal.id)}
|
||||
disabled={isSplit} // Disabled for split screen tabs
|
||||
disabled={isSplit}
|
||||
sx={{
|
||||
backgroundColor:
|
||||
isActive ? theme.palette.neutral[500] : theme.palette.neutral[800],
|
||||
isActive ? theme.palette.general.primary : theme.palette.general.disabled,
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
"&:hover": { backgroundColor: theme.palette.general.secondary },
|
||||
":disabled": { backgroundColor: theme.palette.general.disabled },
|
||||
borderTopLeftRadius: "4px",
|
||||
borderBottomLeftRadius: "4px",
|
||||
height: "40px",
|
||||
@@ -36,17 +35,17 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
|
||||
>
|
||||
{terminal.title}
|
||||
</Button>
|
||||
{/* Split screen button */}
|
||||
{/* Split Screen Button */}
|
||||
<Button
|
||||
onClick={() => toggleSplit(terminal.id)}
|
||||
disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split)
|
||||
disabled={isSplitButtonDisabled || isActive}
|
||||
sx={{
|
||||
backgroundColor: isSplit
|
||||
? theme.palette.neutral[500] // Split tabs get color 700
|
||||
: theme.palette.neutral[700], // Active tab has disabled color
|
||||
? theme.palette.general.primary
|
||||
: theme.palette.general.tertiary,
|
||||
color: theme.palette.text.primary,
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
":disabled": { backgroundColor: theme.palette.general.disabled },
|
||||
"&:hover": { backgroundColor: theme.palette.general.secondary },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
@@ -56,15 +55,15 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
|
||||
>
|
||||
/
|
||||
</Button>
|
||||
{/* Close tab button */}
|
||||
{/* Close Tab Button */}
|
||||
<Button
|
||||
onClick={() => closeTab(terminal.id)}
|
||||
disabled={isSplitScreenActive && isActive || isSplit}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.neutral[700],
|
||||
backgroundColor: theme.palette.general.tertiary,
|
||||
color: theme.palette.text.primary,
|
||||
"&:hover": { backgroundColor: theme.palette.neutral[300] },
|
||||
":disabled": { backgroundColor: theme.palette.neutral[800] },
|
||||
"&:hover": { backgroundColor: theme.palette.general.secondary },
|
||||
":disabled": { backgroundColor: theme.palette.general.disabled },
|
||||
borderTopRightRadius: "4px",
|
||||
borderBottomRightRadius: "4px",
|
||||
height: "40px",
|
||||
|
||||
@@ -4,6 +4,7 @@ import { FitAddon } from "@xterm/addon-fit";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import io from "socket.io-client";
|
||||
import PropTypes from "prop-types";
|
||||
import theme from "./theme";
|
||||
|
||||
export function NewTerminal({ hostConfig }) {
|
||||
const terminalRef = useRef(null);
|
||||
@@ -16,9 +17,9 @@ export function NewTerminal({ hostConfig }) {
|
||||
const terminal = new Terminal({
|
||||
cursorBlink: true,
|
||||
theme: {
|
||||
background: "#242424",
|
||||
foreground: "#ffffff",
|
||||
cursor: "#ffffff",
|
||||
background: theme.palette.background.terminal,
|
||||
foreground: theme.palette.text.primary,
|
||||
cursor: theme.palette.text.primary,
|
||||
},
|
||||
fontSize: 14,
|
||||
scrollback: 1000,
|
||||
|
||||
33
src/theme.js
33
src/theme.js
@@ -17,28 +17,21 @@ const theme = extendTheme({
|
||||
900: '#0f0f0f',
|
||||
},
|
||||
background: {
|
||||
default: '#212121', // Dark background to contrast white text
|
||||
paper: '#333333', // Slightly lighter paper background for depth
|
||||
primary: '#3d3d3d',
|
||||
terminal: '#262626',
|
||||
paper: '#555555',
|
||||
},
|
||||
text: {
|
||||
primary: '#ffffff', // White text for readability
|
||||
secondary: '#b0b0b0', // Light gray for secondary text
|
||||
},
|
||||
primary: {
|
||||
main: '#ff4081', // Bright pink for the primary accent color
|
||||
},
|
||||
secondary: {
|
||||
main: '#00bcd4', // A fresh cyan-blue for secondary accents
|
||||
},
|
||||
error: {
|
||||
main: '#e53935', // Strong red for error
|
||||
},
|
||||
warning: {
|
||||
main: '#ff9800', // Vibrant yellow-orange for warning
|
||||
},
|
||||
success: {
|
||||
main: '#4caf50', // Fresh green for success
|
||||
primary: '#f7f7f7',
|
||||
secondary: '#a7a7a7',
|
||||
},
|
||||
general: {
|
||||
primary: '#6e6e6e',
|
||||
secondary: '#a7a7a7',
|
||||
tertiary: '#3d3d3d',
|
||||
disabled: '#262626',
|
||||
dark: '#0f0f0f',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -47,4 +40,4 @@ const theme = extendTheme({
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
export default theme;
|
||||
Reference in New Issue
Block a user