- Buttons changed to ToggleButtons

src/components/CustomButton.hx

@@ -0,0 +1,46 @@
+package components;
+
+import feathers.controls.ButtonState;
+import openfl.text.TextFormat;
+import model.Constants;
+import openfl.utils.Assets;
+import openfl.text.Font;
+import openfl.geom.ColorTransform;
+import openfl.display.Shape;
+import format.SVG;
+import feathers.controls.Button;
+
+class CustomButton extends Button {
+
+    private var svgIconPath:String;
+    private var svgIcon:Shape;
+    private var upStateColor:Int;
+
+	public function new(pSvgIconPath:String = null, pUpstateColor:Int = 0x000000) {
+		super();
+
+        svgIconPath = pSvgIconPath;
+        upStateColor = pUpstateColor;
+	}
+
+    override private function initialize():Void {
+        super.initialize();
+
+        //iconPosition = TOP;
+        embedFonts = true;
+        backgroundSkin = new NekoRectangle(upStateColor);
+        backgroundSkin.alpha = 0;
+
+        var fnt:Font = Assets.getFont(Constants.MONTSERRAT_LIGHT_300);
+		textFormat = new TextFormat(fnt.fontName, 20, Constants.BUTTON_UP_COLOR);
+
+        svgIcon = new Shape();
+        var ct = new ColorTransform();
+		ct.color = 0xFFFFFF;
+		svgIcon.transform.colorTransform = ct;
+		new SVG(svgIconPath).render(svgIcon.graphics);
+		icon = svgIcon;
+    }
+
+    
+}

src/components/IconButton.hx

@@ -0,0 +1,46 @@
+package components;
+
+import feathers.controls.Button;
+import format.SVG;
+import openfl.display.Bitmap;
+import openfl.display.BitmapData;
+import openfl.display.Shape;
+import openfl.geom.ColorTransform;
+
+class IconButton extends Button {
+
+    private var svgIconPath:String;
+    private var svgIcon:Shape;
+    private var upColor:Int;
+
+	public function new(pSvgIconPath:String = null, pUpColor:Int = 0x000000) {
+		super();
+
+        svgIconPath = pSvgIconPath;
+        upColor = pUpColor;
+	}
+
+    override private function initialize():Void {
+        super.initialize();
+
+        iconPosition = TOP;
+        backgroundSkin = new Bitmap(new BitmapData(10, 10, true, 0xFF00FF));
+
+        // icon
+        if(svgIconPath != null){
+            svgIcon = new Shape();
+            colorizeSvgIcon(upColor);
+            new SVG(svgIconPath).render(svgIcon.graphics);
+            icon = svgIcon;
+            icon.width = icon.height = 40;
+        }
+    }
+
+    private function colorizeSvgIcon(pColor:Int) {
+        
+        var ct = new ColorTransform();
+        ct.color = pColor;
+        svgIcon.transform.colorTransform = ct;
+    }
+
+}

src/components/ToolBarToggleButton.hx

@@ -0,0 +1,68 @@
+package components;
+
+import feathers.controls.ToggleButton;
+import feathers.text.TextFormat;
+import format.SVG;
+import model.Constants;
+import openfl.display.Bitmap;
+import openfl.display.BitmapData;
+import openfl.display.Shape;
+import openfl.events.Event;
+import openfl.geom.ColorTransform;
+import openfl.text.Font;
+import openfl.utils.Assets;
+
+class ToolbarToggleButton extends ToggleButton {
+
+    private var svgIconPath:String;
+    private var svgIcon:Shape;
+    private var unselectedColor:Int;
+    private var selectedColor:Int;
+
+	public function new(pSvgIconPath:String = null, pUnselectedColor:Int = 0x00FF00, pSelectedColor:Int = 0x000000) {
+		super();
+
+        svgIconPath = pSvgIconPath;
+        unselectedColor = pSelectedColor;
+        selectedColor = pUnselectedColor;
+	}
+
+    override private function initialize():Void {
+        super.initialize();
+
+        iconPosition = TOP;
+        embedFonts = true;
+        backgroundSkin = new Bitmap(new BitmapData(10, 10, true, 0xFF00FF));
+
+        // icon
+        if(svgIconPath != null){
+            svgIcon = new Shape();
+            colorizeIcon(unselectedColor);
+            new SVG(svgIconPath).render(svgIcon.graphics);
+            icon = svgIcon;
+            icon.width = icon.height = 40;
+
+            iconOffsetY = 0;
+        }
+        
+        // text
+        var fnt:Font = Assets.getFont(Constants.MONTSERRAT_REGULAR_400);
+        textFormat = new TextFormat(fnt.fontName, 16, unselectedColor);
+        selectedTextFormat = new TextFormat(fnt.fontName, 16, selectedColor);
+
+        addEventListener(Event.CHANGE, onButtonStateChange);
+
+    }
+
+    private function colorizeIcon(pColor:Int) {
+        
+        var ct = new ColorTransform();
+        ct.color = pColor;
+        svgIcon.transform.colorTransform = ct;
+    }
+
+    private function onButtonStateChange(e:Event):Void {
+        selected ? colorizeIcon(selectedColor) : colorizeIcon(unselectedColor);
+    }
+
+}

