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

Shifted terminal down and to the right so its not squished up in the top left corner. Fix scroll wheel sizing and looks. Prepared for this bug update release.

Browse Source
This commit is contained in:
Karmaa
2025-03-09 18:20:43 -05:00
parent fb720c8c42
commit 4f9aeb89fb
4 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/AddHostModal.jsx
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

16
src/TabList.jsx
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;

5
src/Terminal.jsx
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)',
}} }}
/> />
); );

20
src/index.css
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);
} }