[theme] use ResMap for theme skins

This commit is contained in:
2019-07-10 19:43:19 +03:00
parent 4f3a6c5174
commit ce4f6854f7
21 changed files with 213 additions and 89 deletions

View File

@@ -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 {

View File

@@ -23,6 +23,7 @@ class ButtonView extends LabelView {
public function new() {
super();
skinId = "button";
overed = false;
downed = false;
state = ButtonState.UP;

View File

@@ -8,6 +8,7 @@ class LabelView extends TextView {
public function new() {
super();
skinId = "label";
fill = false;
textField.selectable = false;
textField.wordWrap = false;

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -34,6 +34,7 @@ class TextView extends SpriteView implements ITextView {
public function new() {
super();
skinId = "text";
layout = new Layout();
textField = buildTextField();
textField.width = 1;

View File

@@ -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;
}

View File

@@ -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),
];
}
}