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

2026-04-21 16:52:55 +02:00 · 2023-06-04 18:01:06 +02:00
parent bda1daf49f
commit 7050c90378
2 changed files with 209 additions and 142 deletions
@@ -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>
+  );
+}