Tweaked InitializationPage UI

1. Only load app icon once
2. Removed come unused ids and attributes
3. EnterKey magic
4. Use FadeAnimation

qml/pages/InitializationPage.qml

@@ -16,7 +16,7 @@
     You should have received a copy of the GNU General Public License
     along with Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
 */
-import QtQuick 2.6
+import QtQuick 2.0
 import Sailfish.Silica 1.0
 import WerkWolf.Fernschreiber 1.0
 
@@ -29,11 +29,6 @@ Page {
     property int authorizationState: TelegramAPI.Closed
     property var authorizationStateData: null
 
-    BusyLabel {
-        text: qsTr("Loading...")
-        running: initializationPage.loading
-    }
-
     Component.onCompleted: {
         initializationPage.authorizationState = tdLibWrapper.getAuthorizationState();
         initializationPage.authorizationStateData = tdLibWrapper.getAuthorizationStateData();
@@ -44,6 +39,7 @@ Page {
             initializationPage.loading = false;
             welcomeColumn.visible = false;
             enterPinColumn.visible = true;
+            enterPinField.focus = true
             enterPasswordColumn.visible = false;
             waitRegistrationColumn.visible = false;
             break;
@@ -60,6 +56,7 @@ Page {
             enterPinColumn.visible = false;
             enterPasswordColumn.visible = false;
             waitRegistrationColumn.visible = true;
+            pageHeader.title = qsTr("User Registration")
             break;
         default:
             // Nothing ;)
@@ -73,6 +70,7 @@ Page {
             case TelegramAPI.WaitCode:
                 initializationPage.loading = false;
                 enterPinColumn.visible = true;
+                enterPinField.focus = true
                 enterPasswordColumn.visible = false;
                 waitRegistrationColumn.visible = false;
                 break;
@@ -103,21 +101,21 @@ Page {
 
     SilicaFlickable {
         id: welcomeFlickable
-        contentHeight: contentItem.childrenRect.height
+        contentHeight: content.height
         Behavior on contentHeight { NumberAnimation {} }
         anchors.fill: parent
 
         Column {
-            id: welcomeColumn
+            id: content
             width: parent.width
-            spacing: Theme.paddingSmall
+            spacing: Theme.paddingLarge
 
             PageHeader {
+                id: pageHeader
                 title: qsTr("Welcome to Fernschreiber!")
             }
 
             Image {
-                id: fernschreiberImage
                 source: "../../images/fernschreiber.png"
                 anchors {
                     horizontalCenter: parent.horizontalCenter
@@ -125,20 +123,26 @@ Page {
 
                 fillMode: Image.PreserveAspectFit
                 asynchronous: true
-                width: 1/2 * parent.width
+                width: Math.min(2 * Theme.itemSizeHuge, Math.min(Screen.width, Screen.height) / 2)
             }
 
-            Label {
+            BusyLabel {
-                id: enterPhoneNumberLabel
+                text: qsTr("Loading...")
-                wrapMode: Text.Wrap
+                running: initializationPage.loading
-                x: Theme.horizontalPageMargin
+                Behavior on opacity { FadeAnimation {} }
-                width: parent.width - ( 2 * Theme.horizontalPageMargin )
+                visible: opacity > 0
-                horizontalAlignment: Text.AlignHCenter
-                text: qsTr("Please enter your phone number to continue.")
-                font.pixelSize: Theme.fontSizeMedium
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
             }
+
+            Column {
+                id: welcomeColumn
+                width: parent.width
+                spacing: Theme.paddingLarge
+
+                Behavior on opacity { FadeAnimation {} }
+                opacity: visible ? 1 : 0
+
+                InfoLabel {
+                    text: qsTr("Please enter your phone number to continue.")
                 }
 
                 TextField {
@@ -147,6 +151,16 @@ Page {
                     inputMethodHints: Qt.ImhDialableCharactersOnly
                     labelVisible: false
                     width: parent.width
+                    readonly property bool validInput: text.match(/\+[1-9][0-9]{4,}/g)
+                    EnterKey.iconSource: "image://theme/icon-m-enter-next"
+                    EnterKey.enabled: validInput
+                    EnterKey.onClicked: {
+                        validator = filledValidator
+                        if(acceptableInput) {
+                            continueWithPhoneNumberButton.focus = true
+                            continueWithPhoneNumberButton.enter()
+                        }
+                    }
                 }
 
                 Button {
@@ -155,38 +169,25 @@ Page {
                     anchors {
                         horizontalCenter: parent.horizontalCenter
                     }
-                enabled: phoneNumberTextField.text.match(/\+[1-9][0-9]{4,}/g)
+                    enabled: phoneNumberTextField.validInput
-                onClicked: {
+                    onClicked: enter()
+                    function enter() {
                         initializationPage.loading = true;
                         welcomeColumn.visible = false;
                         tdLibWrapper.setAuthenticationPhoneNumber(phoneNumberTextField.text);
                     }
                 }
-
             }
 
             Column {
                 id: pinErrorColumn
-//            y: ( parent.height - ( errorInfoLabel.height + fernschreiberErrorImage.height + errorOkButton.height + ( 3 * Theme.paddingSmall ) ) ) / 2
                 width: parent.width
-            spacing: Theme.paddingSmall
+                spacing: Theme.paddingLarge
 
-            Behavior on opacity { NumberAnimation {} }
+                Behavior on opacity { FadeAnimation {} }
                 opacity: visible ? 1 : 0
                 visible: false
 
-            Image {
-                id: fernschreiberErrorImage
-                source: "../../images/fernschreiber.png"
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                fillMode: Image.PreserveAspectFit
-                asynchronous: true
-                width: 1/2 * parent.width
-            }
-
                 InfoLabel {
                     id: errorInfoLabel
                     font.pixelSize: Theme.fontSizeLarge
@@ -194,7 +195,6 @@ Page {
                 }
 
                 Button {
-                id: errorOkButton
                     text: qsTr("OK")
                     anchors {
                         horizontalCenter: parent.horizontalCenter
@@ -208,28 +208,14 @@ Page {
 
             Column {
                 id: enterPasswordColumn
-//            y: ( parent.height - ( fernschreiberPasswordImage.height + enterPasswordLabel.height + enterPasswordField.height + enterPasswordButton.height + ( 3 * Theme.paddingSmall ) ) ) / 2
                 width: parent.width
-            spacing: Theme.paddingSmall
+                spacing: Theme.paddingLarge
 
-            Behavior on opacity { NumberAnimation {} }
+                Behavior on opacity { FadeAnimation {} }
                 opacity: visible ? 1.0 : 0.0
                 visible: false
 
-            Image {
-                id: fernschreiberPasswordImage
-                source: "../../images/fernschreiber.png"
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                fillMode: Image.PreserveAspectFit
-                asynchronous: true
-                width: 1/2 * parent.width
-            }
-
                 InfoLabel {
-                id: enterPasswordLabel
                     font.pixelSize: Theme.fontSizeLarge
                     text: qsTr("Please enter your password:")
                 }
@@ -245,7 +231,6 @@ Page {
                 }
 
                 Button {
-                id: enterPasswordButton
                     text: qsTr("OK")
                     anchors {
                         horizontalCenter: parent.horizontalCenter
@@ -260,30 +245,14 @@ Page {
 
             Column {
                 id: enterPinColumn
-            topPadding: Theme.paddingLarge
-            bottomPadding: Theme.paddingLarge
                 width: parent.width
-            spacing: Theme.paddingSmall
+                spacing: Theme.paddingLarge
 
-            Behavior on opacity { NumberAnimation {} }
+                Behavior on opacity { FadeAnimation {} }
                 opacity: visible ? 1.0 : 0.0
                 visible: false
 
-
-            Image {
-                id: fernschreiberPinImage
-                source: "../../images/fernschreiber.png"
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                fillMode: Image.PreserveAspectFit
-                asynchronous: true
-                width: 1/2 * parent.width
-            }
-
                 InfoLabel {
-                id: enterPinLabel
                     font.pixelSize: Theme.fontSizeLarge
                     text: qsTr("Please enter the code that you received:")
                 }
@@ -297,6 +266,9 @@ Page {
                     font.pixelSize: Theme.fontSizeExtraLarge
                     width: parent.width - 4 * Theme.paddingLarge
                     horizontalAlignment: TextInput.AlignHCenter
+                    EnterKey.iconSource: "image://theme/icon-m-enter-next"
+                    EnterKey.enabled: text.length > 0
+                    EnterKey.onClicked: enterPinButton.enter()
                 }
 
                 Button {
@@ -305,7 +277,8 @@ Page {
                     anchors {
                         horizontalCenter: parent.horizontalCenter
                     }
-                onClicked: {
+                    onClicked: enter()
+                    function enter() {
                         initializationPage.loading = true;
                         enterPinColumn.visible = false;
                         tdLibWrapper.setAuthenticationCode(enterPinField.text);
@@ -315,35 +288,19 @@ Page {
 
             Column {
                 id: linkingErrorColumn
-            topPadding: Theme.paddingLarge
-            bottomPadding: Theme.paddingLarge
                 width: parent.width
-            spacing: Theme.paddingSmall
+                spacing: Theme.paddingLarge
 
-            Behavior on opacity { NumberAnimation {} }
+                Behavior on opacity { FadeAnimation {} }
                 opacity: visible ? 1.0 : 0.0
                 visible: false
 
-            Image {
-                id: fernschreiberLinkingErrorImage
-                source: "../../images/fernschreiber.png"
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                fillMode: Image.PreserveAspectFit
-                asynchronous: true
-                width: 1/2 * parent.width
-            }
-
                 InfoLabel {
-                id: linkingErrorInfoLabel
                     font.pixelSize: Theme.fontSizeLarge
                     text: qsTr("Unable to authenticate you with the entered code.")
                 }
 
                 Button {
-                id: enterPinAgainButton
                     text: qsTr("Enter code again")
                     anchors {
                         horizontalCenter: parent.horizontalCenter
@@ -355,7 +312,6 @@ Page {
                 }
 
                 Button {
-                id: restartAuthenticationButton
                     text: qsTr("Restart authentication")
                     anchors {
                         horizontalCenter: parent.horizontalCenter
@@ -369,30 +325,13 @@ Page {
 
             Column {
                 id: waitRegistrationColumn
-            topPadding: Theme.paddingLarge
-            bottomPadding: Theme.paddingLarge
                 width: parent.width
                 spacing: Theme.paddingLarge
 
-            Behavior on opacity { NumberAnimation {} }
+                Behavior on opacity { FadeAnimation {} }
                 opacity: visible ? 1.0 : 0.0
                 visible: false
 
-            PageHeader {
-                title: qsTr("User Registration")
-            }
-            Image {
-                id: waitRegistrationImage
-                source: "../../images/fernschreiber.png"
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                }
-
-                fillMode: Image.PreserveAspectFit
-                asynchronous: true
-                width:  1/2 * Screen.width
-            }
-
                 InfoLabel {
                     id: waitRegistrationInfoLabel
                     property bool acknowledged
@@ -419,14 +358,10 @@ Page {
                                     + stateText.text.slice(entities[0].offset + entities[0].length)).replace(/\n/gm, "<br>");
                         }
                         return stateText.text.replace(/\n/gm, "<br>");
-
-
                     }
-                    //JSON.stringify(initializationPage.authorizationStateData, null, 2)//qsTr("Unable to authenticate you with the entered code.")
                 }
 
                 Button {
-                id: acknowledgeTOCButton
                     visible: waitRegistrationInfoLabel.visible
                     text: qsTr("OK")
                     anchors {
@@ -445,7 +380,7 @@ Page {
                     id: userFirstNameTextField
                     visible: !waitRegistrationInfoLabel.visible
                     opacity: visible ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation {} }
+                    Behavior on opacity { FadeAnimation {} }
                     placeholderText: qsTr("Enter your First Name")
                     labelVisible: false
                     width: parent.width
@@ -459,7 +394,7 @@ Page {
                     id: userLastNameTextField
                     visible: !waitRegistrationInfoLabel.visible
                     opacity: visible ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation {} }
+                    Behavior on opacity { FadeAnimation {} }
                     placeholderText: qsTr("Enter your Last Name")
                     labelVisible: false
                     width: parent.width
@@ -473,7 +408,7 @@ Page {
                     id: registerUserButton
                     visible: !waitRegistrationInfoLabel.visible
                     opacity: visible ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation {} }
+                    Behavior on opacity { FadeAnimation {} }
                     text: qsTr("Register User")
                     anchors {
                         horizontalCenter: parent.horizontalCenter
@@ -492,7 +427,11 @@ Page {
                     }
                 }
             }
-    }
 
+            Item {
+                width: 1
+                height: Theme.paddingLarge
+            }
+        }
+    }
 }
-