Merge lp:~mikemc/ubuntuone-credentials/fix-flicking-sizing into lp:ubuntuone-credentials

[Mike McCracken]

- Fix flickable scrolling. Fix sizing of nested Columns in LoginForm and RegisterForm, and use correct anchors.

- Fix flickable scrolling. Fix sizing of nested Columns in LoginForm and RegisterForm, and use correct anchors.

NOTE: unfortunately the diff is pretty awful because the changes removed a containing object and changed a lot of indentation, and this is confusing diff, resulting in something that looks like a lot of arbitrary changes.
I suggest using bzr qdiff with the "Complete" view setting or emacs ediff or something else that shows full text side-by-side to review so it's clearer what actually happened.

TO TEST ON SAUCY desktop:
sudo apt-get build-dep ubuntuone-credentials
sudo apt-get ubuntu-system-settings
branch this , cd into it
mkdir build
cmake -DLIB_SUFFIX=/i386-linux-gnu -DCMAKE_INSTALL_PREFIX=/usr ..
sudo make install

- run /usr/bin/system-settings
- click on "accounts" then "Add account", then "Ubuntu One"
- click on 'I am a new Ubuntu One user'
- resize the window so that the buttons are not visible. (This partially simulates the keyboard being visible on the device)
- flick upward so that the view scrolls up as much as possible.
It should come to a rest with the buttons completely visible at the bottom. It should NOT bounce back so that the top is visible.

ON DEVICE:
build on device using same steps as above but use this cmake:
cmake -DLIB_SUFFIX=/arm-linux-gnueabihf/ -DCMAKE_INSTALL_PREFIX=/usr/ ..

after 'make install', run system settings from the apps lens.

- tap on "accounts" then "Add account", then "Ubuntu One"
- tap on 'I am a new Ubuntu One user'
- tap in one of the text fields to bring up the keyboard
- flick upward to reveal buttons. they should remain visible just above the keyboard.

[Roberto Alsina (ralsina)]

review: Approve

[dobey (dobey)]

review: Approve

