Merge pull request #166 from JdeRobot/js-style

Readded js style lost in the merge
JdeRobot · Jul 31, 2024 · 4e68926 · 4e68926
2 parents 48a52d9 + 4bef677
commit 4e68926
Show file tree

Hide file tree

Showing 13 changed files with 268 additions and 122 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -75,7 +75,7 @@ const App = () => {
 
   const launchUniverse = (universe_name) => {
     const apiUrl = `/tree_api/get_universe_configuration?project_name=${encodeURIComponent(
-      currentProjectname
+      currentProjectname,
     )}&universe_name=${encodeURIComponent(universe_name)}`;
 
     axios.get(apiUrl).then((response) => {
@@ -197,14 +197,20 @@ const App = () => {
 
           // Load all the settings
           Object.entries(settings).map(([key, value]) => {
-            value.setter(project_settings[key] ? project_settings[key] : value.default_value);
+            value.setter(
+              project_settings[key]
+                ? project_settings[key]
+                : value.default_value,
+            );
           });
         })
         .catch((error) => {
           console.log(error);
           if (error.response) {
             if (error.response.status === 404) {
-              openError(`The project ${currentProjectname} has no configuration available`);
+              openError(
+                `The project ${currentProjectname} has no configuration available`,
+              );
             } else {
               openError("Failed to load configuration");
             }

diff --git a/frontend/src/components/diagram_editor/NodeHeader.js b/frontend/src/components/diagram_editor/NodeHeader.js
@@ -100,19 +100,34 @@ const NodeHeader = ({
       <h2>Tree Editor</h2>
 
       <div className="button-container">
-        <button className="node-button" onClick={(e) => handleClick(e, "Sequences")}>
+        <button
+          className="node-button"
+          onClick={(e) => handleClick(e, "Sequences")}
+        >
           Sequences
         </button>
-        <button className="node-button" onClick={(e) => handleClick(e, "Fallbacks")}>
+        <button
+          className="node-button"
+          onClick={(e) => handleClick(e, "Fallbacks")}
+        >
           Fallbacks
         </button>
-        <button className="node-button" onClick={(e) => handleClick(e, "Decorators")}>
+        <button
+          className="node-button"
+          onClick={(e) => handleClick(e, "Decorators")}
+        >
           Decorators
         </button>
-        <button className="node-button" onClick={(e) => handleClick(e, "Actions")}>
+        <button
+          className="node-button"
+          onClick={(e) => handleClick(e, "Actions")}
+        >
           Actions
         </button>
-        <button className="node-button" onClick={(e) => handleClick(e, "Port values")}>
+        <button
+          className="node-button"
+          onClick={(e) => handleClick(e, "Port values")}
+        >
           Port value
         </button>
       </div>
@@ -155,24 +170,36 @@ const NodeHeader = ({
           className="node-action-button"
           onClick={() => {
             openInNewTab(
-              "https://github.com/JdeRobot/bt-studio/tree/unibotics-devel/documentation"
+              "https://github.com/JdeRobot/bt-studio/tree/unibotics-devel/documentation",
             );
           }}
           title="Help"
         >
           <HelpIcon className="icon action-icon" fill={"var(--icon)"} />
         </button>
-        <button className="node-action-button" onClick={onGenerateApp} title="Download app">
+        <button
+          className="node-action-button"
+          onClick={onGenerateApp}
+          title="Download app"
+        >
           <DownloadIcon className="icon action-icon" stroke={"var(--icon)"} />
         </button>
-        <button className="node-action-button" onClick={onRunApp} title="Run app">
+        <button
+          className="node-action-button"
+          onClick={onRunApp}
+          title="Run app"
+        >
           {isAppRunning ? (
             <StopIcon className="icon action-icon" fill={"var(--icon)"} />
           ) : (
             <RunIcon className="icon action-icon" fill={"var(--icon)"} />
           )}
         </button>
-        <button className="node-action-button" onClick={onResetApp} title="Reset app">
+        <button
+          className="node-action-button"
+          onClick={onResetApp}
+          title="Reset app"
+        >
           <ResetIcon className="icon action-icon" stroke={"var(--icon)"} />
         </button>
       </div>

diff --git a/frontend/src/components/diagram_editor/modals/EditActionModal.jsx b/frontend/src/components/diagram_editor/modals/EditActionModal.jsx
@@ -8,11 +8,11 @@ import Modal from "../../Modal/Modal";
 import { OutputPortModel } from "../nodes/basic_node/ports/output_port/OutputPortModel";
 import { InputPortModel } from "../nodes/basic_node/ports/input_port/InputPortModel";
 
-import { ReactComponent as AddIcon } from '../img/add.svg'
-import { ReactComponent as DeleteIcon } from '../img/delete.svg'
-import { ReactComponent as CancelIcon } from '../img/cancel.svg'
-import { ReactComponent as AcceptIcon } from '../img/accept.svg'
-import { ReactComponent as CloseIcon } from '../../Modal/img/close.svg'
+import { ReactComponent as AddIcon } from "../img/add.svg";
+import { ReactComponent as DeleteIcon } from "../img/delete.svg";
+import { ReactComponent as CancelIcon } from "../img/cancel.svg";
+import { ReactComponent as AcceptIcon } from "../img/accept.svg";
+import { ReactComponent as CloseIcon } from "../../Modal/img/close.svg";
 
 const initialEditActionModalData = {
   newInputName: "",
@@ -204,10 +204,13 @@ const EditActionModal = ({
         >
           Edit action value
         </label>
-        <CloseIcon 
-          className="modal-titlebar-close icon" 
-          onClick={() => { onClose(); } } 
-          fill={"var(--icon)"}/>
+        <CloseIcon
+          className="modal-titlebar-close icon"
+          onClick={() => {
+            onClose();
+          }}
+          fill={"var(--icon)"}
+        />
       </div>
       <div className="node-editor-row">
         {currentActionNode && (
@@ -254,10 +257,15 @@ const EditActionModal = ({
                               reRender();
                             }}
                           >
-                            <DeleteIcon 
-                              className="icon" 
-                              fill={"var(--icon)"} 
-                              style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                            <DeleteIcon
+                              className="icon"
+                              fill={"var(--icon)"}
+                              style={{
+                                filter: isBackgroundDark()
+                                  ? "invert(0)"
+                                  : "invert(1)",
+                              }}
+                            />
                           </button>
                         </div>
                       );
@@ -283,10 +291,15 @@ const EditActionModal = ({
                       title="Cancel"
                       onClick={() => cancelCreation()}
                     >
-                      <CancelIcon 
-                        className="icon" 
-                        fill={"var(--icon)"} 
-                        style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                      <CancelIcon
+                        className="icon"
+                        fill={"var(--icon)"}
+                        style={{
+                          filter: isBackgroundDark()
+                            ? "invert(0)"
+                            : "invert(1)",
+                        }}
+                      />
                     </button>
                     {allowCreation && (
                       <button
@@ -297,10 +310,15 @@ const EditActionModal = ({
                         title="Create"
                         onClick={() => addInput()}
                       >
-                        <AcceptIcon 
-                          className="icon" 
-                          fill={"var(--icon)"} 
-                          style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                        <AcceptIcon
+                          className="icon"
+                          fill={"var(--icon)"}
+                          style={{
+                            filter: isBackgroundDark()
+                              ? "invert(0)"
+                              : "invert(1)",
+                          }}
+                        />
                       </button>
                     )}
                   </div>
@@ -313,10 +331,13 @@ const EditActionModal = ({
                     }}
                     title="Add input"
                   >
-                    <AddIcon 
-                      className="icon action-icon" 
-                      fill={"var(--icon)"} 
-                      style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                    <AddIcon
+                      className="icon action-icon"
+                      fill={"var(--icon)"}
+                      style={{
+                        filter: isBackgroundDark() ? "invert(0)" : "invert(1)",
+                      }}
+                    />
                   </button>
                 )}
               </div>
@@ -342,10 +363,15 @@ const EditActionModal = ({
                               reRender();
                             }}
                           >
-                            <DeleteIcon 
+                            <DeleteIcon
                               className="icon"
-                              fill={"var(--icon)"} 
-                              style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                              fill={"var(--icon)"}
+                              style={{
+                                filter: isBackgroundDark()
+                                  ? "invert(0)"
+                                  : "invert(1)",
+                              }}
+                            />
                           </button>
                           <label
                             className="node-editor-io-name"
@@ -380,10 +406,15 @@ const EditActionModal = ({
                       title="Cancel"
                       onClick={() => cancelCreation()}
                     >
-                      <CancelIcon 
-                        className="icon" 
-                        fill={"var(--icon)"} 
-                        style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                      <CancelIcon
+                        className="icon"
+                        fill={"var(--icon)"}
+                        style={{
+                          filter: isBackgroundDark()
+                            ? "invert(0)"
+                            : "invert(1)",
+                        }}
+                      />
                     </button>
                     {allowCreation && (
                       <button
@@ -397,7 +428,12 @@ const EditActionModal = ({
                         <AcceptIcon
                           className="icon"
                           fill={"var(--icon)"}
-                          style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                          style={{
+                            filter: isBackgroundDark()
+                              ? "invert(0)"
+                              : "invert(1)",
+                          }}
+                        />
                       </button>
                     )}
                   </div>
@@ -410,7 +446,13 @@ const EditActionModal = ({
                     }}
                     title="Add output"
                   >
-                    <AddIcon className="icon action-icon" fill={"var(--icon)"} style={{filter: isBackgroundDark() ? 'invert(0)' : 'invert(1)'}}/>
+                    <AddIcon
+                      className="icon action-icon"
+                      fill={"var(--icon)"}
+                      style={{
+                        filter: isBackgroundDark() ? "invert(0)" : "invert(1)",
+                      }}
+                    />
                   </button>
                 )}
               </div>

diff --git a/frontend/src/components/diagram_editor/modals/EditTagModal.jsx b/frontend/src/components/diagram_editor/modals/EditTagModal.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 
 import Modal from "../../Modal/Modal";
 
-import { ReactComponent as CloseIcon } from '../../Modal/img/close.svg'
+import { ReactComponent as CloseIcon } from "../../Modal/img/close.svg";
 
 const initialEditTagModalData = {
   tagName: "",
@@ -54,7 +54,13 @@ const EditTagModal = ({ isOpen, onClose, currentActionNode }) => {
         >
           Edit port value
         </label>
-        <CloseIcon className="modal-titlebar-close icon" onClick={() => { onClose(); } } fill={"var(--icon)"}/>
+        <CloseIcon
+          className="modal-titlebar-close icon"
+          onClick={() => {
+            onClose();
+          }}
+          fill={"var(--icon)"}
+        />
       </div>
       <div className="modal-complex-input-row-container">
         <div className="modal-complex-input-container">

diff --git a/frontend/src/components/file_browser/FileBrowser.css b/frontend/src/components/file_browser/FileBrowser.css
@@ -46,27 +46,27 @@
 }
 
 .menu-button {
-    display: flex;
-    justify-content: center;
-    width: 25px;
-    height: 25px;
-    background-color: var(--buttons-invisible);
-    border: 0;
-    margin-left: 3px;
-    margin-right: 3px;
-    padding: 0 0 0 0;
-    align-content: center;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background-color: var(--buttons-invisible);
+  border: 0;
+  margin-left: 3px;
+  margin-right: 3px;
+  padding: 0 0 0 0;
+  align-content: center;
+  flex-wrap: wrap;
 }
 
 .menu-button:hover {
-    background-color: var(--buttons-hover);
-    border-radius: 5px;
+  background-color: var(--buttons-hover);
+  border-radius: 5px;
 }
 
 .icon {
-    width: 20px;
-    height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
 .accent-color {

diff --git a/frontend/src/components/file_browser/FileBrowser.js b/frontend/src/components/file_browser/FileBrowser.js
@@ -3,8 +3,8 @@ import axios from "axios";
 import "./FileBrowser.css";
 import NewActionModal from "./NewActionModal.jsx";
 
-import { ReactComponent as AddIcon } from './img/add.svg'
-import { ReactComponent as DeleteIcon } from './img/delete.svg'
+import { ReactComponent as AddIcon } from "./img/add.svg";
+import { ReactComponent as DeleteIcon } from "./img/delete.svg";
 
 const FileBrowser = ({
   setCurrentFilename,
@@ -113,14 +113,14 @@ const FileBrowser = ({
             onClick={handleCreateFile}
             title="Create a new action file"
           >
-           <AddIcon className="icon" fill={"var(--icon)"}/>
+            <AddIcon className="icon" fill={"var(--icon)"} />
           </button>
           <button
             className="menu-button"
             onClick={handleDeleteFile}
             title="Delete file"
           >
-            <DeleteIcon className="icon" fill={"var(--icon)"}/>
+            <DeleteIcon className="icon" fill={"var(--icon)"} />
           </button>
         </div>
       </div>