[sysui] Fix popup animations and positions after resizing

- fixed popups in Settings, Music, Tuner, Climate, Sheets

Fixes: AUTOSUITE-1476
Change-Id: Ie74b1b442085ba3b2af35b1140e0092355bd71e6
Reviewed-by: Egor Nemtsev <enemtsev@luxoft.com>

13 files changed, 205 insertions, 148 deletions

diff --git a/apps/com.pelagicore.apps.settings/popups/WiFiPopup.qml b/apps/com.pelagicore.apps.settings/popups/WiFiPopup.qml
index 430299ed..60927b00 100644
--- a/apps/com.pelagicore.apps.settings/popups/WiFiPopup.qml
+++ b/apps/com.pelagicore.apps.settings/popups/WiFiPopup.qml
@@ -54,113 +54,115 @@ PopupWindow {
         property bool okClicked: false
     }
 
-    Label {
-        anchors.baseline: parent.top
-        anchors.baselineOffset: Sizes.dp(78)
-        font.pixelSize: Sizes.fontSizeM
-        width: parent.width
-        text: !root.manual ? "Input password" : "Manual connection"
-        horizontalAlignment: Text.AlignHCenter
-    }
-    Image {
-        id: shadow
-        anchors.top: parent.top
-        anchors.topMargin: Sizes.dp(120)
-        width: parent.width
-        height: Sizes.dp(sourceSize.height)
-        source: Style.image("popup-title-shadow")
-    }
-
-    ColumnLayout {
-        id: columnFields
-        spacing: Sizes.dp(50)
-        anchors.top: parent.top
-        anchors.topMargin: Sizes.dp(170)
-        anchors.left: parent.left
-        anchors.leftMargin: Sizes.dp(100)
-        anchors.right: parent.right
-        anchors.rightMargin: Sizes.dp(100)
+    Item {
+        width: root.width
+        height: root.height
 
         Label {
-            id: ssidTitle
-            Layout.preferredHeight: Sizes.dp(50)
-            Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
-            verticalAlignment: Text.AlignBottom
-            Layout.bottomMargin: -Sizes.dp(25)
-            text: "SSID"
-            font.pixelSize: Sizes.fontSizeS
-            elide: Text.ElideRight
-            color: Style.contrastColor
+            anchors.baseline: parent.top
+            anchors.baselineOffset: Sizes.dp(78)
+            font.pixelSize: Sizes.fontSizeM
+            width: parent.width
+            text: !root.manual ? "Input password" : "Manual connection"
+            horizontalAlignment: Text.AlignHCenter
+        }
+        Image {
+            anchors.top: parent.top
+            anchors.topMargin: Sizes.dp(120)
+            width: parent.width
+            height: Sizes.dp(sourceSize.height)
+            source: Style.image("popup-title-shadow")
         }
 
-        TextField {
-            id: ssidTextField
-            Layout.fillWidth: true
-            Layout.preferredHeight: Sizes.dp(100)
-            font.family: Style.fontFamily
-            font.pixelSize: Sizes.fontSizeM
-            color: Style.contrastColor
-            selectedTextColor: Style.contrastColor
-            leftPadding: Sizes.dp(18)
-            rightPadding: Sizes.dp(63)
-            horizontalAlignment: TextInput.AlignLeft
-            readOnly: !root.manual
-
-            background: Rectangle {
-                border.color: Style.buttonColor
-                border.width: Sizes.dp(1)
-                color: "transparent"
-                radius: height/2
+        ColumnLayout {
+            id: columnFields
+            spacing: Sizes.dp(50)
+            anchors.top: parent.top
+            anchors.topMargin: Sizes.dp(170)
+            anchors.left: parent.left
+            anchors.leftMargin: Sizes.dp(100)
+            anchors.right: parent.right
+            anchors.rightMargin: Sizes.dp(100)
+
+            Label {
+                Layout.preferredHeight: Sizes.dp(50)
+                Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
+                verticalAlignment: Text.AlignBottom
+                Layout.bottomMargin: -Sizes.dp(25)
+                text: "SSID"
+                font.pixelSize: Sizes.fontSizeS
+                elide: Text.ElideRight
+                color: Style.contrastColor
             }
-        }
 
-        Label {
-            id: passwTitle
-            Layout.preferredHeight: Sizes.dp(50)
-            Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
-            verticalAlignment: Text.AlignBottom
-            Layout.bottomMargin: -Sizes.dp(25)
-            text: "Password"
-            font.pixelSize: Sizes.fontSizeS
-            elide: Text.ElideRight
-            color: Style.contrastColor
-        }
+            TextField {
+                id: ssidTextField
+                Layout.fillWidth: true
+                Layout.preferredHeight: Sizes.dp(100)
+                font.family: Style.fontFamily
+                font.pixelSize: Sizes.fontSizeM
+                color: Style.contrastColor
+                selectedTextColor: Style.contrastColor
+                leftPadding: Sizes.dp(18)
+                rightPadding: Sizes.dp(63)
+                horizontalAlignment: TextInput.AlignLeft
+                readOnly: !root.manual
+
+                background: Rectangle {
+                    border.color: Style.buttonColor
+                    border.width: 1
+                    color: "transparent"
+                    radius: height/2
+                }
+            }
 
-        TextField {
-            id: passwTextField
-            Layout.fillWidth: true
-            Layout.preferredHeight: Sizes.dp(100)
-            font.family: Style.fontFamily
-            font.pixelSize: Sizes.fontSizeM
-            color: Style.contrastColor
-            selectedTextColor: Style.contrastColor
-            leftPadding: Sizes.dp(18)
-            rightPadding: Sizes.dp(63)
-            horizontalAlignment: TextInput.AlignLeft
-
-            background: Rectangle {
-                border.color: Style.buttonColor
-                border.width: Sizes.dp(1)
-                color: "transparent"
-                radius: height/2
+            Label {
+                Layout.preferredHeight: Sizes.dp(50)
+                Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
+                verticalAlignment: Text.AlignBottom
+                Layout.bottomMargin: -Sizes.dp(25)
+                text: "Password"
+                font.pixelSize: Sizes.fontSizeS
+                elide: Text.ElideRight
+                color: Style.contrastColor
+            }
 
+            TextField {
+                id: passwTextField
+                Layout.fillWidth: true
+                Layout.preferredHeight: Sizes.dp(100)
+                font.family: Style.fontFamily
+                font.pixelSize: Sizes.fontSizeM
+                color: Style.contrastColor
+                selectedTextColor: Style.contrastColor
+                leftPadding: Sizes.dp(18)
+                rightPadding: Sizes.dp(63)
+                horizontalAlignment: TextInput.AlignLeft
+
+                background: Rectangle {
+                    border.color: Style.buttonColor
+                    border.width: 1
+                    color: "transparent"
+                    radius: height/2
+
+                }
             }
-        }
 
-    }
-    Button {
-        anchors.top: columnFields.bottom
-        anchors.topMargin: Sizes.dp(100)
-        anchors.right: parent.right
-        anchors.rightMargin: Sizes.dp(100)
-        width: Sizes.dp(315)
-        height: Sizes.dp(64)
-        font.pixelSize: Sizes.fontSizeS
-        text: "Connect"
-        onClicked: {
-            p.okClicked = true;
-            root.close();
-            root.connectClicked(ssidTextField.text, passwTextField.text);
+        }
+        Button {
+            anchors.top: columnFields.bottom
+            anchors.topMargin: Sizes.dp(100)
+            anchors.right: parent.right
+            anchors.rightMargin: Sizes.dp(100)
+            width: Sizes.dp(315)
+            height: Sizes.dp(64)
+            font.pixelSize: Sizes.fontSizeS
+            text: "Connect"
+            onClicked: {
+                p.okClicked = true;
+                root.connectClicked(ssidTextField.text, passwTextField.text);
+                root.close();
+            }
         }
     }
 
diff --git a/apps/com.pelagicore.apps.settings/views/SettingsView.qml b/apps/com.pelagicore.apps.settings/views/SettingsView.qml
index ccd6f83b..c4605b3b 100644
--- a/apps/com.pelagicore.apps.settings/views/SettingsView.qml
+++ b/apps/com.pelagicore.apps.settings/views/SettingsView.qml
@@ -53,15 +53,13 @@ Control {
     property Item rootItem
     property QtObject wifi
 
+    property int wifiPopupWidth: Sizes.dp(910);
+    property int wifiPopupHeight : Sizes.dp(820);
+
     WiFiPopup {
         id: wifiPopup
+
         manual: false
-        readonly property point pos: mapToItem(root, width/2, height/2)
-        width: Sizes.dp(910)
-        height: Sizes.dp(820)
-        originItemX: pos.x
-        originItemY: pos.y
-        popupY: Sizes.dp(Math.round(Config.centerConsoleHeight/2 - 410))
         onConnectClicked: wifi.sendCredentials(ssid, password)
         onCancelClicked: wifi.disconnectFromAccessPoint(wifi.activeAccessPoint.ssid)
     }
@@ -142,6 +140,10 @@ Control {
 
             WiFiPanel {
                 id: wifiPanel
+
+                property int wifiPopupWidth: Sizes.dp(910);
+                property int wifiPopupHeight : Sizes.dp(820);
+
                 objectName: "wifiPanel"
                 anchors.fill: parent
                 visible: toolsColumn.currentIcon === 'ic-connectivity' && connectivityPanel.view === 1
@@ -172,6 +174,13 @@ Control {
                 target: wifi
                 onCredentialsRequested: {
                     wifiPopup.ssid = ssid;
+                    wifiPopup.width = Qt.binding(() => wifiPanel.wifiPopupWidth);
+                    wifiPopup.height = Qt.binding(() => wifiPanel.wifiPopupHeight);
+                    wifiPopup.originItemX = Qt.binding(() => root.width / 2);
+                    wifiPopup.originItemY = Qt.binding(() => root.heigh / 2);
+                    wifiPopup.popupY = Qt.binding(() => {
+                        return Sizes.dp(root.height/2 - wifiPopup.height/2);
+                    });
                     wifiPopup.visible = true;
                 }
             }
diff --git a/apps/com.pelagicore.climate/panels/ClimateContentPanel.qml b/apps/com.pelagicore.climate/panels/ClimateContentPanel.qml
index 08519b30..506348fa 100644
--- a/apps/com.pelagicore.climate/panels/ClimateContentPanel.qml
+++ b/apps/com.pelagicore.climate/panels/ClimateContentPanel.qml
@@ -45,8 +45,6 @@ Item {
     property var store
     property bool seatTemperaturesLinked
 
-    anchors.fill: parent
-
     onSeatTemperaturesLinkedChanged: {
         if (seatTemperaturesLinked) {
             root.store.rightSeat.setValue(root.store.leftSeat.value);
diff --git a/apps/com.pelagicore.climate/popups/ClimatePopup.qml b/apps/com.pelagicore.climate/popups/ClimatePopup.qml
index 84fb96b9..a18d5faf 100644
--- a/apps/com.pelagicore.climate/popups/ClimatePopup.qml
+++ b/apps/com.pelagicore.climate/popups/ClimatePopup.qml
@@ -50,11 +50,9 @@ PopupWindow {
     LayoutMirroring.enabled: false
     LayoutMirroring.childrenInherit: true
 
-    width: Sizes.dp(910)
-    height: Sizes.dp(1426)
-
     ClimateContentPanel {
-        anchors.fill: parent
+        width: root.width
+        height: root.height
         store: root.store
         seatTemperaturesLinked: root.seatTemperaturesLinked
     }
diff --git a/apps/com.pelagicore.climate/views/ClimateView.qml b/apps/com.pelagicore.climate/views/ClimateView.qml
index a1c3a77c..75aadfc6 100644
--- a/apps/com.pelagicore.climate/views/ClimateView.qml
+++ b/apps/com.pelagicore.climate/views/ClimateView.qml
@@ -59,20 +59,29 @@ Item {
         anchors.fill: indicatorPanel
         onClicked: {
             climatePopup.store = root.store;
+
+            climatePopup.width = Qt.binding(() => Sizes.dp(910));
+            climatePopup.height = Qt.binding(() => Sizes.dp(1426));
+
+            climatePopup.originItemX = Qt.binding(() => {
+                return Sizes.dp(Config.centerConsoleWidth / 2);
+            });
+            climatePopup.originItemY = Qt.binding(() => {
+                return Sizes.dp(Config.centerConsoleHeight) - Math.round(root.height / 2);
+            });
+            climatePopup.popupY = Qt.binding(() => {
+                return Sizes.dp(Config.centerConsoleHeight) - climatePopup.height - Sizes.dp(90);
+            });
+
             climatePopup.visible = true;
         }
     }
 
-
     ClimatePopup {
         id: climatePopup
 
         // have to forward scale from root item as ClimatePopup is a Window, not an Item,
         // so value propagation doesn't quite apply
         Sizes.scale: root.Sizes.scale
-
-        originItemX: Sizes.dp(Config.centerConsoleWidth / 2);
-        originItemY: Sizes.dp(Config.centerConsoleHeight) - Math.round(root.height / 2);
-        popupY: Sizes.dp(Config.centerConsoleHeight) - climatePopup.height - Sizes.dp(90);
     }
 }
diff --git a/apps/com.pelagicore.music/popups/MusicSourcesPopup.qml b/apps/com.pelagicore.music/popups/MusicSourcesPopup.qml
index 2577342f..c8350b5c 100644
--- a/apps/com.pelagicore.music/popups/MusicSourcesPopup.qml
+++ b/apps/com.pelagicore.music/popups/MusicSourcesPopup.qml
@@ -51,7 +51,8 @@ PopupWindow {
     Item {
         id: popupContent
 
-        anchors.fill: parent
+        width: root.width
+        height: root.height
 
         Label {
             id: header
diff --git a/apps/com.pelagicore.music/views/FullScreenBottomView.qml b/apps/com.pelagicore.music/views/FullScreenBottomView.qml
index 47f0536c..82767f33 100644
--- a/apps/com.pelagicore.music/views/FullScreenBottomView.qml
+++ b/apps/com.pelagicore.music/views/FullScreenBottomView.qml
@@ -82,15 +82,32 @@ Item {
         }
         onClicked: {
             if (currentText === "sources") {
+                //set model each time to ensure data accuracy
+                musicSourcesPopup.model = root.store.musicSourcesModel
+
                 //FIXME in multiprocess store.musicSourcesModel.length returns 1
                 //even though is more. When spotify and/or web radio are uninstalled
                 //and installed again, then it updates fine.
-                var pos = currentItem.mapToItem(root.rootItem, currentItem.width/2, currentItem.height/2);
+                let pos = currentItem.mapToItem(root.rootItem,
+                                                currentItem.width / 2,
+                                                currentItem.height / 2);
+                let posX = pos.x / root.Sizes.scale;
+                let posY = pos.y / root.Sizes.scale;
+
+                // caclulate popup height based on musicSources list items
+                // + 200 for header & margins
+                musicSourcesPopup.height = Qt.binding(() => {
+                    return musicSourcesPopup.model
+                        ? root.Sizes.dp(200 + (musicSourcesPopup.model.count * 96))
+                        : root.Sizes.dp(296);
+                });
+                musicSourcesPopup.width = Qt.binding(() => root.Sizes.dp(910))
+                musicSourcesPopup.originItemX = Qt.binding(() => root.Sizes.dp(posX));
+                musicSourcesPopup.originItemY = Qt.binding(() => root.Sizes.dp(posY));
+                musicSourcesPopup.popupY = Qt.binding(() => {
+                    return root.Sizes.dp(Config.centerConsoleHeight / 4);
+                });
 
-                //set model each time to ensure data accuracy
-                musicSourcesPopup.model = root.store.musicSourcesModel
-                musicSourcesPopup.originItemX = pos.x;
-                musicSourcesPopup.originItemY = pos.y;
                 musicSourcesPopup.visible = true;
             }
         }
@@ -99,17 +116,6 @@ Item {
     MusicSourcesPopup {
         id: musicSourcesPopup
 
-        // MusicSourcesPopup a Window, not an Item, propagation of attached property values don't work
-        // So have to use the Sizes from elsewhere, from an actual Item.
-
-        width: root.Sizes.dp(910)
-
-        // caclulate popup height based on musicSources list items
-        // + 200 for header & margins
-        height: model ? root.Sizes.dp(200 + (model.count * 96)) : root.Sizes.dp(296)
-
-        popupY: root.Sizes.dp(Config.centerConsoleHeight / 4)
-
         onSwitchSourceClicked: {
             store.switchSource(source)
         }
diff --git a/apps/com.pelagicore.tuner/popups/MusicSourcesPopup.qml b/apps/com.pelagicore.tuner/popups/MusicSourcesPopup.qml
index 08db5223..4fa862c9 100644
--- a/apps/com.pelagicore.tuner/popups/MusicSourcesPopup.qml
+++ b/apps/com.pelagicore.tuner/popups/MusicSourcesPopup.qml
@@ -54,7 +54,8 @@ PopupWindow {
     Item {
         id: popupContent
 
-        anchors.fill: parent
+        width: root.width
+        height: root.height
 
         Label {
             id: header
diff --git a/apps/com.pelagicore.tuner/views/FullScreenBottomView.qml b/apps/com.pelagicore.tuner/views/FullScreenBottomView.qml
index 59b5813d..348ad3dd 100644
--- a/apps/com.pelagicore.tuner/views/FullScreenBottomView.qml
+++ b/apps/com.pelagicore.tuner/views/FullScreenBottomView.qml
@@ -58,11 +58,28 @@ Item {
         currentIndex: 1
         onClicked: {
             if (currentText === "sources") {
-                var pos = currentItem.mapToItem(root.rootItem, currentItem.width/2, currentItem.height/2);
                 //set model each time to ensure data accuracy
                 musicSourcesPopup.model = root.store.musicSourcesModel;
-                musicSourcesPopup.originItemX = pos.x;
-                musicSourcesPopup.originItemY = pos.y;
+
+                let pos = currentItem.mapToItem(root.rootItem
+                                                , currentItem.width / 2
+                                                , currentItem.height / 2);
+                let posX = pos.x / root.Sizes.scale;
+                let posY = pos.y / root.Sizes.scale;
+                // caclulate popup height based on musicSources list items
+                // + 200 for header & margins
+                musicSourcesPopup.height = Qt.binding(() => {
+                    return musicSourcesPopup.model
+                        ? root.Sizes.dp(200 + (musicSourcesPopup.model.count * 96))
+                        : root.Sizes.dp(296);
+                });
+                musicSourcesPopup.width = Qt.binding(() => root.Sizes.dp(910))
+                musicSourcesPopup.originItemX = Qt.binding(() => root.Sizes.dp(posX));
+                musicSourcesPopup.originItemY = Qt.binding(() => root.Sizes.dp(posY));
+                musicSourcesPopup.popupY = Qt.binding(() => {
+                    return root.Sizes.dp(Config.centerConsoleHeight / 4);
+                });
+
                 musicSourcesPopup.visible = true;
             } else if (currentText === "FM 1 band") {
                 root.store.freqPresets = 1;
@@ -76,11 +93,7 @@ Item {
 
     MusicSourcesPopup {
         id: musicSourcesPopup
-        width: root.Sizes.dp(910)
-        // caclulate popup height based on musicSources list items
-        // + 200 for header & margins
-        height: model ? root.Sizes.dp(200 + (model.count * 96)) : root.Sizes.dp(296)
-        popupY: root.Sizes.dp(Config.centerConsoleHeight / 4)
+
         onSwitchSourceClicked: {
             store.switchSource(source)
         }
diff --git a/dev/apps/com.pelagicore.sheets/components/PopupsPanel.qml b/dev/apps/com.pelagicore.sheets/components/PopupsPanel.qml
index 36f00d2b..202d0a22 100644
--- a/dev/apps/com.pelagicore.sheets/components/PopupsPanel.qml
+++ b/dev/apps/com.pelagicore.sheets/components/PopupsPanel.qml
@@ -54,10 +54,16 @@ Item {
         anchors.centerIn: parent
         text: "ListView Popup"
         onClicked: {
-            var pos = this.mapToItem(root.parent, this.width/2, this.height/2);
-            popupWithList.originItemX = pos.x;
-            popupWithList.originItemY = pos.y;
-            popupWithList.popupY = Math.round(Config.centerConsoleHeight / 4)
+            popupWithList.width = Qt.binding(() => Sizes.dp(910))
+            popupWithList.height = Qt.binding(() => Sizes.dp(450))
+
+            popupWithList.originItemX = Qt.binding(() => Sizes.dp(Config.centerConsoleWidth / 2));
+            popupWithList.originItemY = Qt.binding(() => Sizes.dp(Config.centerConsoleHeight / 2));
+
+            popupWithList.popupY = Qt.binding(() => {
+                return Sizes.dp(Config.centerConsoleHeight / 2) - popupWithList.height / 2;
+            });
+
             popupWithList.visible = true;
         }
     }
@@ -65,8 +71,9 @@ Item {
     PopupWithList {
         id: popupWithList
 
-        width: Sizes.dp(910)
-        height: Sizes.dp(450)
+        // have to forward scale from root item as PopupWithList is a Window, not an Item,
+        // so value propagation doesn't quite apply
+        Sizes.scale: root.Sizes.scale
     }
 }
 
diff --git a/dev/apps/com.pelagicore.sheets/popups/PopupWithList.qml b/dev/apps/com.pelagicore.sheets/popups/PopupWithList.qml
index 1c49a222..059f7fd6 100644
--- a/dev/apps/com.pelagicore.sheets/popups/PopupWithList.qml
+++ b/dev/apps/com.pelagicore.sheets/popups/PopupWithList.qml
@@ -44,7 +44,8 @@ PopupWindow {
     property var model: [{"text": "Purple"}, {"text" : "Deep blue"}, {"text" : "Violet"}]
 
     Item {
-        anchors.fill: parent
+        width: root.width
+        height: root.height
 
         Label {
             anchors.baseline: parent.top
diff --git a/imports_system/system/controls/AbstractPopupItem.qml b/imports_system/system/controls/AbstractPopupItem.qml
index ef765dd0..e290bb41 100644
--- a/imports_system/system/controls/AbstractPopupItem.qml
+++ b/imports_system/system/controls/AbstractPopupItem.qml
@@ -46,7 +46,7 @@ Control {
 
     Keys.onEscapePressed: { root.closeHandler(); }
 
-    // X and Y potition of the popup when open.
+    // X and Y position of the popup when open.
     // By default you have it horizontally centered and vertically aligned to the bottom
     property real popupX: Math.round((root.parent.width - root.width) / 2)
     property real popupY: root.parent.height - root.height - Sizes.dp(90)
diff --git a/sysui/centerconsole/ApplicationPopup.qml b/sysui/centerconsole/ApplicationPopup.qml
index 4dcebb21..1d7ea157 100644
--- a/sysui/centerconsole/ApplicationPopup.qml
+++ b/sysui/centerconsole/ApplicationPopup.qml
@@ -56,6 +56,18 @@ PopupItem {
         objectFollowsItemSize: false
     }
 
+    Connections {
+        target: root
+        // reset popup parameters on scale change
+        onHeightChanged: {
+            if ("open" === root.state) {
+                root.originItemX = root.window.windowProperty("originItemX")
+                root.originItemY = root.window.windowProperty("originItemY")
+                root.y = window.windowProperty("popupY")
+            }
+        }
+    }
+
     Component.onCompleted: {
         var nativePopup = !!window.popup
         if (nativePopup) {