WIP Rename settingspanelcomponent

FriendsOfTYPO3 · Feb 21, 2024 · 789c9d9 · 789c9d9
1 parent 952a377
commit 789c9d9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 42 deletions.
diff --git a/Build/Sources/App.js b/Build/Sources/App.js
@@ -1,6 +1,6 @@
 import {useNodesState, useEdgesState} from 'reactflow';
 import {useEffect, useState, useContext, createContext} from "react";
-import {LeftContentComponent} from "./components/views/LeftContentComponent";
+import {SettingsPanelComponent} from "./components/views/SettingsPanelComponent";
 import {RightContentComponent} from "./components/views/RightContentComponent";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import initialProperties from "./initialValues/properties";
@@ -27,8 +27,8 @@ function App() {
     const [modules, setModules] = useState([]);
     const [validationErrors, setValidationErrors] = useState(null);
 
-    // Zustand für das Ein- und Ausklappen der linken Spalte
-    const [isLeftColumnVisible, setLeftColumnVisible] = useState(true);
+    // Zustand für das Ein- und Ausklappen der Settings Spalte
+    const [isSettingsColumnVisible, setIsSettingsColumnVisible] = useState(true);
 
     // Zustand für das Ein- und Ausklappen der erweiterten Optionen
     const [isAdvancedOptionsVisible, setAdvancedOptionsVisible] = useState(false);
@@ -42,15 +42,15 @@ function App() {
     };
 
     useEffect(() => {
-        const leftColumn = document.getElementById('left-column');
-        if (leftColumn) {
-            leftColumn.style.opacity = isLeftColumnVisible ? '1' : '0';
+        const settingsColumn = document.getElementById('settings-column');
+        if (settingsColumn) {
+            settingsColumn.style.opacity = isSettingsColumnVisible ? '1' : '0';
         }
-    }, [isLeftColumnVisible]);
+    }, [isSettingsColumnVisible]);
 
     // Funktion zum Umschalten der Sichtbarkeit der linken Spalte
