NekoIconButton reshaping in progress...

TODO :
Is there a reason NekoIconButton heritates from Button Feathers component or not ?

assets/vector/certificate_icon_black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="certificate" d="M4,3c-1.11,0 -2,0.89 -2,2l0,10c0,1.097 0.903,2 2,2l8,0l0,5l3,-3l3,3l0,-5l2,0c1.097,0 2,-0.903 2,-2l0,-10c0,-1.097 -0.903,-2 -2,-2l-16,0m8,2l3,2l3,-2l0,3.5l3,1.5l-3,1.5l0,3.5l-3,-2l-3,2l0,-3.5l-3,-1.5l3,-1.5l0,-3.5m-8,0l5,0l0,2l-5,0l0,-2m0,4l3,0l0,2l-3,0l0,-2m0,4l5,0l0,2l-5,0l0,-2Z" style="fill-rule:nonzero;"/></svg>

assets/vector/menu_icon_black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path d="M3,6l18,0l0,2l-18,0l0,-2m0,5l18,0l0,2l-18,0l0,-2m0,5l18,0l0,2l-18,0l0,-2Z" style="fill-rule:nonzero;"/></svg>

assets/vector/rider_icon_black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="rider" d="M10,3.5c0,-0.83 0.67,-1.5 1.5,-1.5c0.83,0 1.5,0.67 1.5,1.5c0,0.83 -0.67,1.5 -1.5,1.5c-0.83,0 -1.5,-0.67 -1.5,-1.5m12,4.5l0,3.5l-1.03,0.35c-0.17,1.21 -1.21,2.15 -2.47,2.15l-0.08,0c-0.14,0.68 -0.47,1.29 -0.92,1.78l0,6.22l-2.5,0l0,-5l-0.25,0c-0.21,0 -0.42,-0.03 -0.62,-0.06l-4.44,-0.74l-1.12,2.01l0.75,3.79l-2.54,-0l-0.78,-3.75c-0.03,-0.3 0,-0.6 0.16,-0.86l1.02,-1.81c-0.98,-0.55 -1.65,-1.58 -1.68,-2.77c-0.04,0.15 -0.06,0.37 -0.03,0.69c0.03,0.44 0.14,1.09 0.07,1.81c-0.04,0.72 -0.37,1.46 -0.79,1.95c-0.43,0.49 -0.9,0.83 -1.4,1.09l-0.7,-0.7c0.19,-0.47 0.38,-0.89 0.42,-1.28c0.06,-0.37 -0.01,-0.67 -0.12,-0.94l-0.53,-1.13c-0.21,-0.51 -0.47,-1.25 -0.42,-2.12c0.03,-0.85 0.5,-1.96 1.39,-2.57c0.9,-0.61 1.87,-0.7 2.66,-0.53c0.5,0.1 1.01,0.34 1.45,0.68c0.37,-0.17 0.8,-0.26 1.25,-0.26l0.25,-0l0,-1.39c0,-1 0.68,-1.92 1.66,-2.08c1.26,-0.21 2.34,0.76 2.34,1.97l0,1.5l1.5,-0l0,-0.5c0,-2.21 1.79,-4 4,-4l3.5,-0l-0.89,1.34c0.54,0.36 0.89,0.97 0.89,1.66m-2,3.2l-1.04,-1.66c-0.13,-0.21 -0.46,-0.12 -0.46,0.13l0,3.33c0.83,-0 1.5,-0.67 1.5,-1.5l0,-0.3Z" style="fill-rule:nonzero;"/></svg>

project.xml

@@ -7,7 +7,7 @@
 	<window allow-high-dpi="true"/>
 	<window fps="60"/>
 	<window fps="0" if="html5"/>
-	<window background="#c8c1bd" 
+	<window background="#7e746e" 
 	width="500" 
 	height="800" 
 	orientation="portrait" />
@@ -19,6 +19,7 @@
 	<haxelib name="feathersui"/>
 	<haxelib name="feathersui-cairngorm"/>
 	<haxelib name="hx-color-trace"/>
+	<haxelib name="svg" />
 
 	<icon path="assets/icons/icon.svg"/>
 
@@ -32,5 +33,6 @@
 	<!-- copies data/Employees.xml to output -->
 	<assets path="assets/data" rename="data" embed="false"/>
 	<assets path="assets/bitmaps" rename="bitmaps" embed="true"/>
+	<assets path="assets/vector" rename="vector" embed="true"/>
 
 </project>

src/LPTCManager2026.hx

@@ -56,7 +56,6 @@ class LPTCManager2026 extends Application {
 		addChild(mainPanel);
 
 		dr = new NekoDrawer();
-		//dr.addEventListener(NekoDrawerEvent.STATUS_CHANGE, onDrawerStatusChange);
 		addChild(dr);
 
 		model.addEventListener(NekoDrawerEvent.DRAWER_STATE_CHANGE, onDrawerStateChange);

src/components/NekoIconButton.hx

@@ -1,20 +1,83 @@
 package components;
 
-import openfl.display.Bitmap;
-import openfl.display.BitmapData;
 import feathers.controls.Button;
+import feathers.controls.Label;
+import feathers.events.FeathersEvent;
+import format.SVG;
+import model.Constants;
+import openfl.Assets;
+import openfl.display.Shape;
+import openfl.geom.ColorTransform;
+import openfl.text.Font;
+import openfl.text.TextFormat;
 import t9.util.ColorTraces.*;
 
 class NekoIconButton extends Button {
-	private var bmp:Bitmap;
 
-	public function new(pSkin:BitmapData, pX:Int = 0, pY:Int = 0, pWidth:Int = 100, pHeight:Int = 100) {
+	private var svgSkinPath:String;
-		super();
+	private var w:Int;
+	private var h:Int;
+	private var normalStateColor:Int;
+	private var selectedStateColor:Int;
+	private var disabledStateColor:Int;
+	private var backgroundColor:Int;
+	private var t:String;
 
-		bmp = new Bitmap(pSkin);
+	private var iconShape:Shape;
-		backgroundSkin = bmp;
+	private var lb1:Label;
-		bmp.width = pWidth;
+
-		bmp.height = pHeight;
+	public function new(pSvgSkinPath:String, 
-		bmp.smoothing = true;
+						pWidth:Int = 100, 
+						pHeight:Int = 100, 
+						pNormalStateColor:Int = 0x000000, 
+						pSelectedStateColor:Int = 0xFF0000,
+						pDisabledStateColor:Int = 0xAAAAAA,
+						pBackgroundColor:Int = null,
+						pText:String = null) {
+						super();
+		
+		svgSkinPath = pSvgSkinPath;
+		w = pWidth;
+		h = pHeight;
+		normalStateColor = pNormalStateColor;
+		selectedStateColor = pSelectedStateColor;
+		disabledStateColor = pDisabledStateColor;
+		backgroundColor = pBackgroundColor;
+		t = pText;
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+		
+		if(pBackgroundColor == null){
+			backgroundSkin = new NekoRectangle(0xFF0000, 0, 0, pWidth, pHeight);
+			backgroundSkin.alpha = 0;
+		} else {
+			backgroundSkin = new NekoRectangle(pBackgroundColor, 0, 0, pWidth, pHeight);
+		}
+
+		iconShape = new Shape();
+		new SVG(pSvgSkinPath).render(iconShape.graphics);
+		iconShape.width = pWidth;
+		iconShape.height = pHeight;
+
+		var ct = new ColorTransform();
+		ct.color = pNormalStateColor;
+		iconShape.transform.colorTransform = ct;
+		addChild(iconShape);
+
+		if(pText != null){
+			lb1.text = Constants.MENU_ITEM_0_STRING;
+			lb1.embedFonts = true;
+			var fnt:Font = Assets.getFont(Constants.MONTSERRAT_LIGHT_300);
+			lb1.textFormat = new TextFormat(fnt.fontName, 20, Constants.BUTTON_NORMAL_STATE_COLOR);
+			addChild(lb1);
+		}
+	}
+
+	override private function initialize():Void {
+
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete()");
 	}
 }

src/model/Constants.hx

@@ -10,6 +10,11 @@ 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_SELECTED_STATE_COLOR:Int = 0xFF5F0F;
+    public static final BUTTON_DISABLED_STATE_COLOR:Int = 0x69808A;
+    public static final BUTTON_INVERTED_NORMAL_STATE_COLOR:Int = 0xECEFF0;
+
     // Fonts
     public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300";
     public static final MONTSERRAT_REGULAR_400:String = "MontserratRegular400";
@@ -20,6 +25,10 @@ class Constants {
     public static final MAIN_HEADER_WIDTH_RATIO:Float = 1;
     public static final MAIN_HEADER_HEIGHT_RATIO:Float = 0.1;
 
+    // Strings
+    public static final MENU_ITEM_0_STRING:String = "Cavalier·e·s";
+    public static final MENU_ITEM_1_STRING:String = "Licences FFE";
+
     private function new() {
         
     }

src/view/MainFooter.hx

@@ -1,5 +1,10 @@
 package view;
 
+import openfl.display.Stage;
+import haxe.CallStack.StackItem;
+import openfl.Assets;
+import components.NekoIconButton;
+import feathers.layout.HorizontalLayout;
 import model.Constants;
 import components.NekoRectangle;
 import feathers.events.FeathersEvent;
@@ -8,26 +13,55 @@ import t9.util.ColorTraces.*;
 
 class MainFooter extends LayoutGroup {
 
-    public function new() {
+  private var ridersButton:NekoIconButton;
+  private var ffeLicencesButton:NekoIconButton;
+
+  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 sh:Int = stage.stageHeight;
         final footerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
         final footerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
 
-        autoSizeMode = CONTENT;
+		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
-		backgroundSkin = new NekoRectangle( Constants.MAIN_COLOR2, 
+		//variant = LayoutGroup.VARIANT_TOOL_BAR;
-                                            0, 
+
-                                            sh - footerHeight, 
+    // Layout settings
-                                            footerWidth, 
+		var l:HorizontalLayout = new HorizontalLayout();
-                                            footerHeight);
+    l.setPadding(footerWidth * .030);
-		variant = LayoutGroup.VARIANT_TOOL_BAR;
+    l.gap = footerWidth * .4;
+    l.horizontalAlign = CENTER;
+    l.verticalAlign = MIDDLE;
+    layout = l;
+
+    // Drawer button
+		ridersButton = new NekoIconButton(Assets.getText("vector/rider_icon_black.svg"), 
+                                      40, 
+                                      40, 
+                                      Constants.BUTTON_NORMAL_STATE_COLOR,
+                                      Constants.BUTTON_SELECTED_STATE_COLOR,
+                                      Constants.BUTTON_DISABLED_STATE_COLOR,
+                                      Constants.MENU_ITEM_0_STRING);
+		//ridersButton.addEventListener(TriggerEvent.TRIGGER, onRidersBtnPress);
+		addChild(ridersButton);
+
+    // Drawer button
+		ffeLicencesButton = new NekoIconButton(Assets.getText("vector/certificate_icon_black.svg"),
+                                           40, 
+                                           40, 
+                                           Constants.BUTTON_NORMAL_STATE_COLOR,
+                                           Constants.BUTTON_SELECTED_STATE_COLOR,
+                                           Constants.BUTTON_DISABLED_STATE_COLOR,
+                                           Constants.MENU_ITEM_1_STRING);
+		//ffeLicencesButton.addEventListener(TriggerEvent.TRIGGER, onFfeLicencesButtonPress);
+		addChild(ffeLicencesButton);
+
     }
 
     private function onCreationComplete(event:FeathersEvent):Void {

src/view/MainHeader.hx

@@ -47,10 +47,14 @@ class MainHeader extends LayoutGroup {
 		var l:HorizontalLayout = new HorizontalLayout();
         l.paddingLeft = l.paddingRight = Std.int(headerHeight * .3);
         l.paddingTop = l.paddingBottom = Std.int(headerHeight * .2);
+		l.verticalAlign = MIDDLE;
         layout = l;
 		
 		// Drawer button
-		drawerBtn = new NekoIconButton(Assets.getBitmapData("bitmaps/menu_white.png"), 0, 0, Std.int(headerHeight * .5), Std.int(headerHeight * .5));
+		drawerBtn = new NekoIconButton(Assets.getText("vector/menu_icon_black.svg"), 
+										Std.int(headerHeight * .5), 
+										Std.int(headerHeight * .5), 
+										Constants.BUTTON_INVERTED_NORMAL_STATE_COLOR);
 		drawerBtn.addEventListener(TriggerEvent.TRIGGER, onDBtnPress);
 		addChild(drawerBtn);
 
@@ -60,12 +64,12 @@ class MainHeader extends LayoutGroup {
         //lb1.backgroundSkin = new NekoRectangle(Constants.ACCENT_COLOR2);
 
 		//lb1.verticalAlign = VerticalAlign.TOP;
-		lb1.text = "Cavalier·e·s";
+		lb1.text = Constants.MENU_ITEM_0_STRING;
 		lb1.embedFonts = true;
 		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
 		
 		lb1.textFormat = new TextFormat(fnt.fontName, Std.int(headerHeight * .4), Constants.MAIN_COLOR3);
-		//addChild(lb1);
+		addChild(lb1);
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {

src/view/MainPanel.hx

@@ -21,13 +21,13 @@ class MainPanel extends Panel {
 		super.initialize();
 
 		autoSizeMode = STAGE;
-		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
+		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR2);
 
 		mh = new MainHeader();
-		addChild(mh);
+		header = mh;
 
 		mf = new MainFooter();
-		addChild(mf);
+		footer = mf;
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {