moment/harmonyqml/components/pages/LoginPage.qml
2019-04-26 16:02:20 -04:00

123 lines
3.7 KiB
QML

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
import "../base" as Base
Image {
id: loginBackground
asynchronous: true
fillMode: Image.PreserveAspectCrop
cache: false
source: "../../images/login_background.jpg"
Rectangle {
color: Qt.hsla(1, 1, 1, 0.3)
id: loginBox
property real widthForHeight: 0.75
property int baseHeight: 300
property int baseWidth: baseHeight * widthForHeight
property int startScalingUpAboveHeight: 1080
anchors.centerIn: parent
height: Math.min(parent.height, baseHeight)
width: Math.min(parent.width, baseWidth)
scale: Math.max(1, parent.height / startScalingUpAboveHeight)
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
ColumnLayout {
anchors.fill: parent
id: mainColumn
property int hMargin: loginBox.baseWidth * 0.05
property int vMargin: hMargin * loginBox.widthForHeight
Base.HRowLayout {
Layout.alignment: Qt.AlignHCenter
Layout.margins: mainColumn.hMargin
Layout.topMargin: mainColumn.vMargin
Layout.bottomMargin: mainColumn.vMargin
Base.HLabel {
text: "Sign in"
font.pixelSize: Base.HStyle.fontSize.big
}
}
Item { Layout.fillHeight: true }
Base.HRowLayout {
Layout.margins: mainColumn.hMargin
Layout.topMargin: mainColumn.vMargin
Layout.bottomMargin: mainColumn.vMargin
Layout.alignment: Qt.AlignHCenter
spacing: mainColumn.hMargin * 1.25
Base.HButton {
id: loginWithUsernameButton
iconName: "username"
circle: true
checked: true
checkable: true
autoExclusive: true
}
Base.HButton {
id: loginWithEmailButton
iconName: "email"
circle: true
checkable: true
autoExclusive: true
}
Base.HButton {
id: loginWithPhoneButton
iconName: "phone"
circle: true
checkable: true
autoExclusive: true
}
}
Base.HTextField {
placeholderText: qsTr(
loginWithEmailButton.checked ? "Email" :
loginWithPhoneButton.checked ? "Phone" :
"Username"
)
Layout.fillWidth: true
Layout.margins: mainColumn.hMargin
Layout.topMargin: mainColumn.vMargin
Layout.bottomMargin: mainColumn.vMargin
}
Base.HTextField {
placeholderText: qsTr("Password")
Layout.fillWidth: true
Layout.margins: mainColumn.hMargin
Layout.topMargin: mainColumn.vMargin
Layout.bottomMargin: mainColumn.vMargin
}
Item { Layout.fillHeight: true }
Base.HRowLayout {
Base.HButton {
text: qsTr("Register")
Layout.fillWidth: true
}
Base.HButton {
text: qsTr("Login")
Layout.fillWidth: true
}
Base.HButton {
text: qsTr("Forgot?")
Layout.fillWidth: true
}
}
}
}
}