Improving accent color

JdeRobot · Jan 10, 2025 · 6d97b12 · 6d97b12
1 parent 446d610
commit 6d97b12
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 48 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -25,16 +25,12 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => {
   const [forceSaveCurrent, setForcedSaveCurrent] = useState<boolean>(false);
   const [currentProjectname, setCurrentProjectname] = useState<string>("");
   const [currentUniverseName, setCurrentUniverseName] = useState<string>("");
-  const [actionNodesData, setActionNodesData] = useState<Record<string, any>>(
-    {},
-  );
   const [saveCurrentDiagram, setSaveCurrentDiagram] = useState<boolean>(false);
   const [updateFileExplorer, setUpdateFileExplorer] = useState<boolean>(false);
   const [isErrorModalOpen, setErrorModalOpen] = useState<boolean>(false);
   const [projectChanges, setProjectChanges] = useState<boolean>(false);
   const [gazeboEnabled, setGazeboEnabled] = useState<boolean>(false);
   const [manager, setManager] = useState<CommsManager | null>(null);
-  const [diagramEditorReady, setDiagramEditorReady] = useState<boolean>(false);
   const [showSim, setSimVisible] = useState<boolean>(false);
   const [showTerminal, setTerminalVisible] = useState<boolean>(false);
 
@@ -190,9 +186,6 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => {
                 currentFilename={currentFilename}
                 currentProjectname={currentProjectname}
                 setProjectChanges={setProjectChanges}
-                actionNodesData={actionNodesData}
-                showAccentColor={"editorShowAccentColors"}
-                diagramEditorReady={diagramEditorReady}
                 setAutosave={setAutosave}
                 forceSaveCurrent={forceSaveCurrent}
                 setForcedSaveCurrent={setForcedSaveCurrent}

diff --git a/frontend/src/components/file_browser/FileBrowser.js b/frontend/src/components/file_browser/FileBrowser.js
@@ -41,9 +41,6 @@ const FileBrowser = ({
   currentFilename,
   currentProjectname,
   setProjectChanges,
-  actionNodesData,
-  showAccentColor,
-  diagramEditorReady,
   setAutosave,
   forceSaveCurrent,
   setForcedSaveCurrent,
@@ -395,9 +392,6 @@ const FileBrowser = ({
           currentFilename={currentFilename}
           currentProjectname={currentProjectname}
           setSelectedEntry={setSelectedEntry}
-          actionNodesData={actionNodesData}
-          showAccentColor={showAccentColor}
-          diagramEditorReady={diagramEditorReady}
           fileList={fileList}
           fetchFileList={fetchFileList}
           onDelete={handleDeleteModal}

diff --git a/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx b/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx
@@ -1,17 +1,14 @@
 import React, { useEffect, useState } from "react";
 
 import "./FileExplorer.css";
-import TreeNode from "./TreeNode.jsx";
+import TreeNode from "./TreeNode";
 import MoreActionsMenu, { ContextMenuProps } from "./MoreActionsMenu.jsx";
 
 const FileExplorer = ({
   setCurrentFilename,
   currentFilename,
   currentProjectname,
   setSelectedEntry,
-  actionNodesData,
-  showAccentColor,
-  diagramEditorReady,
   fileList,
   fetchFileList,
   onDelete,
@@ -65,9 +62,6 @@ const FileExplorer = ({
             depth={0}
             parentGroup=""
             currentFilename={currentFilename}
-            showAccentColor={showAccentColor}
-            diagramEditorReady={diagramEditorReady}
-            actionNodesData={actionNodesData}
             handleFileClick={handleFileClick}
             handleFolderClick={handleFolderClick}
             menuProps={MenuProps}
@@ -76,7 +70,6 @@ const FileExplorer = ({
         {showMenu && (
           <MoreActionsMenu
             menuProps={MenuProps}
-            actionNodesData={actionNodesData}
             onDelete={onDelete}
             onCreateFile={onCreateFile}
             onCreateFolder={onCreateFolder}

diff --git a/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx b/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx
@@ -4,7 +4,6 @@ import "./MoreActionsMenu.css";
 
 function MoreActionsMenu({
   menuProps,
-  actionNodesData,
   onDelete,
   onCreateFile,
   onCreateFolder,

diff --git a/...s/file_browser/file_explorer/TreeNode.jsx → ...s/file_browser/file_explorer/TreeNode.tsx b/...s/file_browser/file_explorer/TreeNode.jsx → ...s/file_browser/file_explorer/TreeNode.tsx
@@ -1,22 +1,40 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 
 import { ReactComponent as ActionIcon } from "./img/action.svg";
 import FileIcon from "./FileIcon.jsx";
+import { OptionsContext } from "../../options/Options";
+import { ContextMenuProps } from "./MoreActionsMenu";
+import {
+  getActionFrame,
+} from "../../helper/TreeEditorHelper";
+
+interface Entry {
+  name: string;
+  is_dir: boolean;
+  path: string;
+  files: Entry[];
+}
 
 function TreeNode({
   node,
   depth,
   parentGroup,
   currentFilename,
-  showAccentColor,
-  diagramEditorReady,
-  actionNodesData,
   handleFileClick,
   handleFolderClick,
   menuProps,
+}: {
+  node: Entry;
+  depth: number;
+  parentGroup: string;
+  currentFilename: string;
+  handleFileClick: Function;
+  handleFolderClick: Function;
+  menuProps: ContextMenuProps;
 }) {
-  const [isCollapsed, setCollapsed] = useState(false);
-  const [group, setGroup] = useState(parentGroup);
+  const [isCollapsed, setCollapsed] = useState<boolean>(false);
+  const [group, setGroup] = useState<string>(parentGroup);
+  const settings = React.useContext(OptionsContext);
 
   useEffect(() => {
     if (node.is_dir) {
@@ -25,7 +43,7 @@ function TreeNode({
       }
     }
   }, []);
-
+  
   const handleClick = () => {
     if (node.is_dir) {
       setCollapsed(!isCollapsed);
@@ -61,17 +79,15 @@ function TreeNode({
               menuProps.showMoreActionsMenu(
                 e,
                 node,
-                parentGroup === "" ? group : parentGroup,
+                parentGroup === "" ? group : parentGroup
               );
             }}
           />
-          {showAccentColor && diagramEditorReady && (
+          {settings.editorShowAccentColors.value && (
             <div
               className="bt-accent-color"
               style={{
-                backgroundColor: actionNodesData[node.name.replace(".py", "")]
-                  ? actionNodesData[node.name.replace(".py", "")]["color"]
-                  : "none",
+                backgroundColor: getActionFrame(node.name.replace(".py", "")) ? getActionFrame(node.name.replace(".py", ""))?.getColor() : "none",
               }}
             />
           )}
@@ -84,9 +100,6 @@ function TreeNode({
             depth={depth + 1}
             parentGroup={group}
             currentFilename={currentFilename}
-            showAccentColor={showAccentColor}
-            diagramEditorReady={diagramEditorReady}
-            actionNodesData={actionNodesData}
             handleFileClick={handleFileClick}
             handleFolderClick={handleFolderClick}
             menuProps={menuProps}

diff --git a/frontend/src/components/options/Options.tsx b/frontend/src/components/options/Options.tsx
@@ -3,8 +3,8 @@ import { createContext, useState } from "react";
 const OptionsContext = createContext<SettingsData>({
   editorShowAccentColors: {
     setter: () => {},
-    value: true,
-    default_value: true,
+    value: false,
+    default_value: false,
   },
   theme: { setter: () => {}, value: "dark", default_value: "dark" },
   btOrder: {
@@ -30,7 +30,7 @@ export interface SettingsData {
 
 const OptionsProvider = ({ children }: { children: any }) => {
   // TODO: try to not repeat the default values
-  const [editorShowAccentColors, setEditorShowAccentColors] = useState(true);
+  const [editorShowAccentColors, setEditorShowAccentColors] = useState(false);
   const [theme, setTheme] = useState("dark");
   const [btOrder, setBtOrder] = useState("bottom-to-top");
 
@@ -39,7 +39,7 @@ const OptionsProvider = ({ children }: { children: any }) => {
     editorShowAccentColors: {
       setter: setEditorShowAccentColors,
       value: editorShowAccentColors,
-      default_value: true,
+      default_value: false,
     },
     theme: { setter: setTheme, value: theme, default_value: "dark" },
     btOrder: {

diff --git a/frontend/src/components/settings_popup/SettingsModal.jsx b/frontend/src/components/settings_popup/SettingsModal.jsx
@@ -17,15 +17,9 @@ import { OptionsContext } from "../options/Options";
 import { saveProjectConfig } from "./../../api_helper/TreeWrapper";
 
 const SettingsModal = ({ onSubmit, isOpen, onClose, currentProjectname }) => {
-  const [color, setColor] = useColor("rgb(128 0 128)");
-  const [open, setOpen] = useState(false);
-
+  // const [color, setColor] = useColor("rgb(128 0 128)");
   const settings = React.useContext(OptionsContext);
 
-  useEffect(() => {
-    // Load settings
-  }, [isOpen]);
-
   // useEffect(() => {
   //   console.log("rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")")
   //   document.documentElement.style.setProperty("--header", "rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")");