-    const toggleLeftColumn = () => {
-        setLeftColumnVisible(!isLeftColumnVisible);
+    const toggleSettingsColumn = () => {
+        setIsSettingsColumnVisible(!isSettingsColumnVisible);
     }
 
     const toggleAdvcancedOptions = () => {
@@ -265,19 +265,19 @@ function App() {
             <button
                 id="show-advanced-options"
                 type="button"
-                className={`btn btn-primary position-fixed ${isLeftColumnVisible ? 'expanded' : 'collapsed'}`}
+                className={`btn btn-primary position-fixed ${isSettingsColumnVisible ? 'expanded' : 'collapsed'}`}
                 onClick={toggleAdvcancedOptions}
             >
                 <FontAwesomeIcon className="p-0 m-0" icon="fa-solid fa-cog" />{!isAdvancedOptionsVisible ? 'Show' : 'Hide'} advanced options
             </button>
             <button
                 id="btn-sidebar-collapse"
                 type="button"
-                className={`btn btn-primary position-fixed ${isLeftColumnVisible ? 'expanded' : 'collapsed'}`}
-                onClick={toggleLeftColumn}
+                className={`btn btn-primary position-fixed ${isSettingsColumnVisible ? 'expanded' : 'collapsed'}`}
+                onClick={toggleSettingsColumn}
             >
-                {isLeftColumnVisible && <FontAwesomeIcon className="p-0 m-0" icon="fa-solid fa-arrow-left" />}
-                {!isLeftColumnVisible && <FontAwesomeIcon className="p-0 m-0" icon="fa-solid fa-arrow-right" />}
+                {isSettingsColumnVisible && <FontAwesomeIcon className="p-0 m-0" icon="fa-solid fa-arrow-left" />}
+                {!isSettingsColumnVisible && <FontAwesomeIcon className="p-0 m-0" icon="fa-solid fa-arrow-right" />}
             </button>
             <div className="collapse" id="collapseExample">
                 <div className="card card-body">
@@ -286,12 +286,12 @@ function App() {
                 </div>
             </div>
             <div className="row">
-                <div id="left-column" className="fs-3 no-padding full-height">
+                <div id="settings-column" className="fs-3 no-padding full-height">
                     <div className="p-1">
                         <EdgesContext.Provider value={{edges, setEdges, onEdgesChange}}>
                             <NodesContext.Provider value={{nodes, setNodes, onNodesChange}}>
                                 <ValidationErrorsContext.Provider value={{validationErrors, setValidationErrors}}>
-                                    <LeftContentComponent
+                                    <SettingsPanelComponent
                                         properties={properties}
                                         authors={authors}
                                         plugins={plugins}
@@ -316,7 +316,7 @@ function App() {
                         </EdgesContext.Provider>
                     </div>
                 </div>
-               <div style={{left: isLeftColumnVisible ? '400px' : '0', width: isLeftColumnVisible ? 'calc(100vw - 400px)' : '100vw'}} id="right-column" className="no-padding full-height">
+               <div style={{left: isSettingsColumnVisible ? '400px' : '0', width: isSettingsColumnVisible ? 'calc(100vw - 400px)' : '100vw'}} id="right-column" className="no-padding full-height">
                     <div >
                         <CustomModelNodeIndexContext.Provider value={{customModelNodeIndex, setCustomModelNodeIndex}}>
                             <AdvancedOptionsContext.Provider value={{isAdvancedOptionsVisible}}>

diff --git a/...components/views/LeftContentComponent.jsx → ...mponents/views/SettingsPanelComponent.jsx b/...components/views/LeftContentComponent.jsx → ...mponents/views/SettingsPanelComponent.jsx
@@ -7,7 +7,7 @@ import {Fragment, useContext} from "react";
 import {ActionButtonsComponent} from "../ActionButtonsComponent";
 import {EdgesContext} from "../../App";
 
-export const LeftContentComponent = (props) => {
+export const SettingsPanelComponent = (props) => {
     return (
         <Fragment>
             <div>

diff --git a/Build/Sources/helper/helper.js b/Build/Sources/helper/helper.js
@@ -1,7 +1,7 @@
-export function resizeLeftSidebar(isRightColumnFullWidth) {
+export function resizeSettingsSidebar(isRightColumnFullWidth) {
     if (isRightColumnFullWidth) {
-        document.getElementById('left-column').style.opacity = '0';
+        document.getElementById('settings-column').style.opacity = '0';
     } else {
-        document.getElementById('left-column').style.opacity = '1';
+        document.getElementById('settings-column').style.opacity = '1';
     }
 }
diff --git a/Build/Sources/helper/index.js b/Build/Sources/helper/index.js
@@ -1,5 +1,5 @@
-import {resizeLeftSidebar} from "./helper";
+import {resizeSettingsSidebar} from "./helper";
 import {getExtensionKeyIsValid} from "./validation/getExtensionKeyIsValid";
 
-export {resizeLeftSidebar}
+export {resizeSettingsSidebar}
 export {getExtensionKeyIsValid}
diff --git a/Resources/Public/Css/styles.css b/Resources/Public/Css/styles.css
@@ -55,19 +55,19 @@
   text-align: left;
 }
 
-#left-column, #right-column {
+#settings-column, #right-column {
   height: 100vh;
   z-index: 1;
   transition: 0.5s ease;
 }
 
-#left-column {
+#settings-column {
   width: 400px;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-#left-column::-webkit-scrollbar {
+#settings-column::-webkit-scrollbar {
   display: none;
 }
 

diff --git a/Resources/Public/JavaScript/main.js b/Resources/Public/JavaScript/main.js
diff --git a/Resources/Public/Scss/App.scss b/Resources/Public/Scss/App.scss
@@ -2,13 +2,13 @@ $transition-timing: 0.5s ease;
 $btn-background: #F4F4F4;
 $generic-z-index: 1;
 
-#left-column, #right-column {
+#settings-column, #right-column {
     height: 100vh;
     z-index: $generic-z-index;
     transition: $transition-timing;
 }
 
-#left-column {
+#settings-column {
     width: 400px;
     overflow-y: auto;