From c3caea270febd4d6124e11b14930532c96fde8ee Mon Sep 17 00:00:00 2001 From: wow-such-code Date: Wed, 19 Jun 2024 11:17:09 +0200 Subject: [PATCH] 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 --------- Co-authored-by: Tobias Koch --- .../themes/datamanager/components/vaadin-custom.css | 5 +++++ .../views/projects/create/OntologyComboboxFactory.java | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/user-interface/frontend/themes/datamanager/components/vaadin-custom.css b/user-interface/frontend/themes/datamanager/components/vaadin-custom.css index 600a5aeda..39a7c2a48 100644 --- 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/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java b/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java index e34a783cc..3455a75cb 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/OntologyComboboxFactory.java @@ -31,7 +31,7 @@ public MultiSelectComboBox analyteBox() { MultiSelectComboBox 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 speciesBox() { MultiSelectComboBox 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 specimenBox() { MultiSelectComboBox 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 newBox() { box.setRenderer(new ComponentRenderer<>(OntologyComponent::new)); box.setItemLabelGenerator(OntologyComboboxFactory::ontologyItemFormatted); box.addClassName("chip-badge"); + box.addClassName("no-chevron"); + return box; }