Merge lp:~mterry/ubuntu-system-settings/flickable-passwd-page into lp:ubuntu-system-settings

[Michael Terry]

Prevent the buttons of the wizard's password page from overlapping its content when the OSK appears. (LP: #1368346)

I added a Flickable to the page, so the page content can clip to the to top of the buttons. I also fixed the background image visibly moving up along with the OSK.

Prevent the buttons of the wizard's password page from overlapping its content when the OSK appears. (LP: #1368346)

I added a Flickable to the page, so the page content can clip to the to top of the buttons. I also fixed the background image visibly moving up along with the OSK.

I investigated a more generic solution (Flickable for all pages in the Page class), but that would involve quite an overhaul. All the content of the pages would need to be specified as Components (like the Forward button is now) in order to be able to parent them however the Page class likes. And that means nothing outside of that component can reference objects inside... It looked to be a pain. Not for this point in the cycle, I'd say

== Checklist ==

 * Is your branch in sync with latest trunk (e.g. bzr pull lp:trunk -> no changes)
 Yes

 * Did you build your software in a clean sbuild/pbuilder chroot or ppa?
 Just qml changes

 * Did you build your software in a clean sbuild/pbuilder armhf chroot or ppa?
 Just qml changes

 * Has your component "TestPlan” been executed successfully on emulator, N4?
 Yes

 * Has a 5 minute exploratory testing run been executed on N4?
 Yes

 * If you changed the packaging (debian), did you subscribe a core-dev to this MP?
 NA

 * If you changed the UI, did you subscribe the design-reviewers to this MP?
 Not really a design-reviewy change

 * What components might get impacted by your changes?
 Just wizard

 * Have you requested review by the teams of these owning components?
 Yes

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1059
http://jenkins.qa.ubuntu.com/job/ubuntu-system-settings-ci/1499/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4945
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-utopic/3606
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-system-settings-utopic-i386-ci/691
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/4700
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6197
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/6197/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/13387
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-utopic/2993
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-amd64/3915
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-amd64/3915/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-system-settings-ci/1499/rebuild

review: Approve (continuous-integration)

[Sebastien Bacher (seb128)]

thanks, that looks fine in principle to me but for some reason I can't get the wizard to run on my krillin/rtm (even using the archive version)

"Exiting Mir! Reason: Nested Mir and Host Mir cannot use the same socket file to accept connections!"

Do you know what's wrong there?

[Sebastien Bacher (seb128)]

let's get that in, it looks fine and I'm sure Michael test it, right? ;-)

=== modified file 'wizard/qml/Components/Page.qml'
--- wizard/qml/Components/Page.qml	2014-09-02 17:25:35 +0000
+++ wizard/qml/Components/Page.qml	2014-09-18 13:07:42 +0000
@@ -25,12 +25,11 @@
     readonly property real topMargin: units.gu(8)
     readonly property real leftMargin: units.gu(2)
     readonly property real rightMargin: units.gu(2)
-    readonly property real bottomMargin: backButton.height + buttonMargin * 2
 
     property bool hasBackButton: true
     property bool customBack: false
     property alias forwardButtonSourceComponent: forwardButton.sourceComponent
-    property alias content: contentItem
+    property alias content: contentHolder
 
     property string title: ""
 
@@ -58,16 +57,16 @@
     }
 
     Item {
-        id: contentItem
+        id: contentHolder
         anchors {
             top: titleLabel.bottom
             left: parent.left
             right: parent.right
-            bottom: parent.bottom
+            bottom: backButton.top
             topMargin: units.gu(4)
             leftMargin: leftMargin
             rightMargin: rightMargin
-            bottomMargin: bottomMargin
+            bottomMargin: buttonMargin
         }
     }
 

=== modified file 'wizard/qml/Pages/15-passwd.qml'
--- wizard/qml/Pages/15-passwd.qml	2014-08-27 17:31:12 +0000
+++ wizard/qml/Pages/15-passwd.qml	2014-09-18 13:07:42 +0000
@@ -71,95 +71,103 @@
         modemPath: manager.modems.length >= 2 ? manager.modems[1] : ""
     }
 
