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

17
src/AddHostModal.jsx
View File

@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
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';
const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => {
@@ -31,15 +31,22 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<CssVarsProvider theme={theme}>
<Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
<ModalDialog
layout="center"
sx={{
backgroundColor: theme.palette.general.tertiary,
borderColor: theme.palette.general.secondary,
color: theme.palette.text.primary,
padding: 3,
borderRadius: 10,
overflowX: 'hidden',
overflowY: 'auto',
}}>
width: "auto",
maxWidth: "90vw",
minWidth: "fit-content",
overflow: "hidden",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<DialogTitle>Add Host</DialogTitle>
<DialogContent>
<form
@@ -48,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
if (isFormValid()) handleAddHost();
}}
>
<Stack spacing={2}>
<Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
<FormControl>
<FormLabel>Host Name</FormLabel>
<Input

16
src/TabList.jsx
View File

@@ -5,12 +5,11 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
const isSplitScreenActive = splitTabIds.length > 0;
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) => {
const isActive = terminal.id === activeTab;
const isSplit = splitTabIds.includes(terminal.id);
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || (splitTabIds.length >= 3 && !isSplit);
return (
<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)}
disabled={isSplit}
sx={{
backgroundColor:
isActive ? theme.palette.general.primary : theme.palette.general.disabled,
backgroundColor: isActive ? theme.palette.general.primary : theme.palette.general.disabled,
color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.general.secondary },
":disabled": { backgroundColor: theme.palette.general.disabled },
@@ -40,9 +38,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
onClick={() => toggleSplit(terminal.id)}
disabled={isSplitButtonDisabled || isActive}
sx={{
backgroundColor: isSplit
? theme.palette.general.primary
: theme.palette.general.tertiary,
backgroundColor: isSplit ? theme.palette.general.primary : theme.palette.general.tertiary,
color: theme.palette.text.primary,
":disabled": { backgroundColor: theme.palette.general.disabled },
"&:hover": { backgroundColor: theme.palette.general.secondary },
@@ -58,7 +54,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
{/* Close Tab Button */}
<Button
onClick={() => closeTab(terminal.id)}
disabled={isSplitScreenActive && isActive || isSplit}
disabled={(isSplitScreenActive && isActive) || isSplit}
sx={{
backgroundColor: theme.palette.general.tertiary,
color: theme.palette.text.primary,
@@ -90,4 +86,4 @@ TabList.propTypes = {
theme: PropTypes.object.isRequired,
};
export default TabList;
export default TabList;

5
src/Terminal.jsx
View File

@@ -18,8 +18,8 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
if (!parentContainer || parentContainer.clientWidth === 0) return;
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
const parentWidth = parentContainer.clientWidth - 10;
const parentHeight = parentContainer.clientHeight - 10;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
@@ -162,6 +162,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
position: 'absolute',
width: '100%',
height: '100%',
transform: 'translateY(5px) translateX(5px)',
}}
/>
);

20
src/index.css
View File

@@ -15,4 +15,24 @@
.terminal-container > div {
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);
}