InfernalGames/haxework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[theme] use ResMap for theme skins

Browse Source
This commit is contained in:
shmyga
2019-07-10 19:43:19 +03:00
parent 4f3a6c5174
commit ce4f6854f7
21 changed files with 213 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
demo/src/demo/AppTheme.hx
View File

@@ -1,7 +1,6 @@
package demo;
import haxework.color.Color;
import haxework.view.core.Geometry;
import haxework.view.skin.Skin;
import haxework.view.theme.Theme;
@@ -11,25 +10,11 @@ class AppTheme extends Theme {
public function new(?color:Color, ?textColor:Color):Void {
super({name: "Courirer"}, {light: color, text: textColor});
var background = Skin.color(0x000000);
var border = Skin.border(colors.light.multiply(1.5), 1, 2);
data.set("text0", [
Skin.color(colors.light.diff(128)),
text(colors.light.diff(-128)),
]);
data.set("text1", [
Skin.color(colors.light.diff(64)),
text(colors.light.diff(-128)),
]);
data.set("text", data.get("text0"));
data.set("background", [background]);
data.set("button", [Skin.buttonColor(colors.light), text(colors.text)]);
data.set("tab", [Skin.tabColor(colors.light), text(colors.text), Skin.geometry(new Geometry().setPadding([25, 8]))]);
data.set("view", [Skin.color(colors.light), border, text(colors.text)]);
data.set("scroll", [Skin.scrollVertical(colors.light, colors.light.diff(128))]);
data.set("border", [border]);
data.set("panel", [background, border]);
}
data.set("test", [Skin.color(0x00ffff)]);
override private function reload():Void {
super.reload();
data.put("view", text().concat(background(colors.light)).concat(border()));
data.put("test", [Skin.color(0x00ffff)]);
}
}

13
demo/src/demo/Demo.hx
View File

