UI for adding basic conditional logic

1 files changed, 118 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 2881fbb66..8f182d37f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -958,12 +958,14 @@
             border-top-right-radius: 5px;
             border-top-left-radius: 5px;
             width: 100%;
-            height: 20px;
+            height: fit-content;
             background-color: rgb(50, 50, 50);
             color: rgb(168, 167, 167);
+            font-size: medium;
 
             .field-title {
                 color: whitesmoke;
+                font-size: large;
             }
 
             &:hover {
@@ -1063,14 +1065,14 @@
 
         .desc-box {
             width: 88%;
-            height: 50px;
+            height: fit-content;
             border: 1px solid rgb(180, 180, 180);
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
 
             .content {
-                height: calc(100% - 20px);
+                height: fit-content;
                 width: 100%;
                 background-color: rgb(50, 50, 50);
                 border-bottom-right-radius: 5px;
@@ -1082,4 +1084,117 @@
 
     }
 
+    .conditionals-section {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+
+        .conditionals-title {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: center;
+            align-items: center;
+            margin: 5px;
+            margin-bottom: 20px;
+            font-size: large;
+        }
+    }
+
+    .form-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+        color: whitesmoke; 
+        width: 100%;
+        height: fit-content;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+        gap: 5px;
+
+        .form-row-plain-text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: fit-content;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .operator-options-dropdown {
+            display: flex;
+            flex-direction: column;
+            height: fit-content;
+
+            .operator-dropdown-option {
+                display: none;
+            }
+
+            .operator-dropdown-current {
+                border-radius: 5px;
+                background-color: rgb(50, 50, 50);
+                border: 1px solid rgb(180, 180, 180);
+                text-align: center;
+                padding: 2.25px;
+                padding-left: 4px;
+                padding-right: 4px;
+            }
+
+            &:hover .operator-dropdown-current {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover .operator-dropdown-option {
+                display: flex;
+                height: fit-content;
+                align-items: center;
+                border: 1px solid rgb(180, 180, 180);
+                background-color: rgb(50, 50, 50);
+                padding: 2.25px;
+                padding-left: 8px;
+                padding-right: 8px;
+                text-align: center;
+
+                &:hover {
+                    background-color: rgb(70, 70, 70);
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .form-row-textarea {
+            height: 24px;
+            width: 70px;
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            border: 1px solid rgb(180, 180, 180);
+            resize: none;
+            overflow-y: scroll;
+            white-space: nowrap;
+        }
+
+    }
+
+    .form {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        width: 80%;
+
+        .form-action-button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 3px;
+            cursor: pointer;
+
+        }
+    }
+
 }
\ No newline at end of file