Tweaked InitializationPage UI
1. Only load app icon once 2. Removed come unused ids and attributes 3. EnterKey magic 4. Use FadeAnimation
This commit is contained in:
Slava Monich
parent
7d84fcb3bf
commit
9a4246e275
1 changed files with 300 additions and 361 deletions
|
|
@ -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 {
|
||||
id: enterPhoneNumberLabel
|
||||
wrapMode: Text.Wrap
|
||||
x: Theme.horizontalPageMargin
|
||||
width: parent.width - ( 2 * Theme.horizontalPageMargin )
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: qsTr("Please enter your phone number to continue.")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
BusyLabel {
|
||||
text: qsTr("Loading...")
|
||||
running: initializationPage.loading
|
||||
Behavior on opacity { FadeAnimation {} }
|
||||
visible: opacity > 0
|
||||
}
|
||||
|
||||
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)
|
||||
onClicked: {
|
||||
enabled: phoneNumberTextField.validInput
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue