Integrating CRUD with BAS

frontend/styles/components/crud-dialog-layout.css

@@ -0,0 +1,29 @@
+/* Hide the header to use a custom header */
+[part="header"] {
+  display: none;
+}
+
+/* Remove the border of the editor */
+:host(:not([theme~="no-border"]):not([editor-position=""])) [part="editor"]:not([hidden]) {
+  border: none;
+}
+
+/* Custom padding in our case */
+[part="scroller"] {
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+[part="footer"] {
+  padding: var(--lumo-space-s) var(--lumo-space-r-l);
+}
+
+[part="footer"] ::slotted(vaadin-button) {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+[part="footer"] ::slotted(vaadin-button[theme~="primary"]) {
+  margin-left: var(--lumo-space-m);
+}

frontend/styles/components/crud-dialog-overlay.css

@@ -0,0 +1,10 @@
+/* Needed to have a fixed header and content scrolling */
+:host([theme~="layout"]) [part="overlay"],
+:host([theme~="layout"]) [part="content"] {
+  max-height: 100%;
+}
+
+#editor {
+  height: 100%;
+  overflow: hidden;
+}

frontend/styles/components/crud.css

@@ -0,0 +1,16 @@
+/* Border on the main element */
+:host {
+  border: 1px solid var(--lumo-contrast-20pct);
+  box-sizing: border-box;
+}
+
+/* Remove border from individual elements */
+::slotted(vaadin-grid),
+[part="toolbar"] {
+  border: none;
+}
+
+#editor {
+  height: 100%;
+  overflow: hidden;
+}

frontend/styles/components/details-drawer.css

@@ -16,6 +16,11 @@
   flex-shrink: 0;
 }
 
+.details-drawer h2 {
+  font-size: var(--lumo-font-size-l);
+  margin: 0;
+}
+
 .details-drawer__header vaadin-tabs {
   box-shadow: none;
 }

frontend/styles/components/navi-item.css

@@ -31,7 +31,7 @@
 
 /* Hover */
 .navi-item:hover {
-  background-color: var(--lumo-contrast-10pct);
+  background-color: var(--lumo-contrast-5pct);
 }
 
 .navi-item__link:hover {
@@ -40,7 +40,7 @@
 
 /* Active */
 .navi-item:active {
-  background-color: var(--lumo-contrast-20pct);
+  background-color: var(--lumo-contrast-10pct);
 }
 
 /* Link */
@@ -56,7 +56,7 @@
 
 /* Highlight */
 .navi-item__link[highlight] {
-  background-color: var(--lumo-primary-color-10pct);
+  color: var(--lumo-primary-text-color);
 }
 
 .navi-item__link:not([highlight]) {

frontend/styles/components/navi-menu.css

@@ -1,5 +1,4 @@
 .navi-menu {
-  box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
   flex: 1;
   overflow: auto;
   -webkit-overflow-scrolling: touch;

frontend/styles/components/view-frame.css

@@ -23,6 +23,18 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.view-frame__content vaadin-grid,
+.view-frame__content vaadin-crud {
+  border-bottom: none;
+}
+
+@media (max-width: 479px) {
+  .view-frame__content vaadin-grid,
+  .view-frame__content vaadin-crud {
+    border: none;
+  }
+}
+
 .view-frame__footer {
   z-index: 2;
 }

src/main/java/com/vaadin/starter/business/backend/BankAccount.java

@@ -48,6 +48,6 @@ public LocalDate getUpdated() {
 	}
 
 	public String getLogoPath() {
-	    return path;
+		return path;
 	}
 }

src/main/java/com/vaadin/starter/business/backend/DummyData.java

@@ -206,7 +206,7 @@ private DummyData() {
 			BANK_ACCOUNTS.put(i + startingPoint,
 					new BankAccount(i + startingPoint, getBank(), getIBAN(),
 							getCompany(), getRandomDouble(5000, 100000),
-							getDate(),DummyData.getImageSource()));
+							getDate(), DummyData.getImageSource()));
 		}
 
 		/* === PAYMENTS ==== */

src/main/java/com/vaadin/starter/business/ui/MainLayout.java

@@ -34,7 +34,9 @@
 import org.slf4j.LoggerFactory;
 
 @CssImport(value = "./styles/components/charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
-@CssImport(value = "./styles/components/floating-action-button.css", themeFor = "vaadin-button")
+@CssImport(value = "./styles/components/crud.css", themeFor = "vaadin-crud")
+@CssImport(value = "./styles/components/crud-dialog-layout.css", themeFor = "vaadin-dialog-layout")
+@CssImport(value = "./styles/components/crud-dialog-overlay.css", themeFor = "vaadin-dialog-overlay")
 @CssImport(value = "./styles/components/grid.css", themeFor = "vaadin-grid")
 @CssImport("./styles/lumo/border-radius.css")
 @CssImport("./styles/lumo/icon-size.css")

src/main/java/com/vaadin/starter/business/ui/components/FlexBoxLayout.java

@@ -4,6 +4,7 @@
 import com.vaadin.flow.component.orderedlayout.FlexLayout;
 import com.vaadin.flow.theme.lumo.Lumo;
 import com.vaadin.starter.business.ui.layout.size.Size;
+import com.vaadin.starter.business.ui.util.UIUtils;
 import com.vaadin.starter.business.ui.util.css.*;
 import java.util.ArrayList;
 
@@ -81,19 +82,7 @@ public void setFlexShrink(String value, Component... components) {
 	}
 
 	public void setMargin(Size... sizes) {
-		for (Size size : sizes) {
-			for (String attribute : size.getMarginAttributes()) {
-				getStyle().set(attribute, size.getVariable());
-			}
-		}
-	}
-
-	public void removeMargin() {
-		getStyle().remove("margin");
-		getStyle().remove("margin-bottom");
-		getStyle().remove("margin-left");
-		getStyle().remove("margin-right");
-		getStyle().remove("margin-top");
+		UIUtils.setMargin(this, sizes);
 	}
 
 	public void setMaxWidth(String value) {
@@ -113,20 +102,7 @@ public void removeOverflow() {
 	}
 
 	public void setPadding(Size... sizes) {
-		removePadding();
-		for (Size size : sizes) {
-			for (String attribute : size.getPaddingAttributes()) {
-				getStyle().set(attribute, size.getVariable());
-			}
-		}
-	}
-
-	public void removePadding() {
-		getStyle().remove("padding");
-		getStyle().remove("padding-bottom");
-		getStyle().remove("padding-left");
-		getStyle().remove("padding-right");
-		getStyle().remove("padding-top");
+		UIUtils.setPadding(this, sizes);
 	}
 
 	public void setPosition(Position position) {

src/main/java/com/vaadin/starter/business/ui/components/detailsdrawer/DetailsDrawerHeader.java

@@ -3,36 +3,44 @@
 import com.vaadin.flow.component.ClickEvent;
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.component.html.Label;
+import com.vaadin.flow.component.html.H2;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.tabs.Tabs;
 import com.vaadin.starter.business.ui.components.FlexBoxLayout;
 import com.vaadin.starter.business.ui.layout.size.Horizontal;
-import com.vaadin.starter.business.ui.layout.size.Right;
+import com.vaadin.starter.business.ui.layout.size.Left;
 import com.vaadin.starter.business.ui.layout.size.Vertical;
+import com.vaadin.starter.business.ui.util.*;
+import com.vaadin.starter.business.ui.util.css.FlexDirection;
 import com.vaadin.starter.business.ui.util.BoxShadowBorders;
 import com.vaadin.starter.business.ui.util.UIUtils;
 
 public class DetailsDrawerHeader extends FlexBoxLayout {
 
 	private Button close;
-	private Label title;
+	private H2 title;
 
 	public DetailsDrawerHeader(String title) {
-		addClassName(BoxShadowBorders.BOTTOM);
 		setFlexDirection(FlexDirection.COLUMN);
+		setFlexShrink("0", this);
+		UIUtils.setBoxShadow(true, 0, -1, LumoStyles.Color.Contrast._10, this);
 		setWidthFull();
 
 		this.close = UIUtils.createTertiaryInlineButton(VaadinIcon.CLOSE);
 		UIUtils.setLineHeight("1", this.close);
 
-		this.title = UIUtils.createH4Label(title);
+		this.title = new H2(title);
+		// Theming needed since Lumo's typography styles aren't applied properly in CRUD yet.
+		UIUtils.setFontSize(FontSize.L, this.title);
+		UIUtils.setFontWeight(FontWeight._600, this.title);
+		UIUtils.setLineHeight(LineHeight.XS, this.title);
+		UIUtils.setMargin(this.title, Vertical.AUTO);
+		UIUtils.setPadding(this.title, Left.L);
 
 		FlexBoxLayout wrapper = new FlexBoxLayout(this.close, this.title);
 		wrapper.setAlignItems(FlexComponent.Alignment.CENTER);
 		wrapper.setPadding(Horizontal.RESPONSIVE_L, Vertical.M);
-		wrapper.setSpacing(Right.L);
 		add(wrapper);
 	}
 

src/main/java/com/vaadin/starter/business/ui/components/navigation/bar/AppBar.java

@@ -7,7 +7,6 @@
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.contextmenu.ContextMenu;
 import com.vaadin.flow.component.dependency.CssImport;
-import com.vaadin.flow.component.html.Anchor;
 import com.vaadin.flow.component.html.H1;
 import com.vaadin.flow.component.html.Header;
 import com.vaadin.flow.component.html.Image;
@@ -18,7 +17,6 @@
 import com.vaadin.flow.component.tabs.Tab;
 import com.vaadin.flow.component.tabs.Tabs;
 import com.vaadin.flow.component.textfield.TextField;
-import com.vaadin.flow.router.RouterLink;
 import com.vaadin.flow.shared.Registration;
 import com.vaadin.starter.business.ui.MainLayout;
 import com.vaadin.starter.business.ui.components.FlexBoxLayout;
@@ -27,7 +25,6 @@
 import com.vaadin.starter.business.ui.util.LumoStyles;
 import com.vaadin.starter.business.ui.util.UIUtils;
 import com.vaadin.starter.business.ui.views.Home;
-import com.vaadin.starter.business.ui.views.Payments;
 
 import java.util.ArrayList;
 import java.util.Optional;

src/main/java/com/vaadin/starter/business/ui/components/navigation/drawer/NaviMenu.java

@@ -15,6 +15,7 @@ public class NaviMenu extends Nav {
 
 	private String CLASS_NAME = "navi-menu";
 	private UnorderedList list;
+	private NaviItem active;
 
 	public NaviMenu() {
 		setClassName(CLASS_NAME);
@@ -72,5 +73,4 @@ public List<NaviItem> getNaviItems() {
 				.collect(Collectors.toList());
 		return items;
 	}
-
 }

src/main/java/com/vaadin/starter/business/ui/layout/size/Right.java

@@ -4,14 +4,15 @@ public enum Right implements Size {
 
 	AUTO("auto", null),
 
-	XS("var(--lumo-space-xs)", "spacing-r-xs"), S("var(--lumo-space-s)",
-			"spacing-r-s"), M("var(--lumo-space-m)", "spacing-r-m"), L(
-			"var(--lumo-space-l)",
-			"spacing-r-l"), XL("var(--lumo-space-xl)", "spacing-r-xl"),
-
-	RESPONSIVE_M("var(--lumo-space-r-m)", null), RESPONSIVE_L(
-			"var(--lumo-space-r-l)",
-			null), RESPONSIVE_X("var(--lumo-space-r-x)", null);
+	XS("var(--lumo-space-xs)", "spacing-r-xs"),
+	S("var(--lumo-space-s)", "spacing-r-s"),
+	M("var(--lumo-space-m)", "spacing-r-m"),
+	L("var(--lumo-space-l)", "spacing-r-l"),
+	XL("var(--lumo-space-xl)", "spacing-r-xl"),
+
+	RESPONSIVE_M("var(--lumo-space-r-m)", null),
+	RESPONSIVE_L("var(--lumo-space-r-l)", null),
+	RESPONSIVE_X("var(--lumo-space-r-x)", null);
 
 	private String variable;
 	private String spacingClassName;