feat: redesign PickupStationDialog with tabbed interface and white card layout
- Replace red border frame with transparent border and white card - Add TabSheet with address, appointments, and cargo tabs - Improve dialog layout with rounded corners and flex structure
This commit is contained in:
@@ -437,15 +437,44 @@ public class PickupStationDialog extends Dialog {
|
|||||||
formLayout.add(customerComboBox, company, salutation, firstName, lastName, phone, streetLayout, addressAddition,
|
formLayout.add(customerComboBox, company, salutation, firstName, lastName, phone, streetLayout, addressAddition,
|
||||||
zipCityLayout, saveAddress);
|
zipCityLayout, saveAddress);
|
||||||
|
|
||||||
|
// TabSheet with address, appointments, and cargo tabs
|
||||||
|
TabSheet tabSheet = new TabSheet();
|
||||||
|
tabSheet.setWidthFull();
|
||||||
|
tabSheet.setSizeFull();
|
||||||
|
|
||||||
|
addressTabError = createTabErrorIndicator();
|
||||||
|
appointmentsTabError = createTabErrorIndicator();
|
||||||
|
cargoTabError = createTabErrorIndicator();
|
||||||
|
|
||||||
|
Tab addressTab = tabSheet.add(translationHelper.getTranslation("addjob.tab.addresses"), formLayout);
|
||||||
|
addressTab.add(addressTabError);
|
||||||
|
Tab appointmentsTab = tabSheet.add(translationHelper.getTranslation("addjob.tab.appointments"),
|
||||||
|
createAppointmentsTab(availableAppUsers));
|
||||||
|
appointmentsTab.add(appointmentsTabError);
|
||||||
|
Tab cargoTab = tabSheet.add(translationHelper.getTranslation("addjob.tab.cargo"), createCargoTab());
|
||||||
|
cargoTab.add(cargoTabError);
|
||||||
|
|
||||||
// Red border frame filling the dialog
|
// Red border frame filling the dialog
|
||||||
Div redFrame = new Div();
|
Div redFrame = new Div();
|
||||||
redFrame.getStyle().set("border", "10px solid red");
|
redFrame.getStyle().set("border", "10px solid transparent");
|
||||||
redFrame.getStyle().set("border-radius", "0");
|
redFrame.getStyle().set("border-radius", "0");
|
||||||
redFrame.getStyle().set("box-sizing", "border-box");
|
redFrame.getStyle().set("box-sizing", "border-box");
|
||||||
|
redFrame.getStyle().set("display", "flex");
|
||||||
|
redFrame.getStyle().set("flex-direction", "column");
|
||||||
|
redFrame.getStyle().set("flex", "1");
|
||||||
redFrame.setSizeFull();
|
redFrame.setSizeFull();
|
||||||
|
|
||||||
|
// White card with rounded corners inside the red frame
|
||||||
|
Div whiteCard = new Div();
|
||||||
|
whiteCard.getStyle().set("background", "white");
|
||||||
|
whiteCard.getStyle().set("border-radius", "24px");
|
||||||
|
whiteCard.getStyle().set("flex", "1");
|
||||||
|
whiteCard.getStyle().set("overflow", "auto");
|
||||||
|
whiteCard.setSizeFull();
|
||||||
|
whiteCard.add(tabSheet);
|
||||||
|
|
||||||
|
redFrame.add(whiteCard);
|
||||||
add(redFrame);
|
add(redFrame);
|
||||||
redFrame.getStyle().set("flex", "1");
|
|
||||||
|
|
||||||
// Footer buttons
|
// Footer buttons
|
||||||
Button saveButton = new Button(translationHelper.getTranslation("dialog.confirm"), e -> {
|
Button saveButton = new Button(translationHelper.getTranslation("dialog.confirm"), e -> {
|
||||||
|
|||||||
Reference in New Issue
Block a user