From 4657c712fcb5c2b78edf056b63b375ce93724643 Mon Sep 17 00:00:00 2001 From: Sven Carstensen Date: Thu, 19 Mar 2026 15:42:42 +0100 Subject: [PATCH] refactor: UI-Verbesserungen in Views und Theme-Styles --- .../frontend/themes/votian-modern/styles.css | 33 +++++++++++++++++-- .../votianlt/pages/view/EditAppUserView.java | 1 + .../votianlt/pages/view/EditCustomerView.java | 1 + .../pages/view/ForgotPasswordRequestView.java | 1 + .../pages/view/MessageDetailsView.java | 2 ++ .../votianlt/pages/view/MyInvoicesView.java | 3 ++ .../pages/view/ShowCustomersView.java | 2 ++ .../votianlt/pages/view/ShowJobsView.java | 2 ++ .../votianlt/pages/view/UserMessagesView.java | 2 ++ 9 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/themes/votian-modern/styles.css b/src/main/frontend/themes/votian-modern/styles.css index 3ab9bb4..fab2fa1 100644 --- a/src/main/frontend/themes/votian-modern/styles.css +++ b/src/main/frontend/themes/votian-modern/styles.css @@ -118,7 +118,7 @@ vaadin-app-layout::part(content) { .view-container { display: flex; flex-direction: column; - background: red; + background: transparent; margin: 20px; width: calc(100% - 40px); max-width: calc(100% - 40px); @@ -1581,15 +1581,42 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon { vaadin-button { font-weight: 700; + border-radius: var(--lumo-border-radius-m); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } -vaadin-button:hover { +vaadin-button:not([disabled]):hover { transform: translateY(-1px); } vaadin-button[theme~="primary"] { - box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22); + box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22); +} + +vaadin-button[theme~="primary"]:not([disabled]):hover { + box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32); +} + +vaadin-button[theme~="primary"][theme~="success"] { + box-shadow: 0 8px 20px rgba(5, 150, 105, 0.24); +} + +vaadin-button[theme~="primary"][theme~="success"]:not([disabled]):hover { + box-shadow: 0 12px 28px rgba(5, 150, 105, 0.34); +} + +vaadin-button[theme~="primary"][theme~="error"] { + box-shadow: 0 8px 20px rgba(220, 38, 38, 0.24); +} + +vaadin-button[theme~="tertiary"][theme~="error"]:not([disabled]):hover { + background: rgba(220, 38, 38, 0.08); + transform: translateY(-1px); +} + +vaadin-button[disabled] { + opacity: 0.46; + transform: none !important; } vaadin-text-field, diff --git a/src/main/java/de/assecutor/votianlt/pages/view/EditAppUserView.java b/src/main/java/de/assecutor/votianlt/pages/view/EditAppUserView.java index dc0d13e..5dad6aa 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/EditAppUserView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/EditAppUserView.java @@ -257,6 +257,7 @@ public class EditAppUserView extends VerticalLayout implements HasUrlParameter confirmDialog.close()); + cancelDeleteButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); buttonLayout.add(confirmDeleteButton, cancelDeleteButton); buttonLayout.setSpacing(true); diff --git a/src/main/java/de/assecutor/votianlt/pages/view/EditCustomerView.java b/src/main/java/de/assecutor/votianlt/pages/view/EditCustomerView.java index 44b9da6..a6e1f8f 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/EditCustomerView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/EditCustomerView.java @@ -194,6 +194,7 @@ public class EditCustomerView extends VerticalLayout implements HasUrlParameter< confirmDeleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR); Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close()); + cancelDeleteButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); buttonLayout.add(confirmDeleteButton, cancelDeleteButton); buttonLayout.setSpacing(true); diff --git a/src/main/java/de/assecutor/votianlt/pages/view/ForgotPasswordRequestView.java b/src/main/java/de/assecutor/votianlt/pages/view/ForgotPasswordRequestView.java index 9cc4f6c..89d750f 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/ForgotPasswordRequestView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/ForgotPasswordRequestView.java @@ -43,6 +43,7 @@ public class ForgotPasswordRequestView extends VerticalLayout implements HasDyna emailField.setAutofocus(true); Button cancel = new Button("Abbrechen", e -> getUI().ifPresent(ui -> ui.navigate("login"))); + cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY); Button submit = new Button("E-Mail senden", e -> { String email = emailField.getValue(); if (email == null || email.isBlank()) { diff --git a/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java b/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java index 386b323..bff8b42 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java @@ -296,6 +296,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has confirmButton.setEnabled(false); Button cancelButton = new Button("Abbrechen", event -> dialog.close()); + cancelButton.addThemeVariants(com.vaadin.flow.component.button.ButtonVariant.LUMO_TERTIARY); upload.addSucceededListener(event -> { try (InputStream inputStream = buffer.getInputStream()) { @@ -669,6 +670,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has private HorizontalLayout createHeaderLayout(String clientName, String conversationTitle) { Button backButton = new Button("Zurück", VaadinIcon.ARROW_LEFT.create()); + backButton.addThemeVariants(com.vaadin.flow.component.button.ButtonVariant.LUMO_TERTIARY); backButton.addClickListener(e -> UI.getCurrent().navigate("user-messages/" + participantKey)); VerticalLayout titleLayout = new VerticalLayout(); diff --git a/src/main/java/de/assecutor/votianlt/pages/view/MyInvoicesView.java b/src/main/java/de/assecutor/votianlt/pages/view/MyInvoicesView.java index bae3a4d..7775f42 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/MyInvoicesView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/MyInvoicesView.java @@ -2,6 +2,7 @@ package de.assecutor.votianlt.pages.view; import com.vaadin.flow.component.Component; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.grid.Grid; import com.vaadin.flow.component.grid.GridVariant; import com.vaadin.flow.component.grid.ColumnTextAlign; @@ -168,6 +169,8 @@ public class MyInvoicesView extends Main implements HasDynamicTitle { // Paginierungs-Buttons (vorerst ohne Funktion, als Platzhalter) Button prev = new Button(getTranslation("myinvoices.button.prev"), VaadinIcon.ANGLE_LEFT.create()); Button next = new Button(getTranslation("myinvoices.button.next"), VaadinIcon.ANGLE_RIGHT.create()); + prev.addThemeVariants(ButtonVariant.LUMO_TERTIARY); + next.addThemeVariants(ButtonVariant.LUMO_TERTIARY); prev.setEnabled(false); next.setEnabled(false); HorizontalLayout pager = new HorizontalLayout(prev, next); diff --git a/src/main/java/de/assecutor/votianlt/pages/view/ShowCustomersView.java b/src/main/java/de/assecutor/votianlt/pages/view/ShowCustomersView.java index 1c8bb5e..edd6495 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/ShowCustomersView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/ShowCustomersView.java @@ -1,6 +1,7 @@ package de.assecutor.votianlt.pages.view; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.grid.Grid; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.Paragraph; @@ -34,6 +35,7 @@ public class ShowCustomersView extends VerticalLayout implements HasDynamicTitle addClassName("data-view"); Button addCustomerButton = new Button(getTranslation("customers.button.add"), new Icon(VaadinIcon.PLUS)); + addCustomerButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY); add(new ViewToolbar(getTranslation("customers.title"), addCustomerButton)); // Add hint text diff --git a/src/main/java/de/assecutor/votianlt/pages/view/ShowJobsView.java b/src/main/java/de/assecutor/votianlt/pages/view/ShowJobsView.java index 7eb1a26..109bb7a 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/ShowJobsView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/ShowJobsView.java @@ -70,6 +70,7 @@ public class ShowJobsView extends VerticalLayout implements HasDynamicTitle { searchField.setLabel(getTranslation("jobs.filter.search")); statusFilter.setLabel(getTranslation("jobs.filter.status")); Button exportButton = new Button(getTranslation("jobs.button.csvexport")); + exportButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); ViewToolbar toolbar = new ViewToolbar(getTranslation("nav.jobs"), exportButton); add(toolbar); @@ -84,6 +85,7 @@ public class ShowJobsView extends VerticalLayout implements HasDynamicTitle { // Filterleiste mit Export-Button am rechten Rand Button applyFilter = new Button(getTranslation("jobs.filter.apply")); + applyFilter.addThemeVariants(ButtonVariant.LUMO_PRIMARY); HorizontalLayout leftFilters = new HorizontalLayout(startDate, endDate, searchField, statusFilter, applyFilter); leftFilters.setAlignItems(Alignment.END); leftFilters.getStyle().set("flex-wrap", "wrap"); diff --git a/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java b/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java index bc961c7..f3a0b45 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java @@ -2,6 +2,7 @@ package de.assecutor.votianlt.pages.view; import com.vaadin.flow.component.UI; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.H2; import com.vaadin.flow.component.html.H3; @@ -98,6 +99,7 @@ public class UserMessagesView extends Main implements HasUrlParameter, H private HorizontalLayout createHeaderLayout(String clientName) { Button backButton = new Button(getTranslation("button.back"), VaadinIcon.ARROW_LEFT.create()); + backButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY); backButton.addClickListener(e -> UI.getCurrent().navigate("messages")); H2 title = new H2(getTranslation("usermessages.title.with", clientName));