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 { 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);
}