From e3cb30bcf23a185b763d4bd1e8cebc8f2ecf3e3b Mon Sep 17 00:00:00 2001 From: Korbel Daniel Date: Thu, 16 Jun 2016 14:55:06 +0200 Subject: [PATCH 1/2] Improved code example align for FAB element. --- .../components/fabs/FABView.ui.xml | 317 ++++++++++++------ 1 file changed, 206 insertions(+), 111 deletions(-) diff --git a/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml index 4c1a9d581..4881d4588 100644 --- a/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml +++ b/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml @@ -1,124 +1,219 @@ - + - + xmlns:m="urn:import:gwt.material.design.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui" + xmlns:demo="urn:import:gwt.material.design.demo.client.ui"> + + + + + + + + + + + + + + + - - - - - - - - - - - - - + +  <m:MaterialFAB> +
+  <m:MaterialAnchorButton type="FLOATING" + backgroundColor="blue" iconType="POLYMER" size="LARGE"/> +
+  <m:MaterialFABList> +
+   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" + backgroundColor="blue" iconType="POLYMER"/> +
+   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" + backgroundColor="green" iconType="POLYMER"/> +
+   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" + backgroundColor="red" iconType="POLYMER"/> +
+   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" + backgroundColor="orange" iconType="POLYMER"/> +
+   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" + backgroundColor="blue" iconType="POLYMER"/> +
+  </m:MaterialFABList> +
+ </m:MaterialFAB> +
+ - -  <m:MaterialFAB>
-  <m:MaterialAnchorButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
-  <m:MaterialFABList>
-   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
-   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/>
-   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/>
-   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/>
-   <m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
-  </m:MaterialFABList>
- </m:MaterialFAB>
- + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - + +  @UiField MaterialFAB fab; +
+
- -  @UiField MaterialFAB fab;

+ fab.openFAB(); +
+ fab.closeFAB(); +
+ - fab.openFAB();
- fab.closeFAB();
- + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + +  <m:MaterialFAB axis="HORIZONTAL"> +
+  <-- Content here --> +
+ </m:MaterialFAB> +
+ - -  <m:MaterialFAB axis="HORIZONTAL">
-  <-- Content here -->
- </m:MaterialFAB>
- + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + +  <m:MaterialFAB type="CLICK_ONLY"> +
+  <-- Content here --> +
+ </m:MaterialFAB> +
+ - -  <m:MaterialFAB type="CLICK_ONLY">
-  <-- Content here -->
- </m:MaterialFAB>
- - + + + + public class Fab extends Composite {
+ public Fab() {
+ MaterialFAB fab = new MaterialFAB();

+ + // initial/first/always visible button to be always displayed
+ MaterialButton btnInitial = new MaterialButton();
+ btnInitial.setIconType(IconType.ADD);
+ btnInitial.setType(ButtonType.FLOATING);
+ btnInitial.setSize(ButtonSize.LARGE);
+ btnInitial.setBackgroundColor("red");
+ fab.add(btnInitial);

+ + // List of FAB buttons that will be hiden.
+ // This FAB buttons will show up when User hover on initial button
+ MaterialFABList fabList = new MaterialFABList();

+ + // Item 1
+ MaterialButton btnItem1 = new MaterialButton();
+ btnItem1.setType(ButtonType.FLOATING);
+ btnItem1.setIconType(IconType.ACCESS_ALARMS);
+ btnItem1.setBackgroundColor("blue");
+ fabList.add(btnItem1);

+ + // Item 2
+ MaterialButton btnItem2 = new MaterialButton();
+ btnItem2.setType(ButtonType.FLOATING);
+ btnItem2.setIconType(IconType.AC_UNIT);
+ btnItem2.setBackgroundColor("purple");
+ fabList.add(btnItem2);
+ fab.add(fabList);
+ initWidget(fab);
+ }
+ }
+ + +
+ And then in Your view use just:
+ + yoursViewThatYouWouldLikeToAddFab.add(new Fab()); + + + From 064547777f8a15378e5917f0c75d9fb7d6c68c2a Mon Sep 17 00:00:00 2001 From: Korbel Daniel Date: Fri, 8 Jul 2016 11:00:45 +0200 Subject: [PATCH 2/2] Correct Licence Indent on FABView.ui.xml --- .../components/fabs/FABView.ui.xml | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml index 4881d4588..776ee52fc 100644 --- a/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml +++ b/src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml @@ -1,11 +1,22 @@ - + - + public class Fab extends Composite {
@@ -209,7 +222,7 @@ }
 -
+
And then in Your view use just:
yoursViewThatYouWouldLikeToAddFab.add(new Fab());