From 4ba0bae65bd9c0ceb21ac369b7e446782acc2f9b Mon Sep 17 00:00:00 2001 From: nekotoro Date: Sat, 20 Dec 2025 20:10:56 +0100 Subject: [PATCH] - ToolBar search TextInput - Strings class --- assets/vector/magnifier_icon_black.svg | 10 ++ src/components/RidersListRendererAccessory.hx | 3 +- src/model/Constants.hx | 18 ++-- src/model/String.hx | 23 +++++ src/ui/LPTCTheme.hx | 91 ++++++++++++++++--- src/ui/SVGIconFactory.hx | 3 +- src/view/MainFooter.hx | 5 +- src/view/MainHeader.hx | 3 +- src/view/RiderCardDrawer.hx | 26 +++--- src/view/ToolBar.hx | 34 ++++--- 10 files changed, 161 insertions(+), 55 deletions(-) create mode 100644 assets/vector/magnifier_icon_black.svg create mode 100644 src/model/String.hx diff --git a/assets/vector/magnifier_icon_black.svg b/assets/vector/magnifier_icon_black.svg new file mode 100644 index 0000000..49d6694 --- /dev/null +++ b/assets/vector/magnifier_icon_black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/RidersListRendererAccessory.hx b/src/components/RidersListRendererAccessory.hx index a0b45d4..7784813 100644 --- a/src/components/RidersListRendererAccessory.hx +++ b/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); diff --git a/src/model/Constants.hx b/src/model/Constants.hx index 94339fb..45d7b9c 100644 --- a/src/model/Constants.hx +++ b/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 ALERT:Int = 0xE65555; - public static final WARNING:Int = 0xE3DF62; - public static final INFO:Int = 0x6BE692; + public static final ALARM:Int = 0x7C2F99; + public static final ALERT:Int = 0xB74B4B; + public static final WARNING:Int = 0xAFAC5E; + 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; + } \ No newline at end of file diff --git a/src/model/String.hx b/src/model/String.hx new file mode 100644 index 0000000..8a2769c --- /dev/null +++ b/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"; + +} \ No newline at end of file diff --git a/src/ui/LPTCTheme.hx b/src/ui/LPTCTheme.hx index d2825d9..7c1148c 100644 --- a/src/ui/LPTCTheme.hx +++ b/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 VARIANT_RED:String = "redButton"; + public static final BUTTON_VARIANT_WHITE:String = "buttonVariantWhite"; + 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.VARIANT_RED, setRedButtonStyles); + styleProvider.setStyleFunction(Button, LPTCTheme.BUTTON_VARIANT_WHITE, setWhiteButtonStyles); + 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; + + } } diff --git a/src/ui/SVGIconFactory.hx b/src/ui/SVGIconFactory.hx index 0e04708..6bf3e37 100644 --- a/src/ui/SVGIconFactory.hx +++ b/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); diff --git a/src/view/MainFooter.hx b/src/view/MainFooter.hx index c17e2a7..5517f24 100644 --- a/src/view/MainFooter.hx +++ b/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); } diff --git a/src/view/MainHeader.hx b/src/view/MainHeader.hx index a2f34d1..f92fb73 100644 --- a/src/view/MainHeader.hx +++ b/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); diff --git a/src/view/RiderCardDrawer.hx b/src/view/RiderCardDrawer.hx index 9eb5a76..36d94ea 100644 --- a/src/view/RiderCardDrawer.hx +++ b/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(); - mainLaytoutGroup.autoSizeMode = STAGE; + var mainScrollContainer:ScrollContainer = new ScrollContainer(); + 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(); } diff --git a/src/view/ToolBar.hx b/src/view/ToolBar.hx index a94ca8f..a8f1c20 100644 --- a/src/view/ToolBar.hx +++ b/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(); - l.setPadding(10); - l.verticalAlign = MIDDLE; - layout = l; - - // Title label - lbl1 = new Label(); + var hl:HorizontalLayout = new HorizontalLayout(); + hl.setPadding(10); + hl.verticalAlign = MIDDLE; + layout = hl; + + //search field + 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 {