[theme] use ResMap for theme skins
This commit is contained in:
@@ -136,8 +136,12 @@ class View<C:DisplayObject> implements IView<C> {
|
||||
}
|
||||
|
||||
private function set_skinId(value:String):String {
|
||||
skin = theme != null ? theme.resolve(value) : [];
|
||||
return value;
|
||||
//skin = theme != null ? theme.resolve(value) : [];
|
||||
skinId = value;
|
||||
if (theme != null) {
|
||||
theme.bind(skinId, this);
|
||||
}
|
||||
return skinId;
|
||||
}
|
||||
|
||||
private function set_visible(value:Bool):Bool {
|
||||
|
||||
@@ -23,6 +23,7 @@ class ButtonView extends LabelView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
skinId = "button";
|
||||
overed = false;
|
||||
downed = false;
|
||||
state = ButtonState.UP;
|
||||
|
||||
@@ -8,6 +8,7 @@ class LabelView extends TextView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
skinId = "label";
|
||||
fill = false;
|
||||
textField.selectable = false;
|
||||
textField.wordWrap = false;
|
||||
|
||||
@@ -66,7 +66,7 @@ class SelectView<D> extends GroupView {
|
||||
currentView = new ButtonView();
|
||||
currentView.onPress.connect(function(_) toggle());
|
||||
dataView = new DataView();
|
||||
dataView.skin = [Skin.transparent];
|
||||
dataView.skinId = "dropdown";
|
||||
dataView.geometry.position = ABSOLUTE;
|
||||
dataView.factory = factory;
|
||||
dataView.onDataSelect.connect(function(value:D):Void {
|
||||
@@ -81,7 +81,9 @@ class SelectView<D> extends GroupView {
|
||||
var result = new LabelView();
|
||||
result.layout.hAlign = LEFT;
|
||||
result.geometry.size.percent.width = 100;
|
||||
result.skinId = labelSkinId;
|
||||
if (labelSkinId != null) {
|
||||
result.skinId = labelSkinId;
|
||||
}
|
||||
result.text = labelBuilder(value);
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ class FrameView<D> extends GroupView {
|
||||
|
||||
public function new(frameId:String, ?layout:ILayout) {
|
||||
super(layout != null ? layout : new VerticalLayout());
|
||||
skinId = "frame";
|
||||
this.frameId = frameId;
|
||||
this.geometry.size.stretch = true;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ class HScrollBarView extends ScrollBarView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
skinId = "scroll.horizontal";
|
||||
geometry.size.percent.width = 100;
|
||||
geometry.size.fixed.height = 10;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ class VScrollBarView extends ScrollBarView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
skinId = "scroll.vertical";
|
||||
geometry.size.percent.height = 100;
|
||||
geometry.size.fixed.width = 10;
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ class TextView extends SpriteView implements ITextView {
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
skinId = "text";
|
||||
layout = new Layout();
|
||||
textField = buildTextField();
|
||||
textField.width = 1;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
package haxework.view.theme;
|
||||
|
||||
import haxework.view.text.ITextView;
|
||||
import haxework.color.Color;
|
||||
import haxework.view.skin.ISkin;
|
||||
|
||||
@@ -18,13 +17,15 @@ typedef ThemeColors = {
|
||||
}
|
||||
|
||||
interface ITheme {
|
||||
public var font(default, null):ThemeFont;
|
||||
public var colors(default, null):ThemeColors;
|
||||
public var font(default, set):ThemeFont;
|
||||
public var colors(default, set):ThemeColors;
|
||||
|
||||
public function resolve(id:String):SkinSet;
|
||||
public function resolve2(ids:Array<String>):SkinSet;
|
||||
public function bind(id:String, view:IView<Dynamic>):Void;
|
||||
|
||||
// ToDo:
|
||||
public function text(color:Color):ISkin<ITextView>;
|
||||
public function textBox(color:Color):SkinSet;
|
||||
public function background(?color:Color):SkinSet;
|
||||
public function border(?color:Color):SkinSet;
|
||||
public function text(?color:Color):SkinSet;
|
||||
public function button(?color:Color, ?textColor:Color):SkinSet;
|
||||
public function textBox(?color:Color):SkinSet;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
package haxework.view.theme;
|
||||
|
||||
import haxework.resources.Resources.ResMap;
|
||||
import flash.text.Font;
|
||||
import flash.text.FontType;
|
||||
import haxework.color.Color;
|
||||
import haxework.view.core.Geometry;
|
||||
import haxework.view.skin.ISkin;
|
||||
import haxework.view.skin.Skin;
|
||||
import haxework.view.text.ITextView;
|
||||
import haxework.view.theme.ITheme;
|
||||
|
||||
using haxework.color.ColorUtil;
|
||||
@@ -16,19 +17,111 @@ class Theme implements ITheme {
|
||||
public var bigFontSize = 22;
|
||||
public var veryBigFontSize = 24;
|
||||
|
||||
public var font(default, null):ThemeFont;
|
||||
public var colors(default, null):ThemeColors;
|
||||
public var font(default, set):ThemeFont;
|
||||
public var colors(default, set):ThemeColors;
|
||||
|
||||
private var data:Map<String, SkinSet>;
|
||||
private var data:ResMap<SkinSet>;
|
||||
|
||||
public function new(?font:ThemeFont, ?colors:ThemeColors) {
|
||||
data = new Map();
|
||||
this.font = resolveFont(font);
|
||||
this.colors = resolveColors(colors);
|
||||
data = new ResMap();
|
||||
this.font = font;
|
||||
this.colors = colors;
|
||||
L.d("Theme", 'font: ${this.font}');
|
||||
L.d("Theme", 'colors: ${this.colors}');
|
||||
}
|
||||
|
||||
private function set_font(value:ThemeFont):ThemeFont {
|
||||
font = resolveFont(value);
|
||||
if (font != null && colors != null) {
|
||||
reload();
|
||||
}
|
||||
return font;
|
||||
}
|
||||
|
||||
private function set_colors(value:ThemeColors):ThemeColors {
|
||||
colors = resolveColors(value);
|
||||
if (font != null && colors != null) {
|
||||
reload();
|
||||
}
|
||||
return colors;
|
||||
}
|
||||
|
||||
private function reload():Void {
|
||||
data.put("background", background());
|
||||
data.put("border", border());
|
||||
data.put("frame", background().concat(border()).concat([Skin.geometry(new Geometry().setPadding(2))]));
|
||||
|
||||
data.put("text", text());
|
||||
data.put("label", text().concat([Skin.geometry(new Geometry().setPadding([8, 2]))]));
|
||||
data.put("button", button());
|
||||
data.put("dropdown", background().concat(border()));
|
||||
data.put("tab", text().concat([
|
||||
Skin.tabColor(this.colors.light),
|
||||
Skin.geometry(new Geometry().setPadding([25, 8]))
|
||||
]));
|
||||
|
||||
data.put("text0", text().concat(background(this.colors.light.diff(-16))));
|
||||
data.put("text1", text().concat(background(this.colors.light.diff(16))));
|
||||
data.put("scroll.vertical", [
|
||||
Skin.scrollVertical(this.colors.light, this.colors.dark),
|
||||
]);
|
||||
data.put("scroll.horizontal", [
|
||||
Skin.scrollHorizontal(this.colors.light, this.colors.dark),
|
||||
]);
|
||||
}
|
||||
|
||||
public function background(?color:Color):SkinSet {
|
||||
if (color == null) {
|
||||
color = colors.dark;
|
||||
}
|
||||
return [
|
||||
Skin.color(color),
|
||||
];
|
||||
}
|
||||
|
||||
public function border(?color:Color):SkinSet {
|
||||
if (color == null) {
|
||||
color = colors.border;
|
||||
}
|
||||
return [
|
||||
Skin.border(color, 1, 2),
|
||||
];
|
||||
}
|
||||
|
||||
public function text(?color:Color):SkinSet {
|
||||
if (color == null) {
|
||||
color = colors.text;
|
||||
}
|
||||
return [
|
||||
Skin.text(color, baseFontSize, font.name, font.embed),
|
||||
];
|
||||
}
|
||||
|
||||
public function button(?color:Color, ?textColor:Color):SkinSet {
|
||||
if (color == null) {
|
||||
color = colors.light;
|
||||
}
|
||||
return text(textColor).concat([
|
||||
Skin.buttonColor(color),
|
||||
Skin.geometry(new Geometry().setPadding([25, 8])),
|
||||
]);
|
||||
}
|
||||
|
||||
public function textBox(?color:Color):SkinSet {
|
||||
return text(color).concat([
|
||||
Skin.color(0x000000, 0.1),
|
||||
Skin.border(colors.light, 1, 2),
|
||||
]);
|
||||
}
|
||||
|
||||
public function bind(id:String, view:IView<Dynamic>):Void {
|
||||
data.bind(id, view, "skin");
|
||||
}
|
||||
|
||||
public function resolve(id:String):SkinSet {
|
||||
return data.exists(id) ? data.get(id) : [];
|
||||
}
|
||||
|
||||
private static function resolveFont(font:ThemeFont):ThemeFont {
|
||||
if (font == null) {
|
||||
font = {};
|
||||
@@ -55,7 +148,7 @@ class Theme implements ITheme {
|
||||
colors = {};
|
||||
}
|
||||
var light:Color = colors.light != null ? colors.light : 0x33aa33;
|
||||
var dark:Color = colors.dark != null ? colors.dark : light.diff(64);
|
||||
var dark:Color = colors.dark != null ? colors.dark : light.diff(-64);
|
||||
var text:Color = colors.text != null ? colors.text : 0xffffff;
|
||||
var border:Color = colors.border != null ? colors.border : light.multiply(1.5);
|
||||
var active:Color = colors.active != null ? colors.active : 0x00ff00;
|
||||
@@ -67,30 +160,4 @@ class Theme implements ITheme {
|
||||
active: active,
|
||||
}
|
||||
}
|
||||
|
||||
public function resolve(id:String):SkinSet {
|
||||
return data.exists(id) ? data.get(id) : [];
|
||||
}
|
||||
|
||||
public function resolve2(ids:Array<String>):SkinSet {
|
||||
var result = [];
|
||||
for (id in ids) {
|
||||
if (data.exists(id)) {
|
||||
result = result.concat(data.get(id));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
public function text(color:Color):ISkin<ITextView> {
|
||||
return Skin.text(color, baseFontSize, font.name, font.embed);
|
||||
}
|
||||
|
||||
public function textBox(color:Color):SkinSet {
|
||||
return [
|
||||
Skin.color(0x000000, 0.1),
|
||||
Skin.border(colors.light, 1, 2),
|
||||
text(color),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user