@@ -2,6 +2,7 @@ package demo;
import demo.dispatch.DemoDispatcher;
import demo.popup.ColorPopup;
import demo.popup.FontPopup;
import haxework.App;
import haxework.log.TraceLogger;
import haxework.net.JsonLoader;
@@ -24,11 +25,11 @@ import haxework.view.IView;
}
private function choiceColor():Void {
// ToDo: update Theme
new ColorPopup()
.show();
/*.then(function(color) AppTheme.setColor(color))
.catchError(function(e) {});*/
new ColorPopup().show().then(function(color) theme.colors = {light: color});
}
private function choiceFont():Void {
new FontPopup().show().then(function(font) theme.font = font);
}
}
@@ -53,7 +54,7 @@ class Demo extends App implements DemoListener {
dispatcher.test3Signal.emit(1, "test");
dispatcher.test4Signal.emit(app);
new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
new JsonLoader().GET("https://embed.tvbit.co/channel/data2/renova.json")
.then(function(data:Array<Model>) {
app.resources.any.put("data", data);
app.resources.any.put("data50", Util.marray(data, 50));

12
demo/src/demo/DemoView.yaml
View File

@@ -23,7 +23,6 @@ views:
selected: "list"
- id: switcher
$type: haxework.view.frame.FrameSwitcher
skinId: panel
animateFactory: { $class: haxework.animate.SlideAnimate }
+onSwitch: ~onFrameSwitch
geometry.size.stretch: true
@@ -40,23 +39,18 @@ views:
layout.margin: 10
views:
- $type: haxework.view.form.ButtonView
geometry.padding: [25, 8]
skinId: button
text: Color
+onPress: ~choiceColor()
- $type: haxework.view.form.ButtonView
text: Font
+onPress: ~choiceFont()
# separator
- $type: haxework.view.SpriteView
geometry.size.stretch: true
- $type: haxework.view.form.ButtonView
geometry.padding: [25, 8]
skinId: button
text: OK
- $type: haxework.view.form.ButtonView
geometry.padding: [25, 8]
skinId: button
text: Apply
- $type: haxework.view.form.ButtonView
geometry.padding: [25, 8]
skinId: button
text: Cancel
+onPress: ~flash.system.System.exit(0)

1
demo/src/demo/form/DataForm.hx
View File

@@ -14,7 +14,6 @@ import haxework.view.text.TextView;
label.geometry.size.percent.width = 100;
label.geometry.margin = 1;
label.geometry.padding = 2;
label.skinId = "text";
label.text = (value.title != null ? '${value.title}\n-\n' : '') + value.message;
return label;
}

1
demo/src/demo/form/DataForm.yaml
View File

@@ -2,7 +2,6 @@
views:
- $type: haxework.view.ScrollView
geometry.size.stretch: true
scroll.skinId: scroll
view:
id: data
$type: haxework.view.data.DataView

1
demo/src/demo/form/ListForm.yaml
View File

@@ -7,5 +7,4 @@ views:
geometry.size.stretch: true
scroll:
$type: haxework.view.list.VScrollBarView
skinId: scroll
data: $r:any:data50

2
demo/src/demo/form/SelectForm.yaml
View File

@@ -5,7 +5,6 @@ views:
- $type: haxework.view.form.SelectView<String>
layout.margin: 2
dataView.layout.margin: 1
labelSkinId: text
data:
- "value 1"
- "value 2"
@@ -17,7 +16,6 @@ views:
- $type: haxework.view.form.SelectView.SelectIdView<{id:Int,label:String}, Int>
layout.margin: 2
dataView.layout.margin: 1
labelSkinId: text
labelBuilder: |
~function(item:{id:Int,label:String}):String {
var result = item.label;

1
demo/src/demo/form/TailForm.yaml
View File

@@ -2,7 +2,6 @@
views:
- $type: haxework.view.ScrollView
geometry.size.stretch: true
scroll.skinId: scroll
view:
id: data
$type: haxework.view.data.DataView

4
demo/src/demo/popup/ColorPopup.yaml
View File

@@ -6,7 +6,7 @@ view:
geometry.padding: 10
geometry.hAlign: center
geometry.vAlign: middle
skinId: panel
skinId: frame
views:
- id: colors
$type: haxework.view.data.DataView
@@ -29,7 +29,5 @@ view:
layout.margin: 10
views:
- $type: haxework.view.form.ButtonView
geometry.padding: [25, 8]
skinId: button
text: Cancel
+onPress: ~reject('cancel')

47
demo/src/demo/popup/FontPopup.hx Normal file
View File

@@ -0,0 +1,47 @@
package demo.popup;
import flash.text.Font;
import flash.text.FontType;
import haxework.view.list.LabelListItem;
import haxework.view.list.ListView;
import haxework.view.popup.PopupView;
import haxework.view.theme.ITheme;
class FontLabelView extends LabelListItem<ThemeFont> {
override private function set_data(value:ThemeFont):ThemeFont {
skinId = item_index % 2 == 0 ? "light" : "dark";
data = value;
text = value.name;
fontFamily = value.name;
fontEmbed = value.embed;
return data;
}
}
@:template class FontPopup extends PopupView<ThemeFont> {
@:view var fonts:ListView<ThemeFont>;
private function init():Void {
var values:Array<ThemeFont> = Font.enumerateFonts(true).map(function(font:Font) {
return {
name: font.fontName,
embed: switch font.fontType {
case DEVICE: false;
case _: true;
}
}
});
values.sort(function(a:ThemeFont, b:ThemeFont) {
return switch [a.embed, b.embed] {
case [false, true]: 1;
case [true, false]: -1;
case _: 0;
}
});
fonts.data = values;
}
private function fontViewFactory() return new FontLabelView();
}

25
demo/src/demo/popup/FontPopup.yaml Normal file
View File

@@ -0,0 +1,25 @@
---
view:
$type: haxework.view.group.VGroupView
geometry.size.width: 400
geometry.size.height: 80%
geometry.padding: 10
geometry.hAlign: center
geometry.vAlign: middle
skinId: frame
views:
- id: fonts
$type: haxework.view.list.VListView
geometry.size.stretch: true
factory: ~fontViewFactory
+onItemSelect: ~function(item) close(item.data)
scroll:
$type: haxework.view.list.VScrollBarView
- $type: haxework.view.group.HGroupView
geometry.size.width: 100%
geometry.margin.top: 10
layout.hAlign: right
views:
- $type: haxework.view.form.ButtonView
text: Cancel
+onPress: ~reject('cancel')

8
src/main/haxework/view/View.hx
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 {

1
src/main/haxework/view/form/ButtonView.hx
View File

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

1
src/main/haxework/view/form/LabelView.hx
View File

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

6
src/main/haxework/view/form/SelectView.hx
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;
}

1
src/main/haxework/view/frame/FrameView.hx
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;
}

1
src/main/haxework/view/list/HScrollBarView.hx
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;
}

1
src/main/haxework/view/list/VScrollBarView.hx
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;
}

1
src/main/haxework/view/text/TextView.hx
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;

15
src/main/haxework/view/theme/ITheme.hx
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;
}

135
src/main/haxework/view/theme/Theme.hx
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),
];
}
}