src/model/Constants.hx

@@ -10,10 +10,10 @@ class Constants {
     public static final MAIN_COLOR2:Int = 0x69808A;
     public static final MAIN_COLOR3:Int = 0xECEFF0;
 
-    public static final BUTTON_NORMAL_STATE_COLOR:Int = 0x050EB7;
+    public static final BUTTON_UP_COLOR:Int = 0x050EB7;
-    public static final BUTTON_SELECTED_STATE_COLOR:Int = 0xFF5F0F;
+    public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F;
-    public static final BUTTON_DISABLED_STATE_COLOR:Int = 0x69808A;
+    public static final BUTTON_DOWN_COLOR:Int = 0x69808A;
-    public static final BUTTON_INVERTED_NORMAL_STATE_COLOR:Int = 0xECEFF0;
+    public static final BUTTON_INVERTED_UP_COLOR:Int = 0xECEFF0;
 
     // Fonts
     public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300";

src/view/MainFooter.hx

@@ -1,45 +1,50 @@
 package view;
 
-import openfl.display.Stage;
+import components.ToolBarToggleButton.ToolbarToggleButton;
-import haxe.CallStack.StackItem;
-import openfl.Assets;
-import feathers.layout.HorizontalLayout;
-import model.Constants;
 import components.NekoRectangle;
-import feathers.events.FeathersEvent;
 import feathers.controls.LayoutGroup;
+import feathers.events.FeathersEvent;
+import feathers.layout.HorizontalDistributedLayout;
+import model.Constants;
+import openfl.Assets;
 import t9.util.ColorTraces.*;
 
 class MainFooter extends LayoutGroup {
 
-  public function new() {
+  private var btn1:ToolbarToggleButton;
+  private var btn2:ToolbarToggleButton;
+
+	public function new() {
 		super();
 
-    addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
 	}
 
-  override private function initialize():Void {
+	override private function initialize():Void {
 		super.initialize();
-        final sw:Int = stage.stageWidth;
+		final sw:Int = stage.stageWidth;
-        final sh:Int = stage.stageHeight;
+		final sh:Int = stage.stageHeight;
-        final footerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
+		final footerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
-        final footerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
+		final footerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
 
 		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
-		//variant = LayoutGroup.VARIANT_TOOL_BAR;
+		// variant = LayoutGroup.VARIANT_TOOL_BAR;
 
-    // Layout settings
+		// Layout
-		var l:HorizontalLayout = new HorizontalLayout();
+		layout = new HorizontalDistributedLayout();
-    l.setPadding(footerWidth * .030);
-    l.gap = footerWidth * .4;
-    l.horizontalAlign = CENTER;
-    l.verticalAlign = MIDDLE;
-    layout = l;
 
-    }
+    // Buttons
+		btn1 = new ToolbarToggleButton(Assets.getText("vector/rider_icon_black.svg"), Constants.MAIN_COLOR2, Constants.HERO_COLOR);
+		btn1.text = Constants.MENU_ITEM_0_STRING;
+    addChild(btn1);
+
+    btn2 = new ToolbarToggleButton(Assets.getText("vector/certificate_icon_black.svg"), Constants.MAIN_COLOR2, Constants.HERO_COLOR);
+		btn2.text  = Constants.MENU_ITEM_1_STRING;
+    addChild(btn2);
 
-    private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete()");
 	}
 
-}
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete()");
+	}
+}

src/view/MainHeader.hx

@@ -1,9 +1,10 @@
 package view;
 
-import control.AppController;
 import com.adobe.cairngorm.control.CairngormEvent;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
+import components.IconButton;
 import components.NekoRectangle;
+import control.AppController;
 import feathers.controls.Button;
 import feathers.controls.Label;
 import feathers.controls.LayoutGroup;
@@ -51,7 +52,10 @@ class MainHeader extends LayoutGroup {
         layout = l;
 		
 		// Menu button
-		btn1 = new Button("menu", onMenuButtonPress);
+		var svgIconString:String = Assets.getText("vector/menu_icon_black.svg");
+		btn1 = new IconButton(svgIconString, Constants.MAIN_COLOR3);
+
+		btn1.addEventListener(TriggerEvent.TRIGGER, onMenuButtonPress);
 		addChild(btn1);
 		
         // Title label

src/view/MainPanel.hx

@@ -26,8 +26,8 @@ class MainPanel extends Panel {
 		mh = new MainHeader();
 		header = mh;
 
-		//mf = new MainFooter();
+		mf = new MainFooter();
-		//footer = mf;
+		footer = mf;
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {