GwtMaterialDesign · kevzlou7979 · Jul 27, 2020 · Jul 28, 2020 · Sep 11, 2020
diff --git a/pom.xml b/pom.xml
@@ -36,6 +36,7 @@
         <gwt.version>2.9.0</gwt.version>
         <gwtp.version>1.6</gwtp.version>
         <gin.version>2.1.2</gin.version>
+        <gwt-material.version>2.4.0-SNAPSHOT</gwt-material.version>
         <gwt-material.version>2.5.0-SNAPSHOT</gwt-material.version>
 
         <maven.compiler.source>1.8</maven.compiler.source>

diff --git a/src/main/java/gmd/core/demo/client/application/ApplicationModule.java b/src/main/java/gmd/core/demo/client/application/ApplicationModule.java
@@ -38,7 +38,8 @@
 import gmd.core.demo.client.application.page.footer.FooterModule;
 import gmd.core.demo.client.application.page.home.HomeModule;
 import gmd.core.demo.client.application.page.icon.IconModule;
-import gmd.core.demo.client.application.page.layout.LayoutModule;
+import gmd.core.demo.client.application.page.layout.twelvecol.TwelveColLayoutModule;
+import gmd.core.demo.client.application.page.layout.grid.GridLayoutModule;
 import gmd.core.demo.client.application.page.listbox.ListBoxModule;
 import gmd.core.demo.client.application.page.loaders.LoadersModule;
 import gmd.core.demo.client.application.page.media.MediaModule;
