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 0000000..1a0eb4d Binary files /dev/null and b/assets/bitmaps/icons/ticket_icon_blue_128.png differ diff --git a/assets/bitmaps/icons/ticket_icon_white_128.png b/assets/bitmaps/icons/ticket_icon_white_128.png new file mode 100644 index 0000000..e417a8f Binary files /dev/null and b/assets/bitmaps/icons/ticket_icon_white_128.png differ 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 {