fix #LINQT-1331 add flickables for 13" screens

This commit is contained in:
Gaelle Braud 2024-10-08 16:58:43 +02:00
parent aade817755
commit fe40a9586b
4 changed files with 258 additions and 236 deletions

View file

@ -78,32 +78,41 @@ LoginLayout {
} }
] ]
centerContent: [ centerContent: [
ColumnLayout { Flickable {
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.leftMargin: 127 * DefaultStyle.dp anchors.leftMargin: 127 * DefaultStyle.dp
anchors.topMargin: 70 * DefaultStyle.dp anchors.topMargin: 70 * DefaultStyle.dp
spacing: 0 anchors.bottom: parent.bottom
LoginForm { width: contentWidth
id: loginForm contentWidth: content.implicitWidth
onConnectionSucceed: mainItem.connectionSucceed() contentHeight: content.implicitHeight
} clip: true
Button { flickableDirection: Flickable.VerticalFlick
inversedColors: true ColumnLayout {
Layout.preferredWidth: loginForm.width id: content
Layout.preferredHeight: 47 * DefaultStyle.dp spacing: 0
Layout.topMargin: 39 * DefaultStyle.dp LoginForm {
visible: !SettingsCpp.assistantHideThirdPartyAccount id: loginForm
text: qsTr("Compte SIP tiers") onConnectionSucceed: mainItem.connectionSucceed()
onClicked: {mainItem.useSIPButtonClicked()} }
} Button {
Button { inversedColors: true
inversedColors: true Layout.preferredWidth: loginForm.width
Layout.preferredWidth: loginForm.width Layout.preferredHeight: 47 * DefaultStyle.dp
Layout.preferredHeight: 47 * DefaultStyle.dp Layout.topMargin: 39 * DefaultStyle.dp
Layout.topMargin: 25 * DefaultStyle.dp visible: !SettingsCpp.assistantHideThirdPartyAccount
text: qsTr("Configuration distante") text: qsTr("Compte SIP tiers")
onClicked: {fetchConfigDialog.open()} onClicked: {mainItem.useSIPButtonClicked()}
}
Button {
inversedColors: true
Layout.preferredWidth: loginForm.width
Layout.preferredHeight: 47 * DefaultStyle.dp
Layout.topMargin: 25 * DefaultStyle.dp
text: qsTr("Configuration distante")
onClicked: {fetchConfigDialog.open()}
}
} }
}, },
Image { Image {

View file

@ -81,162 +81,177 @@ LoginLayout {
Component { Component {
id: firstItem id: firstItem
ColumnLayout { Flickable {
spacing: 85 * DefaultStyle.dp width: contentWidth
Layout.maximumHeight: 420 * DefaultStyle.dp contentWidth: content.implicitWidth
contentHeight: content.implicitHeight
clip: true
flickableDirection: Flickable.VerticalFlick
ColumnLayout { ColumnLayout {
spacing: 0 id: content
spacing: 85 * DefaultStyle.dp
ColumnLayout { ColumnLayout {
spacing: 28 * DefaultStyle.dp spacing: 0
Text { ColumnLayout {
Layout.fillWidth: true spacing: 28 * DefaultStyle.dp
Layout.preferredWidth: rootStackView.width Text {
wrapMode: Text.WordWrap Layout.fillWidth: true
color: DefaultStyle.main2_900 Layout.preferredWidth: rootStackView.width
font { wrapMode: Text.WordWrap
pixelSize: 14 * DefaultStyle.dp color: DefaultStyle.main2_900
weight: 400* DefaultStyle.dp font {
pixelSize: 14 * DefaultStyle.dp
weight: 400* DefaultStyle.dp
}
text: "Certaines fonctionnalités nécessitent un compte Linphone, comme la messagerie de groupe, les vidéoconférences..."
} }
text: "Certaines fonctionnalités nécessitent un compte Linphone, comme la messagerie de groupe, les vidéoconférences..." Text {
} Layout.fillWidth: true
Text { Layout.preferredWidth: rootStackView.width
Layout.fillWidth: true wrapMode: Text.WordWrap
Layout.preferredWidth: rootStackView.width color: DefaultStyle.main2_900
wrapMode: Text.WordWrap font {
color: DefaultStyle.main2_900 pixelSize: 14 * DefaultStyle.dp
font { weight: 400* DefaultStyle.dp
pixelSize: 14 * DefaultStyle.dp }
weight: 400* DefaultStyle.dp text:"Ces fonctionnalités sont cachées lorsque vous vous enregistrez avec un compte SIP tiers."
} }
text:"Ces fonctionnalités sont cachées lorsque vous vous enregistrez avec un compte SIP tiers." Text {
} Layout.fillWidth: true
Text { Layout.preferredWidth: rootStackView.width
Layout.fillWidth: true wrapMode: Text.WordWrap
Layout.preferredWidth: rootStackView.width color: DefaultStyle.main2_900
wrapMode: Text.WordWrap font {
color: DefaultStyle.main2_900 pixelSize: 14 * DefaultStyle.dp
font { weight: 400* DefaultStyle.dp
pixelSize: 14 * DefaultStyle.dp }
weight: 400* DefaultStyle.dp text: "Pour les activer dans un projet commercial, veuillez nous contacter. "
} }
text: "Pour les activer dans un projet commercial, veuillez nous contacter. " }
Button {
id: openLinkButton
Layout.alignment: Qt.AlignCenter
Layout.topMargin: 18 * DefaultStyle.dp
text: "linphone.org/contact"
textSize: 13 * DefaultStyle.dp
inversedColors: true
leftPadding: 12 * DefaultStyle.dp
rightPadding: 12 * DefaultStyle.dp
topPadding: 6 * DefaultStyle.dp
bottomPadding: 6 * DefaultStyle.dp
onClicked: {
Qt.openUrlExternally(ConstantsCpp.ContactUrl)
}
KeyNavigation.up: backButton
KeyNavigation.down: createAccountButton
} }
} }
Button { ColumnLayout {
id: openLinkButton spacing: 20 * DefaultStyle.dp
Layout.alignment: Qt.AlignCenter Button {
Layout.topMargin: 18 * DefaultStyle.dp id: createAccountButton
text: "linphone.org/contact" // Layout.topMargin: 85 * DefaultStyle.dp
textSize: 13 * DefaultStyle.dp Layout.fillWidth: true
inversedColors: true inversedColors: true
leftPadding: 12 * DefaultStyle.dp text: qsTr("Créer un compte linphone")
rightPadding: 12 * DefaultStyle.dp leftPadding: 20 * DefaultStyle.dp
topPadding: 6 * DefaultStyle.dp rightPadding: 20 * DefaultStyle.dp
bottomPadding: 6 * DefaultStyle.dp topPadding: 11 * DefaultStyle.dp
onClicked: { bottomPadding: 11 * DefaultStyle.dp
Qt.openUrlExternally(ConstantsCpp.ContactUrl) onClicked: {
console.debug("[SIPLoginPage] User: click register")
mainItem.goToRegister()
}
KeyNavigation.up: openLinkButton
KeyNavigation.down: continueButton
} }
KeyNavigation.up: backButton Button {
KeyNavigation.down: createAccountButton id: continueButton
} Layout.fillWidth: true
} text: qsTr("Je comprends")
ColumnLayout { leftPadding: 20 * DefaultStyle.dp
spacing: 20 * DefaultStyle.dp rightPadding: 20 * DefaultStyle.dp
Button { topPadding: 11 * DefaultStyle.dp
id: createAccountButton bottomPadding: 11 * DefaultStyle.dp
// Layout.topMargin: 85 * DefaultStyle.dp onClicked: {
Layout.fillWidth: true rootStackView.replace(secondItem)
inversedColors: true }
text: qsTr("Créer un compte linphone") KeyNavigation.up: createAccountButton
leftPadding: 20 * DefaultStyle.dp
rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
bottomPadding: 11 * DefaultStyle.dp
onClicked: {
console.debug("[SIPLoginPage] User: click register")
mainItem.goToRegister()
} }
KeyNavigation.up: openLinkButton
KeyNavigation.down: continueButton
} }
Button { Item {
id: continueButton Layout.fillHeight: true
Layout.fillWidth: true
text: qsTr("Je comprends")
leftPadding: 20 * DefaultStyle.dp
rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
bottomPadding: 11 * DefaultStyle.dp
onClicked: {
rootStackView.replace(secondItem)
}
KeyNavigation.up: createAccountButton
} }
} }
Item {
Layout.fillHeight: true
}
} }
} }
Component { Component {
id: secondItem id: secondItem
ColumnLayout { Flickable {
spacing: 2 * DefaultStyle.dp width: contentWidth
contentWidth: content.implicitWidth
contentHeight: content.implicitHeight
clip: true
flickableDirection: Flickable.VerticalFlick
ColumnLayout { ColumnLayout {
spacing: 16 * DefaultStyle.dp id: content
FormItemLayout { spacing: 2 * DefaultStyle.dp
id: username ColumnLayout {
label: qsTr("Nom d'utilisateur") spacing: 16 * DefaultStyle.dp
mandatory: true FormItemLayout {
enableErrorText: true id: username
contentItem: TextField { label: qsTr("Nom d'utilisateur")
id: usernameEdit mandatory: true
isError: username.errorTextVisible enableErrorText: true
Layout.preferredWidth: 360 * DefaultStyle.dp contentItem: TextField {
KeyNavigation.down: passwordEdit id: usernameEdit
} isError: username.errorTextVisible
} Layout.preferredWidth: 360 * DefaultStyle.dp
FormItemLayout { KeyNavigation.down: passwordEdit
id: password
label: qsTr("Mot de passe")
mandatory: true
enableErrorText: true
contentItem: TextField {
id: passwordEdit
isError: password.errorTextVisible
hidden: true
Layout.preferredWidth: 360 * DefaultStyle.dp
KeyNavigation.up: usernameEdit
KeyNavigation.down: domainEdit
}
}
FormItemLayout {
id: domain
label: qsTr("Domaine")
mandatory: true
enableErrorText: true
contentItem: TextField {
id: domainEdit
isError: domain.errorTextVisible
initialText: SettingsCpp.assistantThirdPartySipAccountDomain
Layout.preferredWidth: 360 * DefaultStyle.dp
KeyNavigation.up: passwordEdit
KeyNavigation.down: displayName
}
Connections {
target: SettingsCpp
function onAssistantThirdPartySipAccountDomainChanged() {
domainEdit.resetText()
} }
} }
} FormItemLayout {
FormItemLayout { id: password
label: qsTr("Nom d'affichage") label: qsTr("Mot de passe")
contentItem: TextField { mandatory: true
id: displayName enableErrorText: true
Layout.preferredWidth: 360 * DefaultStyle.dp contentItem: TextField {
KeyNavigation.up: domainEdit id: passwordEdit
KeyNavigation.down: transportCbox isError: password.errorTextVisible
hidden: true
Layout.preferredWidth: 360 * DefaultStyle.dp
KeyNavigation.up: usernameEdit
KeyNavigation.down: domainEdit
}
}
FormItemLayout {
id: domain
label: qsTr("Domaine")
mandatory: true
enableErrorText: true
contentItem: TextField {
id: domainEdit
isError: domain.errorTextVisible
initialText: SettingsCpp.assistantThirdPartySipAccountDomain
Layout.preferredWidth: 360 * DefaultStyle.dp
KeyNavigation.up: passwordEdit
KeyNavigation.down: displayName
}
Connections {
target: SettingsCpp
function onAssistantThirdPartySipAccountDomainChanged() {
domainEdit.resetText()
}
}
}
FormItemLayout {
label: qsTr("Nom d'affichage")
contentItem: TextField {
id: displayName
Layout.preferredWidth: 360 * DefaultStyle.dp
KeyNavigation.up: domainEdit
KeyNavigation.down: transportCbox
}
} }
} }
FormItemLayout { FormItemLayout {
@ -258,92 +273,92 @@ LoginLayout {
}) })
} }
} }
}
TemporaryText { TemporaryText {
id: errorText id: errorText
Connections {
target: LoginPageCpp
function onErrorMessageChanged(error) {
errorText.text = error
}
function onRegistrationStateChanged() {
if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) {
mainItem.connectionSucceed()
}
}
}
}
Button {
id: connectionButton
Layout.topMargin: 32 * DefaultStyle.dp
leftPadding: 20 * DefaultStyle.dp
rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
bottomPadding: 11 * DefaultStyle.dp
contentItem: StackLayout {
id: connectionButtonContent
currentIndex: 0
Text {
text: qsTr("Connexion")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font {
pixelSize: 18 * DefaultStyle.dp
weight: 600 * DefaultStyle.dp
}
color: DefaultStyle.grey_0
}
BusyIndicator {
implicitWidth: parent.height
implicitHeight: parent.height
Layout.alignment: Qt.AlignCenter
indicatorColor: DefaultStyle.grey_0
}
Connections { Connections {
target: LoginPageCpp target: LoginPageCpp
function onRegistrationStateChanged() {
if (LoginPageCpp.registrationState != LinphoneEnums.RegistrationState.Progress) {
connectionButton.enabled = true
connectionButtonContent.currentIndex = 0
}
}
function onErrorMessageChanged(error) { function onErrorMessageChanged(error) {
if (error.length != 0) { errorText.text = error
connectionButton.enabled = true }
connectionButtonContent.currentIndex = 0 function onRegistrationStateChanged() {
if (LoginPageCpp.registrationState === LinphoneEnums.RegistrationState.Ok) {
mainItem.connectionSucceed()
} }
} }
} }
} }
function trigger() { Button {
username.errorMessage = "" id: connectionButton
password.errorMessage = "" Layout.topMargin: 32 * DefaultStyle.dp
domain.errorMessage = "" leftPadding: 20 * DefaultStyle.dp
errorText.text = "" rightPadding: 20 * DefaultStyle.dp
topPadding: 11 * DefaultStyle.dp
bottomPadding: 11 * DefaultStyle.dp
contentItem: StackLayout {
id: connectionButtonContent
currentIndex: 0
Text {
text: qsTr("Connexion")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
if (usernameEdit.text.length == 0 || passwordEdit.text.length == 0 || domainEdit.text.length == 0) { font {
if (usernameEdit.text.length == 0) pixelSize: 18 * DefaultStyle.dp
username.errorMessage = qsTr("Veuillez saisir un nom d'utilisateur") weight: 600 * DefaultStyle.dp
if (passwordEdit.text.length == 0) }
password.errorMessage = qsTr("Veuillez saisir un mot de passe") color: DefaultStyle.grey_0
if (domainEdit.text.length == 0) }
domain.errorMessage = qsTr("Veuillez saisir un nom de domaine") BusyIndicator {
return implicitWidth: parent.height
implicitHeight: parent.height
Layout.alignment: Qt.AlignCenter
indicatorColor: DefaultStyle.grey_0
}
Connections {
target: LoginPageCpp
function onRegistrationStateChanged() {
if (LoginPageCpp.registrationState != LinphoneEnums.RegistrationState.Progress) {
connectionButton.enabled = true
connectionButtonContent.currentIndex = 0
}
}
function onErrorMessageChanged(error) {
if (error.length != 0) {
connectionButton.enabled = true
connectionButtonContent.currentIndex = 0
}
}
}
} }
console.debug("[SIPLoginPage] User: Log in")
LoginPageCpp.login(usernameEdit.text, passwordEdit.text, displayName.text, domainEdit.text, transportCbox.currentValue); function trigger() {
connectionButton.enabled = false username.errorMessage = ""
connectionButtonContent.currentIndex = 1 password.errorMessage = ""
domain.errorMessage = ""
errorText.text = ""
if (usernameEdit.text.length == 0 || passwordEdit.text.length == 0 || domainEdit.text.length == 0) {
if (usernameEdit.text.length == 0)
username.errorMessage = qsTr("Veuillez saisir un nom d'utilisateur")
if (passwordEdit.text.length == 0)
password.errorMessage = qsTr("Veuillez saisir un mot de passe")
if (domainEdit.text.length == 0)
domain.errorMessage = qsTr("Veuillez saisir un nom de domaine")
return
}
console.debug("[SIPLoginPage] User: Log in")
LoginPageCpp.login(usernameEdit.text, passwordEdit.text, displayName.text, domainEdit.text, transportCbox.currentValue);
connectionButton.enabled = false
connectionButtonContent.currentIndex = 1
}
onPressed: trigger()
KeyNavigation.up: transportCbox
}
Item {
Layout.fillHeight: true
} }
onPressed: trigger()
KeyNavigation.up: transportCbox
}
Item {
Layout.fillHeight: true
} }
} }
} }

View file

@ -33,8 +33,6 @@ LoginLayout {
centerContent: ColumnLayout { centerContent: ColumnLayout {
spacing: 80 * DefaultStyle.dp spacing: 80 * DefaultStyle.dp
Layout.topMargin: 70 * DefaultStyle.dp
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
RowLayout { RowLayout {
id: radioButtonsLayout id: radioButtonsLayout
Layout.fillWidth: true Layout.fillWidth: true

View file

@ -67,10 +67,10 @@ Rectangle {
id: centerLayout id: centerLayout
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
z: 1
} }
Image { Image {
id: bottomMountains id: bottomMountains
z: -1
source: AppIcons.belledonne source: AppIcons.belledonne
fillMode: Image.Stretch fillMode: Image.Stretch
Layout.fillWidth: true Layout.fillWidth: true