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.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"));
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user