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:
Binary file not shown.
@@ -0,0 +1,5 @@
|
||||
[part="tabs-container"] {
|
||||
background: white;
|
||||
border-radius: 24px 24px 0 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
@@ -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"));
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user