Move toolbar to own file, tighter padding when collapsed

flatironinstitute · Jul 29, 2024 · 61d7a3d · 61d7a3d
1 parent 20168e5
commit 61d7a3d
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 131 deletions.
diff --git a/gui/src/app/FileEditor/StanFileEditor.tsx b/gui/src/app/FileEditor/StanFileEditor.tsx
@@ -1,7 +1,8 @@
 import { AutoFixHigh, Cancel, Settings } from "@mui/icons-material";
 import { SplitDirection, Splitter } from "@SpComponents/Splitter";
 import StanCompileResultWindow from "@SpComponents/StanCompileResultWindow";
-import TextEditor, { ToolbarItem } from "@SpComponents/TextEditor";
+import TextEditor from "@SpComponents/TextEditor";
+import { ToolbarItem } from "@SpComponents/ToolBar";
 import compileStanProgram from "@SpStanc/compileStanProgram";
 import { stancErrorsToCodeMarkers } from "@SpStanc/Linting";
 import useStanc from "@SpStanc/useStanc";

diff --git a/gui/src/app/FileEditor/TextEditor.tsx b/gui/src/app/FileEditor/TextEditor.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Editor, loader, useMonaco } from "@monaco-editor/react";
-import { Save } from "@mui/icons-material";
-import Button from "@mui/material/Button";
-import Link from "@mui/material/Link";
+
 import monacoAddStanLang from "@SpComponents/stanLang";
