From aeaa8ef8ffef7861e313b57717ee2ae22054d17e Mon Sep 17 00:00:00 2001 From: nekotoro Date: Fri, 21 Nov 2025 16:08:18 +0100 Subject: [PATCH] - Buttons changed to ToggleButtons --- src/components/CustomButton.hx | 46 ++++++++++++++++++ src/components/IconButton.hx | 46 ++++++++++++++++++ src/components/ToolBarToggleButton.hx | 68 +++++++++++++++++++++++++++ src/model/Constants.hx | 8 ++-- src/view/MainFooter.hx | 55 ++++++++++++---------- src/view/MainHeader.hx | 8 +++- src/view/MainPanel.hx | 4 +- 7 files changed, 202 insertions(+), 33 deletions(-) create mode 100644 src/components/CustomButton.hx create mode 100644 src/components/IconButton.hx create mode 100644 src/components/ToolBarToggleButton.hx diff --git a/src/components/CustomButton.hx b/src/components/CustomButton.hx new file mode 100644 index 0000000..99b7700 --- /dev/null +++ b/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; + } + + +} diff --git a/src/components/IconButton.hx b/src/components/IconButton.hx new file mode 100644 index 0000000..e3c066d --- /dev/null +++ b/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; + } + +} diff --git a/src/components/ToolBarToggleButton.hx b/src/components/ToolBarToggleButton.hx new file mode 100644 index 0000000..8fdb561 --- /dev/null +++ b/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); + } + +} diff --git a/src/model/Constants.hx b/src/model/Constants.hx index 042e601..f900ad1 100644 --- a/src/model/Constants.hx +++ b/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_SELECTED_STATE_COLOR:Int = 0xFF5F0F; - public static final BUTTON_DISABLED_STATE_COLOR:Int = 0x69808A; - public static final BUTTON_INVERTED_NORMAL_STATE_COLOR:Int = 0xECEFF0; + public static final BUTTON_UP_COLOR:Int = 0x050EB7; + public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F; + public static final BUTTON_DOWN_COLOR:Int = 0x69808A; + public static final BUTTON_INVERTED_UP_COLOR:Int = 0xECEFF0; // Fonts public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300"; diff --git a/src/view/MainFooter.hx b/src/view/MainFooter.hx index cb9e6d5..23c7092 100644 --- a/src/view/MainFooter.hx +++ b/src/view/MainFooter.hx @@ -1,45 +1,50 @@ package view; -import openfl.display.Stage; -import haxe.CallStack.StackItem; -import openfl.Assets; -import feathers.layout.HorizontalLayout; -import model.Constants; +import components.ToolBarToggleButton.ToolbarToggleButton; 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 sh:Int = stage.stageHeight; - final footerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO); - final footerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO); + 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); backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3); - //variant = LayoutGroup.VARIANT_TOOL_BAR; + // 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; + // Layout + layout = new HorizontalDistributedLayout(); - } + // 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()"); } -} \ No newline at end of file + private function onCreationComplete(event:FeathersEvent):Void { + traceBlue(this + " --> onCreationComplete()"); + } +} diff --git a/src/view/MainHeader.hx b/src/view/MainHeader.hx index 7bd3c2a..985bc88 100644 --- a/src/view/MainHeader.hx +++ b/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 diff --git a/src/view/MainPanel.hx b/src/view/MainPanel.hx index ef5e1e5..94dd749 100644 --- a/src/view/MainPanel.hx +++ b/src/view/MainPanel.hx @@ -26,8 +26,8 @@ class MainPanel extends Panel { mh = new MainHeader(); header = mh; - //mf = new MainFooter(); - //footer = mf; + mf = new MainFooter(); + footer = mf; } private function onCreationComplete(event:FeathersEvent):Void {