Minor fixes and updates GMD 2.0

kevzlou7979 · kevzlou7979 · commit f7a3d85ad0aa · 2016-11-28T11:22:39.000+08:00
diff --git a/src/main/java/gwt/material/design/demo/client/application/addins/window/WindowView.java b/src/main/java/gwt/material/design/demo/client/application/addins/window/WindowView.java
@@ -44,7 +44,7 @@ interface Binder extends UiBinder<Widget, WindowView> {
     }
 
     @UiField
-    MaterialWindow window, windowTab, styledWindow;
+    MaterialWindow window, windowTab, styledWindow, overlayWindow;
 
     @UiField
     MaterialRow headerPanel, tabsPanel;
@@ -69,6 +69,11 @@ public void onClose(CloseEvent<Boolean> event) {
         });
     }
 
+    @UiHandler("btnOpenWindowWithOverlay")
+    void onOpenWindowWithOverlay(ClickEvent e) {
+        overlayWindow.open();
+    }
+
     @UiHandler("btnOpenWindow")
     void onOpenWindow(ClickEvent e) {
         window.open();
diff --git a/src/main/java/gwt/material/design/demo/client/application/addins/window/WindowView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/addins/window/WindowView.ui.xml
@@ -68,6 +68,21 @@
                 window.open();
             </m.demo:PrettyPre>
         </m:MaterialRow>
+
+        <m:MaterialRow addStyleNames="code">
+            <m:MaterialTitle title="Window with Overlay"/>
+            <m:MaterialButton ui:field="btnOpenWindowWithOverlay" text="Open with Overlay" textColor="WHITE" />
+            <ma:window.MaterialWindow ui:field="overlayWindow" overlay="true" width="50%" title="Documents">
+                <m:MaterialPanel padding="32" textAlign="CENTER" height="300px">
+                    <m:MaterialIcon iconType="HEADSET" iconColor="ORANGE" padding="24" iconSize="LARGE" circle="true" shadow="1"/>
+                    <m:MaterialLabel text="I Love Music" marginTop="20" fontSize="2em" fontWeight="BOLD"/>
+                    <m:MaterialLabel text="Helps me escape from the reality I live in." fontSize="1.2em" />
+                </m:MaterialPanel>
+            </ma:window.MaterialWindow>
+            <m.demo:PrettyPre addStyleNames="lang-java">
+
+            </m.demo:PrettyPre>
+        </m:MaterialRow>
     
         <m:MaterialRow addStyleNames="code">
             <m:MaterialTitle title="Window Styles" description="Just a regular window, you can set styles easily including width, height, toolbar color etc."/>
diff --git a/src/main/java/gwt/material/design/demo/client/application/animations/core/CoreAnimationsView.java b/src/main/java/gwt/material/design/demo/client/application/animations/core/CoreAnimationsView.java
@@ -33,7 +33,6 @@
 import gwt.material.design.client.ui.MaterialListBox;
 import gwt.material.design.client.ui.MaterialToast;
 import gwt.material.design.client.ui.animate.MaterialAnimation;
-import gwt.material.design.client.ui.animate.MaterialAnimator;
 import gwt.material.design.client.ui.animate.Transition;
 
 import javax.inject.Inject;
@@ -47,11 +46,13 @@ interface Binder extends UiBinder<Widget, CoreAnimationsView> {
     MaterialCard card;
 
     @UiField
-    MaterialButton iconHeart, iconCallback, iconState;
+    MaterialButton iconHeart, iconCallback;
 
     @UiField
     MaterialListBox lstAnimations;
 
+    private MaterialAnimation infiniteAnimation;
+
     @Inject
     CoreAnimationsView(Binder uiBinder) {
         initWidget(uiBinder.createAndBindUi(this));
@@ -151,31 +152,37 @@ void onAnimateWithListBox(ValueChangeEvent<String> e) {
     private void animate() {
         String value = lstAnimations.getSelectedValue();
         Transition transition = Transition.fromStyleName(value);
-        MaterialAnimator.animate(transition, card, 0);
+        MaterialAnimation animation = new MaterialAnimation();
+        animation.setTransition(transition);
+        animation.setDelayMillis(0);
+        animation.setDurationMillis(1000);
+        animation.setInfinite(false);
+        animation.animate(card);
     }
 
     @UiHandler("btnAnimateInfinite")
     void onAnimateInfinite(ClickEvent e) {
-        MaterialAnimator.animate(Transition.PULSE, iconHeart, 0, true);
+        infiniteAnimation = new MaterialAnimation();
+        infiniteAnimation.setDelayMillis(0);
+        infiniteAnimation.setTransition(Transition.PULSE);
+        infiniteAnimation.setDurationMillis(1000);
+        infiniteAnimation.setInfinite(true);
+        infiniteAnimation.animate(iconHeart);
     }
 
     @UiHandler("btnStopAnimation")
     void onStopAnimation(ClickEvent e) {
-        MaterialAnimator.stopAnimation(iconHeart);
+        infiniteAnimation.stopAnimation();
     }
 
     @UiHandler("btnAnimateCallback")
     void onCallback(ClickEvent e) {
-        MaterialAnimator.animate(Transition.FLIPINX, iconCallback, 200, () -> {
+        MaterialAnimation animation = new MaterialAnimation();
+        animation.setDelayMillis(0);
+        animation.setDurationMillis(1000);
+        animation.transition(Transition.FLIPINX);
+        animation.animate(iconCallback, () -> {
             MaterialToast.fireToast("Animation is finished");
         });
     }
-
-    @UiHandler("btnAnimateStateful")
-    void onStateful(ClickEvent e) {
-        new MaterialAnimation().durationMillis(1000)
-                .delayMillis(100)
-                .transition(Transition.WOBBLE)
-                .animate(iconState);
-    }
 }
diff --git a/src/main/java/gwt/material/design/demo/client/application/animations/core/CoreAnimationsView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/animations/core/CoreAnimationsView.ui.xml
@@ -34,11 +34,16 @@
     </ui:style>
     <m:MaterialPanel>
         <m:MaterialPanel addStyleNames="code">
-            <m:MaterialTitle title="Usage" description="You can easily apply animation by calling MaterialAnimator.animate(Transition, Widget, Delay);"/>
+            <m:MaterialTitle title="Note" description="As of Version 2.0 we marked MaterialAnimator as Deprecated, instead we used MaterialAnimation for GMD Animation class" />
             <m:MaterialRow>
-                <m:MaterialColumn grid="s12 l6">
+                <m:MaterialColumn>
                     <demo:PrettyPre addStyleNames="lang-java">
-                        MaterialAnimator.animate(Transition.BOUNCE, card, 300);
+                        &emsp;MaterialAnimation animation = new MaterialAnimation();<br/>
+                        animation.setTransition(transition);<br/>
+                        animation.setDelayMillis(0);<br/>
+                        animation.setDurationMillis(1000);<br/>
+                        animation.setInfinite(false);<br/>
+                        animation.animate(card);
                     </demo:PrettyPre>
                     <m:MaterialCard ui:field="card">
                         <m:MaterialCardContent textColor="WHITE">
@@ -59,12 +64,16 @@
         <m:MaterialPanel addStyleNames="code">
             <m:MaterialTitle title="Infinite" description="You can easily set the animation infinite."/>
             <m:MaterialRow>
-                <m:MaterialColumn grid="s12 l6">
+                <m:MaterialColumn>
                     <demo:PrettyPre addStyleNames="lang-java">
-                        // Play Infinite Animation<br/>
-                        MaterialAnimator.animate(Transition.PULSE, heart, 1000, true);<br/>
-                        // Stop Infinite Animation <br/>
-                        MaterialAnimator.stopAnimation(heart);<br/>
+                        &emsp;MaterialAnimation infiniteAnimation = new MaterialAnimation();<br/>
+                        infiniteAnimation.setTransition(Transition.PULSE);<br/>
+                        infiniteAnimation.setDelayMillis(0);<br/>
+                        infiniteAnimation.setDurationMillis(1000);<br/>
+                        infiniteAnimation.setInfinite(true);<br/>
+                        infiniteAnimation.animate(iconHeart);<br/><br/>
+                        // To stop the infinite animation <br/>
+                        infiniteAnimation.stopAnimation();
                     </demo:PrettyPre>
                     <m:MaterialButton ui:field="iconHeart" width="100px" height="100px" addStyleNames="{style.icon}" type="FLOATING" size="LARGE" iconType="FAVORITE" backgroundColor="PINK" />
                 </m:MaterialColumn>
@@ -76,36 +85,20 @@
         <m:MaterialPanel addStyleNames="code">
             <m:MaterialTitle title="Callback" description="Setting the callback after animation" />
             <m:MaterialRow>
-                <m:MaterialColumn grid="s12 l6">
+                <m:MaterialColumn>
                     <demo:PrettyPre addStyleNames="lang-java">
-                        &emsp;Runnable callback = new Runnable() {<br/>
-                        &emsp;@Override<br/>
-                        &emsp;public void run() {<br/>
-                        &emsp;&emsp;MaterialToast.fireToast("Animation is finished");<br/>
-                        &emsp;}<br/>
-                        };<br/>
-                        MaterialAnimator.animate(Transition.FLIPINX, iconCallback, 200, callback);
+                        &emsp;MaterialAnimation animation = new MaterialAnimation();<br/>
+                        animation.setDelayMillis(0);<br/>
+                        animation.setDurationMillis(1000);<br/>
+                        animation.transition(Transition.FLIPINX);<br/>
+                        animation.animate(iconCallback, () -> {<br/>
+                        &emsp;MaterialToast.fireToast("Animation is finished");<br/>
+                        });
                     </demo:PrettyPre>
                     <m:MaterialButton ui:field="iconCallback" width="100px" height="100px" addStyleNames="{style.icon}" type="FLOATING" size="LARGE" iconType="DIRECTIONS_BIKE" />
                 </m:MaterialColumn>
             </m:MaterialRow>
             <m:MaterialButton ui:field="btnAnimateCallback" text="Animate with Callback" textColor="WHITE"/>
         </m:MaterialPanel>
-    
-        <m:MaterialPanel addStyleNames="code">
-            <m:MaterialTitle title="Stateful Animation" description="Stateful object holding animation details. Default behaviour is a bounce transition for 800ms." />
-            <m:MaterialRow>
-                <m:MaterialColumn grid="s12 l6">
-                    <demo:PrettyPre addStyleNames="lang-java">
-                        &emsp;new MaterialAnimation().durationMillis(1000)<br/>
-                        &emsp;.delayMillis(100)<br/>
-                        &emsp;.transition(Transition.WOBBLE)<br/>
-                        &emsp;.animate(iconState);
-                    </demo:PrettyPre>
-                    <m:MaterialButton ui:field="iconState" width="100px" height="100px" addStyleNames="{style.icon}" type="FLOATING" size="LARGE" iconType="POLYMER" backgroundColor="PURPLE" />
-                </m:MaterialColumn>
-            </m:MaterialRow>
-            <m:MaterialButton ui:field="btnAnimateStateful" text="Animate" textColor="WHITE"/>
-        </m:MaterialPanel>
     </m:MaterialPanel>
 </ui:UiBinder>
diff --git a/src/main/java/gwt/material/design/demo/client/application/animations/meaningful/MeaningfulAnimationsView.java b/src/main/java/gwt/material/design/demo/client/application/animations/meaningful/MeaningfulAnimationsView.java
@@ -29,6 +29,7 @@
 import com.gwtplatform.mvp.client.ViewImpl;
 import gwt.material.design.client.ui.MaterialImage;
 import gwt.material.design.client.ui.MaterialRow;
+import gwt.material.design.client.ui.animate.MaterialAnimation;
 import gwt.material.design.client.ui.animate.MaterialAnimator;
 import gwt.material.design.client.ui.animate.Transition;
 import gwt.material.design.client.ui.html.UnorderedList;
@@ -57,22 +58,30 @@ interface Binder extends UiBinder<Widget, MeaningfulAnimationsView> {
 
     @UiHandler("btnCloseGrid")
     void onCloseGrid(ClickEvent e) {
-        MaterialAnimator.animate(Transition.CLOSE_GRID, gridPanel, 0);
+        MaterialAnimation gridAnimation = new MaterialAnimation();
+        gridAnimation.setTransition(Transition.CLOSE_GRID);
+        gridAnimation.animate(gridPanel);
     }
 
     @UiHandler("btnShowGrid")
     void onShowGrid(ClickEvent e) {
-        MaterialAnimator.animate(Transition.SHOW_GRID, gridPanel, 0);
+        MaterialAnimation gridAnimation = new MaterialAnimation();
+        gridAnimation.setTransition(Transition.SHOW_GRID);
+        gridAnimation.animate(gridPanel);
     }
 
     @UiHandler("btnStaggered")
     void onStaggered(ClickEvent e) {
-        MaterialAnimator.animate(Transition.SHOW_STAGGERED_LIST, listContainer, 0);
+        MaterialAnimation gridAnimation = new MaterialAnimation();
+        gridAnimation.setTransition(Transition.SHOW_STAGGERED_LIST);
+        gridAnimation.animate(listContainer);
     }
 
     @UiHandler("btnFade")
     void onFade(ClickEvent e) {
-        MaterialAnimator.animate(Transition.FADE_IN_IMAGE, image, 0);
+        MaterialAnimation gridAnimation = new MaterialAnimation();
+        gridAnimation.setTransition(Transition.FADE_IN_IMAGE);
+        gridAnimation.animate(image);
     }
 
 }
diff --git a/src/main/java/gwt/material/design/demo/client/application/animations/meaningful/MeaningfulAnimationsView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/animations/meaningful/MeaningfulAnimationsView.ui.xml
@@ -34,10 +34,14 @@
     <m:MaterialPanel>
         <g:HTMLPanel>
             <m:MaterialPanel addStyleNames="code">
-                <m:MaterialTitle title="Show Grid" description="You can add a transition staggered reveal effect for any Unordered List material widget with List Items."/>
+                <m:MaterialTitle title="Show Grid" description="We provided a delightful animation to display grid in your apps."/>
                 <demo:PrettyPre addStyleNames="lang-java">
-                    &emsp;@UiField MaterialRow rowCards;<br/>
-                    MaterialAnimator.animate(Transition.SHOW_GRID, rowCards, 0);
+                    &emsp;MaterialAnimation gridAnimation = new MaterialAnimation();<br/>
+                    gridAnimation.setTransition(Transition.SHOW_GRID);<br/>
+                    gridAnimation.animate(gridPanel);<br/>
+                    // Close Grid<br/>
+                    gridAnimation.setTransition(Transition.CLOSE_GRID);<br/>
+                    gridAnimation.animate(gridPanel);
                 </demo:PrettyPre>
                 <demo:PrettyPre addStyleNames="lang-xml">
                     &emsp;&lt;m:MaterialRow ui:field="rowCards"><br/>
@@ -276,7 +280,9 @@
                 </demo:PrettyPre>
     
                 <demo:PrettyPre addStyleNames="lang-java">
-                    MaterialAnimator.animate(Transition.SHOW_STAGGERED_LIST, listContainer, 0);
+                   &emsp;MaterialAnimation gridAnimation = new MaterialAnimation();<br/>
+                    gridAnimation.setTransition(Transition.SHOW_STAGGERED_LIST);<br/>
+                    gridAnimation.animate(listContainer);
                 </demo:PrettyPre>
     
                 <m.html:UnorderedList ui:field="listContainer">
@@ -294,7 +300,9 @@
                     &emsp;&lt;m:MaterialImage addStyleNames="{style.block}" opacity="0" ui:field="image" resource="{res.image}"  caption="I love Material Design"/>
                 </demo:PrettyPre>
                 <demo:PrettyPre addStyleNames="lang-java">
-                    MaterialAnimator.animate(Transition.FADE_IN_IMAGE, image, 0);
+                    &emsp;MaterialAnimation gridAnimation = new MaterialAnimation();<br/>
+                    gridAnimation.setTransition(Transition.FADE_IN_IMAGE);<br/>
+                    gridAnimation.animate(image);
                 </demo:PrettyPre>
                 <m:MaterialImage addStyleNames="{style.block}" opacity="0" ui:field="image" url="http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-5.png"  caption="I love Material Design"/>
             </m:MaterialPanel>
diff --git a/src/main/java/gwt/material/design/demo/client/application/components/errors/ErrorsView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/components/errors/ErrorsView.ui.xml
@@ -148,7 +148,7 @@
       <!-- Text Area -->
       <m:MaterialRow>
         <m:MaterialTitle title="Text Area" />
-        <m:MaterialTextArea ui:field="txtArea" placeholder="About You" grid="s12 m12 l5" text="I Love Material Design"/>
+        <m:MaterialTextArea ui:field="txtArea" label="About You" grid="s12 m12 l5" text="I Love Material Design"/>
       </m:MaterialRow>
       <m:MaterialRow>
         <m:MaterialButton ui:field="btnErrorTxtArea" text="Error" backgroundColor="RED" waves="LIGHT"/>
@@ -161,7 +161,7 @@
       <!-- Text Box -->
       <m:MaterialRow>
         <m:MaterialTitle title="Text Box" />
-        <m:MaterialTextBox ui:field="txtBox" placeholder="First Name" grid="s12 m12 l5" text="Marjorie Matias"/>
+        <m:MaterialTextBox ui:field="txtBox" label="First Name" grid="s12 m12 l5" text="Marjorie Matias"/>
       </m:MaterialRow>
       <m:MaterialRow>
         <m:MaterialButton ui:field="btnErrorTxtBox" text="Error" backgroundColor="RED" waves="LIGHT"/>
diff --git a/src/main/java/gwt/material/design/demo/client/application/showcase/ShowcaseView.ui.xml b/src/main/java/gwt/material/design/demo/client/application/showcase/ShowcaseView.ui.xml
@@ -91,7 +91,7 @@
     </m:MaterialRow>
   
     <m:MaterialRow addStyleNames="code">
-      <m:MaterialTitle title="Weather" description="Custom Material Weather made with OpenWeatherMap API with JSON technology no more server side to setup.'"/>
+      <m:MaterialTitle title="Weather" description="Custom Material Weather made with OpenWeatherMap API with JSON technology no more server side to setup."/>
       <m:MaterialRow>
         <m:MaterialColumn grid="s12 m6 l6">
           <m:MaterialWeather ui:field="weather" location="Makati, Philippines" />
diff --git a/src/main/java/gwt/material/design/demo/client/application/showcase/pathanimator/PathAnimatorShowcase.java b/src/main/java/gwt/material/design/demo/client/application/showcase/pathanimator/PathAnimatorShowcase.java
@@ -66,9 +66,7 @@ void onFAB(ClickEvent e){
         // Execute the opening callback once the fab is clicked
         MaterialPathAnimator.animate(btnFAB.getElement(), musicPanel.getElement(), () -> {
             // Hide the fab with zoom out animation
-            MaterialAnimator.animate(Transition.ZOOMOUT, btnFAB, 1000, () -> {
-                btnPause.setVisible(true);
-            });
+            MaterialAnimator.animate(Transition.ZOOMOUT, btnFAB, 1000);
             btnFAB.setVisibility(Style.Visibility.HIDDEN);
             btnFAB.setOpacity(0);
 
diff --git a/src/main/java/gwt/material/design/demo/client/application/showcase/pathanimator/PathAnimatorShowcase.ui.xml b/src/main/java/gwt/material/design/demo/client/application/showcase/pathanimator/PathAnimatorShowcase.ui.xml
@@ -62,7 +62,7 @@
                             <m:MaterialIcon iconType="FAST_REWIND" waves="DEFAULT" iconSize="SMALL" circle="true"/>
                         </m:MaterialColumn>
                         <m:MaterialColumn grid="s4 l4">
-                            <m:MaterialIcon ui:field="btnPause" visible="false" iconType="PAUSE" waves="DEFAULT" iconSize="SMALL" circle="true"/>
+                            <m:MaterialIcon ui:field="btnPause" iconType="PAUSE" waves="DEFAULT" iconSize="SMALL" circle="true"/>
                         </m:MaterialColumn>
                         <m:MaterialColumn grid="s4 l4">
                             <m:MaterialIcon iconType="FAST_FORWARD" waves="DEFAULT" iconSize="SMALL" circle="true"    />