=== modified file 'online-accounts-provider/LoginForm.qml'
--- online-accounts-provider/LoginForm.qml	2013-09-03 20:37:39 +0000
+++ online-accounts-provider/LoginForm.qml	2013-09-06 17:23:31 +0000
@@ -1,36 +1,64 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 
-Rectangle {
-    // Set a non-zero height and width so that the parent Column in
-    // CredentialsUI lays out correctly. Set matching color so we
-    // don't see a line.
-    height: 0.001
-    width: main.width
-    color: main.parent.color 
+Column {
+    id: loginFormColumn
+    spacing: units.gu(2)
 
     property alias password: passwordTextField.text
     property alias twoFactorVisible: twoFactorUI.visible
     property alias twoFactorCode: twoFactorTextField.text
+    
+    Label {
+        text: "I am a returning user and my password is:"
+    }
+
+    TextField {
+        id: passwordTextField
+
+        placeholderText: "Your password"
+        echoMode: TextInput.Password
+        width: main.width - (2 * main.anchors.margins)
+
+        Keys.onReturnPressed: main.processForm();
+    }
+
+    Label {
+        text: '<a href="https://login.ubuntu.com/+forgot_password"><span style="color: #dd4814;">Forgotten your password?</span></a>'
+        textFormat: Text.RichText
+        onLinkActivated: { Qt.openUrlExternally(link); }
+    }
+
+    ButtonRow {
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        visible: !twoFactorUI.visible
+    }
 
     Column {
+        id: twoFactorUI
         spacing: units.gu(2)
+        width: parent.width
+        visible: false
 
         Label {
-            text: "I am a returning user and my password is:"
+            text: "Type your verification code:"
         }
+
         TextField {
-            id: passwordTextField
-
-            placeholderText: "Your password"
+            id: twoFactorTextField
+            placeholderText: "2-factor device code"
             echoMode: TextInput.Password
+            focus: true
             width: main.width - (2 * main.anchors.margins)
-
-            Keys.onReturnPressed: main.processForm();
+            Keys.onReturnPressed: {
+                main.processForm();
+            }
         }
 
         Label {
-            text: '<a href="https://login.ubuntu.com/+forgot_password"><span style="color: #dd4814;">Forgotten your password?</span></a>'
+            text: '<a href="https://login.ubuntu.com/+device-help"><span style="color: #dd4814;">Authentication Device Help</span></a>'
             textFormat: Text.RichText
             onLinkActivated: { Qt.openUrlExternally(link); }
         }
@@ -38,47 +66,9 @@
         ButtonRow {
             anchors.left: parent.left
             anchors.right: parent.right
-
-            visible: !twoFactorUI.visible
         }
 
-        Column {
-            id: twoFactorUI
-            spacing: units.gu(2)
-            height: 1
-            width: parent.width
-            visible: false
-
-            Label {
-                text: "Type your verification code:"
-            }
-
-            TextField {
-                id: twoFactorTextField
-                placeholderText: "2-factor device code"
-                echoMode: TextInput.Password
-                focus: true
-                width: main.width - (2 * main.anchors.margins)
-                Keys.onReturnPressed: {
-                    main.processForm();
-                }
-            }
-
-            Label {
-                text: '<a href="https://login.ubuntu.com/+device-help"><span style="color: #dd4814;">Authentication Device Help</span></a>'
-                textFormat: Text.RichText
-                onLinkActivated: { Qt.openUrlExternally(link); }
-            }
-
-            ButtonRow {
-                anchors.left: parent.left
-                anchors.right: parent.right
-            }
-
-        } // Rectangle : twoFactorUI
-
-
-    }// Column
+    }
 
     function resetUI() {
         twoFactorUI.visible = false;

=== modified file 'online-accounts-provider/Main.qml'
--- online-accounts-provider/Main.qml	2013-09-06 17:23:31 +0000
+++ online-accounts-provider/Main.qml	2013-09-06 17:23:31 +0000
@@ -20,31 +20,41 @@
 import Ubuntu.OnlineAccounts 0.1
 
 Flickable {
-    id: root
+    id: rootFlickable
+
+    property int keyboardSize: Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height : 0
+    contentHeight: editPageLoader.item.height + keyboardSize
 
     property url newAccountUrl: "NewAccount.qml"
     property url existingAccountUrl: "ExistingAccount.qml"
     property Component newAccountComponent: null
     property Component existingAccountComponent: null
 
-    property alias source: loader.source
-
     signal finished
 
-    anchors.left: parent.left
-    anchors.right: parent.right
-    contentHeight: contentItem.childrenRect.height
-
     Loader {
-        id: loader
+        id: editPageLoader
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.top: parent.top
         source: sourceComponent === null ? (account.accountId != 0 ? existingAccountUrl : newAccountUrl) : ""
         sourceComponent: account.accountId != 0 ? existingAccountComponent : newAccountComponent
 
+        onLoaded: {
+            /* NOTE: dirty hack to work around out grandparent Page (from
+               AccountCreationPage.qml in
+               ubuntu-system-settings-online-accounts) not being able
+               to find our Flickable, and not having an id set for us
+               to set flickable directly.
+
+               This will not be necessary once Bug #1221845 is fixed.
+             */
+            rootFlickable.parent.parent.flickable = rootFlickable;
+        }
+        
         Connections {
-            target: loader.item
-            onFinished: root.finished()
+            target: editPageLoader.item
+            onFinished: rootFlickable.finished()
         }
     }
 
@@ -53,8 +63,7 @@
         opacity: 0.7
         color: "white"
         visible: false
-        width: parent.width
-        height: parent.height
+        anchors.fill: parent
 
         ActivityIndicator {
             id: activity

=== modified file 'online-accounts-provider/NewAccount.qml'
--- online-accounts-provider/NewAccount.qml	2013-09-06 17:23:31 +0000
+++ online-accounts-provider/NewAccount.qml	2013-09-06 17:23:31 +0000
@@ -33,9 +33,6 @@
 
     signal finished
 
-    anchors.top: parent.top
-    anchors.left: parent.left
-    anchors.right: parent.right
     anchors.margins: units.gu(1)
 
     spacing: units.gu(2)
@@ -64,7 +61,6 @@
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.margins: parent.anchors.margins
-
     }
 
     Label {
@@ -88,6 +84,10 @@
 
     Row {
         spacing: units.gu(2)
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: parent.anchors.margins
+
         Switch {
             id: newUserToggleSwitch
             checked: false
@@ -96,13 +96,11 @@
                 toggleNewUser();
             }
         }
+
         Label {
             anchors.verticalCenter: newUserToggleSwitch.verticalCenter
             text: "I am a new Ubuntu One user"
         }
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: parent.anchors.margins
 
     } // Row
 
@@ -194,7 +192,7 @@
         interval: 0;
         onTriggered: submitFormFromTimer();
     }
-    
+
     function submitFormFromTimer() {
         validateInput();
         if (!formValid) {

=== modified file 'online-accounts-provider/RegisterForm.qml'
--- online-accounts-provider/RegisterForm.qml	2013-09-03 20:37:39 +0000
+++ online-accounts-provider/RegisterForm.qml	2013-09-06 17:23:31 +0000
@@ -1,64 +1,55 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 
-Rectangle {
-    /* Set a non-zero height and width so that the parent Column lays out
-       correctly. Set matching color so we don't see a 1px line. */
-
-    height: 0.001
-    width: main.width
-    color: main.parent.color
+Column {
+    id: registerFormColumn
+    spacing: units.gu(2)
 
     property alias password: passwordTextField.text
     property alias display_name: nameTextField.text
 
-
-    Column {
+    Label {
+        id: subtitle
+        text: "Please tell us your name and choose a password."
+    }
+    
+    TextField {
+        id: nameTextField
+        placeholderText: "Your name"
+        width: main.width - (2 * main.anchors.margins)
+    }
+
+    TextField {
+        id: passwordTextField
+        placeholderText: "Password with at least 8 characters"
+        echoMode: TextInput.Password
+        width: main.width - (2 * main.anchors.margins)
+    }
+
+    TextField {
+        id: confirmPasswordTextField
+        placeholderText: "Re-type password"
+        echoMode: TextInput.Password
+        width: main.width - (2 * main.anchors.margins)
+    }
+
+    Row {
         spacing: units.gu(2)
+        CheckBox {
+            id: termsAndConditionsCheckBox
+            checked: false
+        }
 
         Label {
-            id: subtitle
-            text: "Please tell us your name and choose a password."
-        }
-        
-        TextField {
-            id: nameTextField
-            placeholderText: "Your name"
-            width: main.width - (2 * main.anchors.margins)
-        }
-
-        TextField {
-            id: passwordTextField
-            placeholderText: "Password with at least 8 characters"
-            echoMode: TextInput.Password
-            width: main.width - (2 * main.anchors.margins)
-        }
-
-        TextField {
-            id: confirmPasswordTextField
-            placeholderText: "Re-type password"
-            echoMode: TextInput.Password
-            width: main.width - (2 * main.anchors.margins)
-        }
-        Row {
-            spacing: units.gu(2)
-            CheckBox {
-                id: termsAndConditionsCheckBox
-                checked: false
-            }
-
-            Label {
-                anchors.verticalCenter: termsAndConditionsCheckBox.verticalCenter
-                text: "I agree to the <a href='http://one.ubuntu.com/terms/'>Ubuntu One Terms and Conditions</a>"
-                onLinkActivated: { Qt.openUrlExternally(link); }
-            }
-        }
-
-        ButtonRow {
-            anchors.left: parent.left
-            anchors.right: parent.right
-        }
-
+            anchors.verticalCenter: termsAndConditionsCheckBox.verticalCenter
+            text: "I agree to the <a href='http://one.ubuntu.com/terms/'>Ubuntu One Terms and Conditions</a>"
+            onLinkActivated: { Qt.openUrlExternally(link); }
+        }
+    }
+
+    ButtonRow {
+        anchors.left: parent.left
+        anchors.right: parent.right
     }
 
     function resetUI() {