Merge pull request #9 from GwtMaterialDesign/release_2.0

Release 2.0-rc5

.travis.yml

@@ -7,17 +7,17 @@ cache:
   - $HOME/.m2
 before_install:
 # install the gwt-material library before we build the demo
-- git clone https://github.com/GwtMaterialDesign/gwt-material.git
+- git clone -b release_2.0 https://github.com/GwtMaterialDesign/gwt-material.git
 - cd gwt-material
 - mvn install -DskipTests=true -DdryRun=true
 - cd ..
 # install the gwt-material-themes library
-- git clone https://github.com/GwtMaterialDesign/gwt-material-themes.git
+- git clone -b release_2.0 https://github.com/GwtMaterialDesign/gwt-material-themes.git
 - cd gwt-material-themes
 - mvn install -DskipTests=true -DdryRun=true
 - cd ..
 # install the gwt-material-addins library
-- git clone https://github.com/GwtMaterialDesign/gwt-material-addins.git
+- git clone -b release_2.0 https://github.com/GwtMaterialDesign/gwt-material-addins.git
 - cd gwt-material-addins
 - mvn install -DskipTests=true -DdryRun=true
 - cd ..

README.md

@@ -1,5 +1,8 @@
 <img src="http://i.imgur.com/vCZg1GH.png" />
