UI: Fix several issues with script editor tabs (#554) (#567)

This commit is contained in:
Aleksei Bezrodnov 2023-06-04 18:01:06 +02:00 committed by GitHub
parent bda1daf49f
commit 7050c90378
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 209 additions and 142 deletions

100
src/ScriptEditor/ui/Tab.tsx Normal file

@ -0,0 +1,100 @@
import React, { useEffect, useRef } from "react";
import { DraggableProvided } from "react-beautiful-dnd";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import SyncIcon from "@mui/icons-material/Sync";
import CloseIcon from "@mui/icons-material/Close";
import { Settings } from "../../Settings/Settings";
interface IProps {
provided: DraggableProvided;
title: string;
isActive: boolean;
isExternal: boolean;
onClick: () => void;
onClose: () => void;
onUpdate: () => void;
}
const tabMargin = 5;
const tabIconWidth = 25;
const tabIconHeight = 38.5;
export function Tab({ provided, title, isActive, isExternal, onClick, onClose, onUpdate }: IProps) {
const colorProps = isActive
? {
background: Settings.theme.button,
borderColor: Settings.theme.button,
color: Settings.theme.primary,
}
: {
background: Settings.theme.backgroundsecondary,
borderColor: Settings.theme.backgroundsecondary,
color: Settings.theme.secondary,
};
if (isExternal) {
colorProps.color = Settings.theme.info;
}
const iconButtonStyle = {
maxWidth: tabIconWidth,
minWidth: tabIconWidth,
minHeight: tabIconHeight,
maxHeight: tabIconHeight,
...colorProps,
};
const tabRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (tabRef.current && isActive) {
tabRef.current?.scrollIntoView();
}
}, [isActive]);
return (
<div
ref={(element) => {
tabRef.current = element;
provided.innerRef(element);
}}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginRight: tabMargin,
flexShrink: 0,
border: "1px solid " + Settings.theme.well,
}}
>
<Tooltip title={title}>
<Button
onClick={onClick}
onMouseDown={(e) => {
e.preventDefault();
if (e.button === 1) onClose();
}}
style={{
minHeight: tabIconHeight,
overflow: "hidden",
...colorProps,
}}
>
<span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>{title}</span>
</Button>
</Tooltip>
<Tooltip title="Overwrite editor content with saved file content">
<Button onClick={onUpdate} style={iconButtonStyle}>
<SyncIcon fontSize="small" />
</Button>
</Tooltip>
<Button onClick={onClose} style={iconButtonStyle}>
<CloseIcon fontSize="small" />
</Button>
</div>
);
}

