Avatar, RiderListeRendererDecoration, RiderList refactoring in progress...

src/components/RidersListRendererDecoration.hx

@@ -0,0 +1,53 @@
+package components;
+
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import openfl.display.Shape;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+
+class RidersListRendererDecoration extends LayoutGroup {
+	public function new() {
+		super();
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        var l:HorizontalLayout = new HorizontalLayout();
+		//l.setPadding(Std.int(headerHeight * .1));
+		l.verticalAlign = MIDDLE;
+        l.setPadding(10);
+        l.gap = 10;
+        layout = l;
+
+		backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR2, 1));
+
+         // Title label
+        var lbl1 = new Label();
+		
+		//lbl1.layoutData = ld1;
+        //lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
+
+		//lb1.verticalAlign = VerticalAlign.TOP;
+
+
+        var s:Shape = new Shape();
+		s.graphics.beginFill(0x228B42, 1);
+		s.graphics.drawCircle(10, 10, 10);
+		s.graphics.endFill();
+        addChild(s);
+
+		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+		lbl1.text = "CREDIT : 09 ";
+		lbl1.embedFonts = true;
+		lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1);
+		addChild(lbl1);
+
+		
+	}
+}

src/components/RoundAvatar.hx

@@ -0,0 +1,61 @@
+package components;
+
+import openfl.display.LoaderInfo;
+import openfl.net.URLRequest;
+import openfl.display.Loader;
+import openfl.events.Event;
+import feathers.controls.AssetLoader;
+import feathers.layout.AnchorLayoutData;
+import feathers.layout.AnchorLayout;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.controls.Label;
+import feathers.layout.HorizontalLayout;
+import openfl.display.Shape;
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.controls.LayoutGroup;
+import t9.util.ColorTraces.*;
+
+class RoundAvatar extends LayoutGroup {
+	public function new() {
+		super();
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		var al:AnchorLayout = new AnchorLayout();
+		layoutData = AnchorLayoutData.fill();
+		layout = al;
+
+		backgroundSkin = new RectangleSkin(SolidColor(0xFF0000, 1));
+
+		/*var al:AssetLoader = new AssetLoader();
+        al.addEventListener(Event.COMPLETE, onLoadComplete);
+		al.sourceScale = 0.6;
+		al.source = "https://ui-avatars.com/api/?background=random&size=128";
+        addChild(al);*/
+
+        var l:Loader = new Loader();
+        l.load(new URLRequest("https://ui-avatars.com/api/?background=random&size=128"));
+        l.contentLoaderInfo.addEventListener (Event.COMPLETE, onLoadComplete);
+
+        addChild(l);
+
+		/*var s:Shape = new Shape();
+		s.graphics.beginFill(0x228B42, 1);
+		s.graphics.drawCircle(10, 10, 10);
+		s.graphics.endFill();
+		addChild(s);*/
+	}
+
+    private function onLoadComplete(e:Event) {
+       
+        //var loader = cast(e.currentTarget, AssetLoader);
+        //trace("asset loaded: " + loader.source);
+        var l:Loader = cast(e.currentTarget, LoaderInfo).loader;
+        traceMagenta(l.width + " / " + l.height);
+    }
+}

src/view/MainDrawer.hx

@@ -28,11 +28,11 @@ class MainDrawer extends Drawer {
 		super.initialize();
 
 		var d1 = new LayoutGroup();
-		var drawerLayout = new VerticalLayout();
+		var vl = new VerticalLayout();
-		drawerLayout.setPadding(10);
+		vl.setPadding(10);
-		drawerLayout.horizontalAlign = CENTER;
+		vl.horizontalAlign = CENTER;
-		drawerLayout.verticalAlign = TOP;
+		vl.verticalAlign = TOP;
-		d1.layout = drawerLayout;
+		d1.layout = vl;
 		closeDrawerButton = new Button();
 		closeDrawerButton.text = "Close Drawer";
 		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (event) -> {

src/view/RidersList.hx

@@ -1,5 +1,7 @@
 package view;
 
+import components.RoundAvatar;
+import components.RidersListRendererDecoration;
 import openfl.display.Shape;
 import model.Constants;
 import openfl.Assets;
@@ -32,10 +34,11 @@ class RidersList extends ListView {
 		// set common properties for all renderers in the same container here
 		var recycler = DisplayObjectRecycler.withFunction(() -> {
 			
+			final fnt1:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+			final fnt2:Font = Assets.getFont(Constants.MONTSERRAT_BOLD_700);
+
 			var itemRenderer = new ItemRenderer();
-			var fnt1:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+			itemRenderer.icon = new RoundAvatar();
-			var fnt2:Font = Assets.getFont(Constants.MONTSERRAT_BOLD_700);
-			itemRenderer.icon = new AssetLoader();
 			itemRenderer.textFormat = new TextFormat(fnt1.fontName, 16, Constants.MAIN_COLOR1);
 			itemRenderer.secondaryTextFormat = new TextFormat(fnt2.fontName, 14, Constants.MAIN_COLOR2);
 
@@ -50,18 +53,14 @@ class RidersList extends ListView {
 			itemRenderer.text = rider.firstName;
     		itemRenderer.secondaryText = rider.name;
 			
-			var loader = cast(itemRenderer.icon, AssetLoader);
+			var ra:RoundAvatar = cast(itemRenderer.icon, RoundAvatar);
-			loader.sourceScale = 0.7;
+			
-			loader.source = "bitmaps/pp_100.jpg";
 			//TODO change this to real iamge path
     		//loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
 			//loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
 
-			var s:Shape = new Shape();
+			var rlrd:RidersListRendererDecoration = new RidersListRendererDecoration();
-			s.graphics.beginFill(0xFFCC00, 1);
+			itemRenderer.accessoryView = rlrd;
-			s.graphics.drawCircle(0, 0, 10);
-			s.graphics.endFill();
-			itemRenderer.accessoryView = s;
 
 		};