feat: einheitliches Station-Dialog-Styling über alle Views

This commit is contained in:
2026-03-23 09:07:42 +01:00
parent 3d77a0bf64
commit b70c45b1d5
9 changed files with 136 additions and 136 deletions

View File

@@ -359,20 +359,20 @@ public class DeliveryStationDialog extends Dialog {
}
// Warte-Dialog anzeigen
Dialog loadingDialog = new Dialog();
Dialog loadingDialog = DialogStylingHelper
.createStyledDialog(translationHelper.getTranslation("addjob.validation.dialog.title"), "420px");
loadingDialog.setCloseOnOutsideClick(false);
loadingDialog.setCloseOnEsc(false);
loadingDialog.setHeaderTitle(translationHelper.getTranslation("addjob.validation.dialog.title"));
VerticalLayout loadingContent = new VerticalLayout();
VerticalLayout loadingContent = DialogStylingHelper.createContentLayout("320px",
FlexComponent.Alignment.CENTER);
loadingContent.setAlignItems(FlexComponent.Alignment.CENTER);
loadingContent.setPadding(true);
loadingContent.setSpacing(true);
loadingContent.getStyle().set("text-align", "center");
Span loadingText = new Span(translationHelper.getTranslation("addjob.validation.dialog.loading"));
ProgressBar progressBar = new ProgressBar();
progressBar.setIndeterminate(true);
progressBar.setWidthFull();
loadingContent.add(loadingText, progressBar);
loadingDialog.add(loadingContent);
loadingDialog.add(DialogStylingHelper.wrapContent(loadingContent));
loadingDialog.open();
// Adresse asynchron bei Google validieren
@@ -1274,13 +1274,11 @@ public class DeliveryStationDialog extends Dialog {
return;
}
Dialog dialog = new Dialog();
dialog.setHeaderTitle(translationHelper.getTranslation("addjob.tasks.template.save.title"));
dialog.setWidth("400px");
Dialog dialog = DialogStylingHelper
.createStyledDialog(translationHelper.getTranslation("addjob.tasks.template.save.title"), "460px");
dialog.setCloseOnOutsideClick(false);
VerticalLayout dialogLayout = new VerticalLayout();
dialogLayout.setPadding(false);
dialogLayout.setSpacing(true);
VerticalLayout dialogLayout = DialogStylingHelper.createContentLayout("340px");
TextField templateNameField = new TextField(translationHelper.getTranslation("addjob.tasks.template.name"));
templateNameField.setPlaceholder(translationHelper.getTranslation("addjob.tasks.template.name.placeholder"));
@@ -1310,11 +1308,9 @@ public class DeliveryStationDialog extends Dialog {
Button cancelButton = new Button(translationHelper.getTranslation("button.cancel"));
cancelButton.addClickListener(e -> dialog.close());
HorizontalLayout buttonLayout = new HorizontalLayout(cancelButton, saveButton);
buttonLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
dialogLayout.add(templateNameField, buttonLayout);
dialog.add(dialogLayout);
dialogLayout.add(templateNameField);
dialog.add(DialogStylingHelper.wrapContent(dialogLayout));
dialog.getFooter().add(cancelButton, saveButton);
dialog.open();
}

View File

@@ -0,0 +1,68 @@
package de.assecutor.votianlt.pages.base.ui.component;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
/**
* Shared helper for dialogs that should use the station-dialog shell.
*/
public final class DialogStylingHelper {
private DialogStylingHelper() {
}
public static Dialog createStyledDialog(String title, String width) {
Dialog dialog = new Dialog();
apply(dialog, title, width);
return dialog;
}
public static void apply(Dialog dialog, String title, String width) {
if (title != null && !title.isBlank()) {
dialog.setHeaderTitle(title);
}
if (width != null && !width.isBlank()) {
dialog.setWidth(width);
}
dialog.setMaxWidth("95vw");
dialog.getElement().setAttribute("theme", "no-inner-card");
}
public static Component wrapContent(Component content) {
Div frame = new Div();
frame.getStyle().set("border", "10px solid transparent");
frame.getStyle().set("border-radius", "0");
frame.getStyle().set("box-sizing", "border-box");
frame.setWidthFull();
Div whiteCard = new Div();
whiteCard.getStyle().set("background", "white");
whiteCard.getStyle().set("border-radius", "24px");
whiteCard.getStyle().set("overflow", "auto");
whiteCard.setWidthFull();
whiteCard.add(content);
frame.add(whiteCard);
return frame;
}
public static VerticalLayout createContentLayout(String maxWidth) {
return createContentLayout(maxWidth, FlexComponent.Alignment.STRETCH);
}
public static VerticalLayout createContentLayout(String maxWidth, FlexComponent.Alignment alignment) {
VerticalLayout content = new VerticalLayout();
content.setPadding(true);
content.setSpacing(true);
content.setWidthFull();
if (maxWidth != null && !maxWidth.isBlank()) {
content.setMaxWidth(maxWidth);
}
content.setDefaultHorizontalComponentAlignment(alignment);
content.getStyle().set("margin", "0 auto");
return content;
}
}

