improve UX for ontology search (#632)

* remove chevron from ontology search boxes, reformulate placeholder * remove unused coe * Update user-interface/frontend/themes/datamanager/components/vaadin-custom.css Co-authored-by: Tobias Koch <[email protected]> --------- Co-authored-by: Tobias Koch <[email protected]>
qbicsoftware · Jun 19, 2024 · c3caea2 · c3caea2
1 parent 1f2dcaf
commit c3caea2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/user-interface/frontend/themes/datamanager/components/vaadin-custom.css b/user-interface/frontend/themes/datamanager/components/vaadin-custom.css
@@ -40,6 +40,11 @@ vaadin-multi-select-combo-box::part(toggle-button)::before {
   color: var(--lumo-primary-color);
 }
 
+/* Hide toggle button */
+vaadin-multi-select-combo-box.no-chevron::part(toggle-button) {
+  display: none;
+}
+
 vaadin-number-field::part(decrease-button), vaadin-number-field::part(increase-button) {
   color: var(--lumo-primary-color);
 }

diff --git a/...ce/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java b/...ce/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java
@@ -31,7 +31,7 @@ public MultiSelectComboBox<OntologyTerm> analyteBox() {
     MultiSelectComboBox<OntologyTerm> box = newBox();
     box.setItems(ontologyFetchCallback(analyteOntologies));
 
-    box.setPlaceholder("Please select one or more analytes for your samples");
+    box.setPlaceholder("Search and select one or more analytes for your samples");
     box.setLabel("Analytes");
     box.addClassName("full-width-input");
     return box;
@@ -49,7 +49,7 @@ public MultiSelectComboBox<OntologyTerm> speciesBox() {
     MultiSelectComboBox<OntologyTerm> box = newBox();
     box.setItems(ontologyFetchCallback(speciesOntologies));
 
-    box.setPlaceholder("Please select one or more species for your samples");
+    box.setPlaceholder("Search and select one or more species for your samples");
     box.setLabel("Species");
     return box;
   }
@@ -61,7 +61,7 @@ public MultiSelectComboBox<OntologyTerm> specimenBox() {
     MultiSelectComboBox<OntologyTerm> box = newBox();
     box.setItems(ontologyFetchCallback(specimenOntologies));
 
-    box.setPlaceholder("Please select one or more specimen for your samples");
+    box.setPlaceholder("Search and select one or more specimen for your samples");
     box.setLabel("Specimen");
     return box;
   }
@@ -73,6 +73,8 @@ private static MultiSelectComboBox<OntologyTerm> newBox() {
     box.setRenderer(new ComponentRenderer<>(OntologyComponent::new));
     box.setItemLabelGenerator(OntologyComboboxFactory::ontologyItemFormatted);
     box.addClassName("chip-badge");
+    box.addClassName("no-chevron");
+
     return box;
   }