header, main panel addition

src/LPTCManager2026.hx

@@ -17,13 +17,14 @@ import model.Constants;
 import openfl.Assets;
 import openfl.text.Font;
 import t9.util.ColorTraces.*;
+import view.MainPanel;
 
 class LPTCManager2026 extends Application {
 
-	private var model = AppModelLocator.getInstance();
+	private var model:AppModelLocator = AppModelLocator.getInstance();
-	private var services = new Services();
+	private var services:Services = new Services();
-	private var appController = new AppController();
+	private var appController:AppController = new AppController();
-	//private var mainPanel:Panel;
+	private var mainPanel:MainPanel = new MainPanel();
 
 	// private var nav:StackNavigator;
 
@@ -41,6 +42,8 @@ class LPTCManager2026 extends Application {
 		stage.displayState = NORMAL;
 		stage.scaleMode = NO_SCALE;
 
+		addChild(mainPanel);
+
 		/*mainPanel = new Panel();
 		mainPanel.autoSizeMode = STAGE;
 		mainPanel.backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
@@ -56,7 +59,7 @@ class LPTCManager2026 extends Application {
 		title.backgroundSkin = new NekoRectangle(Constants.ACCENT_COLOR2, 0, 0, 200, 80);
 		title.verticalAlign = VerticalAlign.MIDDLE;
 		title.text = "Header";
-		title.embedFonts =true;
+		title.embedFonts = true;
 		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
 		
 		var tf:TextFormat = new TextFormat(fnt.fontName, Std.int(stage.stageHeight * Constants.MAIN_HEADER_HEIGHT_RATIO * .1), Constants.MAIN_COLOR3);

src/components/NekoRectangle.hx

@@ -3,7 +3,7 @@ package components;
 import openfl.display.Shape;
 
 class NekoRectangle extends Shape {
-	public function new(pColor:Int = 0xFF0000, pX:Int = 0, pY:Int = 0, pWidth:Int = 100, pHeight:Int = 100) {
+	public function new(pColor:Int = 0xFF0000, pX:Int = 0, pY:Int = 0, pWidth:Int = 10, pHeight:Int = 10) {
 		super();
 
         graphics.beginFill(pColor);

src/model/Constants.hx

@@ -18,7 +18,7 @@ class Constants {
    
     // UI Proportions against satge dimmentions
     public static final MAIN_HEADER_WIDTH_RATIO:Float = 1;
-    public static final MAIN_HEADER_HEIGHT_RATIO:Float = 0.3;
+    public static final MAIN_HEADER_HEIGHT_RATIO:Float = 0.1;
 
     private function new() {
         

src/view/MainHeader.hx

@@ -0,0 +1,69 @@
+package view;
+
+import feathers.layout.HorizontalLayout;
+import feathers.layout.AnchorLayoutData;
+import feathers.text.TextFormat;
+import openfl.Assets;
+import openfl.text.Font;
+import feathers.layout.VerticalAlign;
+import feathers.controls.Label;
+import feathers.layout.AnchorLayout;
+import components.NekoRectangle;
+import feathers.controls.LayoutGroup;
+import feathers.controls.Panel;
+import feathers.events.FeathersEvent;
+import model.Constants;
+import t9.util.ColorTraces.*;
+
+class MainHeader extends LayoutGroup {
+
+    private var lb1:Label;
+
+	public function new() {
+		super();
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+        final sw:Int = stage.stageWidth;
+        final sh:Int = stage.stageHeight;
+        final headerWidth = Std.int(sw * Constants.MAIN_HEADER_WIDTH_RATIO);
+        final headerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
+
+		autoSizeMode = CONTENT;
+		backgroundSkin = new NekoRectangle( Constants.HERO_COLOR, 
+                                            0, 
+                                            0, 
+                                            headerWidth, 
+                                            headerHeight);
+		variant = LayoutGroup.VARIANT_TOOL_BAR;
+
+        // Layout settings
+		var l:HorizontalLayout = new HorizontalLayout();
+        l.paddingLeft = l.paddingRight = Std.int(headerHeight * .3);
+        l.paddingTop = l.paddingBottom = Std.int(headerHeight * .2);
+        layout = l;
+
+        // Title label
+        lb1 = new Label();
+        //lb1.backgroundSkin = new NekoRectangle(Constants.ACCENT_COLOR2);
+
+		//lb1.verticalAlign = VerticalAlign.TOP;
+		lb1.text = "Cavalier·e·s";
+		lb1.embedFonts = true;
+		var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
+		
+		var tf:TextFormat = new TextFormat(fnt.fontName, Std.int(headerHeight * .4), Constants.MAIN_COLOR3);
+		lb1.textFormat =  tf;
+
+		lb1.layoutData = AnchorLayoutData.middleLeft();
+		addChild(lb1);
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete()");
+	}
+}

src/view/MainPanel.hx

@@ -0,0 +1,32 @@
+package view;
+
+import feathers.events.FeathersEvent;
+import model.Constants;
+import components.NekoRectangle;
+import feathers.controls.Panel;
+import t9.util.ColorTraces.*;
+
+class MainPanel extends Panel {
+
+	private var mh:MainHeader;
+
+	public function new() {
+		super();
+
+		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
+	}
+
+	override private function initialize():Void {
+		super.initialize();
+
+		autoSizeMode = STAGE;
+		backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
+
+		mh = new MainHeader();
+		addChild(mh);
+	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete()");
+	}
+}

src/view/UserLogin.hx

@@ -1,13 +0,0 @@
-package view;
-
-import feathers.controls.ScrollContainer;
-
-class UserLogin extends ScrollContainer {
-	public function new() {
-		super();
-	}
-
-	override private function initialize():Void {
-		super.initialize();
-	}
-}