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

Added initial split screen mode and overall better UI sizing for terminals. (very buggy)

Browse Source
This commit is contained in:
Karmaa
2025-02-26 00:58:22 -06:00
parent cf5f0c41eb
commit cf8fff572a
3 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/TabList.jsx
View File

@@ -1,14 +1,11 @@
import {Button, ButtonGroup} from "@mui/joy";
import { Button, ButtonGroup } from "@mui/joy";
import PropTypes from "prop-types";
function TabList({ terminals, activeTab, setActiveTab, closeTab, theme }) {
function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, theme }) {
return (
<div className="inline-flex items-center h-full px-[0.5rem]">
{terminals.map((terminal, index) => (
<div
key={terminal.id}
className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}
>
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
<ButtonGroup>
<Button
onClick={() => setActiveTab(terminal.id)}
@@ -29,6 +26,23 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, theme }) {
>
{terminal.title}
</Button>
<Button
onClick={() => toggleSplit(terminal.id)}
disabled={terminal.id === activeTab}
sx={{
backgroundColor: theme.palette.neutral[700],
color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.neutral[300] },
borderTopRightRadius: "4px",
borderBottomRightRadius: "4px",
height: "40px",
fontSize: "1rem",
opacity: terminal.id === activeTab ? 0.5 : 1,
cursor: terminal.id === activeTab ? "not-allowed" : "pointer",
}}
>
/
</Button>
<Button
onClick={() => closeTab(terminal.id)}
sx={{
@@ -38,6 +52,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, theme }) {
borderTopRightRadius: "4px",
borderBottomRightRadius: "4px",
height: "40px",
fontSize: "1rem",
}}
>
×
@@ -54,6 +69,7 @@ TabList.propTypes = {
activeTab: PropTypes.any,
setActiveTab: PropTypes.func.isRequired,
closeTab: PropTypes.func.isRequired,
toggleSplit: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
};