From db50bec4145f0a5d2637b4d905ee4d043bfc8dcf Mon Sep 17 00:00:00 2001 From: nekotoro Date: Thu, 20 Nov 2025 16:02:35 +0100 Subject: [PATCH] NekoIconButton reshaping in progress... TODO : Is there a reason NekoIconButton heritates from Button Feathers component or not ? --- assets/vector/certificate_icon_black.svg | 1 + assets/vector/menu_icon_black.svg | 1 + assets/vector/rider_icon_black.svg | 1 + project.xml | 4 +- src/LPTCManager2026.hx | 1 - src/components/NekoIconButton.hx | 83 +++++++++++++++++++++--- src/model/Constants.hx | 9 +++ src/view/MainFooter.hx | 54 ++++++++++++--- src/view/MainHeader.hx | 10 ++- src/view/MainPanel.hx | 6 +- 10 files changed, 142 insertions(+), 28 deletions(-) create mode 100644 assets/vector/certificate_icon_black.svg create mode 100644 assets/vector/menu_icon_black.svg create mode 100644 assets/vector/rider_icon_black.svg diff --git a/assets/vector/certificate_icon_black.svg b/assets/vector/certificate_icon_black.svg new file mode 100644 index 0000000..37f7a81 --- /dev/null +++ b/assets/vector/certificate_icon_black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/vector/menu_icon_black.svg b/assets/vector/menu_icon_black.svg new file mode 100644 index 0000000..f7941c6 --- /dev/null +++ b/assets/vector/menu_icon_black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/vector/rider_icon_black.svg b/assets/vector/rider_icon_black.svg new file mode 100644 index 0000000..1dae38f --- /dev/null +++ b/assets/vector/rider_icon_black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/project.xml b/project.xml index 088335b..2a9cf7f 100644 --- a/project.xml +++ b/project.xml @@ -7,7 +7,7 @@ - @@ -19,6 +19,7 @@ + @@ -32,5 +33,6 @@ + \ No newline at end of file diff --git a/src/LPTCManager2026.hx b/src/LPTCManager2026.hx index a103ab6..1fd14b3 100644 --- a/src/LPTCManager2026.hx +++ b/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); diff --git a/src/components/NekoIconButton.hx b/src/components/NekoIconButton.hx index 57d56ba..bed730e 100644 --- a/src/components/NekoIconButton.hx +++ b/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) { - super(); + private var svgSkinPath:String; + 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); - backgroundSkin = bmp; - bmp.width = pWidth; - bmp.height = pHeight; - bmp.smoothing = true; + private var iconShape:Shape; + private var lb1:Label; + + public function new(pSvgSkinPath:String, + 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()"); } } diff --git a/src/model/Constants.hx b/src/model/Constants.hx index 20317b5..02394df 100644 --- a/src/model/Constants.hx +++ b/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() { } diff --git a/src/view/MainFooter.hx b/src/view/MainFooter.hx index 70011f4..08bb63f 100644 --- a/src/view/MainFooter.hx +++ b/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_COLOR2, - 0, - sh - footerHeight, - footerWidth, - footerHeight); - variant = LayoutGroup.VARIANT_TOOL_BAR; + backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3); + //variant = LayoutGroup.VARIANT_TOOL_BAR; + + // Layout settings + var l:HorizontalLayout = new HorizontalLayout(); + l.setPadding(footerWidth * .030); + 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 { diff --git a/src/view/MainHeader.hx b/src/view/MainHeader.hx index b5f4a0c..b05d313 100644 --- a/src/view/MainHeader.hx +++ b/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 { diff --git a/src/view/MainPanel.hx b/src/view/MainPanel.hx index 17a9789..94dd749 100644 --- a/src/view/MainPanel.hx +++ b/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 {