@@ -76,7 +77,8 @@ protected void configure() {
         install(new FabModule());
         install(new FooterModule());
         install(new IconModule());
-        install(new LayoutModule());
+        install(new TwelveColLayoutModule());
+        install(new GridLayoutModule());
         install(new ListBoxModule());
         install(new LoadersModule());
         install(new MediaModule());

diff --git a/src/main/java/gmd/core/demo/client/application/navigation/NavigationService.java b/src/main/java/gmd/core/demo/client/application/navigation/NavigationService.java
@@ -28,7 +28,8 @@ public class NavigationService {
         components.add(new Component(NameTokens.ICON, "We have included 740 Material Design Icons courtesy of Google. You can download them directly from the Material Design specs."));
         components.add(new Component(NameTokens.FAB, "FAB or Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point."));
         components.add(new Component(NameTokens.FOOTER, "Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once hes finished scrolling through the current page or is looking for additional information about your website."));
-        components.add(new Component(NameTokens.LAYOUT, "Provides you an easy way to layout your content using the Grid System and also using helper classes."));
+        components.add(new Component(NameTokens.GRID_LAYOUT, "CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements."));
+        components.add(new Component(NameTokens.TWELEVE_COL_LAYOUT, "Provides you an easy way to layout your content using the Grid System and also using helper classes."));
         components.add(new Component(NameTokens.LOADERS, "If you have content that will take a long time to load, you should give the user feedback. For this reason we provide a number activity + progress indicators."));
         components.add(new Component(NameTokens.LISTBOX, "Material ListBox is another dropdown component that will set / get the value depends on the selected index"));
         components.add(new Component(NameTokens.MEDIA, "Media components include things that have to do with large media objects like Images, Video, Audio, etc."));

diff --git a/...application/page/layout/LayoutModule.java → ...on/page/layout/grid/GridLayoutModule.java b/...application/page/layout/LayoutModule.java → ...on/page/layout/grid/GridLayoutModule.java
@@ -17,14 +17,14 @@
  * limitations under the License.
  * #L%
  */
-package gmd.core.demo.client.application.page.layout;
+package gmd.core.demo.client.application.page.layout.grid;
 
 import com.gwtplatform.mvp.client.gin.AbstractPresenterModule;
 
-public class LayoutModule extends AbstractPresenterModule {
+public class GridLayoutModule extends AbstractPresenterModule {
     @Override
     protected void configure() {
-        bindPresenter(LayoutPresenter.class, LayoutPresenter.MyView.class, LayoutView.class,
-                LayoutPresenter.MyProxy.class);
+        bindPresenter(GridLayoutPresenter.class, GridLayoutPresenter.MyView.class, GridLayoutView.class,
+                GridLayoutPresenter.MyProxy.class);
     }
 }
diff --git a/...lication/page/layout/LayoutPresenter.java → ...page/layout/grid/GridLayoutPresenter.java b/...lication/page/layout/LayoutPresenter.java → ...page/layout/grid/GridLayoutPresenter.java
@@ -17,7 +17,7 @@
  * limitations under the License.
  * #L%
  */
-package gmd.core.demo.client.application.page.layout;
+package gmd.core.demo.client.application.page.layout.grid;
 
 import com.google.inject.Inject;
 import com.google.web.bindery.event.shared.EventBus;
@@ -30,17 +30,17 @@
 import gmd.core.demo.client.application.page.AppPresenter;
 import gmd.core.demo.client.place.NameTokens;
 
-public class LayoutPresenter extends AppPresenter<LayoutPresenter.MyView, LayoutPresenter.MyProxy> {
+public class GridLayoutPresenter extends AppPresenter<GridLayoutPresenter.MyView, GridLayoutPresenter.MyProxy> {
     interface MyView extends View {
     }
 
     @ProxyStandard
-    @NameToken(NameTokens.LAYOUT)
-    interface MyProxy extends ProxyPlace<LayoutPresenter> {
+    @NameToken(NameTokens.GRID_LAYOUT)
+    interface MyProxy extends ProxyPlace<GridLayoutPresenter> {
     }
 
     @Inject
-    LayoutPresenter(
+    GridLayoutPresenter(
             EventBus eventBus,
             MyView view,
             MyProxy proxy,

diff --git a/src/main/java/gmd/core/demo/client/application/page/layout/grid/GridLayoutView.java b/src/main/java/gmd/core/demo/client/application/page/layout/grid/GridLayoutView.java
@@ -0,0 +1,36 @@
+/*
+ * #%L
+ * GwtMaterial
+ * %%
+ * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package gmd.core.demo.client.application.page.layout.grid;
+
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.user.client.ui.Widget;
+import com.gwtplatform.mvp.client.ViewImpl;
+
+import javax.inject.Inject;
+
+public class GridLayoutView extends ViewImpl implements GridLayoutPresenter.MyView {
+    interface Binder extends UiBinder<Widget, GridLayoutView> {
+    }
+
+    @Inject
+    GridLayoutView(Binder uiBinder) {
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+}
diff --git a/src/main/java/gmd/core/demo/client/application/page/layout/grid/GridLayoutView.ui.xml b/src/main/java/gmd/core/demo/client/application/page/layout/grid/GridLayoutView.ui.xml
@@ -0,0 +1,192 @@
+<!--
+  #%L
+  GwtMaterial
+  %%
+  Copyright (C) 2015 - 2017 GwtMaterialDesign
+  %%
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  #L%
+  -->
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+             xmlns:m='urn:import:gwt.material.design.client.ui'
+             xmlns:widget="urn:import:gmd.core.demo.client.application.widget"
+             xmlns:m.html="urn:import:gwt.material.design.client.ui.html"
+			 xmlns:ma="urn:import:gwt.material.design.addins.client"
+             xmlns:g="urn:import:com.google.gwt.user.client.ui">
+
+    <m:MaterialPanel>
+		<widget:CodeSection sectionTitle="Current Browser Support">
+			<m:MaterialChip text="Edge" backgroundColor="GREEN" textColor="WHITE" marginRight="12"/>
+			<m:MaterialChip text="Firefox" backgroundColor="GREEN" textColor="WHITE" marginRight="12"/>
+			<m:MaterialChip text="Chrome" backgroundColor="GREEN" textColor="WHITE" marginRight="12"/>
+			<m:MaterialChip text="Safari" backgroundColor="GREEN" textColor="WHITE"/>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Super Centered" description="place-items: center">
+			<m:MaterialPanel display="GRID" backgroundColor="BLUE" height="400px" placeItems="center"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995">
+				<m:MaterialIcon iconType="POLYMER" size="MEDIUM"/>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="The Deconstructed Pancake" description="flex: 0 1 baseWidth">
+			<m:MaterialPanel height="400px" display="FLEX" flexWrap="WRAP" justifyContent="center"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" fontSize="1.6em">
+				<m:MaterialPanel display="GRID" placeItems="center" flexValue="0 1 150px" margin="5" backgroundColor="GREEN_LIGHTEN_3">
+					<m:MaterialLabel text="1" textColor="BLACK"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" flexValue="0 1 150px" margin="5" backgroundColor="GREEN_LIGHTEN_3">
+					<m:MaterialLabel text="2" textColor="BLACK"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" flexValue="0 1 150px" margin="5" backgroundColor="GREEN_LIGHTEN_3">
+					<m:MaterialLabel text="3" textColor="BLACK"/>
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Sidebar Says" description="grid-template-columns: minmax">
+			<m:MaterialPanel height="400px" display="GRID" gridTemplateColumns="minmax(150px, 25%) 1fr"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995">
+				<m:MaterialPanel display="GRID" textColor="BLACK" backgroundColor="YELLOW_LIGHTEN_3">
+					<m:MaterialLabel text="Min: 150px / Max: 25%" />
+				</m:MaterialPanel>
+				<m:MaterialPanel textColor="BLACK" backgroundColor="PURPLE_LIGHTEN_3">
+					<m:MaterialLabel text="This element takes the second grid position (1fr), meaning it takes up the rest of the remaining space." />
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Pancake Stack" description="grid-template-rows: auto 1fr auto">
+			<m:MaterialPanel height="400px" display="GRID" gridTemplateRows="auto 1fr auto"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" fontSize="1.6em">
+				<m:MaterialPanel backgroundColor="BLUE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Header"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel backgroundColor="ORANGE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Content" />
+				</m:MaterialPanel>
+				<m:MaterialPanel backgroundColor="PURPLE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Footer" />
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Classic Holy Grail Layout" description="grid-template: auto 1fr auto / auto 1fr auto">
+			<m:MaterialPanel height="400px" display="GRID" gridTemplate="auto 1fr auto / auto 1fr auto"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" fontSize="1.6em">
+				<m:MaterialPanel gridColumn="1 / 4" backgroundColor="PINK_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Header"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel gridColumn="1 / 2" backgroundColor="BLUE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Left Side"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel gridColumn="2 / 3" backgroundColor="ORANGE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Content" />
+				</m:MaterialPanel>
+				<m:MaterialPanel gridColumn="3 / 4" backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Right Side"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel gridColumn="1 / 4" backgroundColor="PURPLE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Footer" />
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="12-Span Grid" description="grid-template-columns: repeat(12, 1fr)">
+			<m:MaterialPanel height="400px" display="GRID" gridTemplateColumns="repeat(12, 1fr)"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" fontSize="1.6em">
+				<m:MaterialPanel display="GRID" placeItems="center" gridColumn="1 / span 12" backgroundColor="PINK_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Span 12"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" gridColumn="1 / span 6" backgroundColor="BLUE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Span 6"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" gridColumn="4 / span 4" backgroundColor="ORANGE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Span 4" />
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" gridColumn="3 / span 2" backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Span 2"/>
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Repeat Auto Minmax" description="grid-template-columns: repeat(auto-fit, minmax(base, 1fr))">
+			<m:MaterialPanel height="400px" display="GRID" gridGap="1rem" gridTemplateColumns="repeat(auto-fit, minmax(150px, 1fr))"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" fontSize="1.6em">
+				<m:MaterialPanel display="GRID" placeItems="center" backgroundColor="PINK_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="1" />
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" backgroundColor="BLUE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="2"/>
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" backgroundColor="ORANGE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="3" />
+				</m:MaterialPanel>
+				<m:MaterialPanel display="GRID" placeItems="center" backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="4"/>
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Line Up" description="justify-content: space-between">
+			<m:MaterialPanel width="600px" display="GRID" gridGap="1rem" gridTemplateColumns="repeat(3, 1fr)"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995" >
+				<m:MaterialPanel backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Title - Card 1" fontSize="1.6em"/>
+					<m:MaterialLabel text="Medium length description with a few more words here." contentEditable="true"/>
+					<m:MaterialPanel height="100px" width="100%" backgroundColor="PINK_LIGHTEN_3" />
+				</m:MaterialPanel>
+				<m:MaterialPanel backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Title - Card 2" fontSize="1.6em"/>
+					<m:MaterialLabel text="Medium length description with a few more words here." contentEditable="true"/>
+					<m:MaterialPanel height="100px" width="100%" backgroundColor="PINK_LIGHTEN_3" />
+				</m:MaterialPanel>
+				<m:MaterialPanel backgroundColor="YELLOW_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Title - Card 3" fontSize="1.6em"/>
+					<m:MaterialLabel text="Medium length description with a few more words here." contentEditable="true"/>
+					<m:MaterialPanel height="100px" width="100%" backgroundColor="PINK_LIGHTEN_3" />
+				</m:MaterialPanel>
+
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Clamping My Style" description="clamp(min, actual, max)">
+			<m:MaterialPanel width="600px" display="GRID" placeItems="center"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995">
+				<m:MaterialPanel width="clamp(23ch, 50%, 46ch)" display="FLEX" flexDirection="COLUMN" backgroundColor="PURPLE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Title - Card 1" fontSize="1.6em"/>
+					<m:MaterialPanel height="125px" width="100%" backgroundColor="YELLOW_LIGHTEN_3" />
+					<m:MaterialLabel text="Medium length description with a few more words here." contentEditable="true"/>
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection sectionTitle="Respect for Aspect" description="aspect-ratio: width / height">
+			<m:MaterialPanel width="600px" display="GRID" placeItems="center"
+							 resize="BOTH" overflow="AUTO" layoutPosition="RELATIVE" depth="995">
+				<m:MaterialPanel width="50%" display="FLEX" flexDirection="COLUMN" backgroundColor="PURPLE_LIGHTEN_3" textColor="BLACK" padding="20">
+					<m:MaterialLabel text="Title - Card 1" fontSize="1.6em"/>
+					<m:MaterialPanel aspectRatio="16 / 9" backgroundColor="YELLOW_LIGHTEN_3" />
+					<m:MaterialLabel text="Medium length description with a few more words here." contentEditable="true"/>
+				</m:MaterialPanel>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+
+		<widget:CodeSection marginBottom="200" sectionTitle="Resizable and Content Editable" description="Make any Panel resizable using resize='BOTH' and editable content using contentEditable='true'">
+			<m:MaterialPanel width="600px" height="600px" backgroundColor="TEAL" display="GRID" placeItems="center"
+							 resize="BOTH" overflow="AUTO" textAlign="CENTER" layoutPosition="RELATIVE" depth="995" contentEditable="true">
+				<m:MaterialLabel text="Resize and edit this panel" fontSize="2em"/>
+			</m:MaterialPanel>
+		</widget:CodeSection>
+    </m:MaterialPanel>
+</ui:UiBinder>
diff --git a/...in/java/gmd/core/demo/client/application/page/layout/twelvecol/TwelveColLayoutModule.java b/...in/java/gmd/core/demo/client/application/page/layout/twelvecol/TwelveColLayoutModule.java
@@ -0,0 +1,30 @@
+/*
+ * #%L
+ * GwtMaterial
+ * %%
+ * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package gmd.core.demo.client.application.page.layout.twelvecol;
+
+import com.gwtplatform.mvp.client.gin.AbstractPresenterModule;
+
+public class TwelveColLayoutModule extends AbstractPresenterModule {
+    @Override
+    protected void configure() {
+        bindPresenter(TwelveColLayoutPresenter.class, TwelveColLayoutPresenter.MyView.class, TwelveColLayoutView.class,
+                TwelveColLayoutPresenter.MyProxy.class);
+    }
+}