Material Badge Update on Links

Author: kevzlou7979

src/main/java/gwt/material/design/client/ui/MaterialBadge.java

@@ -41,6 +41,18 @@ public MaterialBadge() {
 		this.addStyleName("badge");
 		this.addStyleName(MaterialResources.INSTANCE.materialcss().badge());
 	}
+	
+	
+
+	public MaterialBadge(String text, String color) {
+		setElement(DOM.createElement("SPAN"));
+		setText(text);
+		setColor(color);
+		this.addStyleName("badge");
+		this.addStyleName(MaterialResources.INSTANCE.materialcss().badge());
+	}
+
+
 
 	@UiChild(tagname = "child")
 	public void addWidget(final Widget item) {

src/main/java/gwt/material/design/client/ui/MaterialLink.java

@@ -24,6 +24,7 @@
 
 import com.google.gwt.dom.client.Style.Cursor;
 import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.uibinder.client.UiChild;
 import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.FocusPanel;
 import com.google.gwt.user.client.ui.HTMLPanel;
@@ -46,6 +47,7 @@ public class MaterialLink extends FocusPanel {
 	private Widget container;
 	private Anchor anchorElem;
 	private CustomIcon iconElem;
+	private MaterialBadge badge;
 
 	private boolean separator = false;
 	private boolean active = false;
@@ -146,11 +148,19 @@ public void generateLink() {
 			anchorElem.getElement().appendChild(iconElem.getElement());
 			iconElem.addStyleName(icon);
 		}
+		if(getBadge()!=null) anchorElem.getElement().appendChild(getBadge().getElement());
 		panel.add(anchorElem);
 		panel.getElement().getStyle().setCursor(Cursor.POINTER);
 		this.add(panel);
 	}
 
+	@UiChild(tagname = "badge")
+	public void addBadge(Widget w){
+		MaterialBadge badge = ((MaterialBadge)w) ;
+		badge.addStyleName("sideBarBadge");
+		setBadge(badge);
+	}
+	
 	public String getWave() {
 		return wave;
 	}
@@ -248,4 +258,13 @@ public void setIconElem(CustomIcon iconElem) {
 		this.iconElem = iconElem;
 	}
 
+	public MaterialBadge getBadge() {
+		return badge;
+	}
+
+	public void setBadge(MaterialBadge badge) {
+		this.badge = badge;
+	}
+
+
 }

src/main/java/gwt/material/design/client/ui/MaterialNavBar.java

@@ -26,6 +26,7 @@
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Display;
+import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.resources.client.ImageResource;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiChild;
@@ -239,6 +240,7 @@ public String getSideBarWidth() {
 	public void setSideBarWidth(String sideBarWidth) {
 		this.sideBarWidth = sideBarWidth;
 		mobileNav.setWidth(sideBarWidth + "px");
+		navBar.getElement().getStyle().setPaddingLeft(Double.parseDouble(sideBarWidth), Unit.PX);
 	}
 
 	public CustomHeader getNavBar() {

src/main/resources/gwt/material/design/client/resources/materialcss.gss

@@ -17,6 +17,7 @@
 }
 
 
+
 .sideBarProfile{
 	padding: 1%;
 	margin-left: -20px;

src/main/resources/gwt/material/design/public/css/overridecss.css

@@ -15,6 +15,7 @@
 	color: rgba(0, 0, 0, 0.87);
 }
 
+
 /**SCROLLSPY**/
 .table-of-contents a.active{
 	border-left: 2px solid #2196f3 !important;
@@ -89,6 +90,19 @@ ul.side-nav.fixed li:hover, ul.side-nav.fixed li.active {
 	}
 }
 
+.sideBarBadge{
+  height: 20px !important;
+  line-height: 0 !important;
+  padding: 10px !important;
+  color: #fff !important;
+  border-radius: 3px !important;
+  font-size: 0.7em !important;
+}
+ul.side-nav .sideBarBadge{
+  margin-top: 20px !important;
+}
+/** DROPDOWN **/
+
 .dropdown-content {
 	max-height: 70vh !important;
 }