@ -1,20 +1,24 @@
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { Box, Button, TextField, Tooltip } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import SearchIcon from "@mui/icons-material/Search";
import SyncIcon from "@mui/icons-material/Sync";
import { useRerender } from "../../ui/React/hooks";
import { useBoolean, useRerender } from "../../ui/React/hooks";
import { Settings } from "../../Settings/Settings";
import { dirty, reorder } from "./utils";
import { OpenScript } from "./OpenScript";
import { Tab } from "./Tab";
const tabsMaxWidth = 1640;
const tabMargin = 5;
const tabIconWidth = 25;
const searchWidth = 180;
interface IProps {
scripts: OpenScript[];
@ -27,160 +31,123 @@ interface IProps {
export function Tabs({ scripts, currentScript, onTabClick, onTabClose, onTabUpdate }: IProps) {
const [filter, setFilter] = useState("");
const [isSearchTooltipOpen, { on: openSearchTooltip, off: closeSearchTooltip }] = useBoolean(false);
const [searchExpanded, setSearchExpanded] = useState(false);
const rerender = useRerender();
function onDragEnd(result: any): void {
const filteredScripts = Object.values(scripts)
.map((script, originalIndex) => ({ script, originalIndex }))
.filter(({ script }) => script.hostname.includes(filter) || script.path.includes(filter));
function onDragEnd(result: DropResult): void {
// Dropped outside of the list
if (!result.destination) return;
reorder(scripts, result.source.index, result.destination.index);
reorder(
scripts,
filteredScripts[result.source.index].originalIndex,
filteredScripts[result.destination.index].originalIndex,
);
rerender();
}
const filteredOpenScripts = Object.values(scripts).filter(
(script) => script.hostname.includes(filter) || script.path.includes(filter),
);
function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
setFilter(event.target.value);
}
function handleExpandSearch(): void {
function toggleSearch(): void {
setFilter("");
setSearchExpanded(!searchExpanded);
closeSearchTooltip();
}
function handleScroll(e: React.WheelEvent<HTMLDivElement>): void {
e.currentTarget.scrollLeft += e.deltaY;
}
const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0;
const tabTextWidth = tabMaxWidth - tabIconWidth * 2;
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="tabs" direction="horizontal">
{(provided, snapshot) => (
<Box
maxWidth={`${tabsMaxWidth}px`}
display="flex"
flexGrow="0"
flexDirection="row"
alignItems="center"
whiteSpace="nowrap"
ref={provided.innerRef}
{...provided.droppableProps}
style={{
backgroundColor: snapshot.isDraggingOver
? Settings.theme.backgroundsecondary
: Settings.theme.backgroundprimary,
overflowX: "scroll",
}}
>
<Tooltip title={"Search Open Scripts"}>
{searchExpanded ? (
<TextField
value={filter}
onChange={handleFilterChange}
autoFocus
InputProps={{
startAdornment: <SearchIcon />,
spellCheck: false,
endAdornment: <CloseIcon onClick={handleExpandSearch} />,
// TODO: reapply
// sx: { minWidth: 200 },
}}
/>
) : (
<Button onClick={handleExpandSearch}>
<SearchIcon />
</Button>
)}
</Tooltip>
{filteredOpenScripts.map(({ path: fileName, hostname }, index) => {
const editingCurrentScript =
currentScript?.path === filteredOpenScripts[index].path &&
currentScript.hostname === filteredOpenScripts[index].hostname;
const externalScript = hostname !== "home";
const colorProps = editingCurrentScript
? {
background: Settings.theme.button,
borderColor: Settings.theme.button,
color: Settings.theme.primary,
}
: {
background: Settings.theme.backgroundsecondary,
borderColor: Settings.theme.backgroundsecondary,
color: Settings.theme.secondary,
};
<Box display="flex" flexGrow="0" flexDirection="row" alignItems="center">
<Tooltip
title={"Search Open Scripts"}
open={isSearchTooltipOpen}
onOpen={openSearchTooltip}
onClose={closeSearchTooltip}
>
<span style={{ marginRight: 5 }}>
{searchExpanded ? (
<TextField
value={filter}
onChange={handleFilterChange}
autoFocus
sx={{ minWidth: searchWidth, maxWidth: searchWidth }}
InputProps={{
startAdornment: <SearchIcon />,
spellCheck: false,
endAdornment: (
<IconButton onClick={toggleSearch}>
<CloseIcon />
</IconButton>
),
}}
/>
) : (
<Button onClick={toggleSearch}>
<SearchIcon />
</Button>
)}
</span>
</Tooltip>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="tabs" direction="horizontal">
{(provided, snapshot) => (
<Box
maxWidth={`${tabsMaxWidth}px`}
display="flex"
flexGrow="1"
flexDirection="row"
alignItems="center"
whiteSpace="nowrap"
ref={provided.innerRef}
{...provided.droppableProps}
style={{
backgroundColor: snapshot.isDraggingOver
? Settings.theme.backgroundsecondary
: Settings.theme.backgroundprimary,
overflowX: "scroll",
}}
onWheel={handleScroll}
>
{filteredScripts.map(({ script, originalIndex }, index) => {
const { path: fileName, hostname } = script;
const isActive = currentScript?.path === script.path && currentScript.hostname === script.hostname;
if (externalScript) {
colorProps.color = Settings.theme.info;
}
const iconButtonStyle = {
maxWidth: `${tabIconWidth}px`,
minWidth: `${tabIconWidth}px`,
minHeight: "38.5px",
maxHeight: "38.5px",
...colorProps,
};
const title = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(scripts, index)}`;
const scriptTabText = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(
scripts,
index,
)}`;
return (
<Draggable
key={fileName + hostname}
draggableId={fileName + hostname}
index={index}
disableInteractiveElementBlocking={true}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
// maxWidth: `${tabMaxWidth}px`,
marginRight: `${tabMargin}px`,
flexShrink: 0,
border: "1px solid " + Settings.theme.well,
}}
>
<Tooltip title={scriptTabText}>
<Button
onClick={() => onTabClick(index)}
onMouseDown={(e) => {
e.preventDefault();
if (e.button === 1) onTabClose(index);
}}
style={{
maxWidth: `${tabTextWidth}px`,
minHeight: "38.5px",
overflow: "hidden",
...colorProps,
}}
>
<span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>
{scriptTabText}
</span>
</Button>
</Tooltip>
<Tooltip title="Overwrite editor content with saved file content">
<Button onClick={() => onTabUpdate(index)} style={iconButtonStyle}>
<SyncIcon fontSize="small" />
</Button>
</Tooltip>
<Button onClick={() => onTabClose(index)} style={iconButtonStyle}>
<CloseIcon fontSize="small" />
</Button>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
return (
<Draggable
key={fileName + hostname}
draggableId={fileName + hostname}
index={index}
disableInteractiveElementBlocking
>
{(provided) => (
<Tab
provided={provided}
title={title}
isActive={isActive}
isExternal={hostname !== "home"}
onClick={() => onTabClick(originalIndex)}
onClose={() => onTabClose(originalIndex)}
onUpdate={() => onTabUpdate(originalIndex)}
/>
)}
</Draggable>
);
})}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
</Box>
);
}