Fix OSK overlapping input fields in login view and setup wizards

nymea-app/ui/KeyboardLoader.qml

@@ -29,16 +29,20 @@
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import QtQuick 2.4
+import QtQuick.Window 2.15
 
 Item {
     id: root
-    implicitHeight: active ? childrenRect.height : 0
+    implicitHeight: d.active
-    property bool active: d.kbd && d.kbd.active
+                    ? d.kbd.height
+                    : (Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height / Screen.devicePixelRatio : 0)
+
 
     Behavior on implicitHeight { NumberAnimation { duration: 130; easing.type: Easing.InOutQuad } }
 
     QtObject {
         id: d
+        property bool active: d.kbd && d.kbd.active
         property var kbd: null
         property string virtualKeyboardString:
             '

nymea-app/ui/components/WizardPageBase.qml

@@ -21,6 +21,8 @@ Page {
     signal back();
     signal extraButtonPressed();
 
+    readonly property int visibleContentHeight: contentFlickable.height - contentContainer.y
+
     ColumnLayout {
         anchors.fill: parent
         spacing: Style.margins
@@ -46,19 +48,30 @@ Page {
             }
         }
 
-
+        Flickable {
+            id: contentFlickable
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            clip: true
+            interactive: contentHeight > height
+            contentHeight: outerContentContainer.childrenRect.height
+            Column {
+                id: outerContentContainer
+                width: parent.width
+                spacing: Style.margins
                 Label {
                     id: textLabel
-            Layout.fillWidth: true
+                    width: parent.width - Style.margins * 2
-            Layout.margins: Style.margins
+                    anchors.horizontalCenter: parent.horizontalCenter
                     wrapMode: Text.WordWrap
                     horizontalAlignment: Text.AlignHCenter
                 }
 
-        Item {
+                ColumnLayout {
                     id: contentContainer
-            Layout.fillWidth: true
+                    width: parent.width
-            Layout.fillHeight: true
+                }
+            }
         }
 
         RowLayout {

nymea-app/ui/connection/NewConnectionWizard.qml

@@ -19,10 +19,15 @@ WizardPageBase {
     }
 
     content: ColumnLayout {
-        anchors.fill: parent
+        Layout.fillWidth: true
-        anchors.leftMargin: Style.margins
+        Layout.leftMargin: Style.margins
-        anchors.rightMargin: Style.margins
+        Layout.rightMargin: Style.margins
+        Layout.preferredHeight: root.visibleContentHeight
 
+        Item { Layout.fillHeight: true }
+
+        ColumnLayout {
+            Layout.fillHeight: false
             Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -41,7 +46,11 @@ WizardPageBase {
                 text: "nymea"
                 font: Style.hugeFont
             }
+        }
+        Item { Layout.fillHeight: true }
 
+        ColumnLayout {
+            Layout.fillHeight: false
             Label {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -60,10 +69,13 @@ WizardPageBase {
                 onLinkActivated: Qt.openUrlExternally(link)
             }
         }
+        Item { Layout.fillHeight: true }
+    }
 
     Component {
         id: connectionSelectionComponent
         WizardPageBase {
+            id: connectionSelectionPage
             title: qsTr("Connectivity")
             text: qsTr("How would you like to connect nymea to your network?")
 
@@ -73,13 +85,10 @@ WizardPageBase {
             onBack: pageStack.pop()
 
             content: ColumnLayout {
-                anchors {
+                Layout.fillWidth: true
-                    top: parent.top;
+                Layout.maximumWidth: 500
-                    bottom: parent.bottom;
+                Layout.preferredHeight: connectionSelectionPage.visibleContentHeight
-                    horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
-                    margins: Style.margins
-                }
-                width: Math.min(500, parent.width)
 
                 BigTile {
                     Layout.fillWidth: true
@@ -158,17 +167,10 @@ WizardPageBase {
             onBack: pageStack.pop()
 
             content: ColumnLayout {
-                anchors {
+                Layout.maximumWidth: 500
-                    top: parent.top
+                Layout.alignment: Qt.AlignHCenter
-                    bottom: parent.bottom
-                    horizontalCenter: parent.horizontalCenter
-                }
-                width: Math.min(500, parent.width)
 
-                ListView {
+                Repeater {
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                    clip: true
                     model: NymeaHostsFilterModel {
                         id: hostsProxy
                         discovery: nymeaDiscovery
@@ -197,7 +199,7 @@ WizardPageBase {
 
                     delegate: NymeaSwipeDelegate {
                         id: nymeaHostDelegate
-                        width: parent.width
+                        Layout.fillWidth: true
                         property var nymeaHost: hostsProxy.get(index)
                         property string defaultConnectionIndex: {
                             if (!nymeaHost) {
@@ -314,12 +316,11 @@ WizardPageBase {
             }
 
             content: ColumnLayout {
-                anchors {
+                Layout.fillWidth: true
-                    top: parent.top
+                Layout.margins: Style.margins
-                    bottom: parent.bottom
+                Layout.maximumWidth: 500
-                    horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
-                }
+
-                width: Math.min(500, parent.width - Style.margins * 2)
                 GridLayout {
                     columns: 2
 
@@ -365,6 +366,7 @@ WizardPageBase {
     Component {
         id: wiredInstructionsComponent
         WizardPageBase {
+            id: wiredInstructionsPage
             title: qsTr("Wired connection")
             text: qsTr("Connect the nymea system to your network using an ethernet cable and turn it on.")
 
@@ -372,8 +374,9 @@ WizardPageBase {
             onBack: pageStack.pop()
 
             content:Image {
-                anchors.fill: parent
+                Layout.fillWidth: true
-                anchors.margins: Style.margins
+                Layout.preferredHeight: wiredInstructionsPage.visibleContentHeight - Style.margins * 2
+                Layout.margins: Style.margins
                 fillMode: Image.PreserveAspectFit
                 sourceSize.width: width
                 source: "/ui/images/setupwizard/wired-connection.svg"
@@ -384,6 +387,7 @@ WizardPageBase {
     Component {
         id: wirelessInstructionsComponent
         WizardPageBase {
+            id: wirelessInstructionsPage
             title: qsTr("Wireless connection")
             text: qsTr("Turn the nymea system on by connecting the power cable and wait for it to start up.")
 
@@ -391,8 +395,9 @@ WizardPageBase {
             onBack: pageStack.pop()
 
             content: Image {
-                anchors.fill: parent
+                Layout.fillWidth: true
-                anchors.margins: Style.margins
+                Layout.preferredHeight: wirelessInstructionsPage.visibleContentHeight - Style.margins * 2
+                Layout.margins: Style.margins
                 fillMode: Image.PreserveAspectFit
                 sourceSize.width: width
                 source: "/ui/images/setupwizard/wireless-connection.svg"
@@ -458,12 +463,10 @@ WizardPageBase {
             }
 
             content: ListView {
-                anchors {
+                Layout.fillWidth: true
-                    top: parent.top
+                Layout.preferredHeight: visibleContentHeight
-                    bottom: parent.bottom
+                Layout.maximumWidth: 500
-                    horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
-                }
-                width: Math.min(500, parent.width)
 
                 model: BluetoothDeviceInfosProxy {
                     id: deviceInfosProxy
@@ -524,11 +527,15 @@ WizardPageBase {
             text: qsTr("Connecting to the nymea system...")
             showNextButton: false
 
-            content: BusyIndicator {
+            content: Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: visibleContentHeight
+                BusyIndicator {
                     anchors.centerIn: parent
                 }
             }
         }
+    }
 
     Component {
         id: wirelessSelectWifiComponent
@@ -540,12 +547,10 @@ WizardPageBase {
             property var wifiSetup: null
 
             content: ListView {
-                anchors {
+                Layout.fillWidth: true
-                    top: parent.top
+                Layout.maximumWidth: 500
-                    bottom: parent.bottom
+                Layout.alignment: Qt.AlignHCenter
-                    horizontalCenter: parent.horizontalCenter
+                Layout.preferredHeight: visibleContentHeight
-                }
-                width: Math.min(500, parent.width)
 
                 model: wifiSetup.accessPoints
                 clip: true
@@ -618,8 +623,10 @@ WizardPageBase {
             property string ssid: ""
 
             content: ColumnLayout {
-                anchors.centerIn: parent
+                Layout.fillWidth: true
-                width: Math.min(500, parent.width - Style.margins * 2)
+                Layout.maximumWidth: 500
+                Layout.alignment: Qt.AlignHCenter
+                Layout.margins: Style.margins
 
                 Label {
                     Layout.fillWidth: true
@@ -658,11 +665,15 @@ WizardPageBase {
             showNextButton: false
             onBack: pageStack.pop()
 
-            content: BusyIndicator {
+            content: Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: visibleContentHeight
+                BusyIndicator {
                     anchors.centerIn: parent
                 }
             }
         }
+    }
 
     Component {
         id: wirelessConnectionCompletedComponent
@@ -709,9 +720,10 @@ WizardPageBase {
             }
 
             content: ColumnLayout {
-                width: Math.min(500, parent.width - Style.margins * 2)
+                Layout.fillWidth: true
-                anchors.centerIn: parent
+                Layout.maximumWidth: 500
-                spacing: Style.margins
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredHeight: visibleContentHeight
                 Label {
                     Layout.fillWidth: true
                     wrapMode: Text.WordWrap