diff --git a/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx b/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx index 99a0d49..1d6f656 100644 --- a/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx +++ b/src/client/haxe/ru/m/skin/ButtonSVGSkin.hx @@ -2,10 +2,12 @@ package ru.m.skin; import format.SVG; import haxework.color.Color; -import haxework.color.ColorUtil; import haxework.view.form.ButtonView; import haxework.view.skin.ISkin; +using StringTools; +using haxework.color.ColorUtil; + @:style class ButtonSVGSkin implements ISkin { @:style(null) private var svg:String; @@ -20,15 +22,15 @@ import haxework.view.skin.ISkin; } private inline function buildSVG(color:Color):SVG { - return new SVG(StringTools.replace(svg, "currentColor", '#${StringTools.hex(color)}')); + return new SVG(svg.replace("currentColor", '#${color}')); } private function init():Void { - svgs = new Map(); - svgs.set(ButtonState.UP, buildSVG(color)); - svgs.set(ButtonState.DOWN, buildSVG(ColorUtil.diff(color, -24))); - svgs.set(ButtonState.OVER, buildSVG(ColorUtil.diff(color, 24))); - svgs.set(ButtonState.DISABLED, buildSVG(ColorUtil.grey(color))); + svgs = new Map(); + svgs.set(UP, buildSVG(color)); + svgs.set(DOWN, buildSVG(color.diff(-24))); + svgs.set(OVER, buildSVG(color.diff(24))); + svgs.set(DISABLED, buildSVG(color.grey())); } public function draw(view:ButtonView):Void { @@ -37,7 +39,8 @@ import haxework.view.skin.ISkin; graphics.beginFill(0, 0); graphics.drawRect(0, 0, view.width, view.height); graphics.beginFill(color); - graphics.lineStyle(2, ColorUtil.multiply(color, 1.5)); + graphics.lineStyle(2, color.multiply(1.5)); + // ToDo: padding svg.render(graphics, 0, 0, Std.int(view.width * 0.8), Std.int(view.height * 0.8)); graphics.lineStyle(); graphics.endFill(); diff --git a/src/client/haxe/ru/m/tankz/AppTheme.hx b/src/client/haxe/ru/m/tankz/AppTheme.hx index 212cd26..2a45374 100644 --- a/src/client/haxe/ru/m/tankz/AppTheme.hx +++ b/src/client/haxe/ru/m/tankz/AppTheme.hx @@ -27,19 +27,19 @@ class AppTheme extends Theme { override private function reload():Void { super.reload(); - data.set("light", [ + register(new Style("light", [ "skin.background.color" => colors.light, - ]); + ])); - data.set("dark", [ + register(new Style("dark", [ "skin.background.color" => colors.dark, - ]); + ])); - data.set("font", create([ + register(new Style("font", [ "_" => null, ], ["text"])); - data.set("text.header", create([ + register(new Style("text.header", [ "font.size" => fontSize.big, "skin.background.color" => Color.fromInt(0x000000), "skin.background.alpha" => 0.1, @@ -48,54 +48,54 @@ class AppTheme extends Theme { "geometry.margin" => Box.fromArray([0, 0, 10, 30]), ], ["text"])); - data.set("button.menu", create([ + register(new Style("button.menu", [ "font.size" => fontSize.big, "geometry.padding" => Box.fromFloat(0), "geometry.width" => SizeValue.fromInt(250), "geometry.height" => SizeValue.fromInt(50), ], ["button"])); - data.set("text.box", create([ + register(new Style("text.box", [ "skin.background.color" => Color.fromInt(0x000000), "skin.background.alpha" => 0.1, "skin.border.color" => colors.light, ], ["text"])); - data.set("text.box.active", create([ + register(new Style("text.box.active", [ "skin.background.color" => Color.fromInt(0x55aa55), "skin.background.alpha" => 1, "skin.border.color" => Color.fromInt(0x88dd88), ], ["text"])); - data.set("button.level", create([ + register(new Style("button.level", [ "font.size" => fontSize.veryBig, "geometry.width" => SizeValue.fromInt(64), "geometry.height" => SizeValue.fromInt(64), "geometry.padding" => Box.fromFloat(0), ], ["button"])); - data.set("container", create([ + register(new Style("container", [ "geometry.width" => SizeValue.fromString("100%"), "geometry.height" => SizeValue.fromString("100%"), "layout.hAlign" => HAlign.CENTER, "layout.vAlign" => VAlign.MIDDLE, ], ["dark"])); - data.set("panel", create([ + register(new Style("panel", [ "geometry.width" => SizeValue.fromString("100%"), "geometry.padding" => Box.fromArray([10, 5]), "layout.vAlign" => VAlign.MIDDLE, ], ["light"])); - data.set("window", create([ + register(new Style("window", [ "geometry.padding" => Box.fromFloat(2), ], ["dark", "border"])); - data.set("line", create([ + register(new Style("line", [ "_" => null, ], ["border"])); - data.set("window.close", create([ + register(new Style("window.close", [ "skin" => function() return new ButtonSVGSkin(Assets.getText("resources/image/icon/window-close-solid.svg"), colors.light), "geometry.width" => SizeValue.fromInt(36), "geometry.height" => SizeValue.fromInt(36), @@ -110,16 +110,16 @@ class AppTheme extends Theme { } private function registerButton(name:String, resource:String):Void { - data.set('button.$name', [ + register(new Style('button.$name', [ "geometry.width" => SizeValue.fromInt(42), "geometry.height" => SizeValue.fromInt(42), "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light), - ]); - data.set('button.$name.small', [ + ])); + register(new Style('button.$name.small', [ "geometry.width" => SizeValue.fromInt(32), "geometry.height" => SizeValue.fromInt(32), "skin" => function() return new ButtonSVGSkin(Assets.getText('resources/image/icon/$resource'), colors.light), - ]); + ])); } }