fixes stats window height. makes it semi responsive

AlpineMapsOrg · Nov 4, 2023 · d975985 · d975985
1 parent 65cc4ff
commit d975985
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 33 deletions.
diff --git a/app/Main.qml b/app/Main.qml
@@ -8,8 +8,10 @@ import "components"
 
 Item {
     id: main
-    property int theme: Material.Light //Material.System
+    property int theme: Material.Light      //Material.System
     property int accent: Material.Green
+    property string selectedPage: "map";
+
 
     Rectangle {
         id: tool_bar
@@ -105,7 +107,7 @@ Item {
             text: stats_window.visible ? qsTr ("Hide Statistics") : qsTr("Statistics")
             iconSource: "../icons/minimal/charts.png"
             selectable: false
-            onClicked: stats_window.visible = !stats_window.visible
+            onClicked: toggleStatsWindow();
         }
 
         DrawerSpacer {}
@@ -121,6 +123,8 @@ Item {
     }
 
     function change_page(source, title) {
+        selectedPage = source.toLowerCase().replace(".qml", "");
+        if (selectedPage !== "map" && selectedPage !== "settings") stats_window.visible = false;
         if (source === "map") {
             if (main_stack_view.depth >= 1) main_stack_view.pop()
             page_title.visible = false
@@ -134,6 +138,12 @@ Item {
         page_title.visible = true
         search.visible = false
         page_title.text = title
+        main.onWidthChanged(); // trigger responsive updates manually
+    }
+
+    function toggleStatsWindow() {
+        stats_window.visible = !stats_window.visible
+        main.onWidthChanged(); // trigger responsive updates manually
     }
 
 
@@ -145,9 +155,9 @@ Item {
             tool_bar.visible = new_hud_visible;
         }
 
-        Keys.onPressed: {
+        Keys.onPressed: function(event){
             if (event.key === Qt.Key_S) {
-                stats_window.visible = !stats_window.visible
+                toggleStatsWindow();
             }
         }
     }

diff --git a/app/Settings.qml b/app/Settings.qml
@@ -26,28 +26,37 @@ import "components"
 Rectangle {
     id: settings_root
     color: "#00FFFFFF"
-    onWidthChanged: responsive_update()
-    onHeightChanged: responsive_update()
 
     function responsive_update() {
         var newWidth = 400;
-        if (settings_root.width < 600) newWidth = 300;
-        else if (settings_root.width < 300) newWidth = settings_root.width;
+        if (main.width < 600) newWidth = 300;
+        else if (main.width < 300) newWidth = settings_root.width;
         settings_frame.width = newWidth;
-        if (settings_root.width >= settings_root.height) {
+        if (main.width >= main.height) {
             // landscape
             settings_frame.anchors.left = undefined;
             settings_frame.height = settings_root.height;
         } else {
             // portrait
             settings_frame.anchors.left = settings_root.left;
-            let new_height = settings_root.height / 2.0;
-            if (settings_root.height < 400) new_height = settings_root.height / 1.3;
-            else if (settings_root.height < 700) new_height = settings_root.height / 1.5;
+            let new_height = main.height / 2.0;
+            if (!stats_window.visible) {
+                if (main.height < 400) new_height = main.height / 1.3;
+                else if (main.height < 700) new_height = main.height / 1.5;
+            }
             settings_frame.height = new_height
         }
     }
 
+    Connections {
+        target: main
+        function onWidthChanged() {
+            responsive_update();
+        }
+        function onHeightChanged() {
+            responsive_update();
+        }
+    }
 
     Rectangle {
         id: settings_frame

diff --git a/app/StatsWindow.qml b/app/StatsWindow.qml
@@ -12,13 +12,10 @@ Rectangle {
     id: statsMenu
 
     property int innerMargin: 10
-    property int maxHeight: main.height - tool_bar.height - 2*innerMargin
+    property int maxHeight:  main.height - tool_bar.height - 2*innerMargin
 
-    width: 270
-    x: 10
-    y: tool_bar.height + innerMargin
-    implicitHeight: main_content.height
     color:  Qt.alpha(Material.backgroundColor, 0.7)
+
     function responsive_update() {
         x = 10
         if (map.width >= map.height) {
@@ -27,16 +24,35 @@ Rectangle {
             height = main_content.height
             width = 300
         } else {
-            y = parseInt(main.height / 2.0)
-            statsMenu.anchors.margins = 0
-            height = main.height / 2.0
-            maxHeight = height
-            width = main.width - 2 * innerMargin
+            // usually on mobile devices (portrait mode)
+            if (main.selectedPage === "settings") {
+                y = tool_bar.height + innerMargin
+                height = main.height - main.height / 2.0 - tool_bar.height - 2 * innerMargin
+                maxHeight = height
+                width = main.width - 2 * innerMargin
+            } else {
+                y = parseInt(main.height / 2.0)
+                height = main.height / 2.0
+                maxHeight = height
+                width = main.width - 2 * innerMargin
+            }
+
+
         }
     }
 
     Component.onCompleted: responsive_update()
 
+    Connections {
+        target: main
+        function onWidthChanged() {
+            responsive_update();
+        }
+        function onHeightChanged() {
+            responsive_update();
+        }
+    }
+
     Connections {
         target: map
         function onHud_visible_changed(hud_visible) {
@@ -47,12 +63,6 @@ Rectangle {
             cursor_lon.text = lon.toFixed(5) + " °";
             cursor_alt.text = alt.toFixed(2) + " m";
         }
-        function onWidthChanged() {
-            responsive_update();
-        }
-        function onHeightChanged() {
-            responsive_update();
-        }
     }
 
     Pane {
@@ -105,7 +115,6 @@ Rectangle {
                     visible: false
                     backgroundColor: "transparent"
                     antialiasing: true
-                    //theme: ChartView.ChartThemeDark
                     PieSeries {
                         id: pieSeries
                         size: 0.65
@@ -127,7 +136,6 @@ Rectangle {
                             id: yAxis; min: 0.0; max: 100.0;
                         }
                     ]
-                    //theme: ChartView.ChartThemeDark
                 }
 
                 Label {
@@ -195,15 +203,23 @@ Rectangle {
                 }
             }
 
+            function _showGraphWindow() {
+                graph_dialog.visible = true;
+                in_animation.start();
+            }
+
+            function _hideGraphWindow() {
+                out_animation.start();
+            }
+
             function refreshGraph() {
                 // Check wether graph should be visible
                 if (Object.keys(stats_timing.open_timers).length > 0) {
                     if (!visible) {
-                        graph_dialog.visible = true;
-                        in_animation.start();
+                        _showGraphWindow();
                     }
                 } else if (visible) {
-                    out_animation.start();
+                    _hideGraphWindow();
                     return;
                 }
 
@@ -286,13 +302,18 @@ Rectangle {
 
                 padding: 0
                 Layout.columnSpan: 2
+                Layout.fillWidth: true;
+                Layout.preferredHeight: stats_timing_layout.implicitHeight;
 
                 background: Rectangle {
                     color: "transparent"
                 }
 
                 ColumnLayout {
                     id: stats_timing_layout;
+                    anchors.fill: parent;
+
+                    implicitHeight: 0
                 }
 
                 // Timer to decouple graph refreshes from the current frame time. (It's not necessary to update the graph at the same speed)