- ToolBar search TextInput

- Strings class

assets/vector/magnifier_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 transform="matrix(1,0,0,1,0.25,0.25)">
+        <path d="M9.5,3C13.066,3 16,5.934 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14L15.5,14L20.5,19L19,20.5L14,15.5L14,14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16C5.934,16 3,13.066 3,9.5C3,5.934 5.934,3 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

src/components/RidersListRendererAccessory.hx

@@ -1,5 +1,6 @@
 package components;
 
+import model.String.Strings;
 import haxe.macro.Expr.Case;
 import feathers.text.TextFormat;
 import openfl.Assets;
@@ -50,7 +51,7 @@ class RidersListRendererAccessory extends LayoutGroup {
 			iconColor = Constants.INFO;
 		}
 
-		lbl1.text = Constants.S3 + Std.string(riderCredit);
+		lbl1.text = Strings.RL_S1 + Std.string(riderCredit);
 		lbl1.embedFonts = true;
 		lbl1.textFormat = new TextFormat(fnt.fontName, 14, Constants.MAIN_COLOR1);
 		addChild(lbl1);

src/model/Constants.hx

@@ -16,10 +16,10 @@ class Constants {
     public static final MAIN_COLOR3:Int = 0xECEFF0;
     public static final PURE_WHITE:Int = 0xFFFFFF;
 
-    public static final ALARM:Int = 0x5E2075;
+    public static final ALARM:Int = 0x7C2F99;
-    public static final ALERT:Int = 0xE65555;
+    public static final ALERT:Int = 0xB74B4B;
-    public static final WARNING:Int = 0xE3DF62;
+    public static final WARNING:Int = 0xAFAC5E;
-    public static final INFO:Int = 0x6BE692;
+    public static final INFO:Int = 0x6CB583;
 
     public static final BUTTON_UP_COLOR:Int = 0x050EB7;
     public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F;
@@ -51,16 +51,12 @@ class Constants {
     public static final CLOSE_DRAWER:String = "closeDrawer";
     public static final DRAWER_IS_OPEN:Bool = false;
 
-    // Text Strings
-    public static final S1:String = "Cavalier·e·s";
-    public static final S2:String = "Licences FFE";
-    public static final S3:String = "Crédit: ";
-    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;
+    public static final GLOBAL_CORNER_RADIUS:Int = 5;
+    public static final GLOBAL_BUTTON_ICON_OFFSET:Int = -10;
+
 
 }

src/model/String.hx

@@ -0,0 +1,23 @@
+package model;
+
+import openfl.system.Capabilities;
+
+class Strings {
+
+    // MainHeader strings
+    public static final MH_S1:String = "Cavalier·e·s";
+
+    // MainFooter strings
+    public static final MF_S1:String = "Licences FFE";
+
+    //ToolBar strings
+     public static final TB_S1:String = "Recherche";
+
+    // RidersList strings
+    public static final RL_S1:String = "Crédit: ";
+
+    //RideCardDrawer strings
+    public static final RCD_S1:String = "Cours restants sur la carte : ";
+    public static final RCD_S2:String = "Décompter un cours";
+
+}

src/ui/LPTCTheme.hx

@@ -1,5 +1,7 @@
 package ui;
 
+import feathers.controls.TextInputState;
+import feathers.controls.TextInput;
 import openfl.Assets;
 import model.Constants;
 import feathers.text.TextFormat;
@@ -10,8 +12,10 @@ import feathers.themes.ClassVariantTheme;
 
 class LPTCTheme extends ClassVariantTheme {
 
-    public static final VARIANT_WHITE:String = "whiteButton";
+    public static final BUTTON_VARIANT_WHITE:String = "buttonVariantWhite";
-    public static final VARIANT_RED:String = "redButton";
+    public static final BUTTON_VARIANT_ORANGE:String = "buttonVariantOrange";
+
+    public static final TEXT_INPUT_VARIANT_SEARCH:String = "textInputVariantSearch";
 
 	public function new() {
 		super();
@@ -21,21 +25,24 @@ class LPTCTheme extends ClassVariantTheme {
 
 	private function initialize():Void {
         styleProvider.setStyleFunction(Button, null, setButtonStyles);
-        styleProvider.setStyleFunction(Button, LPTCTheme.VARIANT_WHITE, setWhiteButtonStyles);
+        styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_WHITE, setWhiteButtonStyles);
-        styleProvider.setStyleFunction(Button, LPTCTheme.VARIANT_RED, setRedButtonStyles);
+        styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_ORANGE, setOrangeButtonStyles);
+
+        styleProvider.setStyleFunction(TextInput, null, setSearchTextInputStyles);
     }
 
+    //############################################################### BUTTONS
 	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;
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
 		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;
+		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.MAIN_COLOR3);
@@ -44,20 +51,22 @@ class LPTCTheme extends ClassVariantTheme {
 		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);
+        button.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+         button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
 	}
 
     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;
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
 		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;
