- Buttons changed to ToggleButtons

This commit is contained in:
2025-11-21 16:08:18 +01:00
parent 8b8f0b9712
commit aeaa8ef8ff
7 changed files with 202 additions and 33 deletions
+46
View File
@@ -0,0 +1,46 @@
package components;
import feathers.controls.ButtonState;
import openfl.text.TextFormat;
import model.Constants;
import openfl.utils.Assets;
import openfl.text.Font;
import openfl.geom.ColorTransform;
import openfl.display.Shape;
import format.SVG;
import feathers.controls.Button;
class CustomButton extends Button {
private var svgIconPath:String;
private var svgIcon:Shape;
private var upStateColor:Int;
public function new(pSvgIconPath:String = null, pUpstateColor:Int = 0x000000) {
super();
svgIconPath = pSvgIconPath;
upStateColor = pUpstateColor;
}
override private function initialize():Void {
super.initialize();
//iconPosition = TOP;
embedFonts = true;
backgroundSkin = new NekoRectangle(upStateColor);
backgroundSkin.alpha = 0;
var fnt:Font = Assets.getFont(Constants.MONTSERRAT_LIGHT_300);
textFormat = new TextFormat(fnt.fontName, 20, Constants.BUTTON_UP_COLOR);
svgIcon = new Shape();
var ct = new ColorTransform();
ct.color = 0xFFFFFF;
svgIcon.transform.colorTransform = ct;
new SVG(svgIconPath).render(svgIcon.graphics);
icon = svgIcon;
}
}
+46
View File
@@ -0,0 +1,46 @@
package components;
import feathers.controls.Button;
import format.SVG;
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Shape;
import openfl.geom.ColorTransform;
class IconButton extends Button {
private var svgIconPath:String;
private var svgIcon:Shape;
private var upColor:Int;
public function new(pSvgIconPath:String = null, pUpColor:Int = 0x000000) {
super();
svgIconPath = pSvgIconPath;
upColor = pUpColor;
}
override private function initialize():Void {
super.initialize();
iconPosition = TOP;
backgroundSkin = new Bitmap(new BitmapData(10, 10, true, 0xFF00FF));
// icon
if(svgIconPath != null){
svgIcon = new Shape();
colorizeSvgIcon(upColor);
new SVG(svgIconPath).render(svgIcon.graphics);
icon = svgIcon;
icon.width = icon.height = 40;
}
}
private function colorizeSvgIcon(pColor:Int) {
var ct = new ColorTransform();
ct.color = pColor;
svgIcon.transform.colorTransform = ct;
}
}
+68
View File
@@ -0,0 +1,68 @@
package components;
import feathers.controls.ToggleButton;
import feathers.text.TextFormat;
import format.SVG;
import model.Constants;
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.Shape;
import openfl.events.Event;
import openfl.geom.ColorTransform;
import openfl.text.Font;
import openfl.utils.Assets;
class ToolbarToggleButton extends ToggleButton {
private var svgIconPath:String;
private var svgIcon:Shape;
private var unselectedColor:Int;
private var selectedColor:Int;
public function new(pSvgIconPath:String = null, pUnselectedColor:Int = 0x00FF00, pSelectedColor:Int = 0x000000) {
super();
svgIconPath = pSvgIconPath;
unselectedColor = pSelectedColor;
selectedColor = pUnselectedColor;
}
override private function initialize():Void {
super.initialize();
iconPosition = TOP;
embedFonts = true;
backgroundSkin = new Bitmap(new BitmapData(10, 10, true, 0xFF00FF));
// icon
if(svgIconPath != null){
svgIcon = new Shape();
colorizeIcon(unselectedColor);
new SVG(svgIconPath).render(svgIcon.graphics);
icon = svgIcon;
icon.width = icon.height = 40;
iconOffsetY = 0;
}
// text
var fnt:Font = Assets.getFont(Constants.MONTSERRAT_REGULAR_400);
textFormat = new TextFormat(fnt.fontName, 16, unselectedColor);
selectedTextFormat = new TextFormat(fnt.fontName, 16, selectedColor);
addEventListener(Event.CHANGE, onButtonStateChange);
}
private function colorizeIcon(pColor:Int) {
var ct = new ColorTransform();
ct.color = pColor;
svgIcon.transform.colorTransform = ct;
}
private function onButtonStateChange(e:Event):Void {
selected ? colorizeIcon(selectedColor) : colorizeIcon(unselectedColor);
}
}
+4 -4
View File
@@ -10,10 +10,10 @@ class Constants {
public static final MAIN_COLOR2:Int = 0x69808A;
public static final MAIN_COLOR3:Int = 0xECEFF0;
public static final BUTTON_NORMAL_STATE_COLOR:Int = 0x050EB7;
public static final BUTTON_SELECTED_STATE_COLOR:Int = 0xFF5F0F;
public static final BUTTON_DISABLED_STATE_COLOR:Int = 0x69808A;
public static final BUTTON_INVERTED_NORMAL_STATE_COLOR:Int = 0xECEFF0;
public static final BUTTON_UP_COLOR:Int = 0x050EB7;
public static final BUTTON_HOVER_COLOR:Int = 0xFF5F0F;
public static final BUTTON_DOWN_COLOR:Int = 0x69808A;
public static final BUTTON_INVERTED_UP_COLOR:Int = 0xECEFF0;
// Fonts
public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300";
+20 -15
View File
@@ -1,17 +1,19 @@
package view;
import openfl.display.Stage;
import haxe.CallStack.StackItem;
import openfl.Assets;
import feathers.layout.HorizontalLayout;
import model.Constants;
import components.ToolBarToggleButton.ToolbarToggleButton;
import components.NekoRectangle;
import feathers.events.FeathersEvent;
import feathers.controls.LayoutGroup;
import feathers.events.FeathersEvent;
import feathers.layout.HorizontalDistributedLayout;
import model.Constants;
import openfl.Assets;
import t9.util.ColorTraces.*;
class MainFooter extends LayoutGroup {
private var btn1:ToolbarToggleButton;
private var btn2:ToolbarToggleButton;
public function new() {
super();
@@ -26,20 +28,23 @@ class MainFooter extends LayoutGroup {
final footerHeight = Std.int(sh * Constants.MAIN_HEADER_HEIGHT_RATIO);
backgroundSkin = new NekoRectangle(Constants.MAIN_COLOR3);
//variant = LayoutGroup.VARIANT_TOOL_BAR;
// variant = LayoutGroup.VARIANT_TOOL_BAR;
// Layout settings
var l:HorizontalLayout = new HorizontalLayout();
l.setPadding(footerWidth * .030);
l.gap = footerWidth * .4;
l.horizontalAlign = CENTER;
l.verticalAlign = MIDDLE;
layout = l;
// Layout
layout = new HorizontalDistributedLayout();
// Buttons
btn1 = new ToolbarToggleButton(Assets.getText("vector/rider_icon_black.svg"), Constants.MAIN_COLOR2, Constants.HERO_COLOR);
btn1.text = Constants.MENU_ITEM_0_STRING;
addChild(btn1);
btn2 = new ToolbarToggleButton(Assets.getText("vector/certificate_icon_black.svg"), Constants.MAIN_COLOR2, Constants.HERO_COLOR);
btn2.text = Constants.MENU_ITEM_1_STRING;
addChild(btn2);
}
private function onCreationComplete(event:FeathersEvent):Void {
traceBlue(this + " --> onCreationComplete()");
}
}
+6 -2
View File
@@ -1,9 +1,10 @@
package view;
import control.AppController;
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher;
import components.IconButton;
import components.NekoRectangle;
import control.AppController;
import feathers.controls.Button;
import feathers.controls.Label;
import feathers.controls.LayoutGroup;
@@ -51,7 +52,10 @@ class MainHeader extends LayoutGroup {
layout = l;
// Menu button
btn1 = new Button("menu", onMenuButtonPress);
var svgIconString:String = Assets.getText("vector/menu_icon_black.svg");
btn1 = new IconButton(svgIconString, Constants.MAIN_COLOR3);
btn1.addEventListener(TriggerEvent.TRIGGER, onMenuButtonPress);
addChild(btn1);
// Title label
+2 -2
View File
@@ -26,8 +26,8 @@ class MainPanel extends Panel {
mh = new MainHeader();
header = mh;
//mf = new MainFooter();
//footer = mf;
mf = new MainFooter();
footer = mf;
}
private function onCreationComplete(event:FeathersEvent):Void {