status bar area dimming in the page

Author: Artem Marchenko

components/IOSPage.qml

@@ -29,6 +29,25 @@ Item {
         color: "#f6f5f1"
     }
 
+    // Ugly hack for status bar area dimming. Doesn't have desaturation and just shows gray rectangle on top
+    Item {
+        id: statusBarOverlay
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: -5
+        visible: backgroundOverlay.visible
+        opacity: backgroundOverlay.opacity
+        z: 500
+        height: 20
+
+        Rectangle {
+            anchors.fill: parent
+            color: "black"
+            opacity: 0.4
+        }
+    }
+
     Item {
         id: backgroundOverlay
         anchors.fill: parent

main.qml

@@ -8,6 +8,24 @@ Item {
     width: 320
     height: 568
 
+    Rectangle {
+        id: statusBarWrapper
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        height: childrenRect.height
+        color: "#f6f5f1"
+
+        Image {
+            id: statusBar
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
+            fillMode: Image.PreserveAspectFit
+            source: "../images/black-statusbar.png"
+            height: sourceSize.height / 2
+        }
+    }
+
     StackView {
         id: pageStack
         anchors.left: parent.left
@@ -94,23 +112,4 @@ Item {
         initialItem: MainPage {
         }
     }
-
-    Rectangle {
-        id: statusBarWrapper
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        height: childrenRect.height
-        color: "#f6f5f1"
-
-        Image {
-            id: statusBar
-            anchors.leftMargin: 8
-            anchors.rightMargin: 8
-            fillMode: Image.PreserveAspectFit
-            source: "../images/black-statusbar.png"
-            height: sourceSize.height / 2
-        }
-    }
-
 }

pages/MainPage.qml

@@ -8,6 +8,7 @@ import "../settings.js" as Settings
 
 IOSPage {
     id: wholePage
+    clip: false
 
     MouseArea {
         id: pageArea