From 9c3e0c85c852bde61586784bde0bac5411729682 Mon Sep 17 00:00:00 2001 From: nekotoro Date: Sat, 20 Dec 2025 15:41:16 +0100 Subject: [PATCH] - GLobal styling with LPTCTheme class - SVGIconFactory --- assets/bitmaps/{ => icons}/menu_black.png | Bin assets/bitmaps/{ => icons}/menu_white.png | Bin assets/bitmaps/icons/ticket_icon_blue_128.png | Bin 0 -> 2923 bytes .../bitmaps/icons/ticket_icon_white_128.png | Bin 0 -> 2920 bytes assets/vector/ticket_icon_black.svg | 10 +++ src/LPTCManager2026.hx | 4 +- src/components/RidersListRendererAccessory.hx | 2 +- src/model/Constants.hx | 10 ++- src/ui/LPTCTheme.hx | 74 ++++++++++++++++++ src/ui/SVGIconFactory.hx | 24 ++++++ src/view/MainFooter.hx | 4 +- src/view/MainHeader.hx | 2 +- src/view/RiderCardDrawer.hx | 20 ++++- src/view/RidersList.hx | 2 +- 14 files changed, 139 insertions(+), 13 deletions(-) rename assets/bitmaps/{ => icons}/menu_black.png (100%) rename assets/bitmaps/{ => icons}/menu_white.png (100%) create mode 100644 assets/bitmaps/icons/ticket_icon_blue_128.png create mode 100644 assets/bitmaps/icons/ticket_icon_white_128.png create mode 100644 assets/vector/ticket_icon_black.svg create mode 100644 src/ui/LPTCTheme.hx create mode 100644 src/ui/SVGIconFactory.hx diff --git a/assets/bitmaps/menu_black.png b/assets/bitmaps/icons/menu_black.png similarity index 100% rename from assets/bitmaps/menu_black.png rename to assets/bitmaps/icons/menu_black.png diff --git a/assets/bitmaps/menu_white.png b/assets/bitmaps/icons/menu_white.png similarity index 100% rename from assets/bitmaps/menu_white.png rename to assets/bitmaps/icons/menu_white.png diff --git a/assets/bitmaps/icons/ticket_icon_blue_128.png b/assets/bitmaps/icons/ticket_icon_blue_128.png new file mode 100644 index 0000000000000000000000000000000000000000..1a0eb4d55af9764722e009efc43a850bac5e9693 GIT binary patch literal 2923 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 literal 0 HcmV?d00001 diff --git a/assets/vector/ticket_icon_black.svg b/assets/vector/ticket_icon_black.svg new file mode 100644 index 0000000..600a70d --- /dev/null +++ b/assets/vector/ticket_icon_black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/LPTCManager2026.hx b/src/LPTCManager2026.hx index 8792011..746ebd4 100644 --- a/src/LPTCManager2026.hx +++ b/src/LPTCManager2026.hx @@ -1,3 +1,5 @@ +import ui.LPTCTheme; +import feathers.style.Theme; import hx.strings.RandomStrings; import utils.StringUtils; import view.RiderCardDrawer; @@ -24,6 +26,7 @@ class LPTCManager2026 extends Application { private var rcd:RiderCardDrawer; public function new() { + Theme.setTheme(new LPTCTheme()); super(); model = AppModelLocator.getInstance(); @@ -66,7 +69,6 @@ class LPTCManager2026 extends Application { } private function onRiderSelectChange(event:Event):Void { - trace(this + " --> onRiderSelectChange()"); rcd.populateAndShow(); } diff --git a/src/components/RidersListRendererAccessory.hx b/src/components/RidersListRendererAccessory.hx index 560951e..a0b45d4 100644 --- a/src/components/RidersListRendererAccessory.hx +++ b/src/components/RidersListRendererAccessory.hx @@ -50,7 +50,7 @@ class RidersListRendererAccessory extends LayoutGroup { iconColor = Constants.INFO; } - lbl1.text = Constants.RIDERS_LIST_CREDIT_TEXT + Std.string(riderCredit); + lbl1.text = Constants.S3 + Std.string(riderCredit); lbl1.embedFonts = true; lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1); addChild(lbl1); diff --git a/src/model/Constants.hx b/src/model/Constants.hx index 5b96da6..94339fb 100644 --- a/src/model/Constants.hx +++ b/src/model/Constants.hx @@ -52,13 +52,15 @@ class Constants { public static final DRAWER_IS_OPEN:Bool = false; // Text Strings - public static final MENU_ITEM_0_STRING:String = "Cavalier·e·s"; - public static final MENU_ITEM_1_STRING:String = "Licences FFE"; - public static final RIDERS_LIST_CREDIT_TEXT:String = "Crédit: "; - public static final RIDER_CARD_REMAIN_CREDIT_TEXT:String = "Cours restants sur la carte : "; + public static final S1:String = "Cavalier·e·s"; + public static final S2:String = "Licences FFE"; + public static final S3:String = "Crédit: "; + public static final S4:String = "Cours restants sur la carte : "; + public static final S5:String = "Décompter un cours"; // UI // number of rows in RidersList public static final RIDERS_LIST_ROWS_COUNT:Int = 8; + public static final BUTTONS_ICON_SIZE:Int = 32; } \ No newline at end of file diff --git a/src/ui/LPTCTheme.hx b/src/ui/LPTCTheme.hx new file mode 100644 index 0000000..d2825d9 --- /dev/null +++ b/src/ui/LPTCTheme.hx @@ -0,0 +1,74 @@ +package ui; + +import openfl.Assets; +import model.Constants; +import feathers.text.TextFormat; +import feathers.controls.ButtonState; +import feathers.skins.RectangleSkin; +import feathers.controls.Button; +import feathers.themes.ClassVariantTheme; + +class LPTCTheme extends ClassVariantTheme { + + public static final VARIANT_WHITE:String = "whiteButton"; + public static final VARIANT_RED:String = "redButton"; + + public function new() { + super(); + + initialize(); + } + + private function initialize():Void { + styleProvider.setStyleFunction(Button, null, setButtonStyles); + styleProvider.setStyleFunction(Button, LPTCTheme.VARIANT_WHITE, setWhiteButtonStyles); + styleProvider.setStyleFunction(Button, LPTCTheme.VARIANT_RED, setRedButtonStyles); + } + + private function setButtonStyles(button:Button):Void { + var backgroundSkin = new RectangleSkin(); + backgroundSkin.border = SolidColor(1.0, Constants.HERO_COLOR); + backgroundSkin.fill = SolidColor(Constants.HERO_COLOR); + backgroundSkin.cornerRadius = 6.0; + button.backgroundSkin = backgroundSkin; + + var downSkin = new RectangleSkin(); + downSkin.border = SolidColor(1.0, Constants.HERO_COLOR); + downSkin.fill = SolidColor(Constants.MAIN_COLOR3); + downSkin.cornerRadius = 6.0; + button.setSkinForState(ButtonState.DOWN, downSkin); + + var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3); + button.textFormat = format; + + var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR); + button.setTextFormatForState(ButtonState.DOWN, downFormat); + + button.setPadding(10); + } + + private function setWhiteButtonStyles(button:Button):Void { + var backgroundSkin = new RectangleSkin(); + backgroundSkin.border = SolidColor(1.0, Constants.HERO_COLOR); + backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR3); + backgroundSkin.cornerRadius = 6.0; + button.backgroundSkin = backgroundSkin; + + var downSkin = new RectangleSkin(); + downSkin.border = SolidColor(1.0, Constants.HERO_COLOR); + downSkin.fill = SolidColor(Constants.HERO_COLOR); + downSkin.cornerRadius = 6.0; + button.setSkinForState(ButtonState.DOWN, downSkin); + + var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR); + button.textFormat = format; + + var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3); + button.setTextFormatForState(ButtonState.DOWN, downFormat); + + button.setPadding(10); + } + + private function setRedButtonStyles(button:Button):Void { + } +} diff --git a/src/ui/SVGIconFactory.hx b/src/ui/SVGIconFactory.hx new file mode 100644 index 0000000..0e04708 --- /dev/null +++ b/src/ui/SVGIconFactory.hx @@ -0,0 +1,24 @@ +package ui; + +import openfl.Assets; +import openfl.geom.ColorTransform; +import format.SVG; +import openfl.display.Shape; + +class SVGIconFactory { + public static function makeIcon(pSvgIconPath:String = null, pIconSize:Int = 64, pIconColor:Int = 0x000000):Shape { + // icon + + var svgIcon:Shape = new Shape(); + new SVG(Assets.getText(pSvgIconPath)).render(svgIcon.graphics); + + var ct = new ColorTransform(); + ct.color = pIconColor; + svgIcon.transform.colorTransform = ct; + + svgIcon.width = svgIcon.height = pIconSize; + + return svgIcon; + + } +} diff --git a/src/view/MainFooter.hx b/src/view/MainFooter.hx index 0b3791a..c17e2a7 100644 --- a/src/view/MainFooter.hx +++ b/src/view/MainFooter.hx @@ -37,7 +37,7 @@ class MainFooter extends LayoutGroup { Constants.HERO_COLOR, 30, Constants.FONT_SIZE_14); - btn1.text = Constants.MENU_ITEM_0_STRING; + btn1.text = Constants.S1; addChild(btn1); btn2 = new ToolbarToggleButton(Assets.getText("vector/certificate_icon_black.svg"), @@ -45,7 +45,7 @@ class MainFooter extends LayoutGroup { Constants.HERO_COLOR, 30, Constants.FONT_SIZE_14); - btn2.text = Constants.MENU_ITEM_1_STRING; + btn2.text = Constants.S2; addChild(btn2); } diff --git a/src/view/MainHeader.hx b/src/view/MainHeader.hx index 10f48ba..a2f34d1 100644 --- a/src/view/MainHeader.hx +++ b/src/view/MainHeader.hx @@ -61,7 +61,7 @@ class MainHeader extends LayoutGroup { // Title label lbl1 = new Label(); - lbl1.text = Constants.MENU_ITEM_0_STRING; + lbl1.text = Constants.S1; lbl1.embedFonts = true; lbl1.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR3); addChild(lbl1); diff --git a/src/view/RiderCardDrawer.hx b/src/view/RiderCardDrawer.hx index 74d4745..9eb5a76 100644 --- a/src/view/RiderCardDrawer.hx +++ b/src/view/RiderCardDrawer.hx @@ -1,5 +1,9 @@ package view; +import ui.SVGIconFactory; +import feathers.controls.ButtonState; +import openfl.display.Bitmap; +import ui.LPTCTheme; import feathers.controls.Label; import feathers.controls.AssetLoader; import feathers.controls.Button; @@ -27,10 +31,11 @@ class RiderCardDrawer extends Drawer { // components private var ppal:AssetLoader; + private var closeDrawerButton:Button; private var firstNameTextInput:TextInput; private var nameTextInput:TextInput; private var remainingCreditLabel:Label; - private var closeDrawerButton:Button; + private var removeOneCredit:Button; public function new() { super(); @@ -104,6 +109,16 @@ class RiderCardDrawer extends Drawer { remainingCreditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1); mainLaytoutGroup.addChild(remainingCreditLabel); + // ########################################################################## Remove 1 credit button + removeOneCredit = new Button(); + removeOneCredit.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3); + removeOneCredit.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR)); + removeOneCredit.text = Constants.S5; + removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> { + traceRed("removeOneCredit()"); + }); + mainLaytoutGroup.addChild(removeOneCredit); + drawer = mainLaytoutGroup; } @@ -139,7 +154,7 @@ class RiderCardDrawer extends Drawer { } // remaing credit text - remainingCreditLabel.text = Constants.RIDER_CARD_REMAIN_CREDIT_TEXT + Std.string(rvo.credit); + remainingCreditLabel.text = Constants.S4 + Std.string(rvo.credit); openDrawer(); } @@ -148,6 +163,5 @@ class RiderCardDrawer extends Drawer { var rvo:RiderVO = model.selectedRider; var al:AssetLoader = cast(e.currentTarget, AssetLoader); al.validateNow(); - traceGreen(al.width + " / " + al.height); } } diff --git a/src/view/RidersList.hx b/src/view/RidersList.hx index 0c55000..3f549e2 100644 --- a/src/view/RidersList.hx +++ b/src/view/RidersList.hx @@ -88,7 +88,7 @@ class RidersList extends ListView { /*itemToText = function(item:Dynamic):String { return item.firstName; };*/ - traceGreen(this + " --> onRideListDpChange() - w: " + width + " h: " + height); + traceGreen(this + " --> onRideListDpChange()"); } function onRiderSelect(e:ListViewEvent):Void {