View File

@@ -485,20 +485,20 @@ public class PickupStationDialog extends Dialog {
}
// Warte-Dialog anzeigen
Dialog loadingDialog = new Dialog();
Dialog loadingDialog = DialogStylingHelper
.createStyledDialog(translationHelper.getTranslation("addjob.validation.dialog.title"), "420px");
loadingDialog.setCloseOnOutsideClick(false);
loadingDialog.setCloseOnEsc(false);
loadingDialog.setHeaderTitle(translationHelper.getTranslation("addjob.validation.dialog.title"));
VerticalLayout loadingContent = new VerticalLayout();
VerticalLayout loadingContent = DialogStylingHelper.createContentLayout("320px",
FlexComponent.Alignment.CENTER);
loadingContent.setAlignItems(FlexComponent.Alignment.CENTER);
loadingContent.setPadding(true);
loadingContent.setSpacing(true);
loadingContent.getStyle().set("text-align", "center");
Span loadingText = new Span(translationHelper.getTranslation("addjob.validation.dialog.loading"));
ProgressBar progressBar = new ProgressBar();
progressBar.setIndeterminate(true);
progressBar.setWidthFull();
loadingContent.add(loadingText, progressBar);
loadingDialog.add(loadingContent);
loadingDialog.add(DialogStylingHelper.wrapContent(loadingContent));
loadingDialog.open();
// Adresse asynchron bei Google validieren

View File

@@ -66,6 +66,7 @@ import de.assecutor.votianlt.pages.base.ui.component.DeliveryStationTile;
import de.assecutor.votianlt.pages.base.ui.component.StationTile;
import de.assecutor.votianlt.pages.base.ui.component.PickupStationDialog;
import de.assecutor.votianlt.pages.base.ui.component.DeliveryStationDialog;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
import de.assecutor.votianlt.pages.base.ui.component.ViewToolbar;
import java.time.LocalDate;
import java.time.LocalTime;
@@ -1185,10 +1186,10 @@ public class AddJobView extends Main implements HasDynamicTitle {
}
private void openAddServiceDialog() {
Dialog dialog = createStationStyledDialog(getTranslation("addjob.services.dialog.title"), "720px");
Dialog dialog = DialogStylingHelper.createStyledDialog(getTranslation("addjob.services.dialog.title"), "720px");
dialog.setCloseOnOutsideClick(false);
VerticalLayout dialogContent = createStationDialogContentLayout("620px");
VerticalLayout dialogContent = DialogStylingHelper.createContentLayout("620px");
// Load available services for current user
List<Service> availableServices = serviceRepository
@@ -1237,7 +1238,7 @@ public class AddJobView extends Main implements HasDynamicTitle {
});
addButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
dialog.add(wrapInStationDialogCard(dialogContent));
dialog.add(DialogStylingHelper.wrapContent(dialogContent));
dialog.getFooter().add(cancelButton, addButton);
dialog.open();
}
@@ -2265,11 +2266,11 @@ public class AddJobView extends Main implements HasDynamicTitle {
}
private Dialog createRouteLoadingDialog() {
Dialog dialog = createStationStyledDialog(getTranslation("addjob.route.title"), "460px");
Dialog dialog = DialogStylingHelper.createStyledDialog(getTranslation("addjob.route.title"), "460px");
dialog.setCloseOnOutsideClick(false);
dialog.setCloseOnEsc(false);
VerticalLayout content = createStationDialogContentLayout("340px");
VerticalLayout content = DialogStylingHelper.createContentLayout("340px", FlexComponent.Alignment.CENTER);
content.setAlignItems(FlexComponent.Alignment.CENTER);
content.getStyle().set("text-align", "center");
@@ -2279,7 +2280,7 @@ public class AddJobView extends Main implements HasDynamicTitle {
progressBar.setWidthFull();
content.add(loadingText, progressBar);
dialog.add(wrapInStationDialogCard(content));
dialog.add(DialogStylingHelper.wrapContent(content));
return dialog;
}
@@ -2304,9 +2305,9 @@ public class AddJobView extends Main implements HasDynamicTitle {
}
private void showRouteSummaryDialog(RouteCalculationResult routeResult) {
Dialog dialog = createStationStyledDialog(getTranslation("addjob.route.title"), "480px");
Dialog dialog = DialogStylingHelper.createStyledDialog(getTranslation("addjob.route.title"), "480px");
VerticalLayout content = createStationDialogContentLayout("360px");
VerticalLayout content = DialogStylingHelper.createContentLayout("360px");
content.add(createRouteSummaryRow(getTranslation("addjob.route.distance"), routeResult.getFormattedDistance()));
content.add(
createRouteSummaryRow(getTranslation("addjob.route.duration"), routeResult.getFormattedDurationLong()));
@@ -2314,49 +2315,11 @@ public class AddJobView extends Main implements HasDynamicTitle {
Button closeButton = new Button(getTranslation("dialog.confirm"), event -> dialog.close());
closeButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
dialog.add(wrapInStationDialogCard(content));
dialog.add(DialogStylingHelper.wrapContent(content));
dialog.getFooter().add(closeButton);
dialog.open();
}
private Dialog createStationStyledDialog(String title, String width) {
Dialog dialog = new Dialog();
dialog.setHeaderTitle(title);
dialog.setWidth(width);
dialog.setMaxWidth("95vw");
dialog.getElement().setAttribute("theme", "no-inner-card");
return dialog;
}
private Component wrapInStationDialogCard(Component content) {
Div frame = new Div();
frame.getStyle().set("border", "10px solid transparent");
frame.getStyle().set("border-radius", "0");
frame.getStyle().set("box-sizing", "border-box");
frame.setWidthFull();
Div whiteCard = new Div();
whiteCard.getStyle().set("background", "white");
whiteCard.getStyle().set("border-radius", "24px");
whiteCard.getStyle().set("overflow", "auto");
whiteCard.setWidthFull();
whiteCard.add(content);
frame.add(whiteCard);
return frame;
}
private VerticalLayout createStationDialogContentLayout(String maxWidth) {
VerticalLayout content = new VerticalLayout();
content.setPadding(true);
content.setSpacing(true);
content.setWidthFull();
content.setMaxWidth(maxWidth);
content.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.STRETCH);
content.getStyle().set("margin", "0 auto");
return content;
}
private HorizontalLayout createRouteSummaryRow(String label, String value) {
HorizontalLayout row = new HorizontalLayout();
row.setWidthFull();

View File

@@ -5,6 +5,7 @@ import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -17,6 +18,7 @@ import com.vaadin.flow.router.HasDynamicTitle;
import com.vaadin.flow.router.HasUrlParameter;
import com.vaadin.flow.router.Route;
import de.assecutor.votianlt.model.Customer;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
import de.assecutor.votianlt.pages.service.CustomerService;
import jakarta.annotation.security.RolesAllowed;
import org.bson.types.ObjectId;
@@ -180,10 +182,13 @@ public class EditCustomerView extends VerticalLayout implements HasUrlParameter<
private void deleteCustomer() {
// Show confirmation dialog
Dialog confirmDialog = new Dialog();
confirmDialog.add(getTranslation("editcustomer.dialog.delete.text"));
Dialog confirmDialog = DialogStylingHelper
.createStyledDialog(getTranslation("editcustomer.dialog.delete.confirm"), "460px");
confirmDialog.setCloseOnOutsideClick(false);
VerticalLayout dialogContent = DialogStylingHelper.createContentLayout("320px");
dialogContent.add(new Span(getTranslation("editcustomer.dialog.delete.text")));
HorizontalLayout buttonLayout = new HorizontalLayout();
Button confirmDeleteButton = new Button(getTranslation("editcustomer.dialog.delete.confirm"), e -> {
if (customer != null && customer.getId() != null) {
Notification.show(getTranslation("editcustomer.notification.deleted"), 3000,
@@ -197,9 +202,8 @@ public class EditCustomerView extends VerticalLayout implements HasUrlParameter<
Button cancelDeleteButton = new Button(getTranslation("button.cancel"), e -> confirmDialog.close());
cancelDeleteButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
buttonLayout.add(confirmDeleteButton, cancelDeleteButton);
buttonLayout.setSpacing(true);
confirmDialog.add(buttonLayout);
confirmDialog.add(DialogStylingHelper.wrapContent(dialogContent));
confirmDialog.getFooter().add(cancelDeleteButton, confirmDeleteButton);
confirmDialog.open();
}

View File

@@ -53,6 +53,7 @@ import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.ClientCallable;
import jakarta.annotation.security.RolesAllowed;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
@Route(value = "edit-profile", layout = de.assecutor.votianlt.pages.base.ui.view.MainLayout.class)
@RolesAllowed({ "USER", "ADMIN" })
@@ -1571,16 +1572,14 @@ public class EditProfileView extends HorizontalLayout implements HasDynamicTitle
* Open dialog for adding/editing a service
*/
private void openServiceDialog(Service service) {
Dialog dialog = new Dialog();
dialog.setHeaderTitle(service == null ? getTranslation("profile.services.dialog.create")
: getTranslation("profile.services.dialog.edit"));
dialog.setWidth("500px");
Dialog dialog = DialogStylingHelper.createStyledDialog(
service == null ? getTranslation("profile.services.dialog.create")
: getTranslation("profile.services.dialog.edit"),
"560px");
dialog.setCloseOnOutsideClick(false);
// Form layout
VerticalLayout formLayout = new VerticalLayout();
formLayout.setPadding(true);
formLayout.setSpacing(true);
formLayout.setWidthFull();
VerticalLayout formLayout = DialogStylingHelper.createContentLayout("420px");
// Name field
TextField nameField = new TextField(getTranslation("common.name"));
@@ -1685,11 +1684,6 @@ public class EditProfileView extends HorizontalLayout implements HasDynamicTitle
mandatoryCheckbox);
// Action buttons
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.setWidthFull();
buttonLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
buttonLayout.setSpacing(true);
Button cancelButton = new Button(getTranslation("button.cancel"), e -> dialog.close());
cancelButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
@@ -1716,10 +1710,8 @@ public class EditProfileView extends HorizontalLayout implements HasDynamicTitle
});
saveButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
buttonLayout.add(cancelButton, saveButton);
formLayout.add(buttonLayout);
dialog.add(formLayout);
dialog.add(DialogStylingHelper.wrapContent(formLayout));
dialog.getFooter().add(cancelButton, saveButton);
dialog.open();
}

View File

@@ -23,6 +23,7 @@ import com.vaadin.flow.component.upload.Upload;
import com.vaadin.flow.component.upload.receivers.MemoryBuffer;
import com.vaadin.flow.router.HasDynamicTitle;
import com.vaadin.flow.router.Route;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
import de.assecutor.votianlt.pages.base.ui.view.AdminLayout;
import de.assecutor.votianlt.service.CustomerInvoiceService;
import jakarta.annotation.security.RolesAllowed;
@@ -490,12 +491,11 @@ public class InvoiceGeneratorView extends VerticalLayout implements HasDynamicTi
colorPreviewLayout.add(colorPreview, colorHexLabel);
// Color Picker Dialog
Dialog colorDialog = new Dialog();
colorDialog.setHeaderTitle(getTranslation("invoicegenerator.color.dialog.title"));
Dialog colorDialog = DialogStylingHelper
.createStyledDialog(getTranslation("invoicegenerator.color.dialog.title"), "460px");
colorDialog.setCloseOnOutsideClick(false);
VerticalLayout dialogLayout = new VerticalLayout();
dialogLayout.setSpacing(true);
dialogLayout.setPadding(true);
VerticalLayout dialogLayout = DialogStylingHelper.createContentLayout("320px");
// Color Picker im Dialog
Input dialogColorPicker = new Input();
@@ -521,7 +521,7 @@ public class InvoiceGeneratorView extends VerticalLayout implements HasDynamicTi
});
dialogLayout.add(dialogColorPicker, dialogHexField);
colorDialog.add(dialogLayout);
colorDialog.add(DialogStylingHelper.wrapContent(dialogLayout));
// Dialog Buttons
Button dialogCancelButton = new Button(getTranslation("invoicegenerator.button.cancel"), e -> {

View File

@@ -37,6 +37,7 @@ import de.assecutor.votianlt.model.task.BarcodeTask;
import de.assecutor.votianlt.model.task.CommentTask;
import de.assecutor.votianlt.model.AppUser;
import de.assecutor.votianlt.pages.base.ui.component.StationTile;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
import de.assecutor.votianlt.pages.base.ui.component.ViewToolbar;
import lombok.extern.slf4j.Slf4j;
import de.assecutor.votianlt.repository.CargoItemRepository;
@@ -666,9 +667,7 @@ public class JobSummaryView extends Main implements HasUrlParameter<String>, Has
}
private void showStationTasksDialog(String stationTitle, List<BaseTask> tasks) {
Dialog dialog = new Dialog();
dialog.setWidth("720px");
dialog.setMaxWidth("95vw");
Dialog dialog = DialogStylingHelper.createStyledDialog(stationTitle, "720px");
dialog.setMaxHeight("85vh");
dialog.setResizable(true);
dialog.setHeaderTitle(stationTitle);
@@ -676,10 +675,7 @@ public class JobSummaryView extends Main implements HasUrlParameter<String>, Has
taskCards.clear();
VerticalLayout dialogContent = new VerticalLayout();
dialogContent.setPadding(true);
dialogContent.setSpacing(true);
dialogContent.setWidthFull();
VerticalLayout dialogContent = DialogStylingHelper.createContentLayout("620px");
dialogContent.getStyle().set("min-width", "0");
dialogContent.addClassName("dialog-content-panel");
@@ -708,7 +704,7 @@ public class JobSummaryView extends Main implements HasUrlParameter<String>, Has
closeButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
dialog.getFooter().add(closeButton);
dialog.add(dialogContent);
dialog.add(DialogStylingHelper.wrapContent(dialogContent));
dialog.open();
}
@@ -1093,23 +1089,16 @@ public class JobSummaryView extends Main implements HasUrlParameter<String>, Has
}
private void showTaskDetailsDialog(BaseTask task) {
Dialog dialog = new Dialog();
dialog.setWidth("500px");
Dialog dialog = DialogStylingHelper.createStyledDialog("Aufgaben-Details", "560px");
dialog.setResizable(true);
dialog.setDraggable(true);
// Reset all task card hover states when dialog closes
dialog.addDialogCloseActionListener(e -> resetAllTaskCardHoverStates());
VerticalLayout dialogContent = new VerticalLayout();
dialogContent.setPadding(true);
dialogContent.setSpacing(true);
VerticalLayout dialogContent = DialogStylingHelper.createContentLayout("420px");
dialogContent.addClassName("dialog-content-panel");
// Header
H4 header = new H4("Aufgaben-Details");
dialogContent.add(header);
// Task type and status
Span typeSpan = new Span("Typ: " + task.getDisplayName());
typeSpan.getStyle().set("font-weight", "bold");
@@ -1144,11 +1133,8 @@ public class JobSummaryView extends Main implements HasUrlParameter<String>, Has
});
closeButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
HorizontalLayout buttonLayout = new HorizontalLayout(closeButton);
buttonLayout.setJustifyContentMode(HorizontalLayout.JustifyContentMode.END);
dialogContent.add(buttonLayout);
dialog.add(dialogContent);
dialog.add(DialogStylingHelper.wrapContent(dialogContent));
dialog.getFooter().add(closeButton);
dialog.open();
}

