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.combobox.ComboBox;
import com.vaadin.flow.component.confirmdialog.ConfirmDialog; import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
import com.vaadin.flow.component.dialog.Dialog; 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.H3;
import com.vaadin.flow.component.html.Span; import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon; import com.vaadin.flow.component.icon.Icon;
@@ -211,12 +212,14 @@ public class DeliveryStationDialog extends Dialog {
setWidth("960px"); setWidth("960px");
setHeight("80vh"); setHeight("80vh");
// Remove white rounded card from dialog overlay
getElement().setAttribute("theme", "no-inner-card");
// Address form // Address form
VerticalLayout formLayout = new VerticalLayout(); VerticalLayout formLayout = new VerticalLayout();
formLayout.setPadding(true); formLayout.setPadding(true);
formLayout.setSpacing(true); formLayout.setSpacing(true);
formLayout.setWidthFull(); formLayout.setWidthFull();
formLayout.addClassName("dialog-form-panel");
// Company with autocomplete // Company with autocomplete
company = new ComboBox<>(translationHelper.getTranslation("profile.company")); company = new ComboBox<>(translationHelper.getTranslation("profile.company"));
@@ -325,7 +328,27 @@ public class DeliveryStationDialog extends Dialog {
createTasksTab(templates, templateSaveCallback)); createTasksTab(templates, templateSaveCallback));
tasksTab.add(tasksTabError); 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 // Footer buttons
Button saveButton = new Button(translationHelper.getTranslation("dialog.confirm"), e -> { Button saveButton = new Button(translationHelper.getTranslation("dialog.confirm"), e -> {
@@ -695,7 +718,6 @@ public class DeliveryStationDialog extends Dialog {
content.setPadding(false); content.setPadding(false);
content.setSpacing(true); content.setSpacing(true);
content.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.STRETCH); content.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.STRETCH);
content.addClassName("dialog-content-panel");
// Task title with template selection // Task title with template selection
H3 tasksTitle = new H3(translationHelper.getTranslation("addjob.tasks.title")); 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); var title = new H1(viewTitle);
title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT); title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT);
title.addClassName("view-toolbar-title"); title.addClassName("view-toolbar-title");
title.getStyle().set("white-space", "nowrap");
toggleAndTitle = new Div(drawerToggle, title); toggleAndTitle = new Div(drawerToggle, title);
} else { } else {
var title = new H1(viewTitle); var title = new H1(viewTitle);
title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT); title.addClassNames(FontSize.XLARGE, Margin.NONE, FontWeight.LIGHT);
title.addClassName("view-toolbar-title"); title.addClassName("view-toolbar-title");
title.getStyle().set("white-space", "nowrap");
toggleAndTitle = new Div(title); toggleAndTitle = new Div(title);
} }
toggleAndTitle.addClassNames(Display.FLEX, AlignItems.CENTER); toggleAndTitle.addClassNames(Display.FLEX, AlignItems.CENTER);

View File

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