align add-variable dialog with UI of add-group dialog (#363)

* align add-variable dialog with UI of add-group dialog * remove debugging
qbicsoftware · Sep 7, 2023 · d7e9d1c · d7e9d1c
1 parent 4a9ddda
commit d7e9d1c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/vaadinfrontend/frontend/themes/datamanager/components/dialog.css b/vaadinfrontend/frontend/themes/datamanager/components/dialog.css
@@ -246,6 +246,11 @@ Used by both project creation and experiment creation dialog, thus the unique na
   align-items: baseline;
 }
 
+.experiment-variable-dialog vaadin-icon {
+  cursor: pointer;
+  color: var(--lumo-primary-color);
+}
+
 .experiment-group-dialog vaadin-icon {
   cursor: pointer;
   color: var(--lumo-primary-color);
@@ -255,6 +260,16 @@ Used by both project creation and experiment creation dialog, thus the unique na
   font-weight: bold;
 }
 
+.experiment-variable-dialog .add-new-group-action {
+  display: flex;
+  column-gap: 1rem;
+  color: var(--lumo-primary-color)
+}
+
+.experiment-variable-dialog .add-new-group-action span {
+  cursor: pointer;
+}
+
 .experiment-variable-dialog .content {
   display: flex;
   flex-direction: column;
@@ -265,6 +280,9 @@ Used by both project creation and experiment creation dialog, thus the unique na
   column-gap: 1rem;
   color: var(--lumo-primary-color)
 }
+.experiment-group-dialog .add-new-group-action span {
+  cursor: pointer;
+}
 
 .experiment-group-dialog .content {
   display: grid;
@@ -276,11 +294,6 @@ Used by both project creation and experiment creation dialog, thus the unique na
   gap: 1rem;
 }
 
-
-.experiment-group-dialog .add-new-group-action span {
-  cursor: pointer;
-}
-
 .experiment-variable-dialog .content .variables {
   display: flex;
   flex-direction: column;
@@ -296,11 +309,6 @@ Used by both project creation and experiment creation dialog, thus the unique na
   gap: var(--lumo-space-l);
 }
 
-.experiment-variable-dialog .content .row vaadin-icon {
-  cursor: pointer;
-  color: var(--lumo-primary-color);
-}
-
 .project-information-dialog::part(overlay) {
   width: 66vw;
 }

diff --git a/...views/projects/project/experiments/experiment/components/ExperimentalVariablesDialog.java b/...views/projects/project/experiments/experiment/components/ExperimentalVariablesDialog.java
@@ -31,6 +31,7 @@ public class ExperimentalVariablesDialog extends DialogWindow {
   private final Div dialogueContentLayout = new Div();
   private final Div experimentalVariableRowsContainerLayout = new Div();
   private final Span addExperimentalVariableLayoutRow = new Span();
+  private final Div addNewVariableContainer = new Div();
   private final MODE mode;
 
   public ExperimentalVariablesDialog() {
@@ -138,13 +139,10 @@ private void resetAndClose() {
   private void reset() {
     this.experimentalVariablesLayoutRows.clear();
     this.experimentalVariableRowsContainerLayout.removeAll();
-    initDefineExperimentalVariableLayout();
+    appendEmptyRowForAddMode();
   }
 
-  private void initDefineExperimentalVariableLayout() {
-    final Span experimentalDesignHeader = new Span("Define Experimental Variable");
-    experimentalDesignHeader.addClassName("header");
-    this.experimentalVariableRowsContainerLayout.add(experimentalDesignHeader);
+  private void appendEmptyRowForAddMode() {
     if (isAdding()) {
       appendEmptyRow();
     }
@@ -174,21 +172,34 @@ private void removeRow(final ExperimentalVariableRowLayout experimentalVariableR
     if (wasRemoved) {
       this.experimentalVariableRowsContainerLayout.remove(experimentalVariableRowLayout);
     }
+    if(experimentalVariableRowsContainerLayout.getChildren().toList().isEmpty()) {
+      appendEmptyRowForAddMode();
+    }
   }
 
   private void layoutComponent() {
-    setHeaderTitle("Experimental Design");
+    setHeaderTitle("Define Experimental Variable");
     final DialogFooter footer = getFooter();
     footer.add(this.cancelButton, this.confirmButton);
   }
 
   private void initDialogueContent() {
-    initDefineExperimentalVariableLayout();
+    appendEmptyRowForAddMode();
     initDesignVariableTemplate();
     this.dialogueContentLayout.addClassName("content");
     this.experimentalVariableRowsContainerLayout.addClassName("variables");
     this.dialogueContentLayout.add(this.experimentalVariableRowsContainerLayout);
-    this.dialogueContentLayout.add(this.addExperimentalVariableLayoutRow);
+
+    this.dialogueContentLayout.add(addNewVariableContainer);
+
+    addNewVariableContainer.addClassName("add-new-group-action");
+
+    var addNewVariableIcon = new Icon(VaadinIcon.PLUS);
+    addNewVariableIcon.addClickListener(listener -> appendEmptyRow());
+    Span addVariableHelperText = new Span("Add Experimental Variable");
+    addVariableHelperText.addClickListener(listener -> appendEmptyRow());
+    addNewVariableContainer.add(addNewVariableIcon, addVariableHelperText);
+
     add(this.dialogueContentLayout);
   }