- GLobal styling with LPTCTheme class

- SVGIconFactory

assets/vector/ticket_icon_black.svg

@@ -0,0 +1,10 @@
+<?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;">
+    <g id="rectangle-with-no-fill---no-border" serif:id="rectangle with no fill &amp; no border" transform="matrix(4.51012,0,0,4,-12.0809,-10)">
+        <rect x="2.679" y="2.5" width="5.321" height="6" style="fill:none;"/>
+    </g>
+    <g id="ticket-1" serif:id="ticket 1" transform="matrix(1,0,0,1,0,-0.5)">
+        <path d="M2,5L22,5L22,20L2,20L2,5ZM20,18L20,7L4,7L4,18L20,18ZM17,8C17,9.097 17.903,10 19,10L19,15C17.903,15 17,15.903 17,17L7,17C7,15.903 6.097,15 5,15L5,10C6.097,10 7,9.097 7,8L17,8ZM11.516,10.48L11.516,15.61L12.596,15.61L12.596,9.238L11.615,9.238L9.689,10.84L10.319,11.587L11.516,10.48Z"/>
+    </g>
+</svg>

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();
 	}
 

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);

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 S1:String = "Cavalier·e·s";
-    public static final MENU_ITEM_1_STRING:String = "Licences FFE";
+    public static final S2:String = "Licences FFE";
-    public static final RIDERS_LIST_CREDIT_TEXT:String = "Crédit: ";
+    public static final S3:String = "Crédit: ";
-    public static final RIDER_CARD_REMAIN_CREDIT_TEXT:String = "Cours restants sur la carte : ";
+    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;
 
 }

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 {
+    }
+}

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;
+
+	}
+}

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);
 
 	}

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);

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);
 	}
 }

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 {