Merge pull request #43 from FlowingCode/refactor-3.0

Integrate refactor-3.0 into master

Author: javier-godoy

README.md

@@ -5,17 +5,20 @@
 # App Layout Add-on
 
 Vaadin Flow Java integration of https://github.com/PolymerElements/app-layout
-This addon is particularly usefull if you want to create a new application with some initial support for responsiveness.
+This addon is particularly useful if you want to create a new application with some initial support for responsiveness.
 
 ## Features
 
-* Left side menu with hamburguer button, and now with support for sub-menus and icons
-* Toolbar icons
-* Paper-cards with icons
-
+* Left side menu with hamburguer button
+* Hierarchical menus with icons
+* Application header with logo, title and toolbar icons.
+* Menu separator
+* Support for left, middle and right click listeners.
+* Menu items accepts arbitrary content (such as checkboxes, or buttons)
+ 
 ## Online demo
 
-[Online demo here](http://addonsv10.flowingcode.com/applayout)
+[Online demo here](http://addonsv14.flowingcode.com/applayout)
 
 ## Download release
 
@@ -40,9 +43,9 @@ To see the demo, navigate to http://localhost:8080/
 - **Version 1.0.7** Added abstract RouterLayout and style mouse pointer as a hand.
 - **Version 1.0.8** Deprecate methods for removal in future releases.
 
-## Roadmap
-
-* Support for app-grid
+- **Version 2.1.0**
+ The `MenuItem` class in package `com.flowingcode.addons.applayout.menu` was replaced by a `MenuItem` component (in package `com.flowingcode.addons.applayout`), which renders an item in the lateral menu, and `ToolbarIconButton`, which is a clickable icon (without label) suitable for use in the AppToolbar part. Some custom CSS selectors that depended on the internal menu item structure may need to be rewritten.
+ Classes and methods deprecated in version 2.0 have been removed.
 
 ## Issue tracking
 
@@ -77,26 +80,21 @@ Adding menu items with sub-menus & icons:
 ```
 		app.setMenuItems(new MenuItem("Say hello", "star", () -> showContent("Hello!")),
 				new MenuItem("About", "cloud", () -> showContent("About")),
-				new MenuItem("SubMenu", "build", 
+				new MenuItem("SubMenu").setIcon("build").add( 
 						new MenuItem("Hello Again", "inbox",()->showContent("Hello Again!")),
 						new MenuItem("And Again",()->showContent("And Again!")),
-						new MenuItem("SubMenu",
+						new MenuItem("SubMenu").add(
 								new MenuItem("Hello Again",()->showContent("Hello Again!")),
-								new MenuItem("And Again",()->showContent("And Again!")))
-						));
+								new MenuItem("And Again",()->showContent("And Again!"))
+						)
+				)
+		);
 ```
 Toolbar icons:
 ```
-    	app.setToolbarIconButtons(new MenuItem("Delete", "delete", ()->Notification.show("Delete action")),
-    			new MenuItem("Search", "search", ()->Notification.show("Search action")),
-    			new MenuItem("Close", "close", ()->Notification.show("Close action"))
-    			);
-```
-Using paper-cards:
-```
-    	H3 label = new H3();
-    	label.setSizeFull();
-    	label.setText(content);
-    	PaperCard pc = new PaperCard(label,new MenuItem("Delete", "delete", ()->Notification.show("Delete action from card")));
-    	pc.setWidth("100%");
-```
+    	app.setToolbarIconButtons(
+				new ToolbarIconButton("Delete", "delete", ()->Notification.show("Delete action")),
+    			new ToolbarIconButton("Search", "search", ()->Notification.show("Search action")),
+    			new ToolbarIconButton("Close", "close", ()->Notification.show("Close action"))
+    	);
+```

pom.xml

@@ -4,12 +4,12 @@
 
     <groupId>com.flowingcode.addons.applayout</groupId>
     <artifactId>app-layout-addon</artifactId>
-    <version>2.0.3-SNAPSHOT</version>
+    <version>3.0.0-SNAPSHOT</version>
     <name>App Layout Addon</name>
     <description>Integration of app-layout for Vaadin Flow</description>
 
     <properties>
-        <vaadin.version>14.0.11</vaadin.version>
+        <vaadin.version>14.0.14</vaadin.version>
 
         <maven.compiler.source>1.8</maven.compiler.source>
         <maven.compiler.target>1.8</maven.compiler.target>
@@ -93,6 +93,7 @@
                 </exclusion>
             </exclusions>
         </dependency>
+        
         <dependency>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-simple</artifactId>

src/main/java/com/flowingcode/addons/applayout/AbstractFcAppRouterLayout.java

@@ -2,7 +2,7 @@
  * #%L
  * App Layout Addon
  * %%
- * Copyright (C) 2018 - 2019 Flowing Code
+ * Copyright (C) 2018 - 2020 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -40,11 +40,13 @@ public abstract class AbstractFcAppRouterLayout extends Div implements RouterLay
 	private AppLayout app;
 
 	public AbstractFcAppRouterLayout() {
-		setSizeFull();
+		getElement().getStyle().set("width", "100%");
+		getElement().getStyle().set("height", "100vh");
 		getElement().getStyle().set("display", "flex");
 		getElement().getStyle().set("flex-direction", "column");
 		app = new AppLayout("");
 		app.setHeight("32px");
+		app.getElement().getStyle().set("flex-shrink", "0");
 		app.addClassName("compact");
 		app.setFixed(true);
 		app.setSwipeOpen(false);

src/main/java/com/flowingcode/addons/applayout/AppDrawer.java

@@ -2,7 +2,7 @@
  * #%L
  * App Layout Addon
  * %%
- * Copyright (C) 2018 - 2019 Flowing Code
+ * Copyright (C) 2018 - 2020 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,11 +21,10 @@
 
 
 
-import java.util.ArrayList;
+import java.util.Collection;
 import java.util.Collections;
-import java.util.List;
+import java.util.Optional;
 
-import com.flowingcode.addons.applayout.menu.MenuItem;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
@@ -56,72 +55,73 @@ public AppDrawer(String title) {
     	this(new H4(title));
     	header.getElement().setAttribute("style", "text-align:center");
     }
-    
+   
     public AppDrawer(Component headerComponent) {
     	this.header = headerComponent;
     	getElement().setAttribute("id", "drawer");
     	setSwipeOpen(true);
-    	this.add(headerComponent);
-    	this.add(pm);
-    	
+    	    	
     	Registration[] r = new Registration[1];
     	r[0] = getElement().addEventListener("app-drawer-transitioned", ev->{
     		//need to adjust the height after the drawer has been rendered
     		pm.getElement().executeJs("this.style.height='calc(100% - '+($0.scrollHeight+16)+'px)'", header);
     		r[0].remove();
     	});
+    	    	
+    	removeAll();
     }
-    
+    	
     public void setSwipeOpen(boolean swipeOpen) {
     	getElement().setAttribute("swipe-open", swipeOpen);
 	}
 
-	public void setMenuItems(List<MenuItem> menuItems) {
-    	Component[] components = createComponents(menuItems);
-    	pm.removeAll();
-    	pm.add(components);
-    }
-
-	private Component[] createComponents(List<MenuItem> menuItems) {
-		List<Component> components = new ArrayList<>();
-    	for (MenuItem menuItem : menuItems) {
-    		if (!menuItem.getSubMenuItems().isEmpty()) {
-    			components.add(collectMenus(menuItem));
+    @Override
+    public void add(Component... components) {
+    	for (Component c : components) {
+    		if (c instanceof MenuItem) {
+    			pm.add(c);
     		} else {
-    			if (menuItem.getIcon()==null && menuItem.getImage()==null) {
-    				PaperItem pi = new PaperItem(menuItem.getLabel(),menuItem.getCommand(), this);
-    				pi.setEnabled(menuItem.isEnabled());
-    				components.add(pi);
-    				menuItem.setRefreshCallback(()->pi.setText(menuItem.getLabel()));
-    			} else {
-    				PaperIconItem pi;
-    				if (menuItem.getImage()!=null) {
-    					pi = new PaperIconItem(menuItem.getLabel(), menuItem.getImage(), menuItem.getCommand(), this);
-    				} else {
-    					pi = new PaperIconItem(menuItem.getLabel(), menuItem.getIcon(), menuItem.getCommand(), this);
-    				}
-    				
-    				components.add(pi);
-    				pi.setEnabled(menuItem.isEnabled());
-    				menuItem.setRefreshCallback(()->{
-    					pi.setTitle(menuItem.getLabel());
-    					pi.setIcon(menuItem.getIcon());
-    				});
-    			}
+    			HasComponents.super.add(components);
     		}
-		}
-		return components.toArray(new Component[] {});
-	}
+    	}
+    }  
+    
+    @Override
+    public void remove(Component... components) {
+    	for (Component c : components) {
+    		if (c instanceof MenuItem) {
+    			pm.removeAll();
+    		} else {
+    			HasComponents.super.remove(components);
+    		}
+    	}    	
+    }
+    
+    @Override
+    public void removeAll() {
+    	HasComponents.super.removeAll();
+    	this.add(header);
+    	this.add(pm);
+    }
+    
+	public void setMenuItems(Collection<? extends Component> menuItems) {
+		pm.removeAll();
+    	menuItems.stream().forEach(pm::add);
+    }
 
-	private CollapseButton collectMenus(MenuItem topMenuItem) {
-		List<MenuItem> menuItems = topMenuItem.getSubMenuItems();
-    	Component[] components = createComponents(menuItems);
-    	CollapseButton collapseButton = new CollapseButton(topMenuItem.getLabel(), topMenuItem.getIcon(), topMenuItem.getImage(), components);
-    	collapseButton.setEnabled(topMenuItem.isEnabled());
-    	return collapseButton;
+	/**Close the app-drawer.*/
+	public void close() {
+		getUI().ifPresent(ui->ui.getPage().executeJs("$0.close()", this));
 	}
 
-	void toggle() {
-		this.getElement().executeJs("this.toggle()");
+	static Optional<AppDrawer> findAppDrawer(Component component) {
+		while (component!=null) {
+			if (component instanceof AppDrawer) {
+				return Optional.of((AppDrawer)component);
+			} else {
+				component = component.getParent().orElse(null);
+			}
+		}
+		return Optional.empty();
 	}
 }

src/main/java/com/flowingcode/addons/applayout/AppHeader.java

@@ -2,7 +2,7 @@
  * #%L
  * App Layout Addon
  * %%
- * Copyright (C) 2018 - 2019 Flowing Code
+ * Copyright (C) 2018 - 2020 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,6 @@
 
 
 
-import com.flowingcode.addons.applayout.menu.MenuItem;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
@@ -65,14 +64,6 @@ public AppToolbar getAppToolbar() {
     	return appToolbar;
     }
 
-	public void setToolbarIconButtons(MenuItem[] menuItems) {
-		appToolbar.setToolbarIconButtons(menuItems);
-	}
-
-	public void setMenuIconVisible(boolean visible) {
-		appToolbar.setMenuIconVisible(visible);
-	}
-
 	/**Mantains the header fixed at the top so it never moves away.*/
 	public void setFixed(boolean fixed) {
 		this.getElement().setAttribute("fixed", fixed);

src/main/java/com/flowingcode/addons/applayout/AppLayout.java

@@ -2,7 +2,7 @@
  * #%L
  * App Layout Addon
  * %%
- * Copyright (C) 2018 - 2019 Flowing Code
+ * Copyright (C) 2018 - 2020 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,7 +23,6 @@
 import java.util.ArrayList;
 import java.util.Arrays;
 
-import com.flowingcode.addons.applayout.menu.MenuItem;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.HtmlImport;
@@ -54,8 +53,8 @@ public class AppLayout extends Div implements PageConfigurator {
 
 	static final String NPM_VERSION = "3.0.2";
 
-	AppDrawer drawer;
-	AppHeader header;
+	private AppDrawer drawer;
+	private AppHeader header;
 
 	public AppLayout(String title) {
 		drawer = new AppDrawer(title);
@@ -86,21 +85,34 @@ public void setHeight(String height) {
 		header.setHeight(height);
 	}
 
-	public void setMenuItems(MenuItem... menuitems) {
+	public void setMenuItems(Component... menuitems) {
 		drawer.setMenuItems(Arrays.asList(menuitems));
 	}
 
 	public void clearMenuItems() {
 		drawer.setMenuItems(new ArrayList<MenuItem>());
 	}
 
-	public void setToolbarIconButtons(MenuItem... menuItems) {
-		header.setToolbarIconButtons(menuItems);
+	public void setToolbarIconButtons(Component... components) {
+		header.getAppToolbar().clearToolbarIconButtons();
+		header.getAppToolbar().addToolbarIconButtons(components);
+	}
+	
+	public void addToolbarIconButtons(Component... components) {
+		header.getAppToolbar().addToolbarIconButtons(components);
+	}
+
+	public void addToolbarIconButtonAsFirst(Component component) {
+		header.getAppToolbar().addToolbarIconButtonAsFirst(component);
+	}
+
+	public void clearToolbarIconButtons() {
+		header.getAppToolbar().clearToolbarIconButtons();
 	}
 
 	public void setMenuVisible(boolean visible) {
 		drawer.setVisible(visible);
-		header.setMenuIconVisible(visible);
+		header.getAppToolbar().setMenuIconVisible(visible);
 	}
 
 	public boolean isMenuVisible() {
@@ -131,4 +143,5 @@ public void setReveals(boolean reveals) {
 	public void setSwipeOpen(boolean swipeOpen) {
 		drawer.setSwipeOpen(swipeOpen);
 	}
+	
 }