Add helper text for experimental variable input (#802)

* Add helper text * Add placeholders * Fix alignment of delete icon in ExperimentalVariableRowLayout --------- Co-authored-by: Sven F. <[email protected]> Co-authored-by: Steffengreiner <[email protected]> Co-authored-by: Steffengreiner <[email protected]>
qbicsoftware · Sep 3, 2024 · a49eae9 · a49eae9
1 parent 88ab289
commit a49eae9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/user-interface/frontend/themes/datamanager/components/dialog.css b/user-interface/frontend/themes/datamanager/components/dialog.css
@@ -356,10 +356,11 @@ Since we want to remove the spacing between the cancel and confirm button we rep
 
 .experiment-variable-dialog .content .row {
   display: flex;
-  align-items: center;
-  gap: var(--lumo-space-l);
+  align-items: baseline;
+  column-gap: var(--lumo-space-l);
 }
 
+
 .add-project-dialog::part(content) {
   display: flex;
   flex-direction: column;

diff --git a/...ews/projects/project/experiments/experiment/components/ExperimentalVariableRowLayout.java b/...ews/projects/project/experiments/experiment/components/ExperimentalVariableRowLayout.java
@@ -1,6 +1,5 @@
 package life.qbic.datamanager.views.projects.project.experiments.experiment.components;
 
-import com.vaadin.flow.component.formlayout.FormLayout;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
@@ -45,12 +44,19 @@ static ExperimentalVariableRowLayout from(
 
   private void init() {
     addClassName("row");
-    FormLayout experimentalVariableFieldsLayout = new FormLayout();
-    experimentalVariableFieldsLayout.add(nameField, unitField, levelArea);
-    experimentalVariableFieldsLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 3));
     nameField.setRequired(true);
+    nameField.setPlaceholder("e.g. age");
+    unitField.setPlaceholder("e.g. years");
     levelArea.setRequired(true);
-    add(experimentalVariableFieldsLayout, deleteIcon);
+    levelArea.setHelperText(
+        "Please enter each level on a new line. Comma separated values are treated as a single level.");
+    levelArea.setPlaceholder("""
+        32
+        42
+        68
+        """);
+    /*Span around Icon is necessary otherwise icon size will be scaled down if a scrollbar appears*/
+    add(nameField, unitField, levelArea, new Span(deleteIcon));
   }
 
   public String getVariableName() {