dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Dev 1.1 #18

Merged
LukeGus merged 5 commits from dev-1.1 into main 2025-03-09 23:46:09 +00:00
Conversation 0 Commits 5 Files Changed 7
+41 -17
4 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4f9aeb89fb - Show all commits
src/AddHostModal.jsx
+12 -5
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CssVarsProvider } from '@mui/joy/styles'; import { CssVarsProvider } from '@mui/joy/styles';
import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option, FormHelperText } from '@mui/joy'; import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option } from '@mui/joy';
import theme from './theme'; import theme from './theme';
const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => { const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => {
@@ -31,15 +31,22 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<CssVarsProvider theme={theme}> <CssVarsProvider theme={theme}>
<Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}> <Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
<ModalDialog <ModalDialog
layout="center"
sx={{ sx={{
backgroundColor: theme.palette.general.tertiary, backgroundColor: theme.palette.general.tertiary,
borderColor: theme.palette.general.secondary, borderColor: theme.palette.general.secondary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
padding: 3, padding: 3,
borderRadius: 10, borderRadius: 10,
overflowX: 'hidden', width: "auto",
overflowY: 'auto', maxWidth: "90vw",
}}> minWidth: "fit-content",
overflow: "hidden",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<DialogTitle>Add Host</DialogTitle> <DialogTitle>Add Host</DialogTitle>
<DialogContent> <DialogContent>
<form <form
@@ -48,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
if (isFormValid()) handleAddHost(); if (isFormValid()) handleAddHost();
}} }}
> >
<Stack spacing={2}> <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
<FormControl> <FormControl>
<FormLabel>Host Name</FormLabel> <FormLabel>Host Name</FormLabel>
<Input <Input
src/TabList.jsx
+6 -10
View File
@@ -5,12 +5,11 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
const isSplitScreenActive = splitTabIds.length > 0; const isSplitScreenActive = splitTabIds.length > 0;
return ( return (
<div className="inline-flex items-center h-full px-[0.5rem]"> <div className="tablist inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
{terminals.map((terminal, index) => { {terminals.map((terminal, index) => {
const isActive = terminal.id === activeTab; const isActive = terminal.id === activeTab;
const isSplit = splitTabIds.includes(terminal.id); const isSplit = splitTabIds.includes(terminal.id);
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || (splitTabIds.length >= 3 && !isSplit);
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
return ( return (
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}> <div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
@@ -20,8 +19,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
onClick={() => setActiveTab(terminal.id)} onClick={() => setActiveTab(terminal.id)}
disabled={isSplit} disabled={isSplit}
sx={{ sx={{
backgroundColor: backgroundColor: isActive ? theme.palette.general.primary : theme.palette.general.disabled,
isActive ? theme.palette.general.primary : theme.palette.general.disabled,
color: theme.palette.text.primary, color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.general.secondary }, "&:hover": { backgroundColor: theme.palette.general.secondary },
":disabled": { backgroundColor: theme.palette.general.disabled }, ":disabled": { backgroundColor: theme.palette.general.disabled },
@@ -40,9 +38,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
onClick={() => toggleSplit(terminal.id)} onClick={() => toggleSplit(terminal.id)}
disabled={isSplitButtonDisabled || isActive} disabled={isSplitButtonDisabled || isActive}
sx={{ sx={{
backgroundColor: isSplit backgroundColor: isSplit ? theme.palette.general.primary : theme.palette.general.tertiary,
? theme.palette.general.primary
: theme.palette.general.tertiary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
":disabled": { backgroundColor: theme.palette.general.disabled }, ":disabled": { backgroundColor: theme.palette.general.disabled },
"&:hover": { backgroundColor: theme.palette.general.secondary }, "&:hover": { backgroundColor: theme.palette.general.secondary },
@@ -58,7 +54,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
{/* Close Tab Button */} {/* Close Tab Button */}
<Button <Button
onClick={() => closeTab(terminal.id)} onClick={() => closeTab(terminal.id)}
disabled={isSplitScreenActive && isActive || isSplit} disabled={(isSplitScreenActive && isActive) || isSplit}
sx={{ sx={{
backgroundColor: theme.palette.general.tertiary, backgroundColor: theme.palette.general.tertiary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
@@ -90,4 +86,4 @@ TabList.propTypes = {
theme: PropTypes.object.isRequired, theme: PropTypes.object.isRequired,
}; };
export default TabList; export default TabList;
src/Terminal.jsx
+3 -2
View File
@@ -18,8 +18,8 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
if (!parentContainer || parentContainer.clientWidth === 0) return; if (!parentContainer || parentContainer.clientWidth === 0) return;
const parentWidth = parentContainer.clientWidth; const parentWidth = parentContainer.clientWidth - 10;
const parentHeight = parentContainer.clientHeight; const parentHeight = parentContainer.clientHeight - 10;
terminalContainer.style.width = `${parentWidth}px`; terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`; terminalContainer.style.height = `${parentHeight}px`;
@@ -162,6 +162,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
height: '100%', height: '100%',
transform: 'translateY(5px) translateX(5px)',
}} }}
/> />
); );
src/index.css
+20
View File
@@ -15,4 +15,24 @@
.terminal-container > div { .terminal-container > div {
min-height: 0; min-height: 0;
}
.tablist::-webkit-scrollbar {
width: 1px !important;
height: 1px !important;
background: transparent !important;
}
.tablist::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2) !important;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
} }