MXHX again

This commit is contained in:
2026-01-15 21:03:30 +01:00
parent 90fed49851
commit 4f047d2529
10 changed files with 2283 additions and 217 deletions
+3
View File
@@ -0,0 +1,3 @@
{
"haxe.configurations": []
}
Binary file not shown.
File diff suppressed because it is too large Load Diff
+3 -2
View File
@@ -7,9 +7,9 @@
<window allow-high-dpi="true"/>
<window fps="60"/>
<window fps="0" if="html5"/>
<window background="#7e746e"
<window background="#ffffff"
width="500"
height="800"
height="900"
orientation="portrait" />
<source path="src"/>
@@ -33,6 +33,7 @@
<font path="fonts/Montserrat/MontserratRegular400.ttf" id="MontserratRegular400" embed="true"/>
<font path="fonts/Montserrat/MontserratMedium500.ttf" id="MontserratMedium500" embed="true"/>
<font path="fonts/Montserrat/MontserratBold700.ttf" id="MontserratBold700" embed="true"/>
<font path="fonts/HighSpirited.ttf" id="HighSpirited" embed="true"/>
</assets>
<!-- copies data/Employees.xml to output -->
+30 -6
View File
@@ -5,12 +5,12 @@ import feathers.controls.LayoutGroup;
import t9.util.ColorTraces.*;
class VSpacer extends LayoutGroup {
public var spacerHeight(default, set):Int;
public var spacerColor(default, set):Int;
public var spacerAlpha(default, set):Float;
private var rs:RectangleSkin;
private var spacerHeight:Int;
private var spacerColor:Int;
private var spacerAlpha:Float;
public function new(pSpacerHeight:Int = 10, pSpacerColor:Int = 0xFFFFFF, pSpacerAlpha:Float = 0) {
public function new(?pSpacerHeight:Int = 10, ?pSpacerColor:Int = 0xFFFFFF, ?pSpacerAlpha:Float = 0) {
super();
spacerHeight = pSpacerHeight;
@@ -20,8 +20,32 @@ class VSpacer extends LayoutGroup {
override private function initialize():Void {
super.initialize();
draw();
}
var rs:RectangleSkin = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
function set_spacerHeight(pSpacerHeight:Int) {
spacerHeight = pSpacerHeight;
draw();
return spacerHeight;
}
function set_spacerColor(pSpacerColor:Int) {
spacerColor = pSpacerColor;
draw();
return spacerColor;
}
function set_spacerAlpha(pSpacerAlpha:Float) {
spacerAlpha = pSpacerAlpha;
draw();
return spacerAlpha;
}
private function draw() {
backgroundSkin = null;
rs = null;
rs = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
rs.height = spacerHeight;
backgroundSkin = rs;
}
+1
View File
@@ -33,6 +33,7 @@ class Constants {
public static final MONTSERRAT_REGULAR_400:String = "MontserratRegular400";
public static final MONTSERRAT_MEDIUM_500:String = "MontserratMedium500";
public static final MONTSERRAT_BOLD_700:String = "MontserratBold700";
public static final HIGH_SPIRITED:String = "HighSpirited";
// Fonts sizes
public static final FONT_SIZE_10:Int = 10;
+2 -2
View File
@@ -107,10 +107,10 @@ class LPTCTheme extends ClassVariantTheme {
downSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
button.setSkinForState(ButtonState.DOWN, downSkin);
var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR);
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.MAIN_COLOR3);
var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.ACCENT_COLOR2);
button.setTextFormatForState(ButtonState.DOWN, downFormat);
button.paddingLeft = button.paddingRight = 10;
-5
View File
@@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/mxhx" xmlns:f="https://ns.feathersui.com/mxhx">
<!-- <f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>-->
<f:Button text="{Date.now().toString()}" width="150" height="40" click="{trace('Hi!');}"/>
</f:LayoutGroup>
+9 -196
View File
@@ -1,49 +1,19 @@
package view;
import bindx.Bind;
import components.VSpacer;
import feathers.controls.AssetLoader;
import feathers.controls.Button;
import feathers.controls.ButtonState;
import feathers.controls.Drawer;
import feathers.controls.HProgressBar;
import feathers.controls.Label;
import feathers.controls.LayoutGroup;
import feathers.controls.ScrollContainer;
import feathers.core.PopUpManager;
import feathers.controls.Drawer;
import feathers.events.FeathersEvent;
import feathers.events.TriggerEvent;
import feathers.layout.VerticalLayout;
import feathers.skins.RectangleSkin;
import model.AppModelLocator;
import model.Constants;
import model.String.Strings;
import mxhx.macros.MXHXComponent;
import openfl.Assets;
import openfl.events.Event;
import openfl.text.TextFormat;
import openfl.utils.Function;
import t9.util.ColorTraces.*;
import ui.LPTCTheme;
import ui.SVGIconFactory;
import vo.RiderVO;
@:build(mxhx.macros.MXHXComponent.build())
class RiderCardDrawer extends Drawer {
public static final CLOSE:String = "close";
public static final OPEN:String = "open";
private var model:AppModelLocator;
// components
private var ppal:AssetLoader;
private var closeDrawerButton:Button;
private var firstNameLabel:Label;
private var nameLabel:Label;
private var creditLabel:Label;
private var creditProgressBar:HProgressBar;
private var removeOneCreditButton:Button;
private var lastLessonDateTextLabel:Label;
private var lastLessonDateValueLabel:Label;
private var appModel:AppModelLocator;
public function new() {
super();
@@ -53,7 +23,7 @@ class RiderCardDrawer extends Drawer {
override private function initialize():Void {
super.initialize();
model = AppModelLocator.getInstance();
appModel = AppModelLocator.getInstance();
overlaySkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
swipeCloseEnabled = true;
@@ -62,186 +32,29 @@ class RiderCardDrawer extends Drawer {
pullableEdge = TOP;
clickOverlayToClose = false;
// main Layout
var mainScrollContainer:ScrollContainer = new ScrollContainer();
mainScrollContainer.autoSizeMode = STAGE;
var mainVerticalLayout = new VerticalLayout();
mainVerticalLayout.paddingLeft = mainVerticalLayout.paddingRight = Constants.GLOBAL_PADDING;
// mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
mainVerticalLayout.horizontalAlign = JUSTIFY;
mainVerticalLayout.verticalAlign = TOP;
mainScrollContainer.layout = mainVerticalLayout;
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// close button
closeDrawerButton = new Button();
closeDrawerButton.text = "Close Drawer";
closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
closeDrawer();
});
mainScrollContainer.addChild(closeDrawerButton);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// profile picture
ppal = new AssetLoader();
// ppal.addEventListener(Event.COMPLETE, (e:Event) -> cast(e.currentTarget, AssetLoader).validateNow());
mainScrollContainer.addChild(ppal);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// ########################################################################## firstname & name labels group
// layout
var lg1:LayoutGroup = new LayoutGroup();
lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
var vl1:VerticalLayout = new VerticalLayout();
vl1.horizontalAlign = JUSTIFY;
lg1.layout = vl1;
mainScrollContainer.addChild(lg1);
// first name Label
firstNameLabel = new Label();
firstNameLabel.setPadding(0);
firstNameLabel.backgroundSkin = null;
firstNameLabel.embedFonts = true;
firstNameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
lg1.addChild(firstNameLabel);
// name Label
nameLabel = new Label();
nameLabel.setPadding(0);
nameLabel.backgroundSkin = null;
nameLabel.embedFonts = true;
nameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR2);
lg1.addChild(nameLabel);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// ########################################################################## Remaining credit label
creditLabel = new Label();
creditLabel.embedFonts = true;
creditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
mainScrollContainer.addChild(creditLabel);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// ########################################################################## credit progress bar
creditProgressBar = new HProgressBar(0, 0, 10);
mainScrollContainer.addChild(creditProgressBar);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// ########################################################################## Remove 1 credit button
removeOneCreditButton = new Button();
removeOneCreditButton.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
removeOneCreditButton.setIconForState(ButtonState.DOWN,
SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
removeOneCreditButton.text = Strings.RCD_S2;
removeOneCreditButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
traceRed("removeOneCredit()");
// this function will be exectuted when the user will click on the ConfirmationPanel's "confirm" button
var f:Function = function() {
trace("remove 1 credit to selected rider in model");
model.selectedRider.credit--;
}
PopUpManager.addPopUp(new ConfirmationPanel(Strings.CP_S2, Strings.CP_S3, f), parent, true, true);
});
mainScrollContainer.addChild(removeOneCreditButton);
// ##### SPACER
mainScrollContainer.addChild(new VSpacer(10));
// mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
// ########################################################################## rider basic infos group (lastLessonDate, age, level)
/*var lg2:LayoutGroup = new LayoutGroup();
lg2.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
var vl2:VerticalLayout = new VerticalLayout();
vl2.horizontalAlign = JUSTIFY;
lg2.layout = vl2;
mainScrollContainer.addChild(lg2);
lastLessonDateTextLabel = new Label();
lastLessonDateTextLabel.embedFonts = true;
lastLessonDateTextLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_12, Constants.MAIN_COLOR1);
lastLessonDateTextLabel.text = "Dernier cours";
lg2.addChild(lastLessonDateTextLabel);*/
/*var m = MXHXComponent.withMarkup('
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic" xmlns:f="https://ns.feathersui.com/mxhx">
<f:layout>
<f:HorizontalLayout gap="10" horizontalAlign="RIGHT"/>
</f:layout>
<f:Button id="okButton" text="OK"/>
<f:Button id="cancelButton" text="Cancel"/>
</f:LayoutGroup>
');*/
var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
mainScrollContainer.addChild(m);
//mainScrollContainer.addChild(m);
/*var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
mainScrollContainer.addChild(m);*/
drawer = mainScrollContainer;
}
private function onCreationComplete(e:FeathersEvent):Void {
traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
}
public function populateAndShow() {
// var rvo:RiderVO = model.selectedRider;
// profile picture
ppal.source = Constants.PROFIL_PICTURES_PATH_512 + model.selectedRider.uid + ".jpg";
// first name text input
firstNameLabel.text = model.selectedRider.firstName;
if (!firstNameLabel.hasEventListener(Event.CHANGE)) {
firstNameLabel.addEventListener(Event.CHANGE, (e) -> {
if (firstNameLabel.text != model.selectedRider.firstName) {
model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameLabel.text);
}
});
}
// name text input
nameLabel.text = model.selectedRider.name;
if (!nameLabel.hasEventListener(Event.CHANGE)) {
nameLabel.addEventListener(Event.CHANGE, (e) -> {
if (nameLabel.text != model.selectedRider.name) {
model.updateSelectedRiderProp(RiderVO.NAME, nameLabel.text);
}
});
}
// remaining credit label & progress bar
updateCreditUIElments(null, model.selectedRider.credit);
Bind.bind(model.selectedRider.credit, updateCreditUIElments);
ppal.source = Constants.PROFIL_PICTURES_PATH_512 + appModel.selectedRider.uid + ".jpg";
openDrawer();
}
// update remaining credit label and progress bar
private function updateCreditUIElments(pFromValue:Dynamic, pToValue:Dynamic) {
/*private function updateCreditUIElments(pFromValue:Dynamic, pToValue:Dynamic) {
creditLabel.text = Strings.RCD_S1 + Std.string(pToValue);
@@ -255,5 +68,5 @@ class RiderCardDrawer extends Drawer {
creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
}
creditProgressBar.value = pToValue;
}
}*/
}
+54
View File
@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="utf-8"?>
<f:Drawer xmlns:mx="https://ns.mxhx.dev/2024/mxhx"
xmlns:f="https://ns.feathersui.com/mxhx"
xmlns:components="components.*">
<f:ScrollContainer id="mainScrollContainer">
<f:layout>
<f:VerticalLayout horizontalAlign="JUSTIFY"
verticalAlign="TOP"
paddingLeft="{model.Constants.GLOBAL_PADDING}"
paddingTop="{model.Constants.GLOBAL_PADDING}"
paddingRight="{model.Constants.GLOBAL_PADDING}"
paddingBottom="{model.Constants.GLOBAL_PADDING}"
/>
</f:layout>
<f:Button id="closeDrawerButton" text="Close drawer" click="{closeDrawer();}"/>
<components:VSpacer/>
<!-- profile picture AssetLoader -->
<f:AssetLoader id="ppal"/>
<components:VSpacer/>
<!-- basic infos LayoutGroup -->
<f:LayoutGroup id="lg1" height="80">
<f:backgroundSkin>
<f:RectangleSkin>
<f:fill>
<f:FillStyle.SolidColor color="0xFF00FF" alpha="1"/>
</f:fill>
</f:RectangleSkin>
</f:backgroundSkin>
<f:layout>
<f:VerticalLayout horizontalAlign="JUSTIFY"/>
</f:layout>
<f:Label id="firstNameLabel"
text="Hello!"
paddingLeft="0"
paddingTop="0"
paddingRight="0"
paddingBottom="0"
embedFonts="true">
<f:textFormat>
<f:TextFormat font="{Assets.getFont(model.Constants.MONTSERRAT_BOLD_700).fontName}" size="{model.Constants.FONT_SIZE_26}" color="{model.Constants.MAIN_COLOR1}"/>
</f:textFormat>
</f:Label>
</f:LayoutGroup>
</f:ScrollContainer>
</f:Drawer>