refactor: UI-Verbesserungen in Views und Theme-Styles
This commit is contained in:
@@ -118,7 +118,7 @@ vaadin-app-layout::part(content) {
|
|||||||
.view-container {
|
.view-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: red;
|
background: transparent;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
max-width: calc(100% - 40px);
|
max-width: calc(100% - 40px);
|
||||||
@@ -1581,15 +1581,42 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
|
|||||||
|
|
||||||
vaadin-button {
|
vaadin-button {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
border-radius: var(--lumo-border-radius-m);
|
||||||
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
|
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);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
vaadin-button[theme~="primary"] {
|
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,
|
vaadin-text-field,
|
||||||
|
|||||||
@@ -257,6 +257,7 @@ public class EditAppUserView extends VerticalLayout implements HasUrlParameter<S
|
|||||||
confirmDeleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
|
confirmDeleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
|
||||||
|
|
||||||
Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close());
|
Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close());
|
||||||
|
cancelDeleteButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||||
|
|
||||||
buttonLayout.add(confirmDeleteButton, cancelDeleteButton);
|
buttonLayout.add(confirmDeleteButton, cancelDeleteButton);
|
||||||
buttonLayout.setSpacing(true);
|
buttonLayout.setSpacing(true);
|
||||||
|
|||||||
@@ -194,6 +194,7 @@ public class EditCustomerView extends VerticalLayout implements HasUrlParameter<
|
|||||||
confirmDeleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
|
confirmDeleteButton.addThemeVariants(ButtonVariant.LUMO_ERROR);
|
||||||
|
|
||||||
Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close());
|
Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close());
|
||||||
|
cancelDeleteButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||||
|
|
||||||
buttonLayout.add(confirmDeleteButton, cancelDeleteButton);
|
buttonLayout.add(confirmDeleteButton, cancelDeleteButton);
|
||||||
buttonLayout.setSpacing(true);
|
buttonLayout.setSpacing(true);
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ public class ForgotPasswordRequestView extends VerticalLayout implements HasDyna
|
|||||||
emailField.setAutofocus(true);
|
emailField.setAutofocus(true);
|
||||||
|
|
||||||
Button cancel = new Button("Abbrechen", e -> getUI().ifPresent(ui -> ui.navigate("login")));
|
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 -> {
|
Button submit = new Button("E-Mail senden", e -> {
|
||||||
String email = emailField.getValue();
|
String email = emailField.getValue();
|
||||||
if (email == null || email.isBlank()) {
|
if (email == null || email.isBlank()) {
|
||||||
|
|||||||
@@ -296,6 +296,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
|
|||||||
confirmButton.setEnabled(false);
|
confirmButton.setEnabled(false);
|
||||||
|
|
||||||
Button cancelButton = new Button("Abbrechen", event -> dialog.close());
|
Button cancelButton = new Button("Abbrechen", event -> dialog.close());
|
||||||
|
cancelButton.addThemeVariants(com.vaadin.flow.component.button.ButtonVariant.LUMO_TERTIARY);
|
||||||
|
|
||||||
upload.addSucceededListener(event -> {
|
upload.addSucceededListener(event -> {
|
||||||
try (InputStream inputStream = buffer.getInputStream()) {
|
try (InputStream inputStream = buffer.getInputStream()) {
|
||||||
@@ -669,6 +670,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
|
|||||||
|
|
||||||
private HorizontalLayout createHeaderLayout(String clientName, String conversationTitle) {
|
private HorizontalLayout createHeaderLayout(String clientName, String conversationTitle) {
|
||||||
Button backButton = new Button("Zurück", VaadinIcon.ARROW_LEFT.create());
|
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));
|
backButton.addClickListener(e -> UI.getCurrent().navigate("user-messages/" + participantKey));
|
||||||
|
|
||||||
VerticalLayout titleLayout = new VerticalLayout();
|
VerticalLayout titleLayout = new VerticalLayout();
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ package de.assecutor.votianlt.pages.view;
|
|||||||
|
|
||||||
import com.vaadin.flow.component.Component;
|
import com.vaadin.flow.component.Component;
|
||||||
import com.vaadin.flow.component.button.Button;
|
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.Grid;
|
||||||
import com.vaadin.flow.component.grid.GridVariant;
|
import com.vaadin.flow.component.grid.GridVariant;
|
||||||
import com.vaadin.flow.component.grid.ColumnTextAlign;
|
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)
|
// Paginierungs-Buttons (vorerst ohne Funktion, als Platzhalter)
|
||||||
Button prev = new Button(getTranslation("myinvoices.button.prev"), VaadinIcon.ANGLE_LEFT.create());
|
Button prev = new Button(getTranslation("myinvoices.button.prev"), VaadinIcon.ANGLE_LEFT.create());
|
||||||
Button next = new Button(getTranslation("myinvoices.button.next"), VaadinIcon.ANGLE_RIGHT.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);
|
prev.setEnabled(false);
|
||||||
next.setEnabled(false);
|
next.setEnabled(false);
|
||||||
HorizontalLayout pager = new HorizontalLayout(prev, next);
|
HorizontalLayout pager = new HorizontalLayout(prev, next);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
package de.assecutor.votianlt.pages.view;
|
package de.assecutor.votianlt.pages.view;
|
||||||
|
|
||||||
import com.vaadin.flow.component.button.Button;
|
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.Grid;
|
||||||
import com.vaadin.flow.component.html.Div;
|
import com.vaadin.flow.component.html.Div;
|
||||||
import com.vaadin.flow.component.html.Paragraph;
|
import com.vaadin.flow.component.html.Paragraph;
|
||||||
@@ -34,6 +35,7 @@ public class ShowCustomersView extends VerticalLayout implements HasDynamicTitle
|
|||||||
addClassName("data-view");
|
addClassName("data-view");
|
||||||
|
|
||||||
Button addCustomerButton = new Button(getTranslation("customers.button.add"), new Icon(VaadinIcon.PLUS));
|
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(new ViewToolbar(getTranslation("customers.title"), addCustomerButton));
|
||||||
|
|
||||||
// Add hint text
|
// Add hint text
|
||||||
|
|||||||
@@ -70,6 +70,7 @@ public class ShowJobsView extends VerticalLayout implements HasDynamicTitle {
|
|||||||
searchField.setLabel(getTranslation("jobs.filter.search"));
|
searchField.setLabel(getTranslation("jobs.filter.search"));
|
||||||
statusFilter.setLabel(getTranslation("jobs.filter.status"));
|
statusFilter.setLabel(getTranslation("jobs.filter.status"));
|
||||||
Button exportButton = new Button(getTranslation("jobs.button.csvexport"));
|
Button exportButton = new Button(getTranslation("jobs.button.csvexport"));
|
||||||
|
exportButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||||
ViewToolbar toolbar = new ViewToolbar(getTranslation("nav.jobs"), exportButton);
|
ViewToolbar toolbar = new ViewToolbar(getTranslation("nav.jobs"), exportButton);
|
||||||
add(toolbar);
|
add(toolbar);
|
||||||
|
|
||||||
@@ -84,6 +85,7 @@ public class ShowJobsView extends VerticalLayout implements HasDynamicTitle {
|
|||||||
|
|
||||||
// Filterleiste mit Export-Button am rechten Rand
|
// Filterleiste mit Export-Button am rechten Rand
|
||||||
Button applyFilter = new Button(getTranslation("jobs.filter.apply"));
|
Button applyFilter = new Button(getTranslation("jobs.filter.apply"));
|
||||||
|
applyFilter.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
|
||||||
HorizontalLayout leftFilters = new HorizontalLayout(startDate, endDate, searchField, statusFilter, applyFilter);
|
HorizontalLayout leftFilters = new HorizontalLayout(startDate, endDate, searchField, statusFilter, applyFilter);
|
||||||
leftFilters.setAlignItems(Alignment.END);
|
leftFilters.setAlignItems(Alignment.END);
|
||||||
leftFilters.getStyle().set("flex-wrap", "wrap");
|
leftFilters.getStyle().set("flex-wrap", "wrap");
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ package de.assecutor.votianlt.pages.view;
|
|||||||
|
|
||||||
import com.vaadin.flow.component.UI;
|
import com.vaadin.flow.component.UI;
|
||||||
import com.vaadin.flow.component.button.Button;
|
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.Div;
|
||||||
import com.vaadin.flow.component.html.H2;
|
import com.vaadin.flow.component.html.H2;
|
||||||
import com.vaadin.flow.component.html.H3;
|
import com.vaadin.flow.component.html.H3;
|
||||||
@@ -98,6 +99,7 @@ public class UserMessagesView extends Main implements HasUrlParameter<String>, H
|
|||||||
|
|
||||||
private HorizontalLayout createHeaderLayout(String clientName) {
|
private HorizontalLayout createHeaderLayout(String clientName) {
|
||||||
Button backButton = new Button(getTranslation("button.back"), VaadinIcon.ARROW_LEFT.create());
|
Button backButton = new Button(getTranslation("button.back"), VaadinIcon.ARROW_LEFT.create());
|
||||||
|
backButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
|
||||||
backButton.addClickListener(e -> UI.getCurrent().navigate("messages"));
|
backButton.addClickListener(e -> UI.getCurrent().navigate("messages"));
|
||||||
|
|
||||||
H2 title = new H2(getTranslation("usermessages.title.with", clientName));
|
H2 title = new H2(getTranslation("usermessages.title.with", clientName));
|
||||||
|
|||||||
Reference in New Issue
Block a user