WIP - Symbols

Author: kevzlou7979

gwt-material/src/main/java/gwt/material/design/client/base/HasSymbols.java

@@ -0,0 +1,18 @@
+package gwt.material.design.client.base;
+
+import gwt.material.design.client.constants.SymbolType;
+
+public interface HasSymbols {
+
+    void setType(SymbolType type);
+
+    void setSymbol(String symbol);
+
+    void setFilled(boolean filled);
+
+    void setWeight(int weight);
+
+    void setGrade(int grade);
+
+    void setOpticalSize(int size);
+}

gwt-material/src/main/java/gwt/material/design/client/base/viewport/Resolution.java

@@ -22,15 +22,15 @@
 public enum Resolution implements Boundary {
     ALL_DEVICES(new WidthBoundary(0, 2560)),
     ALL_MOBILE(new WidthBoundary(0, 425)),
-    ALL_LAPTOP(new WidthBoundary(769, 2560)),
+    ALL_LAPTOP(new WidthBoundary(769, 25000)),
     MOBILE_SMALL(new WidthBoundary(0, 320)),
     MOBILE_MEDIUM(new WidthBoundary(321, 375)),
     MOBILE_LARGE(new WidthBoundary(376, 425)),
     TABLET(new WidthBoundary(426, 768)),
     TABLET_AND_MOBILE(new WidthBoundary(0, 768)),
     LAPTOP(new WidthBoundary(769, 1024)),
     LAPTOP_LARGE(new WidthBoundary(1025, 1440)),
-    LAPTOP_4K(new WidthBoundary(1441, 2560));
+    LAPTOP_4K(new WidthBoundary(1441, 25000));
 
     private final WidthBoundary boundary;
 

gwt-material/src/main/java/gwt/material/design/client/constants/SymbolType.java

@@ -0,0 +1,25 @@
+package gwt.material.design.client.constants;
+
+import gwt.material.design.client.base.helper.EnumHelper;
+
+public enum SymbolType implements CssType {
+
+    OUTLINED("material-symbols-outlined"),
+    ROUNDED("material-symbols-rounded"),
+    SHARP("material-symbols-sharp");
+
+    protected String name;
+
+    SymbolType(String name) {
+        this.name = name;
+    }
+
+    @Override
+    public String getCssName() {
+        return name;
+    }
+
+    public static SymbolType fromStyleName(final String styleName) {
+        return EnumHelper.fromStyleName(styleName, SymbolType.class, OUTLINED);
+    }
+}

gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSymbol.java

@@ -0,0 +1,80 @@
+package gwt.material.design.client.ui;
+
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.dom.client.LinkElement;
+import gwt.material.design.client.base.HasSymbols;
+import gwt.material.design.client.base.MaterialWidget;
+import gwt.material.design.client.base.mixin.CssNameMixin;
+import gwt.material.design.client.constants.SymbolType;
+import gwt.material.design.client.ui.html.Span;
+
+public class MaterialSymbol extends MaterialWidget implements HasSymbols {
+
+    static {
+        LinkElement linkElement = Document.get().createLinkElement();
+        linkElement.setRel("stylesheet");
+        linkElement.setHref("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
+        body().append(linkElement);
+    }
+
+    protected Span span = new Span();
+    protected CssNameMixin<Span, SymbolType> symbolTypeMixin;
+    protected boolean filled;
+    protected int weight = 400;
+    protected int grade = 0;
+    protected int opticalSize = 48;
+
+    public MaterialSymbol() {
+        super(Document.get().createElement("div"));
+        setType(SymbolType.OUTLINED);
+    }
+
+    @Override
+    protected void onLoad() {
+        super.onLoad();
+
+        load();
+        add(span);
+    }
+
+    @Override
+    public void setSymbol(String symbol) {
+        span.getElement().setInnerText(symbol);
+    }
+
+    @Override
+    public void setType(SymbolType type) {
+        getSymbolTypeMixin().setCssName(type);
+    }
+
+    @Override
+    public void setFilled(boolean filled) {
+        this.filled = filled;
+    }
+
+    @Override
+    public void setWeight(int weight) {
+        this.weight = weight;
+    }
+
+    @Override
+    public void setGrade(int grade) {
+        this.grade = grade;
+    }
+
+    @Override
+    public void setOpticalSize(int size) {
+        this.opticalSize = size;
+    }
+
+    protected void load() {
+        getElement().setAttribute("style", "font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;");
+    }
+
+    public CssNameMixin<Span, SymbolType> getSymbolTypeMixin() {
+        if (symbolTypeMixin == null) {
+            symbolTypeMixin = new CssNameMixin<>(span);
+        }
+        return symbolTypeMixin;
+    }
+}