-##gwt-material-patterns [![Build Status](https://travis-ci.org/GwtMaterialDesign/gwt-material-patterns.svg?branch=master)](https://travis-ci.org/GwtMaterialDesign/gwt-material-patterns)
+
+## gwt-material-patterns
+[![Build Status](https://travis-ci.org/GwtMaterialDesign/gwt-material-patterns.svg?branch=master)](https://travis-ci.org/GwtMaterialDesign/gwt-material-patterns)
+
 <p>A pattern layouts to build gwt-material applications rapidly</p>
 
 ## Maven Import
@@ -8,7 +11,7 @@
 <dependency>
     <groupId>com.github.gwtmaterialdesign</groupId>
     <artifactId>gwt-material-patterns</artifactId>
-    <version>2.0-rc4</version>
+    <version>2.0-rc5</version>
 </dependency>
 
 ```
@@ -24,8 +27,10 @@ This pattern is suitable for Social  Network apps to provide a collection of pos
   <li> Chips as tags inside the post card  </li>
   <li> Collection Items for User comments </li>
 </ul>
+
 #### Desktop / Tablet View
 <img src="http://i.imgur.com/3S3Zetw.gif" />
+
 #### Mobile View
 <img src="http://i.imgur.com/pfarQGt.gif" />
 
@@ -41,8 +46,10 @@ This pattern is suitable for Contact / User List apps to provide a collapsible l
   <li> Display all contacts into collapsible items </li>
   <li> Overlay component to display more info about the contact </li>
 </ul>
+
 #### Desktop / Tablet View
 <img src="http://i.imgur.com/TCQ4zot.gif" />
+
 #### Mobile View
 <img src="http://i.imgur.com/SxhMv92.gif" />
 
@@ -60,8 +67,10 @@ This pattern is suitable for Document Management Systems.
   <li> Chips as file tags </li>
   <li> Circular user image for those who can view the file </li>
 </ul>
+
 #### Desktop / Tablet View
 <img src="http://i.imgur.com/LkQo3Nb.gif" />
+
 #### Mobile View
 <img src="http://i.imgur.com/0MGLaYo.gif" />
 
@@ -76,8 +85,10 @@ This pattern is suitable for Email Systems.
   <li> Added Horizontal Card child into Collapsible header </li>
   <li> Added a hoverable icon panel on each item </li>
 </ul>
+
 #### Desktop / Tablet View
 <img src="http://i.imgur.com/AfK6QLK.gif" />
+
 #### Mobile View
 <img src="http://i.imgur.com/v1F2Ooy.gif" />
 

pom.xml

@@ -4,22 +4,22 @@
     <parent>
         <artifactId>gwt-material-parent</artifactId>
         <groupId>com.github.gwtmaterialdesign</groupId>
-        <version>2.0-rc4</version>
+        <version>2.0-rc5</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 
     <artifactId>gwt-material-patterns</artifactId>
-    <version>2.0-rc4</version>
+    <version>2.0-rc5</version>
 
     <packaging>war</packaging>
-    <name>GWTP Patterns</name>
+    <name>GMD Patterns</name>
 
     <properties>
         <!-- client -->
         <gwt.version>2.8.0</gwt.version>
         <gwtp.version>1.5.3</gwtp.version>
         <gin.version>2.1.2</gin.version>
-        <gwt-material.version>2.0-rc4</gwt-material.version>
+        <gwt-material.version>2.0-rc5</gwt-material.version>
         <gwt.style>OBF</gwt.style>
 
         <!-- maven -->

src/main/java/com/github/gwtmaterialdesign/GwtMaterialPatterns.gwt.xml

@@ -33,7 +33,7 @@
     <source path='shared'/>
 
     <!--GWT Material-->
-    <inherits name="gwt.material.design.GwtMaterialBasicWithJQueryDebug"/>
+    <inherits name="gwt.material.design.GwtMaterialWithJQueryDebug"/>
     <inherits name="gwt.material.design.themes.ThemeBlue"/>
     <inherits name="gwt.material.design.addins.GwtMaterialAddinsDebug"/>
 

src/main/java/com/github/gwtmaterialdesign/client/application/ApplicationModule.java

@@ -25,6 +25,25 @@
 import com.github.gwtmaterialdesign.client.application.googledrive.GoogleDriveModule;
 import com.github.gwtmaterialdesign.client.application.googleinbox.GoogleInboxModule;
 import com.github.gwtmaterialdesign.client.application.googleplus.GooglePlusModule;
+import com.github.gwtmaterialdesign.client.application.navbardefault.DefaultNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbarextend.ExtendNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbarfixed.FixedNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbarshrink.ShrinkNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbartabs.TabNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbartabspush.TabPushNavBarModule;
+import com.github.gwtmaterialdesign.client.application.navbartall.TallNavBarModule;
+import com.github.gwtmaterialdesign.client.application.sidenavcard.CardSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavcollapsible.CollapsibleSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavcontent.SideNavContentModule;
+import com.github.gwtmaterialdesign.client.application.sidenavdrawer.DrawerSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavdrawerheader.DrawerHeaderSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavedge.EdgeSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavfixed.FixedSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavmini.MiniSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavminiexpand.MiniExpandSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavmultiple.MultipleSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavpush.PushSideNavModule;
+import com.github.gwtmaterialdesign.client.application.sidenavpushheader.PushHeaderSideNavModule;
 import com.gwtplatform.mvp.client.gin.AbstractPresenterModule;
 
 public class ApplicationModule extends AbstractPresenterModule {
@@ -34,6 +53,25 @@ protected void configure() {
         install(new GoogleContactsModule());
         install(new GooglePlusModule());
         install(new GoogleInboxModule());
+        install(new FixedSideNavModule());
+        install(new DrawerSideNavModule());
+        install(new DrawerHeaderSideNavModule());
+        install(new PushSideNavModule());
+        install(new PushHeaderSideNavModule());
+        install(new MiniSideNavModule());
+        install(new MiniExpandSideNavModule());
+        install(new CardSideNavModule());
+        install(new EdgeSideNavModule());
+        install(new MultipleSideNavModule());
+        install(new CollapsibleSideNavModule());
+        install(new SideNavContentModule());
+        install(new ShrinkNavBarModule());
+        install(new DefaultNavBarModule());
+        install(new FixedNavBarModule());
+        install(new TallNavBarModule());
+        install(new TabNavBarModule());
+        install(new ExtendNavBarModule());
+        install(new TabPushNavBarModule());
 
         bindPresenter(ApplicationPresenter.class, ApplicationPresenter.MyView.class, ApplicationView.class,
                 ApplicationPresenter.MyProxy.class);

src/main/java/com/github/gwtmaterialdesign/client/application/googlecontacts/GoogleContactsView.ui.xml

@@ -27,7 +27,6 @@
         @external side-nav, active;
         body{
             background-color: #e9e9e9;
-            overflow: scroll !important;
         }
         .side-nav li.active{
             border-left: 4px solid #1E88E5;
@@ -42,10 +41,10 @@
             <m:MaterialLabel text="Contacts Pattern for User Management" />
         </m:MaterialSplashScreen>
         <!-- Header Section -->
-        <m:MaterialHeader layoutPosition="FIXED" width="100%" depth="996" top="0">
+        <m:MaterialHeader>
             <!-- NavBar Component -->
-            <m:MaterialNavBar ui:field="appNav" backgroundColor="BLUE_DARKEN_1" activates="sidenav">
-                <m:MaterialNavBrand text="Contacts" />
+            <m:MaterialNavBar ui:field="appNav" backgroundColor="BLUE_DARKEN_1" activates="sidenavContacts">
+                <m:MaterialNavBrand paddingLeft="60" text="Contacts" />
                 <m:MaterialNavSection float="RIGHT" hideOn="NONE">
                     <m:MaterialIcon hideOn="HIDE_ON_SMALL_DOWN" activates="dpSort" iconType="SORT_BY_ALPHA" marginRight="20" />
                     <m:MaterialIcon hideOn="HIDE_ON_SMALL_DOWN" iconType="CALL" marginRight="20" />
@@ -63,7 +62,7 @@
         </m:MaterialHeader>
 
         <!-- SideNav Component -->
-        <m:MaterialSideNav m:id="sidenav" type="CARD" width="240" layoutPosition="FIXED">
+        <m:MaterialSideNavCard m:id="sidenavContacts" width="250" allowBodyScroll="true">
             <m:MaterialRow separator="true" marginBottom="0">
                 <m:MaterialImage marginTop="20" height="auto" url="https://lh3.googleusercontent.com/-Zu_vZFIl9Ms/AAAAAAAAAAI/AAAAAAAAALk/2pPyCa-IKHg/s60-p-rw-no/photo.jpg" grid="l3 m3 s3" circle="true"/>
                 <m:MaterialLabel text="Mark Kevin Baldemor" fontWeight="BOLD"  marginTop="8" grid="l9 m9 s9"/>
@@ -74,18 +73,20 @@
             <m:MaterialLink iconType="RADIO_BUTTON_CHECKED" text="Circles" />
             <m:MaterialLink iconType="FIND_IN_PAGE" text="Find Duplicates" />
             <m:MaterialLink iconType="MORE" text="More" />
-        </m:MaterialSideNav>
+        </m:MaterialSideNavCard>
 
         <!-- Container -->
-        <m:MaterialContainer paddingLeft="320" paddingRight="140" marginTop="80">
-            <m:MaterialLabel text="Starred" marginTop="32" marginLeft="24" textColor="GREY"/>
-            <!-- Collapsible Starred -->
-            <m:MaterialCollapsible ui:field="starredColaps"/>
+        <m:MaterialPanel padding="40">
+            <m:MaterialContainer marginTop="80">
+                <m:MaterialLabel text="Starred" marginTop="32" marginLeft="24" textColor="GREY"/>
+                <!-- Collapsible Starred -->
+                <m:MaterialCollapsible ui:field="starredColaps"/>
 
-            <!-- Collapsible Frequent Contacts -->
-            <m:MaterialLabel text="Frequently Contacted" marginTop="32" marginLeft="24" textColor="GREY"/>
-            <m:MaterialCollapsible ui:field="frequentColaps"/>
-        </m:MaterialContainer>
+                <!-- Collapsible Frequent Contacts -->
+                <m:MaterialLabel text="Frequently Contacted" marginTop="32" marginLeft="24" textColor="GREY"/>
+                <m:MaterialCollapsible ui:field="frequentColaps"/>
+            </m:MaterialContainer>
+        </m:MaterialPanel>
 
         <!-- FAB -->
         <m:MaterialFAB>

src/main/java/com/github/gwtmaterialdesign/client/application/googledrive/GoogleDriveView.ui.xml

@@ -26,7 +26,6 @@
         @external side-nav, active;
         body{
             background-color: #e9e9e9;
-            overflow: auto !important;
         }
         .side-nav li.active{
             border-left: 4px solid #757575;
@@ -51,8 +50,8 @@
         <!-- Header Section -->
         <m:MaterialHeader depth="996" layoutPosition="FIXED" width="100%">
             <!-- NavBar Component -->
-            <m:MaterialNavBar ui:field="appNav" backgroundColor="GREY_DARKEN_1" activates="sidenav">
-                <m:MaterialNavBrand text="Drive"/>
+            <m:MaterialNavBar ui:field="appNav" backgroundColor="GREY_DARKEN_1" activates="sidenavDrive">
+                <m:MaterialNavBrand paddingLeft="60" text="Drive"/>
 
                 <m:MaterialNavSection float="RIGHT" hideOn="NONE">
                     <m:MaterialLink hideOn="HIDE_ON_SMALL_DOWN" text="Drive" iconPosition="RIGHT" marginRight="20" iconType="ARROW_DROP_DOWN" textColor="WHITE" activates="dpDrive" float="LEFT">
@@ -83,7 +82,7 @@
         </m:MaterialHeader>
 
         <!-- SideNav Component -->
-        <m:MaterialSideNav m:id="sidenav" overflow="AUTO" type="FIXED" showOnAttach="true" alwaysShowActivator="true" shadow="0" backgroundColor="GREY_LIGHTEN_3" top="70">
+        <m:MaterialSideNavPush m:id="sidenavDrive" width="250" withHeader="true">
             <m:MaterialLink iconType="FOLDER" text="My Drive"/>
             <m:MaterialLink iconType="GROUP" text="Shared with me"/>
             <m:MaterialLink iconType="CAMERA" text="Google Photos"/>
@@ -92,12 +91,12 @@
             <m:MaterialLink iconType="DELETE" text="Trash"/>
 
             <!-- Some components -->
-            <m:MaterialPanel textAlign="CENTER">
-                <m:MaterialLabel text="Copyright @ Drive 2016" textColor="GREY_DARKEN_1"/>
+            <m:MaterialSideNavContent textAlign="CENTER" padding="20">
+                <m:MaterialLabel text="Copyright @ Drive 2016" marginBottom="40" textColor="GREY_DARKEN_1"/>
                 <m:MaterialButton text="Get Drive for PC" backgroundColor="GREY_DARKEN_1" textColor="WHITE"/>
-            </m:MaterialPanel>
+            </m:MaterialSideNavContent>
 
-        </m:MaterialSideNav>
+        </m:MaterialSideNavPush>
 
         <m:MaterialRow ui:field="rightPanel" overflow="AUTO" grid="l3 m3 s12" depth="995" padding="0" backgroundColor="WHITE" height="100%" layoutPosition="FIXED" top="56" right="-374" addStyleNames="{style.bordered} {style.animation}">
             <!-- Header Info -->

src/main/java/com/github/gwtmaterialdesign/client/application/googleinbox/GoogleInboxView.ui.xml

@@ -25,7 +25,6 @@
         @external side-nav, active;
         body{
             background-color: #fafafa;
-            overflow: scroll !important;
         }
         .side-nav li.active{
             font-weight: bold;
@@ -41,8 +40,8 @@
         <!-- Header -->
         <m:MaterialHeader layoutPosition="FIXED" width="100%" depth="996" top="0" >
             <!-- NavBar -->
-            <m:MaterialNavBar backgroundColor="BLUE" activates="sidenav">
-                <m:MaterialNavBrand text="Google Inbox" />
+            <m:MaterialNavBar backgroundColor="BLUE" activates="sidenavInbox">
+                <m:MaterialNavBrand paddingLeft="60" text="Google Inbox" />
                 <m:MaterialNavSection float="RIGHT">
                     <m:MaterialLink iconType="APPS" />
                     <m:MaterialLink iconType="NOTIFICATIONS" />
@@ -52,7 +51,7 @@
         </m:MaterialHeader>
 
         <!-- SideNav -->
-        <m:MaterialSideNav m:id="sidenav" width="250" overflow="AUTO" alwaysShowActivator="true" showOnAttach="true" type="FIXED" shadow="0" backgroundColor="GREY_LIGHTEN_5" top="70">
+        <m:MaterialSideNavPush m:id="sidenavInbox" width="250" withHeader="true">
             <m:MaterialLink text="Inbox" iconType="INBOX" iconColor="BLUE" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Snoozed" iconType="ACCESS_TIME" iconColor="ORANGE" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Done" separator="true" iconType="CHECK" iconColor="GREEN" textColor="GREY_DARKEN_2"/>
@@ -63,7 +62,7 @@
             <m:MaterialLink text="Spam" iconType="REPORT" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Contacts" iconType="CONTACTS" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Gmail" iconType="MAIL" textColor="GREY_DARKEN_2"/>
-        </m:MaterialSideNav>
+        </m:MaterialSideNavPush>
 
         <!-- Container -->
         <m:MaterialContainer paddingLeft="330" paddingRight="100" marginTop="80">

src/main/java/com/github/gwtmaterialdesign/client/application/googleplus/GooglePlusView.java

@@ -24,10 +24,10 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.Timer;
-import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.gwtplatform.mvp.client.ViewImpl;
 import gwt.material.design.client.ui.MaterialSplashScreen;
+import gwt.material.design.client.ui.MaterialTab;
 
 import javax.inject.Inject;
 
@@ -39,6 +39,9 @@ interface Binder extends UiBinder<Widget, GooglePlusView> {
     @UiField
     MaterialSplashScreen splash;
 
+    @UiField
+    MaterialTab tab;
+
     @Inject
     GooglePlusView(Binder uiBinder) {
         initWidget(uiBinder.createAndBindUi(this));
@@ -47,6 +50,7 @@ interface Binder extends UiBinder<Widget, GooglePlusView> {
             @Override
             public void run() {
                 splash.hide();
+                tab.reinitialize();
             }
         };
         t.schedule(5000);

src/main/java/com/github/gwtmaterialdesign/client/application/googleplus/GooglePlusView.ui.xml

@@ -30,9 +30,6 @@
         .side-nav li.active{
             background: #fff !important;
         }
-        body{
-            overflow: auto !important;
-        }
     </ui:style>
     <m:MaterialPanel>
         <!-- Splash screen -->
@@ -44,8 +41,8 @@
         <!-- Header -->
         <m:MaterialHeader layoutPosition="FIXED" width="100%" shadow="1" depth="996">
             <!-- NavBar -->
-            <m:MaterialNavBar backgroundColor="LIGHT_BLUE" activates="sidenav">
-                <m:MaterialNavBrand text="Google +" />
+            <m:MaterialNavBar backgroundColor="LIGHT_BLUE" activates="sidenavGplus">
+                <m:MaterialNavBrand paddingLeft="60" text="Google +" />
                 <m:MaterialNavSection float="RIGHT">
                     <m:MaterialLink iconType="APPS" />
                     <m:MaterialLink iconType="NOTIFICATIONS" />
@@ -55,7 +52,7 @@
             <!-- Tab -->
             <m:MaterialRow backgroundColor="LIGHT_BLUE" marginBottom="0">
                 <m:MaterialColumn offset="l3 m0 s0" grid="l6 m12 s12" backgroundColor="LIGHT_BLUE">
-                    <m:MaterialTab backgroundColor="LIGHT_BLUE">
+                    <m:MaterialTab ui:field="tab" backgroundColor="LIGHT_BLUE">
                         <m:MaterialTabItem><m:MaterialLink text="FEATURED" textColor="WHITE" waves="DEFAULT"/></m:MaterialTabItem>
                         <m:MaterialTabItem><m:MaterialLink text="FOLLOWING" textColor="WHITE" waves="DEFAULT"/></m:MaterialTabItem>
                         <m:MaterialTabItem><m:MaterialLink text="YOURS" textColor="WHITE" waves="DEFAULT" /></m:MaterialTabItem>
@@ -65,7 +62,7 @@
         </m:MaterialHeader>
 
         <!-- SideNav -->
-        <m:MaterialSideNav m:id="sidenav" width="250" overflow="AUTO" alwaysShowActivator="true" showOnAttach="true" type="FIXED" shadow="0" backgroundColor="WHITE" top="120">
+        <m:MaterialSideNavPush m:id="sidenavGplus" width="250" withHeader="true" top="113">
             <m:MaterialLink text="Home" iconType="HOME" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Collections" iconType="COLLECTIONS" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Communities" iconType="GROUP_WORK" textColor="GREY_DARKEN_2"/>
@@ -74,7 +71,7 @@
             <m:MaterialLink text="Settings" iconType="COLLECTIONS" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Send Feedback" iconType="ANNOUNCEMENT" textColor="GREY_DARKEN_2"/>
             <m:MaterialLink text="Help" iconType="HELP" textColor="GREY_DARKEN_2"/>
-        </m:MaterialSideNav>
+        </m:MaterialSideNavPush>
 
         <!-- Container -->
         <m:MaterialContainer paddingLeft="250" paddingRight="180" paddingTop="140">