From e028e6446becb99cb74d43e398c50a6a3438b041 Mon Sep 17 00:00:00 2001 From: wow-such-code Date: Fri, 5 Jul 2024 10:48:10 +0200 Subject: [PATCH 1/6] Increase space between tab name and count icon (#690) * add gap between tab names and counter * make gap larger --- .../frontend/themes/datamanager/components/page-area.css | 4 ++++ .../project/measurements/MeasurementDetailsComponent.java | 1 + 2 files changed, 5 insertions(+) diff --git a/user-interface/frontend/themes/datamanager/components/page-area.css b/user-interface/frontend/themes/datamanager/components/page-area.css index 51ae01c854..9e22c9b2e8 100644 --- a/user-interface/frontend/themes/datamanager/components/page-area.css +++ b/user-interface/frontend/themes/datamanager/components/page-area.css @@ -196,6 +196,10 @@ white-space: nowrap; } +.tab-with-count { + gap: var(--lumo-space-s); +} + .ontology-lookup-component { display: flex; flex-direction: column; diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/measurements/MeasurementDetailsComponent.java b/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/measurements/MeasurementDetailsComponent.java index 0bd019434f..400257d68a 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/measurements/MeasurementDetailsComponent.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/measurements/MeasurementDetailsComponent.java @@ -625,6 +625,7 @@ public MeasurementTechnologyTab(String technology, int measurementCount) { this.add(technologyNameComponent, sampleCountComponent); setTechnologyName(technology); setMeasurementCount(measurementCount); + addClassName("tab-with-count"); } public String getTabLabel() { From 739c989e8c4dfd2f1c63c1ce699d5f5cd6d5fa37 Mon Sep 17 00:00:00 2001 From: wow-such-code Date: Mon, 8 Jul 2024 13:37:56 +0200 Subject: [PATCH 2/6] Add cancel confirmation dialog to most dialog winows (#655) * add notifications before canceling project/experiment creation or editing * clean up imports * remove unused Action * reuse code, add cancel notification to more dialogs * some css changes * Hacky solution for footer items in confirm dialog * review changes --------- Co-authored-by: Sven F <9976560+sven1103@users.noreply.github.com> Co-authored-by: Steffengreiner --- .../themes/datamanager/components/button.css | 9 ++++ .../themes/datamanager/components/dialog.css | 7 +++ .../CancelConfirmationNotificationDialog.java | 47 +++++++++++++++++++ .../views/account/UserProfileComponent.java | 1 + .../views/general/DialogWindow.java | 11 +++++ .../projects/create/AddProjectDialog.java | 29 +++++++++++- .../edit/EditProjectInformationDialog.java | 22 +++++++-- .../components/ExperimentalGroupsDialog.java | 18 ++++++- .../ExperimentalVariablesDialog.java | 18 ++++++- .../create/AddExperimentDialog.java | 19 +++++++- .../update/EditExperimentDialog.java | 19 +++++++- .../MeasurementMetadataUploadDialog.java | 19 +++++++- .../batch/BatchRegistrationDialog.java | 18 ++++++- .../registration/batch/EditBatchDialog.java | 19 +++++++- .../UploadQualityControlDialog.java | 1 + 15 files changed, 245 insertions(+), 12 deletions(-) create mode 100644 user-interface/src/main/java/life/qbic/datamanager/views/CancelConfirmationNotificationDialog.java diff --git a/user-interface/frontend/themes/datamanager/components/button.css b/user-interface/frontend/themes/datamanager/components/button.css index 23db319d9b..6de2f303fe 100644 --- a/user-interface/frontend/themes/datamanager/components/button.css +++ b/user-interface/frontend/themes/datamanager/components/button.css @@ -22,6 +22,15 @@ vaadin-button.primary { min-width: calc(var(--lumo-button-size) * 2.5); } +vaadin-button.danger { + background-color: var(--lumo-error-color, var(--lumo-error-color)); + color: var(--lumo-button-primary-color, var(--lumo-primary-contrast-color)); +} + +vaadin-button.danger[focus-ring] { + box-shadow: none !important; +} + /* Styles recreated from vaadin lumo theme */ vaadin-button[disabled] { background-color: var(--lumo-contrast-30pct); diff --git a/user-interface/frontend/themes/datamanager/components/dialog.css b/user-interface/frontend/themes/datamanager/components/dialog.css index 884b932348..8459573713 100644 --- a/user-interface/frontend/themes/datamanager/components/dialog.css +++ b/user-interface/frontend/themes/datamanager/components/dialog.css @@ -42,6 +42,13 @@ vaadin-dialog-overlay::part(title) { margin: 0; } +/*Vaadin currently does not allow to style the flex items within the footer. +Since we want to remove the spacing between the cancel and confirm button we replace the flex setting with a grid layout*/ +.notification-dialog::part(footer) { + display: grid; + grid-template-columns: 0 15% 15%; +} + /* icon in header */ .notification-dialog > [slot="header"] vaadin-icon { width: 1.83rem; diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/CancelConfirmationNotificationDialog.java b/user-interface/src/main/java/life/qbic/datamanager/views/CancelConfirmationNotificationDialog.java new file mode 100644 index 0000000000..768ae92b54 --- /dev/null +++ b/user-interface/src/main/java/life/qbic/datamanager/views/CancelConfirmationNotificationDialog.java @@ -0,0 +1,47 @@ +package life.qbic.datamanager.views; + +import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; +import life.qbic.datamanager.views.notifications.NotificationDialog; + +/** + * Warns the user that they are about to cancel a dialog and lose input data + *

+ * This dialog is to be shown when a dialog is canceled via the Esc key or the Cancel button + */ +public class CancelConfirmationNotificationDialog extends NotificationDialog { + + public CancelConfirmationNotificationDialog() { + customizeHeader(); + setCancelable(true); + Button redButton = new Button("Discard"); + redButton.addClassName("danger"); + setConfirmButton(redButton); + Button cancelButton = new Button("Continue"); + setCancelButton(cancelButton); + } + + public CancelConfirmationNotificationDialog withBodyText(String mainText) { + content.removeAll(); + content.add(new Span(mainText)); + return this; + } + + public CancelConfirmationNotificationDialog withConfirmText(String confirmText) { + setConfirmText(confirmText); + return this; + } + + public CancelConfirmationNotificationDialog withTitle(String headerText) { + setTitle(headerText); + return this; + } + + private void customizeHeader() { + Icon errorIcon = new Icon(VaadinIcon.WARNING); + errorIcon.setClassName("warning-icon"); + setHeaderIcon(errorIcon); + } +} diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/account/UserProfileComponent.java b/user-interface/src/main/java/life/qbic/datamanager/views/account/UserProfileComponent.java index 6f8896d21c..07a3f62b20 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/account/UserProfileComponent.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/account/UserProfileComponent.java @@ -85,6 +85,7 @@ public static class ChangeUserDetailsDialog extends DialogWindow { public ChangeUserDetailsDialog(String currentUserName) { super(); + setHeaderTitle("Change username"); add(platformUserNameField); setConfirmButtonLabel("Save"); diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/general/DialogWindow.java b/user-interface/src/main/java/life/qbic/datamanager/views/general/DialogWindow.java index fd7d9cdf8e..d3a4ae9210 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/general/DialogWindow.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/general/DialogWindow.java @@ -1,8 +1,12 @@ package life.qbic.datamanager.views.general; import com.vaadin.flow.component.ClickEvent; +import com.vaadin.flow.component.Component; +import com.vaadin.flow.component.Key; +import com.vaadin.flow.component.Shortcuts; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.dialog.Dialog; +import com.vaadin.flow.server.Command; /** * Dialog to create something @@ -29,6 +33,13 @@ protected DialogWindow() { confirmButton.addClickListener(this::onConfirmClicked); } + protected void specifyCancelShortcuts(Command onCreationCanceled) { + setCloseOnOutsideClick(false); + setCloseOnEsc(false); + Shortcuts.addShortcutListener(this, + onCreationCanceled, Key.ESCAPE); + } + /** * Overwrite to change what happens on confirm button clicked * diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/AddProjectDialog.java b/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/AddProjectDialog.java index 1c6ec414f0..f44237bd63 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/AddProjectDialog.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/projects/create/AddProjectDialog.java @@ -7,6 +7,8 @@ import com.vaadin.flow.component.ComponentEvent; import com.vaadin.flow.component.ComponentEventListener; import com.vaadin.flow.component.HasValidation; +import com.vaadin.flow.component.Key; +import com.vaadin.flow.component.Shortcuts; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.dialog.Dialog; import com.vaadin.flow.component.html.Div; @@ -21,6 +23,7 @@ import java.util.HashMap; import java.util.List; import java.util.Map; +import life.qbic.datamanager.views.CancelConfirmationNotificationDialog; import life.qbic.datamanager.views.general.HasBinderValidation; import life.qbic.datamanager.views.general.Stepper; import life.qbic.datamanager.views.general.Stepper.StepIndicator; @@ -72,6 +75,9 @@ public AddProjectDialog(ProjectInformationService projectInformationService, OntologyLookupService ontologyLookupService, ContactRepository contactRepository) { super(); + + initCancelShortcuts(); + addClassName("add-project-dialog"); requireNonNull(projectInformationService, "project information service must not be null"); requireNonNull(financeService, "financeService must not be null"); @@ -142,6 +148,27 @@ public AddProjectDialog(ProjectInformationService projectInformationService, adaptFooterButtons(stepper.getFirstStep()); } + private void initCancelShortcuts() { + setCloseOnOutsideClick(false); + setCloseOnEsc(false); + Shortcuts.addShortcutListener(this, + this::onCreationCanceled, Key.ESCAPE); + } + + private void onCreationCanceled() { + CancelConfirmationNotificationDialog cancelDialog = new CancelConfirmationNotificationDialog() + .withBodyText("You will lose all the information entered for this project.") + .withConfirmText("Discard project creation") + .withTitle("Discard new project creation?"); + cancelDialog.open(); + cancelDialog.addConfirmListener(event -> { + cancelDialog.close(); + fireEvent(new CancelEvent(this, true)); + }); + cancelDialog.addCancelListener( + event -> cancelDialog.close()); + } + /** * Allows user to search the offer database to prefill some project information */ @@ -150,7 +177,7 @@ public void enableOfferSearch() { } private void onCancelClicked(ClickEvent