Fixed up split screen a little. Still buggy. Made some UI changes too.

This commit is contained in:
Karmaa
2025-03-02 00:04:21 -06:00
parent cf8fff572a
commit 2038a84c15
2 changed files with 63 additions and 40 deletions

View File

@@ -1,14 +1,15 @@
import { Button, ButtonGroup } from "@mui/joy";
import PropTypes from "prop-types";
function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, theme }) {
function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, splitTabIds, 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]" : ""}>
<ButtonGroup>
<Button
onClick={() => setActiveTab(terminal.id)}
onClick={() => splitTabIds.length === 0 && setActiveTab(terminal.id)}
disabled={splitTabIds.length > 0}
sx={{
backgroundColor:
terminal.id === activeTab
@@ -28,17 +29,26 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, th
</Button>
<Button
onClick={() => toggleSplit(terminal.id)}
disabled={terminal.id === activeTab}
disabled={
(splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
(splitTabIds.length === 0 && terminal.id === activeTab)
}
sx={{
backgroundColor: theme.palette.neutral[700],
backgroundColor: splitTabIds.includes(terminal.id)
? theme.palette.neutral[500]
: 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",
opacity: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
(splitTabIds.length === 0 && terminal.id === activeTab) ? 0.5 : 1,
cursor: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
(splitTabIds.length === 0 && terminal.id === activeTab)
? "not-allowed"
: "pointer",
}}
>
/
@@ -70,6 +80,7 @@ TabList.propTypes = {
setActiveTab: PropTypes.func.isRequired,
closeTab: PropTypes.func.isRequired,
toggleSplit: PropTypes.func.isRequired,
splitTabIds: PropTypes.array.isRequired,
theme: PropTypes.object.isRequired,
};