feat: Add caption to ConfirmDialog

refactor: Move ConfirmDialog styles from application theme to component styles fix: Initial size of the field with CharacterCountExtension feat: Add hover style to Admin note edit button fix: Add hover style to Cancel button style
TatuLund · Dec 26, 2024 · 4833c56 · 4833c56
1 parent 125b41a
commit 4833c56
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 97 deletions.
diff --git a/vaadincreate-components/src/main/java/org/vaadin/tatu/vaadincreate/ConfirmDialog.java b/vaadincreate-components/src/main/java/org/vaadin/tatu/vaadincreate/ConfirmDialog.java
@@ -6,6 +6,7 @@
 import com.vaadin.event.ShortcutAction.KeyCode;
 import com.vaadin.icons.VaadinIcons;
 import com.vaadin.shared.Registration;
+import com.vaadin.shared.ui.window.WindowRole;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Component;
@@ -55,7 +56,7 @@ public enum Type {
      * @param type
      *            Type of the Dialog
      */
-    public ConfirmDialog(String text, Type type) {
+    public ConfirmDialog(String caption, String text, Type type) {
         window.setId("confirm-dialog");
         window.setModal(true);
         window.setClosable(false);
@@ -64,13 +65,17 @@ public ConfirmDialog(String text, Type type) {
         window.setHeight("50%");
         window.setDraggable(false);
         window.setIcon(VaadinIcons.EXCLAMATION_CIRCLE);
+        window.setCaption(caption);
         var message = new Label(text);
         message.setSizeFull();
         if (type == Type.SUCCESS) {
             message.addStyleName(ValoTheme.LABEL_SUCCESS);
+            window.setAssistiveRole(WindowRole.DIALOG);
         } else if (type == Type.ALERT) {
             message.addStyleName(ValoTheme.LABEL_FAILURE);
+            window.setAssistiveRole(WindowRole.ALERTDIALOG);
         }
+        window.setAssistiveDescription(message);
         var content = new VerticalLayout();
         content.setSizeFull();
         cancelButton = new Button("Cancel");

diff --git a/...s/src/main/java/org/vaadin/tatu/vaadincreate/client/CharacterCountExtensionConnector.java b/...s/src/main/java/org/vaadin/tatu/vaadincreate/client/CharacterCountExtensionConnector.java
@@ -58,9 +58,9 @@ private void updateCountElementVisibility() {
             countElement.getStyle().setDisplay(Style.Display.NONE);
         } else {
             countElement.getStyle().clearDisplay();
-            wrapper.getStyle().setProperty(WIDTH,
-                    textField.getElement().getStyle().getProperty(WIDTH));
         }
+        wrapper.getStyle().setProperty(WIDTH,
+                textField.getElement().getStyle().getProperty(WIDTH));
     }
 
     @Override

diff --git a/...omponents/src/main/resources/org/vaadin/tatu/vaadincreate/public/confirmdialog/styles.css b/...omponents/src/main/resources/org/vaadin/tatu/vaadincreate/public/confirmdialog/styles.css
@@ -1,3 +1,23 @@
 div#confirm-dialog {
   min-width: 300px !important;
-}
+
+  .v-window-wrap {
+    div[aria-label="Top of dialog"] {
+      display: none;
+    }
+
+    div[aria-label="Bottom of Dialog"] {
+      display: none;
+    }
+  }
+
+  .v-window-header {
+    .v-icon {
+      margin-right: 5px;
+    }
+
+    .v-assistive-device-only {
+      display: none;
+    }
+  }
+}
diff --git a/vaadincreate-components/src/test/java/org/vaadin/tatu/vaadincreate/ConfirmDialogTest.java b/vaadincreate-components/src/test/java/org/vaadin/tatu/vaadincreate/ConfirmDialogTest.java
@@ -15,7 +15,7 @@ public class ConfirmDialogTest {
 
     @Test
     public void dialogComposition() {
-        var dialog = new ConfirmDialog("Are you sure?", Type.ALERT);
+        var dialog = new ConfirmDialog("Confirm", "Are you sure?", Type.ALERT);
         Assert.assertFalse(dialog.window.isDraggable());
         Assert.assertTrue(dialog.window.isModal());
         Assert.assertFalse(dialog.window.isResizable());
@@ -26,7 +26,7 @@ public void dialogComposition() {
 
     @Test
     public void confirmEvent() {
-        var dialog = new ConfirmDialog("Are you sure?", Type.ALERT);
+        var dialog = new ConfirmDialog("Confirm", "Are you sure?", Type.ALERT);
 
         var content = (VerticalLayout) dialog.window.getContent();
         var buttons = (HorizontalLayout) content.getComponent(1);
@@ -41,7 +41,7 @@ public void confirmEvent() {
 
     @Test
     public void cancelEvent() {
-        var dialog = new ConfirmDialog("Are you sure?", Type.ALERT);
+        var dialog = new ConfirmDialog("Confirm", "Are you sure?", Type.ALERT);
 
         var content = (VerticalLayout) dialog.window.getContent();
         var buttons = (HorizontalLayout) content.getComponent(1);
@@ -56,7 +56,7 @@ public void cancelEvent() {
 
     @Test
     public void testButtonTexts() {
-        var dialog = new ConfirmDialog("Are you sure?", Type.ALERT);
+        var dialog = new ConfirmDialog("Confirm", "Are you sure?", Type.ALERT);
 
         dialog.setConfirmText("Yes");
         dialog.setCancelText("No");

diff --git a/vaadincreate-components/src/test/java/org/vaadin/tatu/vaadincreate/ConfirmDialogView.java b/vaadincreate-components/src/test/java/org/vaadin/tatu/vaadincreate/ConfirmDialogView.java
@@ -9,7 +9,7 @@ public class ConfirmDialogView extends VerticalLayout implements View {
     public static final String NAME = "confirm-dialog";
 
     public ConfirmDialogView() {
-        var dialog = new ConfirmDialog("Are you sure?",
+        var dialog = new ConfirmDialog("Confirm", "Are you sure?",
                 ConfirmDialog.Type.ALERT);
         dialog.addConfirmedListener(e -> {
             Notification.show("Confirmed");

diff --git a/vaadincreate-ui/reference-screenshots/inventory.png_windows_chrome_131.png b/vaadincreate-ui/reference-screenshots/inventory.png_windows_chrome_131.png
diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/VaadinCreateUI.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/VaadinCreateUI.java
@@ -140,8 +140,8 @@ protected void showAppLayout() {
     // it.
     private void handleDraft(Product draft) {
         logger.info("Draft found");
-        var dialog = new ConfirmDialog(getTranslation(I18n.DRAFT_FOUND),
-                ConfirmDialog.Type.ALERT);
+        var dialog = new ConfirmDialog(getTranslation(I18n.CONFIRM),
+                getTranslation(I18n.DRAFT_FOUND), ConfirmDialog.Type.ALERT);
         dialog.setCancelText(getTranslation(I18n.DISCARD));
         dialog.setConfirmText(getTranslation(I18n.YES));
         var id = draft.getId() == null ? "new" : String.valueOf(draft.getId());

diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/admin/CategoryManagementView.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/admin/CategoryManagementView.java
@@ -242,7 +242,7 @@ private void handleSave() {
 
         // Handle the delete button click event with a confirmation dialog.
         private void handleConfirmDelete() {
-            var dialog = new ConfirmDialog(
+            var dialog = new ConfirmDialog(getTranslation(I18n.CONFIRM),
                     getTranslation(I18n.WILL_DELETE, category.getName()),
                     ConfirmDialog.Type.ALERT);
             dialog.setConfirmText(getTranslation(I18n.DELETE));

diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/admin/UserManagementView.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/admin/UserManagementView.java
@@ -146,7 +146,7 @@ private void handleCancel() {
 
     private void handleDelete() {
         // Show a confirmation dialog before deleting the user
-        var dialog = new ConfirmDialog(
+        var dialog = new ConfirmDialog(getTranslation(I18n.CONFIRM),
                 getTranslation(I18n.WILL_DELETE, user.getName()),
                 ConfirmDialog.Type.ALERT);
         dialog.setConfirmText(getTranslation(I18n.DELETE));

diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/BooksView.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/BooksView.java
@@ -520,10 +520,10 @@ public void beforeLeave(ViewBeforeLeaveEvent event) {
      * @return The created ConfirmDialog instance.
      */
     private ConfirmDialog createDiscardChangesConfirmDialog() {
-        var dialog = new ConfirmDialog(
+        var dialog = new ConfirmDialog(getTranslation(I18n.CONFIRM),
                 getTranslation(I18n.Books.UNSAVED_CHANGES),
                 ConfirmDialog.Type.ALERT);
-        dialog.setConfirmText(getTranslation(I18n.Books.CONFIRM));
+        dialog.setConfirmText(getTranslation(I18n.CONFIRM));
         dialog.setCancelText(getTranslation(I18n.CANCEL));
         return dialog;
     }

diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/form/BookForm.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/crud/form/BookForm.java
@@ -132,76 +132,76 @@ public class BookForm extends Composite implements HasI18N {
     private boolean visible;
     private boolean isValid;
     private Registration pageDownRegistration;
-        private Registration pageUpRegistration;
-    
-        /**
-         * Creates a new BookForm with the given presenter.
-         *
-         * @param presenter
-         *            the presenter for the form.
-         * @param grid
-         */
-        @SuppressWarnings("java:S5669")
-        public BookForm(BooksPresenter presenter, BookGrid grid) {
-            this.presenter = presenter;
-            setCompositionRoot(sidePanel);
-            buildForm();
-    
-            binder = new BeanValidationBinder<>(Product.class);
-            binder.forField(price)
-                    .withConverter(new EuroConverter(
-                            getTranslation(I18n.Form.CANNOT_CONVERT)))
-                    .bind("price");
-            binder.forField(stockCount).bind("stockCount");
-    
-            category.setItemCaptionGenerator(Category::getName);
-            binder.forField(category).bind("category");
-    
-            // Add bean level validation for Availability vs. Stock count cross
-            // checking.
-            binder.withValidator(this::checkAvailabilityVsStockCount, "Error");
-    
-            binder.bindInstanceFields(this);
-            binder.setChangeDetectionEnabled(true);
-    
-            // enable/disable save button while editing
-            binder.addStatusChangeListener(event -> {
-                isValid = !event.hasValidationErrors();
-                if (isValid) {
-                    setStockCountAndAvailabilityInvalid(false);
-                }
-                if (!isValid) {
-                    saveButton.setEnabled(false);
-                }
-            });
-    
-            binder.addValueChangeListener(event -> {
-                var hasChanges = binder.hasChanges();
-                saveButton.setEnabled(hasChanges && isValid);
-                discardButton.setEnabled(hasChanges);
-            });
-    
-            saveButton.addClickListener(event -> handleSave());
-            saveButton.setClickShortcut(KeyCode.S, ModifierKey.CTRL);
-    
-            discardButton.addClickListener(event -> {
-                presenter.editProduct(currentProduct);
-                updateDirtyIndicators();
-            });
-    
-            cancelButton.addClickListener(event -> presenter.cancelProduct());
-            cancelButton.setClickShortcut(KeyCode.ESCAPE);
-    
-            deleteButton.addClickListener(event -> handleDelete());
-
-            pageDownRegistration = addShortcutListener(
-                    new ShortcutListener("Next", KeyCode.PAGE_DOWN, null) {
-                        @Override
-                        public void handleAction(Object sender, Object target) {
-                            selectNextProduct(presenter, grid);
-                        }
-                    });
-            pageUpRegistration = addShortcutListener(
+    private Registration pageUpRegistration;
+
+    /**
+     * Creates a new BookForm with the given presenter.
+     *
+     * @param presenter
+     *            the presenter for the form.
+     * @param grid
+     */
+    @SuppressWarnings("java:S5669")
+    public BookForm(BooksPresenter presenter, BookGrid grid) {
+        this.presenter = presenter;
+        setCompositionRoot(sidePanel);
+        buildForm();
+
+        binder = new BeanValidationBinder<>(Product.class);
+        binder.forField(price)
+                .withConverter(new EuroConverter(
+                        getTranslation(I18n.Form.CANNOT_CONVERT)))
+                .bind("price");
+        binder.forField(stockCount).bind("stockCount");
+
+        category.setItemCaptionGenerator(Category::getName);
+        binder.forField(category).bind("category");
+
+        // Add bean level validation for Availability vs. Stock count cross
+        // checking.
+        binder.withValidator(this::checkAvailabilityVsStockCount, "Error");
+
+        binder.bindInstanceFields(this);
+        binder.setChangeDetectionEnabled(true);
+
+        // enable/disable save button while editing
+        binder.addStatusChangeListener(event -> {
+            isValid = !event.hasValidationErrors();
+            if (isValid) {
+                setStockCountAndAvailabilityInvalid(false);
+            }
+            if (!isValid) {
+                saveButton.setEnabled(false);
+            }
+        });
+
+        binder.addValueChangeListener(event -> {
+            var hasChanges = binder.hasChanges();
+            saveButton.setEnabled(hasChanges && isValid);
+            discardButton.setEnabled(hasChanges);
+        });
+
+        saveButton.addClickListener(event -> handleSave());
+        saveButton.setClickShortcut(KeyCode.S, ModifierKey.CTRL);
+
+        discardButton.addClickListener(event -> {
+            presenter.editProduct(currentProduct);
+            updateDirtyIndicators();
+        });
+
+        cancelButton.addClickListener(event -> presenter.cancelProduct());
+        cancelButton.setClickShortcut(KeyCode.ESCAPE);
+
+        deleteButton.addClickListener(event -> handleDelete());
+
+        pageDownRegistration = addShortcutListener(
+                new ShortcutListener("Next", KeyCode.PAGE_DOWN, null) {
+                    @Override
+                    public void handleAction(Object sender, Object target) {
+                        selectNextProduct(presenter, grid);
+                    }
+                });
+        pageUpRegistration = addShortcutListener(
                 new ShortcutListener("Previous", KeyCode.PAGE_UP, null) {
                     @Override
                     public void handleAction(Object sender, Object target) {
@@ -223,8 +223,10 @@ private void handleSave() {
 
     private void handleDelete() {
         if (currentProduct != null) {
-            var dialog = new ConfirmDialog(getTranslation(I18n.WILL_DELETE,
-                    currentProduct.getProductName()), Type.ALERT);
+            var dialog = new ConfirmDialog(getTranslation(I18n.CONFIRM),
+                    getTranslation(I18n.WILL_DELETE,
+                            currentProduct.getProductName()),
+                    Type.ALERT);
             dialog.setConfirmText(getTranslation(I18n.DELETE));
             dialog.setCancelText(getTranslation(I18n.CANCEL));
             dialog.open();

diff --git a/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/i18n/I18n.java b/vaadincreate-ui/src/main/java/org/vaadin/tatu/vaadincreate/i18n/I18n.java
@@ -33,11 +33,11 @@ private I18n() {
     public static final String EXCEPTION = "exception";
     public static final String CURRENT_PAGE = "current-page";
     public static final String OPENED = "opened";
+    public static final String CONFIRM = "confirm";
 
     public static final class Books {
         public static final String UPDATED = "updated";
         public static final String REMOVED = "removed";
-        public static final String CONFIRM = "confirm";
         public static final String NEW_PRODUCT = "new-product";
         public static final String FILTER = "filter";
         public static final String NOT_VALID_PID = "not-valid-pid";

diff --git a/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/mixins/about.scss b/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/mixins/about.scss
@@ -24,4 +24,8 @@
     box-shadow: $admin-content-shadow;
     background: white;
   }
+
+  .v-button#admin-edit:hover {
+    color: $v-focus-color;
+  }
 }
diff --git a/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/mixins/utilities.scss b/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/mixins/utilities.scss
@@ -64,4 +64,13 @@
     box-shadow: inset 0 1px 0 lighten($v-error-indicator-level-warning-color, 15%), inset 0 -1px 0 darken($v-error-indicator-level-warning-color, 15%), 0 2px 3px rgba(0, 0, 0, 0.05);
     color: white;	  
   }
+
+  .v-button-cancel:hover {
+    background: darken($v-error-indicator-level-warning-color, 2%);
+    border-top-color: lighten($v-error-indicator-level-warning-color, 12%);
+    border-left-color: lighten($v-error-indicator-level-warning-color, 12%);
+    border-right-color: darken($v-error-indicator-level-warning-color, 17%);
+    border-bottom-color: darken($v-error-indicator-level-warning-color, 17%);
+    box-shadow: inset 0 1px 0 lighten($v-error-indicator-level-warning-color, 10%), inset 0 -1px 0 darken($v-error-indicator-level-warning-color, 10%), 0 2px 3px rgba(0, 0, 0, 0.1);
+   }
 }
diff --git a/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/vaadincreate.scss b/vaadincreate-ui/src/main/webapp/VAADIN/themes/vaadincreate/vaadincreate.scss
@@ -109,15 +109,7 @@ $fake-grid-background-color: white;
   span#logout-2:hover {
     color: white;
     outline: none;
-  }
-
-  div[aria-label="Top of dialog"] {
-  	display: none;
-  }
-
-  div[aria-label="Bottom of Dialog"] {
-  	display: none;
-  }
+  } 
 
   .valo-menu-toggle:focus-visible {
     color: white;