+		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);
@@ -66,9 +75,69 @@ class LPTCTheme extends ClassVariantTheme {
 		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);
+        button.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+        button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
     }
 
-    private function setRedButtonStyles(button:Button):Void {
+    private function setOrangeButtonStyles(button:Button):Void {
+        var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1.0, Constants.ACCENT_COLOR2);
+		backgroundSkin.fill = SolidColor(Constants.ACCENT_COLOR2);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		button.backgroundSkin = backgroundSkin;
+
+		var downSkin = new RectangleSkin();
+		downSkin.border = SolidColor(1.0, Constants.ACCENT_COLOR2);
+		downSkin.fill = SolidColor(Constants.MAIN_COLOR3);
+		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);
+		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.paddingLeft = button.paddingRight = 10;
+        button.paddingTop = button.paddingBottom = 5;
+        button.iconOffsetX = Constants.GLOBAL_BUTTON_ICON_OFFSET;
     }
+
+    //############################################################### TEXT_INPUTS
+    private function setSearchTextInputStyles(pTextInput:TextInput):Void {
+
+		var backgroundSkin = new RectangleSkin();
+		backgroundSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .1);
+		backgroundSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.1);
+		backgroundSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.backgroundSkin = backgroundSkin;
+
+        var disabledSkin = new RectangleSkin();
+		disabledSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .1);
+		disabledSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.1);
+		disabledSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.setSkinForState(TextInputState.DISABLED, disabledSkin);
+
+		var focusSkin = new RectangleSkin();
+		focusSkin.border = SolidColor(1, Constants.MAIN_COLOR3, .8);
+		focusSkin.fill = SolidColor(Constants.MAIN_COLOR3, 0.2);
+		focusSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
+		pTextInput.setSkinForState(TextInputState.FOCUSED, focusSkin);
+
+		var format:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		pTextInput.textFormat = format;
+
+        var disabledFormat:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+        pTextInput.setTextFormatForState(TextInputState.DISABLED, disabledFormat);
+
+		var focusFormat:TextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+        pTextInput.setTextFormatForState(TextInputState.FOCUSED, focusFormat);
+
+        pTextInput.paddingLeft = pTextInput.paddingRight = 10;
+        pTextInput.paddingTop = pTextInput.paddingBottom = 5;
+
+        pTextInput.embedFonts = true;
+        
+	}
 }

src/ui/SVGIconFactory.hx

@@ -7,8 +7,7 @@ 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);
 

src/view/MainFooter.hx

@@ -1,5 +1,6 @@
 package view;
 
+import model.String.Strings;
 import feathers.layout.Measurements;
 import feathers.skins.RectangleSkin;
 import components.ToolBarToggleButton.ToolbarToggleButton;
@@ -37,7 +38,7 @@ class MainFooter extends LayoutGroup {
 									   Constants.HERO_COLOR,
 									   30,
 									   Constants.FONT_SIZE_14);
-		btn1.text = Constants.S1;
+		btn1.text = Strings.MH_S1;
     	addChild(btn1);
 
     	btn2 = new ToolbarToggleButton(Assets.getText("vector/certificate_icon_black.svg"), 
@@ -45,7 +46,7 @@ class MainFooter extends LayoutGroup {
 									   Constants.HERO_COLOR,
 									   30,
 									   Constants.FONT_SIZE_14);
-		btn2.text  = Constants.S2;
+		btn2.text  = Strings.MF_S1;
     	addChild(btn2);
 
 	}

src/view/MainHeader.hx

@@ -1,5 +1,6 @@
 package view;
 
+import model.String.Strings;
 import haxe.macro.Expr.Constant;
 import com.adobe.cairngorm.control.CairngormEvent;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
