feat: UI improvements - toolbar styling, dialog layouts, and new components

- Update ViewToolbar button styling

- Redesign DeliveryStationDialog with tabbed interface

- Adjust MainLayout drawer styling

- Add new component styles for Vaadin components
This commit is contained in:
2026-03-20 14:54:22 +01:00
parent d32b79d219
commit e532780e2a
5 changed files with 33 additions and 3 deletions

Binary file not shown.

View File

@@ -0,0 +1,5 @@
[part="tabs-container"] {
background: white;
border-radius: 24px 24px 0 0;
border-bottom: 1px solid #e0e0e0;
}

View File

@@ -6,6 +6,7 @@ import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
@@ -211,12 +212,14 @@ public class DeliveryStationDialog extends Dialog {
setWidth("960px");
setHeight("80vh");
// Remove white rounded card from dialog overlay
getElement().setAttribute("theme", "no-inner-card");
// Address form
VerticalLayout formLayout = new VerticalLayout();
formLayout.setPadding(true);
formLayout.setSpacing(true);
formLayout.setWidthFull();
formLayout.addClassName("dialog-form-panel");
// Company with autocomplete
company = new ComboBox<>(translationHelper.getTranslation("profile.company"));
@@ -325,7 +328,27 @@ public class DeliveryStationDialog extends Dialog {
createTasksTab(templates, templateSaveCallback));
tasksTab.add(tasksTabError);
add(tabSheet);
// Transparent border frame filling the dialog
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.getStyle().set("display", "flex");
frame.getStyle().set("flex-direction", "column");
frame.getStyle().set("flex", "1");
frame.setSizeFull();
// White card with rounded corners inside the 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);
frame.add(whiteCard);
add(frame);
// Footer buttons
Button saveButton = new Button(translationHelper.getTranslation("dialog.confirm"), e -> {
@@ -695,7 +718,6 @@ public class DeliveryStationDialog extends Dialog {
content.setPadding(false);
content.setSpacing(true);
content.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.STRETCH);
content.addClassName("dialog-content-panel");
// Task title with template selection
H3 tasksTitle = new H3(translationHelper.getTranslation("addjob.tasks.title"));

View File

@@ -28,11 +28,13 @@ public final class ViewToolbar extends Composite<Header> {
var title = new H1(viewTitle);
title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT);
title.addClassName("view-toolbar-title");
title.getStyle().set("white-space", "nowrap");
toggleAndTitle = new Div(drawerToggle, title);
} else {
var title = new H1(viewTitle);
title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT);
title.addClassName("view-toolbar-title");
title.getStyle().set("white-space", "nowrap");
toggleAndTitle = new Div(title);
}
toggleAndTitle.addClassNames(Display.FLEX, AlignItems.CENTER);

View File

@@ -198,6 +198,7 @@ public final class MainLayout extends AppLayout {
// Label
Span label = new Span(item.label());
label.getStyle().set("font-size", "var(--lumo-font-size-s)");
label.getStyle().set("white-space", "nowrap");
label.addClassName("app-nav-label");
row.add(label);
row.setFlexGrow(1, label);