+import { ToolBar, ToolbarItem } from "@SpComponents/ToolBar";
 import { CodeMarker } from "@SpStanc/Linting";
 import { editor, MarkerSeverity } from "monaco-editor";
 import {
@@ -30,21 +29,6 @@ type Props = {
   contentOnEmpty?: string | HTMLSpanElement;
 };
 
-export type ToolbarItem =
-  | {
-      type: "button";
-      tooltip?: string;
-      label?: string;
-      icon?: any;
-      onClick: () => void;
-      color?: string;
-    }
-  | {
-      type: "text";
-      label: string;
-      color?: string;
-    };
-
 const TextEditor: FunctionComponent<Props> = ({
   text,
   onSaveText,
@@ -173,117 +157,6 @@ const toMonacoMarkerSeverity = (
   }
 };
 
-type ToolbarProps = {
-  items: ToolbarItem[];
-  label: string;
-  onSaveText: () => void;
-  edited: boolean;
-  readOnly: boolean;
-};
-
-const ToolBar: FunctionComponent<ToolbarProps> = ({
-  items,
-  label,
-  onSaveText,
-  edited,
-  readOnly,
-}) => {
-  const toolBarItems = useMemo(() => {
-    const editorItems: ToolbarItem[] = [];
-
-    if (!readOnly && edited) {
-      editorItems.push({
-        type: "button",
-        icon: <Save />,
-        onClick: onSaveText,
-        tooltip: "Save file",
-        label: "Save",
-      });
-    }
-
-    if (edited) {
-      editorItems.push({
-        type: "text",
-        label: "Edited",
-        color: "red",
-      });
-    }
-
-    if (readOnly) {
-      editorItems.push({
-        type: "text",
-        label: "Read Only",
-        color: "gray",
-      });
-    }
-
-    return editorItems.concat(items);
-  }, [edited, items, onSaveText, readOnly]);
-
-  return (
-    <div className="NotSelectable">
-      <div className="EditorMenuBar">
-        <span className="EditorTitle">{label}</span>
-        {toolBarItems &&
-          toolBarItems.map((item, i) => (
-            <ToolbarItemComponent key={i} item={item} />
-          ))}
-      </div>
-    </div>
-  );
-};
-
-const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
-  item,
-}) => {
-  if (item.type === "button") {
-    const { onClick, color, label, tooltip, icon } = item;
-    if (icon) {
-      return (
-        <span className="EditorToolbarItem" style={{ color }}>
-          <Button
-            startIcon={icon}
-            onClick={onClick}
-            disabled={!onClick}
-            color="inherit"
-            size="small"
-            title={tooltip}
-          >
-            {label && <span className="ToolbarButtonText">{label}</span>}
-          </Button>
-        </span>
-      );
-    } else {
-      return (
-        <span className="EditorToolbarItem">
-          <Link
-            onClick={onClick}
-            color={color || "gray"}
-            component="button"
-            underline="none"
-            title={tooltip}
-          >
-            {label}
-          </Link>
-          &nbsp;&nbsp;&nbsp;
-        </span>
-      );
-    }
-  } else if (item.type === "text") {
-    return (
-      <span
-        className="EditorToolbarItem"
-        style={{ color: item.color || "gray" }}
-        title={item.label}
-      >
-        {item.label}&nbsp;&nbsp;&nbsp;
-      </span>
-    );
-  } else {
-    return <span>unknown toolbar item type</span>;
-  }
-};
-
 const createHintTextContentWidget = (content: string | HTMLSpanElement) => {
   return {
     getDomNode: () => {

diff --git a/gui/src/app/FileEditor/ToolBar.tsx b/gui/src/app/FileEditor/ToolBar.tsx
@@ -0,0 +1,125 @@
+import { FunctionComponent, useMemo } from "react";
+import { Save } from "@mui/icons-material";
+import Link from "@mui/material/Link";
+import IconButton from "@mui/material/IconButton";
+
+export type ToolbarItem =
+  | {
+      type: "button";
+      tooltip?: string;
+      label?: string;
+      icon?: any;
+      onClick: () => void;
+      color?: string;
+    }
+  | {
+      type: "text";
+      label: string;
+      color?: string;
+    };
+
+type ToolbarProps = {
+  items: ToolbarItem[];
+  label: string;
+  onSaveText: () => void;
+  edited: boolean;
+  readOnly: boolean;
+};
+
+export const ToolBar: FunctionComponent<ToolbarProps> = ({
+  items,
+  label,
+  onSaveText,
+  edited,
+  readOnly,
+}) => {
+  const toolBarItems = useMemo(() => {
+    const editorItems: ToolbarItem[] = [];
+
+    if (readOnly) {
+      editorItems.push({
+        type: "text",
+        label: "Read Only",
+        color: "gray",
+      });
+    } else if (edited) {
+      editorItems.push({
+        type: "button",
+        icon: <Save />,
+        onClick: onSaveText,
+        tooltip: "Save file",
+        label: "Save",
+      });
+      editorItems.push({
+        type: "text",
+        label: "Edited",
+        color: "red",
+      });
+    }
+
+    return editorItems.concat(items);
+  }, [edited, items, onSaveText, readOnly]);
+
+  return (
+    <div className="NotSelectable">
+      <div className="EditorMenuBar">
+        <span className="EditorTitle">{label}</span>
+        {toolBarItems &&
+          toolBarItems.map((item, i) => (
+            <ToolbarItemComponent key={i} item={item} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
+  item,
+}) => {
+  if (item.type === "button") {
+    const { onClick, color, label, tooltip, icon } = item;
+    if (icon) {
+      return (
+        <span className="EditorToolbarItem" style={{ color }}>
+          <IconButton
+            onClick={onClick}
+            disabled={!onClick}
+            color="inherit"
+            size="small"
+            title={tooltip}
+          >
+            {icon}
+            {label && <span className="ToolbarButtonText">{label}</span>}
+          </IconButton>
+        </span>
+      );
+    } else {
+      return (
+        <span className="EditorToolbarItem">
+          <Link
+            onClick={onClick}
+            color={color || "gray"}
+            component="button"
+            underline="none"
+            title={tooltip}
+          >
+            {label}
+          </Link>
+          &nbsp;&nbsp;&nbsp;
+        </span>
+      );
+    }
+  } else if (item.type === "text") {
+    return (
+      <span
+        className="EditorToolbarItem"
+        style={{ color: item.color || "gray" }}
+        title={item.label}
+      >
+        {item.label}&nbsp;&nbsp;&nbsp;
+      </span>
+    );
+  } else {
+    return <span>unknown toolbar item type</span>;
+  }
+};
diff --git a/gui/src/app/Scripting/ScriptEditor.tsx b/gui/src/app/Scripting/ScriptEditor.tsx
@@ -1,6 +1,7 @@
 import { Help, PlayArrow } from "@mui/icons-material";
 import { SplitDirection, Splitter } from "@SpComponents/Splitter";
-import TextEditor, { ToolbarItem } from "@SpComponents/TextEditor";
+import TextEditor from "@SpComponents/TextEditor";
+import { ToolbarItem } from "@SpComponents/ToolBar";
 import { FileNames } from "@SpCore/FileMapping";
 import { ProjectContext } from "@SpCore/ProjectContextProvider";
 import { ProjectKnownFiles } from "@SpCore/ProjectDataModel";

diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
@@ -116,12 +116,15 @@ span.EditorToolbarItem {
   letter-spacing: normal;
   display: inline-block;
   white-space: normal;
+  padding-left: 5px;
+  font-size: 14px;
 }
 
 @container EditorMenuBar (max-width: 500px) {
   .ToolbarButtonText {
     display: none;
     width: 0;
+    padding: 0;
   }
   span.EditorToolbarItem {
     padding: 0px;