Improve controlpanel

Julian-JP · Oct 21, 2024 · 5590701 · 5590701
1 parent 0e2597c
commit 5590701
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 30 deletions.
diff --git a/visualalgorithm/src/components/UI/Input/MultidataInputWithSubmit.jsx b/visualalgorithm/src/components/UI/Input/MultidataInputWithSubmit.jsx
@@ -20,6 +20,16 @@ const MultidataInputWithSubmit = props => {
         })
     }
 
+    const validInput = () => {
+        if (inputValue == null) return false;
+
+        return inputValue.map(val => {
+            return val != null && val !== "" && val !== undefined;
+        }).reduce((val1, val2) => {
+            return val1 && val2;
+        });
+    }
+
     const input = props.data.map((data, index) => {
         if (data.isArray && index === 0) {
             const ret = data.map((dataElement, index) => {
@@ -96,15 +106,14 @@ const MultidataInputWithSubmit = props => {
         }
     })
 
-
     return (
-        <React.Fragment>
-            <form onSubmit={props.onSubmit} className={`${classes.form} ${props.className}`}>
+        <div className={`${classes.formDiv} ${validInput() ? classes.formValid : classes.formInvalid}`}>
+            <form onSubmit={props.onSubmit} className={classes.form}>
                 {input}
                 <button type="submit" className={classes.button}
-                        disabled={props.onSubmit == null}>{props.btnLabel}</button>
+                        disabled={props.onSubmit == null || !validInput()}>{props.btnLabel}</button>
             </form>
-        </React.Fragment>
+        </div>
     )
 }
 

diff --git a/visualalgorithm/src/components/UI/Input/MultidataInputWithSubmit.module.css b/visualalgorithm/src/components/UI/Input/MultidataInputWithSubmit.module.css
@@ -1,21 +1,69 @@
+.formDiv {
+    width: 100%;
+    height: fit-content;
+
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+
+    background: rgba(255, 255, 255, 4%);
+    color: white;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.formValid:hover,
+.formValid:focus-within {
+    border-color: #408343;
+    background: rgba(0, 255, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
+}
+
+.formInvalid:hover,
+.formInvalid:focus-within {
+    border-color: #834043;
+    background: rgba(255, 0, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
+}
+
 .form {
     display: grid;
-    grid-template-columns: repeat(2, auto);
     grid-auto-rows: auto;
-    width: 100%;
     row-gap: 0;
-    height: fit-content;
+
+    grid-template-columns: repeat(2, auto);
+    background: none;
+    border: none;
+    outline: none;
+
+    width: 100%;
+    height: 100%;
+}
+
+.inputBox:focus {
+    border:none;
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
 }
 
 .inputBox {
     margin: 0;
     border: none;
+
     font-size: 100%;
     text-align: center;
-    padding: 2% 0 2% 0;
     box-sizing: border-box;
     width: 100%;
     height: min(2vw, 50px);
+
+    background: none;
+    color: inherit;
 }
 
 .inputBoxTopWithLabel {
@@ -43,7 +91,6 @@
     border-radius: 0 0 0 0;
     font-size: 100%;
     text-align: center;
-    background-color: white;
     margin: 0;
     box-sizing: border-box;
 }
@@ -57,7 +104,15 @@
     grid-column-end: 3;
     width: 100%;
     border-radius: 0 0 15px 15px;
+
     border: none;
+
     height: min(2vw, 50px);
     font-size: min(1.2vw, 25px);
+    background: inherit;
+    color: inherit;
+}
+
+.button:hover:enabled {
+    cursor: pointer;
 }
diff --git a/visualalgorithm/src/components/UI/UndoRedoFields.module.css b/visualalgorithm/src/components/UI/UndoRedoFields.module.css
@@ -24,8 +24,30 @@
     border: none;
     font-size: 1.2vw;;
     font-size: min(1.2vw, 25px);
+
+    border-color: transparent;
+    background: rgba(255, 255, 255, 4%);
+
+    border-style: solid;
+    border-width: 1px;
+
+    color: #ffffff;
+}
+
+.buttonUndoRedo:hover:disabled {
+    border-color: #834043;
+    background: rgba(255, 0, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
 }
 
-.buttonUndoRedo:active {
-    background-color: #a2a2a2;
+.buttonUndoRedo:hover:enabled {
+    border-color: #408343;
+    background: rgba(0, 255, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
+
+    cursor: pointer;
 }
diff --git a/visualalgorithm/src/components/Visualisation/GraphVisualisation.module.css b/visualalgorithm/src/components/Visualisation/GraphVisualisation.module.css
@@ -6,23 +6,22 @@
 .card {
     height: auto;
     display: flex;
-    gap: 5px;
+    gap: 25px;
 }
 
 .control {
     width: 300px;
 }
 
 .canvas {
-    background-color: lightgray;
-    width: calc(100% - 300px);
+    background: rgba(255, 255, 255, 4%);
     height: auto;
-    border-radius: 15px 0 0 15px;
+    border-radius: 15px;
 }
 
 .explanation  {
     box-sizing: border-box;
-    background-color: lightgray;
+    background: #ffffff;
     width: 100%;
     margin-top: 20px;
     padding: 50px;

diff --git a/visualalgorithm/src/components/control/ControlSelector.module.css b/visualalgorithm/src/components/control/ControlSelector.module.css
@@ -6,7 +6,8 @@
     justify-content: center;
     max-width: 350px;
     width: 26%;
-    border-radius: 0 15px 15px 0;
-    background-color: lightgray;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    background: rgba(255, 255, 255, 4%);
     height: max(500px, 70%);
 }
diff --git a/visualalgorithm/src/components/control/GraphControl.jsx b/visualalgorithm/src/components/control/GraphControl.jsx
@@ -353,17 +353,17 @@ const GraphControl = (props) => {
                 }
             /> : null}
             {props.startButton && props.endButton &&
-                <div className={classes.algoNavigationContainer}>
+                <div className={`${classes.algoNavigationContainer} ${classes.valid}`}>
                     <button className={classes.leftButton} onClick={() => handleStartEnd(true)}>Start</button>
                     <button className={classes.rightButton} onClick={() => handleStartEnd(false)}>End</button>
                 </div>
             }
             {props.startButton && !props.endButton &&
-                <div className={classes.algoNavigationContainer}>
+                <div className={`${classes.algoNavigationContainer} ${classes.valid}`}>
                     <button className={classes.fullSizeButton} onClick={() => handleStartEnd(true)}>Start</button>
                 </div>
             }
-            <div className={classes.algoNavigationContainer}>
+            <div className={`${classes.algoNavigationContainer} ${classes.valid}`}>
                 <button className={classes.leftButton} onClick={() => previous(1)}>◄</button>
                 <button className={classes.rightButton} onClick={() => next(1)}>►</button>
             </div>

diff --git a/visualalgorithm/src/components/control/GraphControl.module.css b/visualalgorithm/src/components/control/GraphControl.module.css
@@ -10,29 +10,73 @@
 }
 
 .algoNavigationContainer {
-    width: 100%
+    width: 100%;
+    height: fit-content;
+    background: rgba(255, 255, 255, 4%);
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+
+    color: white;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+}
+
+
+.valid:hover {
+    border-color: #408343;
+    background: rgba(0, 255, 0, 4%);
+
+
+    border-style: solid;
+    border-width: 1px;
+
+    cursor: pointer;
+}
+
+.invalid:hover {
+    border-color: #834043;
+    background: rgba(255, 0, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
 }
 
 .leftButton {
     width: 50%;
-    border-radius: 15px 0 0 15px;
+    -webkit-border-radius: 12px 0 0 12px;
+    -moz-border-radius: 12px 0 0 12px;
     border: none;
     height: min(2vw, 50px);
     font-size: min(1.2vw, 25px);
+
+    background: inherit;
+    color: inherit;
+    cursor: inherit;
 }
 
 .rightButton {
     width: 50%;
-    border-radius: 0 15px 15px 0;
+    -webkit-border-radius: 0 12px 12px 0;
+    -moz-border-radius: 0 12px 12px 0;
     border: none;
     height: min(2vw, 50px);
     font-size: min(1.2vw, 25px);
+
+    background: inherit;
+    color: inherit;
+    cursor: inherit;
 }
 
 .fullSizeButton {
     width: 100%;
-    border-radius: 15px 15px 15px 15px;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
     border: none;
     height: min(2vw, 50px);
     font-size: min(1.2vw, 25px);
+
+    background: inherit;
+    color: inherit;
+    cursor: inherit;
 }
diff --git a/visualalgorithm/src/components/control/HeapControl.jsx b/visualalgorithm/src/components/control/HeapControl.jsx
@@ -148,7 +148,10 @@ const HeapControl = ({setEdges, setVertices, type}) => {
                 btnLabel={"Add"}
                 data={
                     [{
-                        type: "number", onChange: (val) => setAddval(val.target.value), label: "add", noLabel: true
+                        type: "number",
+                        onChange: (val) => setAddval(val.target.value),
+                        label: "add",
+                        noLabel: true
                     }]
                 }
             />

diff --git a/visualalgorithm/src/components/control/HeapControl.module.css b/visualalgorithm/src/components/control/HeapControl.module.css
@@ -10,13 +10,40 @@
 }
 
 .buttonAddRemove:active {
-    background-color: #a2a2a2;
+    background: #ffffff;
 }
 
 .remove {
     width: 100%;
-    border-radius: 15px 15px 15px 15px;
-    border: none;
     height: min(50%, 50px);
+
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+
+    background: rgba(255, 255, 255, 4%);
+    color: white;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+
     font-size: min(1.2vw, 25px);
+}
+
+.remove:hover:enabled {
+    border-color: #408343;
+    background: rgba(0, 255, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
+
+    cursor: pointer;
+}
+
+.remove:hover:disabled {
+    border-color: #834043;
+    background: rgba(255, 0, 0, 4%);
+
+    border-style: solid;
+    border-width: 1px;
 }