@@ -61,7 +62,7 @@ class MainHeader extends LayoutGroup {
 		
         // Title label
         lbl1 = new Label();
-		lbl1.text = Constants.S1;
+		lbl1.text = Strings.MH_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,7 @@
 package view;
 
+import model.String.Strings;
+import feathers.controls.ScrollContainer;
 import ui.SVGIconFactory;
 import feathers.controls.ButtonState;
 import openfl.display.Bitmap;
@@ -55,15 +57,15 @@ class RiderCardDrawer extends Drawer {
 		clickOverlayToClose = false;
 
 		// main Layout
-		var mainLaytoutGroup = new LayoutGroup();
+		var mainScrollContainer:ScrollContainer = new ScrollContainer();
-		mainLaytoutGroup.autoSizeMode = STAGE;
+		mainScrollContainer.autoSizeMode = STAGE;
 
 		var mainVerticalLayout = new VerticalLayout();
 		mainVerticalLayout.setPadding(spacing);
 		mainVerticalLayout.gap = spacing;
 		mainVerticalLayout.horizontalAlign = JUSTIFY;
 		mainVerticalLayout.verticalAlign = TOP;
-		mainLaytoutGroup.layout = mainVerticalLayout;
+		mainScrollContainer.layout = mainVerticalLayout;
 
 		// close button
 		closeDrawerButton = new Button();
@@ -71,12 +73,12 @@ class RiderCardDrawer extends Drawer {
 		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			closeDrawer();
 		});
-		mainLaytoutGroup.addChild(closeDrawerButton);
+		mainScrollContainer.addChild(closeDrawerButton);
 
 		// profile picture
 		ppal = new AssetLoader();
 		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
-		mainLaytoutGroup.addChild(ppal);
+		mainScrollContainer.addChild(ppal);
 
 		// ########################################################################## FIRSTNAME & NAME TEXT INPUTS
 		// layout
@@ -87,7 +89,7 @@ class RiderCardDrawer extends Drawer {
 		vl1.gap = -spacing;
 		vl1.horizontalAlign = JUSTIFY;
 		lg1.layout = vl1;
-		mainLaytoutGroup.addChild(lg1);
+		mainScrollContainer.addChild(lg1);
 
 		// first name textInput
 		firstNameTextInput = new TextInput();
@@ -96,7 +98,7 @@ class RiderCardDrawer extends Drawer {
 		firstNameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
 		lg1.addChild(firstNameTextInput);
 
-		// name label
+		// name textInput
 		nameTextInput = new TextInput();
 		nameTextInput.backgroundSkin = null;
 		nameTextInput.embedFonts = true;
@@ -107,19 +109,19 @@ class RiderCardDrawer extends Drawer {
 		remainingCreditLabel = new Label();
 		remainingCreditLabel.embedFonts = true;
 		remainingCreditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
-		mainLaytoutGroup.addChild(remainingCreditLabel);
+		mainScrollContainer.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.text = Strings.RCD_S2;
 		removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			traceRed("removeOneCredit()");
 		});
-		mainLaytoutGroup.addChild(removeOneCredit);
+		mainScrollContainer.addChild(removeOneCredit);
 
-		drawer = mainLaytoutGroup;
+		drawer = mainScrollContainer;
 	}
 
 	private function onCreationComplete(e:FeathersEvent):Void {
@@ -154,7 +156,7 @@ class RiderCardDrawer extends Drawer {
 		}
 
 		// remaing credit text
-		remainingCreditLabel.text = Constants.S4 + Std.string(rvo.credit);
+		remainingCreditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);
 
 		openDrawer();
 	}

src/view/ToolBar.hx

@@ -1,5 +1,9 @@
 package view;
 
+import model.String.Strings;
+import ui.SVGIconFactory;
+import ui.LPTCTheme;
+import feathers.controls.TextInput;
 import feathers.layout.HorizontalLayoutData;
 import feathers.controls.Label;
 import feathers.controls.LayoutGroup;
@@ -14,7 +18,7 @@ import t9.util.ColorTraces.*;
 
 class ToolBar extends LayoutGroup {
 
-    private var lbl1:Label;
+    private var searchTextInput:TextInput;
 
 	public function new() {
 		super();
@@ -32,25 +36,25 @@ class ToolBar extends LayoutGroup {
 
 		autoSizeMode = CONTENT;
 		backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
-		//variant = LayoutGroup.VARIANT_TOOL_BAR;
 
         // Layout settings
-		var l:HorizontalLayout = new HorizontalLayout();
+		var hl:HorizontalLayout = new HorizontalLayout();
-		l.setPadding(10);
+		hl.setPadding(10);
-		l.verticalAlign = MIDDLE;
+		hl.verticalAlign = MIDDLE;
-        layout = l;
+        layout = hl;
-		
+
-        // Title label
+		//search field
-        lbl1 = new Label();
+        searchTextInput = new TextInput();
+		var ld1 = new HorizontalLayoutData();
+		ld1.percentWidth = 100.0;
+		searchTextInput.layoutData = ld1;
+		searchTextInput.variant = LPTCTheme.TEXT_INPUT_VARIANT_SEARCH;
+		searchTextInput.leftView = SVGIconFactory.makeIcon("vector/magnifier_icon_black.svg", Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
+		searchTextInput.prompt = Strings.TB_S1;
+		addChild(searchTextInput);
 		
 		//lbl1.layoutData = ld1;
         //lb1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 1));
-
-		//lb1.verticalAlign = VerticalAlign.TOP;
-		lbl1.text = "Toolbar";
-		lbl1.embedFonts = true;
-		lbl1.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR3);
-		addChild(lbl1);
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {