[view] add fullscreen icons

2020-03-23 22:00:54 +03:00
parent a1402d2a04
commit 9dc3eb4e04
9 changed files with 56 additions and 34 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "puzzlez",
-    "version": "0.4.3",
+    "version": "0.4.4",
    "private": true,
    "devDependencies": {
        "dateformat": "^3.0.3",
--- a/src/haxe/ru/m/Device.hx
+++ b/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;
    }
 }
--- a/src/haxe/ru/m/puzzlez/PuzzlezTheme.hx
+++ b/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", [
-            "skin.svg" => Assets.getText("resources/icon/times-circle-solid.svg"),
-        ]));
-        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"),
-        ]));
+        for (key in ICONS.keys()) {
+            register(new Style('icon.${key}', [
+                "skin.svg" => Assets.getText('resources/icon/${ICONS.get(key)}'),
+            ]));
+        }
        register(new Style("icon.small", [
            "geometry.width" => SizeValue.fromInt(smallSize),
            "geometry.height" => SizeValue.fromInt(smallSize),
--- a/src/haxe/ru/m/puzzlez/view/PuzzlezAppView.hx
+++ b/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 {
--- a/src/haxe/ru/m/puzzlez/view/PuzzlezAppView.yaml
+++ b/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
--- a/src/haxe/ru/m/puzzlez/view/StartFrame.hx
+++ b/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)});
--- a/src/haxe/ru/m/puzzlez/view/StartFrame.yaml
+++ b/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
--- a/src/resources/icon/compress-solid.svg
+++ b/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>
--- a/src/resources/icon/expand-solid.svg
+++ b/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>
				`@@ -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>