[view] add fullscreen icons

package.json

@@ -1,6 +1,6 @@
 {
     "name": "puzzlez",
-    "version": "0.4.3",
+    "version": "0.4.4",
     "private": true,
     "devDependencies": {
         "dateformat": "^3.0.3",

src/haxe/ru/m/Device.hx

@@ -1,7 +1,9 @@
 package ru.m;
 
 import flash.display.StageDisplayState;
+import flash.events.FullScreenEvent;
 import flash.Lib;
+import haxework.signal.Signal;
 
 enum abstract Platform(String) from String to String {
     var ANDROID = "android";
@@ -52,14 +54,24 @@ class Device {
         #end
     }
 
+    public static var fullScreenSignal(get, null):Signal<Bool>;
+
+    private static function get_fullScreenSignal():Signal<Bool> {
+        if (fullScreenSignal == null) {
+            fullScreenSignal = new Signal();
+            Lib.current.stage.addEventListener(FullScreenEvent.FULL_SCREEN, (event:FullScreenEvent) -> fullScreenSignal.emit(event.fullScreen));
+        }
+        return fullScreenSignal;
+    }
+
     public static var fullScreenSupport(get, never):Bool;
 
     public static function get_fullScreenSupport():Bool {
-        return Lib.current.stage.allowsFullScreenInteractive;
+        return Lib.current.stage.allowsFullScreen;
     }
 
     public static function toggleFullScreen():Void {
         Lib.current.stage.displayState = Lib.current.stage.displayState == StageDisplayState.NORMAL ?
-        StageDisplayState.FULL_SCREEN_INTERACTIVE : StageDisplayState.NORMAL;
+        StageDisplayState.FULL_SCREEN : StageDisplayState.NORMAL;
     }
 }

src/haxe/ru/m/puzzlez/PuzzlezTheme.hx

@@ -1,16 +1,26 @@
 package ru.m.puzzlez;
 
-import haxework.view.geometry.VAlign;
-import haxework.view.geometry.HAlign;
 import haxework.color.Color;
 import haxework.view.geometry.Box;
+import haxework.view.geometry.HAlign;
 import haxework.view.geometry.SizeValue;
+import haxework.view.geometry.VAlign;
 import haxework.view.theme.Theme;
 import openfl.Assets;
 import ru.m.skin.ButtonSVGSkin;
 
 class PuzzlezTheme extends Theme {
 
+    private static var ICONS:Map<String, String> = [
+        "close" => "times-circle-solid.svg",
+        "setting" => "cog-solid.svg",
+        "image" => "image-polaroid.svg",
+        "lock" => "lock-alt-solid.svg",
+        "restore" => "window-restore-solid.svg",
+        "compress" => "compress-solid.svg",
+        "expand" => "expand-solid.svg",
+    ];
+
     public function new() {
         super({embed: true}, {light: "gray"}, {base: Device.isMobile() ? 32 : 22});
         register(new Style("frame", [
@@ -35,21 +45,11 @@ class PuzzlezTheme extends Theme {
             "skin" => function() return new ButtonSVGSkin(),
             "skin.color" => colors.light,
         ]));
-        register(new Style("icon.close", [
+        for (key in ICONS.keys()) {
-            "skin.svg" => Assets.getText("resources/icon/times-circle-solid.svg"),
+            register(new Style('icon.${key}', [
-        ]));
+                "skin.svg" => Assets.getText('resources/icon/${ICONS.get(key)}'),
-        register(new Style("icon.setting", [
-            "skin.svg" => Assets.getText("resources/icon/cog-solid.svg"),
-        ]));
-        register(new Style("icon.image", [
-            "skin.svg" => Assets.getText("resources/icon/image-polaroid.svg"),
-        ]));
-        register(new Style("icon.lock", [
-            "skin.svg" => Assets.getText("resources/icon/lock-alt-solid.svg"),
-        ]));
-        register(new Style("icon.restore", [
-            "skin.svg" => Assets.getText("resources/icon/window-restore-solid.svg"),
             ]));
+        }
         register(new Style("icon.small", [
             "geometry.width" => SizeValue.fromInt(smallSize),
             "geometry.height" => SizeValue.fromInt(smallSize),

src/haxe/ru/m/puzzlez/view/PuzzlezAppView.hx

@@ -3,12 +3,15 @@ package ru.m.puzzlez.view;
 import flash.events.KeyboardEvent;
 import flash.ui.Keyboard;
 import haxework.resources.IResources;
+import haxework.view.form.ButtonView;
 import haxework.view.frame.FrameSwitcher;
 import haxework.view.group.VGroupView;
 
 @:template class PuzzlezAppView extends VGroupView {
 
     @:view("switcher") var switcherView:FrameSwitcher;
+    @:view("fullscreen") var fullscreenButton:ButtonView;
+
     @:provide var switcher:FrameSwitcher;
     @:provide var resources:IResources;
 
@@ -17,6 +20,8 @@ import haxework.view.group.VGroupView;
         resources.text.put("version", Const.instance.VERSION);
         resources.text.put("name", Const.instance.NAME);
         switcher = switcherView;
+        fullscreenButton.visible = Device.fullScreenSupport;
+        Device.fullScreenSignal.connect(fullscreen -> fullscreenButton.style = fullscreen ? "icon.compress" : "icon.expand");
     }
 
     public function launch():Void {

src/haxe/ru/m/puzzlez/view/PuzzlezAppView.yaml

@@ -9,3 +9,12 @@ views:
       _image_list_: {$class: ru.m.puzzlez.view.ImageListFrame}
       _preset_: {$class: ru.m.puzzlez.view.PresetFrame}
       _game_: {$class: ru.m.puzzlez.view.GameFrame}
+  - id: fullscreen
+    $type: haxework.view.form.ButtonView
+    geometry.position: absolute
+    geometry.hAlign: right
+    geometry.vAlign: bottom
+    geometry.margin: 10
+    style: icon.expand
+    +onPress: ~Device.toggleFullScreen()
+    visible: false

src/haxe/ru/m/puzzlez/view/StartFrame.hx

@@ -1,7 +1,5 @@
 package ru.m.puzzlez.view;
 
-import openfl.display.StageDisplayState;
-import flash.Lib;
 import haxework.view.data.DataView;
 import haxework.view.form.ButtonView;
 import haxework.view.frame.FrameSwitcher;
@@ -24,7 +22,6 @@ import ru.m.update.Updater;
     @:view("load") var loadButton:ButtonView;
     @:view("complete") var completeButton:ButtonView;
     @:view("update") var updateButton:ButtonView;
-    @:view("fullscreen") var fullscreenButton:ButtonView;
 
     @:provide var storage:ImageStorage;
     @:provide var switcher:FrameSwitcher;
@@ -33,7 +30,6 @@ import ru.m.update.Updater;
 
     public function new() {
         super(ID);
-        fullscreenButton.visible = Device.fullScreenSupport;
         var data:Array<ImageListSource> = [];
         data.push({title: "Assets", source: storage.sources.get(AssetSource.ID)});
         data.push({title: "Files", source: storage.sources.get(FileSource.ID)});

src/haxe/ru/m/puzzlez/view/StartFrame.yaml

@@ -42,18 +42,16 @@ views:
         +onPress: ~games('complete')
       - $type: haxework.view.SpriteView
         geometry.width: 100%
-      - id: update
-        $type: haxework.view.form.ButtonView
-        style: button.active
-        +onPress: ~appUpdater.download()
-        visible: false
-      - id: fullscreen
-        $type: haxework.view.form.ButtonView
-        text: Fullscreen
-        +onPress: ~Device.toggleFullScreen()
-        visible: false
   - $type: haxework.view.form.LabelView
     text: $r:text:version
     geometry.position: absolute
     geometry.hAlign: right
     geometry.vAlign: top
+  - id: update
+    $type: haxework.view.form.ButtonView
+    style: button.active
+    geometry.position: absolute
+    geometry.hAlign: left
+    geometry.vAlign: top
+    +onPress: ~appUpdater.download()
+    visible: false

src/resources/icon/compress-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress" class="svg-inline--fa fa-compress fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path></svg>

src/resources/icon/expand-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" class="svg-inline--fa fa-expand fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>