- Buttons changed to ToggleButtons
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
@@ -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()");
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user