Merge pull request #87 from FlowingCode/merge-4.x

Merge changes from 4.x

Author: mlopezFC

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

@@ -26,6 +26,7 @@
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.router.RouterLayout;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
@@ -38,16 +39,20 @@
 @SuppressWarnings("serial")
 @Tag("fc-applayout")
 @JsModule("@flowingcode/fc-applayout/fc-applayout.js")
-@NpmPackage(value = "@flowingcode/fc-applayout", version = "0.9.3")
+@NpmPackage(value = "@flowingcode/fc-applayout", version = "0.9.6")
 @CssImport(value = "./styles/applayout-styles.css", themeFor = "fc-applayout")
-public class AppLayout extends Div {
+public class AppLayout extends Div implements RouterLayout {
 
   private static final String PROFILE_SLOT_NAME = "profile";
   private static final String APP_LAYOUT_TITLE_SLOT_NAME = "title";
   private static final String TITLE_ATTRIBUTE_NAME = "title";
   private final List<Component> menuItems = new ArrayList<>();
   private final List<Component> toolbarComponents = new ArrayList<>();
 
+  public AppLayout() {
+    this(null,"",null);
+  }
+
   public AppLayout(String title) {
     this(null, title, null);
   }
@@ -70,6 +75,7 @@ private AppLayout(Component menuHeader, String aTitle, Image aLogo) {
     Div title = new Div();
     title.setText(aTitle);
     addToTitleSection(title);
+    setDrawerRightAlignment(false);
   }
 
   public void addToTitleSection(Component component) {
@@ -88,18 +94,20 @@ public void setMenuHeader(Component menuHeader) {
   }
 
   public void setMenuItems(Component... someMenuitems) {
-    this.menuItems.addAll(Arrays.asList(someMenuitems));
-    this.menuItems.forEach(item -> item.getElement().setAttribute("slot", "menu"));
+    menuItems.addAll(Arrays.asList(someMenuitems));
+    menuItems.forEach(item -> item.getElement().setAttribute("slot", "menu"));
     this.add(someMenuitems);
   }
 
   public void clearMenuItems() {
-    this.getChildren()
+    getChildren()
         .forEach(
             item -> {
-              if (this.menuItems.contains(item)) this.remove(item);
+              if (menuItems.contains(item)) {
+                remove(item);
+              }
             });
-    this.menuItems.clear();
+    menuItems.clear();
   }
 
   public void setToolbarIconButtons(Component... components) {
@@ -126,30 +134,72 @@ public void clearToolbarIconButtons() {
   }
 
   public void setMenuVisible(boolean visible) {
-    this.getElement().setProperty("drawerVisible", visible);
+    getElement().setProperty("drawerVisible", visible);
   }
 
   public boolean isMenuVisible() {
-    return this.getElement().getProperty("drawerVisible", true);
+    return getElement().getProperty("drawerVisible", true);
   }
 
-  /** Set the toolbar title */
+  /**
+   * Sets the toolbar title
+   * @param caption
+   */
   public void setCaption(String caption) {
-    this.getElement().setAttribute(TITLE_ATTRIBUTE_NAME, caption);
+    getElement().setAttribute(TITLE_ATTRIBUTE_NAME, caption);
   }
 
-  /** Mantains the header fixed at the top so it never moves away. */
+  /**
+   * Sets the fixed attribute so it mantains the header fixed at the top
+   * so it never moves away.
+   * @param fixed
+   */
   public void setFixed(boolean fixed) {
-    this.getElement().setAttribute("fixed", fixed);
+    getElement().setAttribute("fixed", fixed);
   }
 
-  /** Slides back the header when scrolling back up. */
+  /**
+   * Sets the reveals attribute so it slides back the header when scrolling
+   * back up.
+   * @param reveals
+   */
   public void setReveals(boolean reveals) {
-    this.getElement().setAttribute("reveals", reveals);
+    getElement().setAttribute("reveals", reveals);
   }
 
-  /** Create an area at the edge of the screen to swipe open the app-drawer */
+  /**
+   * Sets the swipeOpen attribute so it creates an area at the edge of the
+   * screen to swipe open the app-drawer
+   * @param swipeOpen
+   */
   public void setSwipeOpen(boolean swipeOpen) {
-    this.getElement().setAttribute("swipeOpen", swipeOpen);
+    getElement().setAttribute("swipeOpen", swipeOpen);
+  }
+
+  /**
+   * Sets the persistent attribute so it will make the drawer to be always
+   * opened in a non-modal way
+   * @param drawerPersistent
+   */
+  public void setDrawerPersistent(boolean drawerPersistent) {
+    getElement().setAttribute("drawerPersistent", drawerPersistent);
+}
+
+  /**
+   * Sets the drawerBelowHeader attribute so the drawer will be show below
+   * the header of the applayout
+   * @param drawerBelowHeader
+   */
+  public void setDrawerBelowHeader(boolean drawerBelowHeader) {
+    getElement().setAttribute("drawerBelowHeader", drawerBelowHeader);
+  }
+
+    /**
+   * Sets the drawerBelowHeader attribute so the drawer will be show below
+   * the header of the applayout
+   * @param drawerBelowHeader
+   */
+  public void setDrawerRightAlignment(boolean drawerRightAlignment) {
+    getElement().setAttribute("drawerAlign", drawerRightAlignment?"right":"left");
   }
 }

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

@@ -39,7 +39,7 @@
 @NpmPackage(value = "@polymer/paper-item", version = "3.0.1")
 @Tag("fc-menuitem")
 @JsModule("@flowingcode/fc-menuitem/fc-menuitem.js")
-@NpmPackage(value = "@flowingcode/fc-menuitem", version = "~0.9.6")
+@NpmPackage(value = "@flowingcode/fc-menuitem", version = "~0.9.8")
 public class MenuItem extends SlottedMenuItem
     implements HasOrderedComponents, HasMenuItemCommands<MenuItem>, HasMenuItemIcon<MenuItem> {
 

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

@@ -19,17 +19,15 @@
  */
 package com.flowingcode.addons.applayout;
 
-import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H4;
 import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.component.html.Span;
 
-public class AbstractLayoutDemo extends AbstractFcAppRouterLayout {
+public class AbstractLayoutDemo extends AppLayout {
 
-  @Override
-  protected void configure(AppLayout app) {
-    app.setMenuItems(new MenuItem("Item 1"), new MenuItem("Item 2"));
+  public AbstractLayoutDemo() {
+    setMenuItems(new MenuItem("Item 1"), new MenuItem("Item 2"));
 
     // menu header
     Div container = new Div();
@@ -39,19 +37,15 @@ protected void configure(AppLayout app) {
     img.getStyle().set("margin-top", "20px");
     H4 h4 = new H4("User");
     container.add(img, h4);
-    app.setMenuHeader(container);
+    setMenuHeader(container);
 
     // logo
     Image imglogo = new Image("frontend/images/applogo.png", "applogo");
     imglogo.setWidth("25px");
-    app.addToTitleSection(imglogo);
+    addToTitleSection(imglogo);
 
     // title
-    app.addToTitleSection(new Div(new Span("Test Application")));
+    addToTitleSection(new Div(new Span("Test Application")));
   }
 
-  @Override
-  public void showRouterLayoutContent(AppLayout app, HasElement content) {
-    super.showRouterLayoutContent(app, content);
-  }
 }

src/test/java/com/flowingcode/addons/applayout/AbstractLayoutDemo.java

@@ -69,7 +69,8 @@ public ApplayoutDemoView() {
     app.setMenuItems(createMenuItems());
 
     app.setToolbarIconButtons(miSettings);
-    this.add(app, container);
+    app.add(container);
+    this.add(app);
 
     settings.setSwipeOpen(true);
     settings.setMenuVisible(true);
@@ -85,7 +86,10 @@ private void applySettings() {
     app.setSwipeOpen(settings.isSwipeOpen());
     app.setFixed(settings.isFixed());
     app.setReveals(settings.isReveals());
-
+    app.setDrawerPersistent(settings.isDrawerPersistent());
+    app.setDrawerBelowHeader(settings.isDrawerBelowHeader());
+    app.setDrawerRightAlignment(settings.isDrawerRightAlignment());
+    
     if (settings.isCompact()) {
       app.addClassName("compact");
     } else {
@@ -104,7 +108,10 @@ private void openSettings() {
     Checkbox cbFixed = new Checkbox("Fixed");
     Checkbox cbReveals = new Checkbox("Reveals");
     Checkbox cbCompact = new Checkbox("Compact");
-
+    Checkbox cbPersistent = new Checkbox("Drawer Persistent");
+    Checkbox cbBelowHeader = new Checkbox("Drawer Below Header");
+    Checkbox cbRightAlignment = new Checkbox("Drawer Aligned to Right");
+    
     cbMenuVisible.getElement().setAttribute("title", "Toggle visibility of the hamburguer icon.");
     cbSwipeOpen
         .getElement()
@@ -121,17 +128,29 @@ private void openSettings() {
     cbCompact
         .getElement()
         .setAttribute("title", "When enabled, the height of the header is set to 32px.");
+    cbPersistent
+        .getElement()
+        .setAttribute("title", "When enabled, the drawer will be opened in a non-modal way");
+    cbBelowHeader
+        .getElement()
+        .setAttribute("title", "When enabled, the drawer will be placed below the header");
+    cbRightAlignment
+        .getElement()
+        .setAttribute("title", "When enabled, the drawer will be right aligned");
 
     Binder<DemoSettings> binder = new Binder<>();
     binder.forField(cbMenuVisible).bind(DemoSettings::isMenuVisible, DemoSettings::setMenuVisible);
     binder.forField(cbSwipeOpen).bind(DemoSettings::isSwipeOpen, DemoSettings::setSwipeOpen);
     binder.forField(cbFixed).bind(DemoSettings::isFixed, DemoSettings::setFixed);
     binder.forField(cbReveals).bind(DemoSettings::isReveals, DemoSettings::setReveals);
     binder.forField(cbCompact).bind(DemoSettings::isCompact, DemoSettings::setCompact);
+    binder.forField(cbPersistent).bind(DemoSettings::isDrawerPersistent, DemoSettings::setDrawerPersistent);
+    binder.forField(cbBelowHeader).bind(DemoSettings::isDrawerBelowHeader, DemoSettings::setDrawerBelowHeader);
+    binder.forField(cbRightAlignment).bind(DemoSettings::isDrawerRightAlignment, DemoSettings::setDrawerRightAlignment);
     binder.setBean(this.settings);
 
     VerticalLayout content =
-        new VerticalLayout(cbMenuVisible, cbSwipeOpen, cbFixed, cbReveals, cbCompact);
+        new VerticalLayout(cbMenuVisible, cbSwipeOpen, cbFixed, cbReveals, cbCompact, cbPersistent, cbBelowHeader, cbRightAlignment);
     content.setSpacing(false);
 
     HorizontalLayout buttons = new HorizontalLayout();

src/test/java/com/flowingcode/addons/applayout/ApplayoutDemoView.java

@@ -33,6 +33,12 @@ public class DemoSettings {
 
   private boolean compact;
 
+  private boolean drawerPersistent;
+
+  private boolean drawerBelowHeader;
+
+  private boolean drawerRightAlignment;
+
   public boolean isEnabled() {
     return enabled;
   }
@@ -80,4 +86,29 @@ public boolean isCompact() {
   public void setCompact(boolean compact) {
     this.compact = compact;
   }
+
+  public boolean isDrawerPersistent() {
+    return drawerPersistent;
+  }
+
+  public void setDrawerPersistent(boolean drawerPersistent) {
+    this.drawerPersistent = drawerPersistent;
+  }
+
+  public boolean isDrawerBelowHeader() {
+    return drawerBelowHeader;
+  }
+
+  public void setDrawerBelowHeader(boolean drawerBelowHeader) {
+    this.drawerBelowHeader = drawerBelowHeader;
+  }
+
+  public boolean isDrawerRightAlignment() {
+    return drawerRightAlignment;
+  }
+
+  public void setDrawerRightAlignment(boolean drawerRightAlignment) {
+    this.drawerRightAlignment = drawerRightAlignment;
+  }
+
 }