View File

@@ -11,6 +11,7 @@ import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Span;
import de.assecutor.votianlt.pages.base.ui.component.DialogStylingHelper;
import de.assecutor.votianlt.pages.base.ui.component.ViewToolbar;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
@@ -262,11 +263,9 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
}
private void openImageUploadDialog() {
Dialog dialog = new Dialog();
dialog.setHeaderTitle("Bild anhängen");
Dialog dialog = DialogStylingHelper.createStyledDialog("Bild anhängen", "560px");
dialog.setCloseOnEsc(true);
dialog.setCloseOnOutsideClick(true);
dialog.setWidth("480px");
MemoryBuffer buffer = new MemoryBuffer();
Upload upload = new Upload(buffer);
@@ -370,19 +369,11 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
sendMessageToParticipant(base64, MessageContentType.IMAGE);
});
VerticalLayout dialogContent = new VerticalLayout(upload, helper, previewWrapper);
dialogContent.setSpacing(true);
dialogContent.setPadding(false);
dialogContent.setAlignItems(FlexComponent.Alignment.STRETCH);
dialogContent.setWidthFull();
VerticalLayout dialogContent = DialogStylingHelper.createContentLayout("440px");
dialogContent.add(upload, helper, previewWrapper);
HorizontalLayout buttonBar = new HorizontalLayout(cancelButton, confirmButton);
buttonBar.setWidthFull();
buttonBar.setSpacing(true);
buttonBar.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
dialog.add(dialogContent);
dialog.getFooter().add(buttonBar);
dialog.add(DialogStylingHelper.wrapContent(dialogContent));
dialog.getFooter().add(cancelButton, confirmButton);
dialog.open();
}