Fix issue #100 by replaceing custom popup with Qt Controls popup

ScreenPlay/main.qml

@@ -116,10 +116,6 @@ ApplicationWindow {
         function onRequestNavigation(nav) {
             switchPage(nav)
         }
-        function onRequestToggleWallpaperConfiguration() {
-            monitors.state = monitors.state == "active" ? "inactive" : "active"
-            ScreenPlay.screenPlayManager.requestProjectSettingsAtMonitorIndex(0)
-        }
     }
 
     Connections {
@@ -315,19 +311,13 @@ ApplicationWindow {
             left: parent.left
         }
         onChangePage: {
-            if (monitors.state === "active") {
+            monitors.close()
-                monitors.state = "inactive"
-            }
-
             switchPage(name)
         }
     }
 
     Monitors {
         id: monitors
-        state: "inactive"
-        anchors.fill: pageLoader
-        z: 98
     }
 
 }

ScreenPlay/qml/Monitors/Monitors.qml

@@ -9,46 +9,42 @@ import ScreenPlay 1.0
 import ScreenPlay.Enums.InstalledType 1.0
 import "../Common/" as SP
 
-Item {
+Popup {
     id: monitors
-    state: "inactive"
+    width: 1000
+    height: 500
+    dim: true
+    anchors.centerIn: Overlay.overlay
+
+    modal: true
     focus: true
+    background: Rectangle {
+        anchors.fill: parent
+        color: Material.theme === Material.Light ? "white" : Material.background
+    }
 
     property string activeMonitorName: ""
     property int activeMonitorIndex
 
-    onStateChanged: {
+    Connections {
-        bgMouseArea.focus = monitors.state == "active" ? true : false
+        target: ScreenPlay.util
-        if (monitors.state === "active") {
+        function onRequestToggleWallpaperConfiguration() {
-            ScreenPlay.screenPlayManager.requestProjectSettingsAtMonitorIndex(0)
+            monitors.open()
         }
     }
 
-    Rectangle {
+    onOpened: {
-        id: background
+        ScreenPlay.screenPlayManager.requestProjectSettingsAtMonitorIndex(
-        color: "#cc000000"
+                          0)
-        anchors.fill: parent
-
-        MouseArea {
-            id: bgMouseArea
-            anchors.fill: parent
-            onClicked: monitors.state = "inactive"
-        }
     }
 
-    Rectangle {
+    Item {
         id: monitorsSettingsWrapper
-        color: Material.theme === Material.Light ? "white" : Material.background
+
-        radius: 3
-        z: 98
-        width: 1000
-        height: 500
         clip: true
         anchors {
-            top: parent.top
+            fill: parent
-            topMargin: 50
+            margins: 10
-            horizontalCenter: parent.horizontalCenter
-            margins: 50
         }
 
         Item {
@@ -92,11 +88,13 @@ Item {
                 availableHeight: 150
 
                 onRequestProjectSettings: {
+
                     if (installedType === InstalledType.VideoWallpaper) {
                         videoControlWrapper.state = "visible"
                         customPropertiesGridView.visible = false
                         print(appID)
-                        const wallpaper = ScreenPlay.screenPlayManager.getWallpaperByAppID(appID)
+                        const wallpaper = ScreenPlay.screenPlayManager.getWallpaperByAppID(
+                                            appID)
                         print("volume", wallpaper.volume)
                     } else {
                         videoControlWrapper.state = "hidden"
@@ -219,101 +217,23 @@ Item {
                 }
             }
         }
-        MouseArea {
+
+
+        ToolButton{
             anchors {
                 top: parent.top
                 right: parent.right
-                margins: 5
             }
             width: 32
             height: width
-            cursorShape: Qt.PointingHandCursor
+            icon.width: 16
-            onClicked: monitors.state = "inactive"
+            icon.height:16
+            icon.source: "qrc:/assets/icons/font-awsome/close.svg"
+            icon.color: "gray"
+            onClicked: monitors.close()
 
-            Image {
-                id: imgClose
-                source: "qrc:/assets/icons/font-awsome/close.svg"
-                width: 16
-                height: 16
-                anchors.centerIn: parent
-                sourceSize: Qt.size(width, width)
-            }
-            ColorOverlay {
-                id: iconColorOverlay
-                anchors.fill: imgClose
-                source: imgClose
-                color: "gray"
-            }
         }
     }
-
-    states: [
-        State {
-            name: "active"
-
-            PropertyChanges {
-                target: monitors
-                opacity: 1
-                enabled: true
-            }
-
-            PropertyChanges {
-                target: background
-                opacity: 1
-            }
-
-            PropertyChanges {
-                target: monitorsSettingsWrapper
-                anchors.topMargin: 50
-            }
-        },
-        State {
-            name: "inactive"
-            PropertyChanges {
-                target: monitors
-                opacity: 0
-                enabled: false
-            }
-
-            PropertyChanges {
-                target: background
-                opacity: 0
-            }
-            PropertyChanges {
-                target: monitorsSettingsWrapper
-                anchors.topMargin: 150
-            }
-        }
-    ]
-
-    transitions: [
-        Transition {
-            from: "active"
-            to: "inactive"
-            reversible: true
-
-            PropertyAnimation {
-                target: background
-                property: "opacity"
-                duration: 200
-                easing.type: Easing.OutQuart
-            }
-
-            PropertyAnimation {
-                target: monitorsSettingsWrapper
-                property: "anchors.topMargin"
-                duration: 200
-                easing.type: Easing.OutQuad
-            }
-
-            NumberAnimation {
-                target: monitors
-                property: "opacity"
-                duration: 200
-                easing.type: Easing.OutQuad
-            }
-        }
-    ]
 }
 
 /*##^##

ScreenPlay/qml/Monitors/MonitorsProjectSettingItem.qml

@@ -92,6 +92,7 @@ Item {
                 id: root
                 anchors.fill: parent
                 property bool value
+                signal save(var value)
 
                 CheckBox {
                     id: checkbox
@@ -104,7 +105,7 @@ Item {
                     onCheckedChanged: {
                         let obj = {
                             "value": checkbox.checked,
-                            "type": "checkBox",
+                            "type": "checkBox"
                         }
 
                         root.save(obj)
@@ -156,10 +157,9 @@ Item {
                         rctPreviewColor.color = colorDialog.color
                         let tmpColor = "'" + colorDialog.color.toString() + "'"
 
-
                         let obj = {
                             "value": colorDialog.color,
-                            "type": "color",
+                            "type": "color"
                         }
 
                         root.save(obj)
@@ -180,7 +180,7 @@ Item {
                 property int from
                 property int to
                 property int value
-                property int stepSize
+                property int stepSize: 1
 
                 signal save(var value)
 
@@ -201,7 +201,7 @@ Item {
                     }
 
                     onValueChanged: {
-                        var value = Math.round(slider.value * 100) / 100
+                        const value = Math.trunc(slider.value * 100) / 100
                         txtSliderValue.text = value
 
                         let obj = {