MXHX again
This commit is contained in:
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"haxe.configurations": []
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
+3
-2
@@ -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 -->
|
||||
|
||||
+36
-12
@@ -5,24 +5,48 @@ 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;
|
||||
spacerColor = pSpacerColor;
|
||||
spacerAlpha = pSpacerAlpha;
|
||||
spacerHeight = pSpacerHeight;
|
||||
spacerColor = pSpacerColor;
|
||||
spacerAlpha = pSpacerAlpha;
|
||||
}
|
||||
|
||||
override private function initialize():Void {
|
||||
super.initialize();
|
||||
draw();
|
||||
}
|
||||
|
||||
var rs:RectangleSkin = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
|
||||
rs.height = spacerHeight;
|
||||
backgroundSkin = rs;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
@@ -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;
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user