-    Column {
-        id: column
-        spacing: units.gu(2)
+    // Use a flickable for this so that we can properly clip the contents when
+    // the OSK appears.
+    Flickable {
         anchors.fill: content
-
-        ComboButton {
-            id: combo
-
-            text: listview.currentItem.text
-            onClicked: {
-                expanded = !expanded
-                forceActiveFocus() // hides OSK if up
-            }
-            UbuntuListView {
-                id: listview
+        clip: true
+        contentHeight: column.height
+        boundsBehavior: (contentHeight > height) ? Flickable.DragOverBounds : Flickable.StopAtBounds
+
+        Column {
+            id: column
+            spacing: units.gu(2)
+
+            ComboButton {
+                id: combo
+
+                text: listview.currentItem.text
+                onClicked: {
+                    expanded = !expanded
+                    forceActiveFocus() // hides OSK if up
+                }
+                UbuntuListView {
+                    id: listview
+                    width: parent.width
+                    height: combo.comboListHeight
+                    model: 3
+                    currentIndex: 1
+                    delegate: Standard {
+                        text: {
+                            var method = indexToMethod(modelData)
+                            if (method === UbuntuSecurityPrivacyPanel.Swipe)
+                                return i18n.tr("Swipe")
+                            else if (method === UbuntuSecurityPrivacyPanel.Passcode)
+                                return i18n.tr("PIN code")
+                            else
+                                return i18n.tr("Passphrase")
+                        }
+                        onClicked: {
+                            listview.currentIndex = index
+                            combo.expanded = false
+                        }
+                    }
+                }
+            }
+
+            TextField {
+                id: passwordInput
+                echoMode: TextInput.Password
+                inputMethodHints: {
+                    var hints = Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData
+                    if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
+                        hints |= Qt.ImhDigitsOnly
+                    return hints
+                }
+                inputMask: {
+                    if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
+                        return "9999"
+                    else
+                        return ""
+                }
+                visible: passwdPage.method !== UbuntuSecurityPrivacyPanel.Swipe
+            }
+
+            TextField {
+                id: confirmInput
+                echoMode: passwordInput.echoMode
+                inputMethodHints: passwordInput.inputMethodHints
+                inputMask: passwordInput.inputMask
+                visible: passwordInput.visible
+            }
+
+            Label {
+                id: problem
                 width: parent.width
-                height: combo.comboListHeight
-                model: 3
-                currentIndex: 1
-                delegate: Standard {
-                    text: {
-                        var method = indexToMethod(modelData)
-                        if (method === UbuntuSecurityPrivacyPanel.Swipe)
-                            return i18n.tr("Swipe")
-                        else if (method === UbuntuSecurityPrivacyPanel.Passcode)
-                            return i18n.tr("PIN code")
-                        else
-                            return i18n.tr("Passphrase")
-                    }
-                    onClicked: {
-                        listview.currentIndex = index
-                        combo.expanded = false
-                    }
-                }
-            }
-        }
-
-        TextField {
-            id: passwordInput
-            echoMode: TextInput.Password
-            inputMethodHints: {
-                var hints = Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData
-                if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
-                    hints |= Qt.ImhDigitsOnly
-                return hints
-            }
-            inputMask: {
-                if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
-                    return "9999"
-                else
+                wrapMode: Text.Wrap
+                visible: text !== ""
+                color: UbuntuColors.red
+                text: {
+                    if (passwordInput.visible) {
+                        if (passwordInput.text !== confirmInput.text) {
+                            if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
+                                return i18n.tr("Those PIN codes don't match.")
+                            else
+                                return i18n.tr("Those passphrases don't match.")
+                        } else if (passwordInput.text.length < 4) {
+                            // Note that the number four comes from PAM settings,
+                            // which we don't have a good way to interrogate.  We
+                            // only do this matching instead of PAM because we want
+                            // to set the password via PAM in a different place
+                            // than this page.  See comments at top of file.
+                            if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
+                                return i18n.tr("PIN code must be at least four digits long.")
+                            else
+                                return i18n.tr("Passphrase must be at least four characters long.")
+                        }
+                    }
                     return ""
-            }
-            visible: passwdPage.method !== UbuntuSecurityPrivacyPanel.Swipe
-        }
-
-        TextField {
-            id: confirmInput
-            echoMode: passwordInput.echoMode
-            inputMethodHints: passwordInput.inputMethodHints
-            inputMask: passwordInput.inputMask
-            visible: passwordInput.visible
-        }
-
-        Label {
-            id: problem
-            width: parent.width
-            wrapMode: Text.Wrap
-            visible: text !== ""
-            color: UbuntuColors.red
-            text: {
-                if (passwordInput.visible) {
-                    if (passwordInput.text !== confirmInput.text) {
-                        if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
-                            return i18n.tr("Those PIN codes don't match.")
-                        else
-                            return i18n.tr("Those passphrases don't match.")
-                    } else if (passwordInput.text.length < 4) {
-                        // Note that the number four comes from PAM settings,
-                        // which we don't have a good way to interrogate.  We
-                        // only do this matching instead of PAM because we want
-                        // to set the password via PAM in a different place
-                        // than this page.  See comments at top of file.
-                        if (passwdPage.method === UbuntuSecurityPrivacyPanel.Passcode)
-                            return i18n.tr("PIN code must be at least four digits long.")
-                        else
-                            return i18n.tr("Passphrase must be at least four characters long.")
-                    }
                 }
-                return ""
             }
         }
     }

=== modified file 'wizard/qml/main.qml'
--- wizard/qml/main.qml	2014-09-08 19:12:35 +0000
+++ wizard/qml/main.qml	2014-09-18 13:07:42 +0000
@@ -82,7 +82,12 @@
 
         Image {
             id: image
-            anchors.fill: parent
+            // Use x/y/height/width instead of anchors so that we don't adjust
+            // the image when the OSK appears.
+            x: 0
+            y: 0
+            height: root.height
+            width: root.width
             source: background.pictureUri
             fillMode: Image.PreserveAspectCrop
             visible: status === Image.Ready