1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-08-04 14:55:43 +02:00

wizardview: fix focus, tooltip, ModalTextEdit

- replaced all line edit with ModalTextEdit components
- fixed keyboard navigation
- fixed focus and tooltips

Change-Id: I5605e1b4a7efe2910c4031e49abb78b39b1955f6
This commit is contained in:
Fadi SHEHADEH 2023-02-17 13:33:45 -05:00 committed by Aline Gondim Santos
parent e932c37528
commit 05beb246e8
7 changed files with 120 additions and 205 deletions

View file

@ -609,7 +609,7 @@ Item {
"Use the \"Link Another Device\" feature to obtain a PIN.")
property string connectFromAnotherDevice: qsTr("Link device")
property string importButton: qsTr("Import")
property string pin: qsTr("PIN")
property string pin: qsTr("Enter the NIP code")
property string importFromDeviceDescription: qsTr("A PIN is required to use an existing Jami account on this device.")
property string importStep1: qsTr("Step 1")
property string importStep2: qsTr("Step 2")

View file

@ -43,9 +43,8 @@ Rectangle {
function clear() {
openedPassword = false
openedNickname = false
displayNameLineEdit.text = ""
passwordEdit.text = ""
passwordConfirmEdit.text = ""
passwordEdit.dynamicText = ""
passwordConfirmEdit.dynamicText = ""
UtilsAdapter.setTempCreationImageFromString()
}
@ -190,41 +189,39 @@ Rectangle {
font.pixelSize: JamiTheme.headerFontSize
}
EditableLineEdit {
PasswordTextEdit {
id: passwordEdit
visible: openedPassword
focus: openedPassword
firstEntry: true
placeholderText: JamiStrings.password
Layout.topMargin: 10
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 325
echoMode: TextInput.Password
placeholderText: JamiStrings.password
secondIco: JamiResources.eye_cross_svg
onSecondIcoClicked: { toggleEchoMode() }
KeyNavigation.tab: passwordConfirmEdit
KeyNavigation.down: passwordConfirmEdit
}
EditableLineEdit {
PasswordTextEdit {
id: passwordConfirmEdit
visible: openedPassword
placeholderText: JamiStrings.confirmPassword
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 325
echoMode: TextInput.Password
placeholderText: JamiStrings.confirmPassword
secondIco: JamiResources.eye_cross_svg
onSecondIcoClicked: { toggleEchoMode() }
KeyNavigation.tab: passwordEdit
KeyNavigation.up: passwordEdit
KeyNavigation.down: setButton
}
MaterialButton {
id: setButton
visible: openedPassword
Layout.topMargin: 10
@ -243,12 +240,12 @@ Rectangle {
function checkEnable() {
text = JamiStrings.setPassword
return (passwordEdit.text === passwordConfirmEdit.text
&& passwordEdit.text.length !== 0)
return (passwordEdit.dynamicText === passwordConfirmEdit.dynamicText
&& passwordEdit.dynamicText.length !== 0)
}
onClicked: {
root.validatedPassword = passwordConfirmEdit.text
root.validatedPassword = passwordConfirmEdit.dynamicText
text = JamiStrings.setPasswordSuccess
}
@ -335,7 +332,6 @@ Rectangle {
}
}
Item {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
@ -444,18 +440,17 @@ Rectangle {
}
EditableLineEdit {
ModalTextEdit {
id: displayNameLineEdit
visible: openedNickname
focus: openedNickname
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 280
placeholderText: JamiStrings.enterNickname
onEditingFinished: root.alias = text
onAccepted: root.alias = displayNameLineEdit.dynamicText
}
@ -550,7 +545,8 @@ Rectangle {
preferredWidth: Math.min(JamiTheme.wizardButtonWidth, root.width - JamiTheme.preferredMarginSize * 2)
text: JamiStrings.optionSave
onClicked: root.saveButtonClicked()
onClicked: { root.saveButtonClicked()
root.alias = displayNameLineEdit.dynamicText}
}
}

View file

@ -36,9 +36,6 @@ Rectangle {
function clearAllTextFields() {
connectBtn.spinnerTriggered = false
usernameManagerEdit.clear()
passwordManagerEdit.clear()
accountManagerEdit.clear()
errorText = ""
}
@ -104,7 +101,7 @@ Rectangle {
wrapMode : Text.WordWrap
}
EditableLineEdit {
ModalTextEdit {
id: accountManagerEdit
objectName: "accountManagerEdit"
@ -112,22 +109,15 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
fontSize: 15
Layout.topMargin: 5
focus: visible
secondIco: JamiResources.outline_info_24dp_svg
placeholderText: JamiStrings.jamiManagementServerURL
selectByMouse: true
placeholderText: JamiStrings.jamiManagementServerURL //problem with resize
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: usernameManagerEdit
KeyNavigation.up: backButton
KeyNavigation.down: usernameManagerEdit
KeyNavigation.tab: KeyNavigation.down
onTextChanged: errorText = ""
onAccepted: usernameManagerEdit.forceActiveFocus()
}
@ -152,7 +142,7 @@ Rectangle {
credentialsLabel.font, credentialsLabel.text).height
}
EditableLineEdit {
ModalTextEdit {
id: usernameManagerEdit
@ -161,24 +151,16 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
fontSize: 15
secondIco: JamiResources.outline_info_24dp_svg
selectByMouse: true
placeholderText: JamiStrings.username
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: passwordManagerEdit
KeyNavigation.up: accountManagerEdit
KeyNavigation.down: passwordManagerEdit
KeyNavigation.tab: KeyNavigation.down
onTextChanged: errorText = ""
onAccepted: passwordManagerEdit.forceActiveFocus()
}
EditableLineEdit {
PasswordTextEdit {
id: passwordManagerEdit
@ -187,25 +169,15 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
selectByMouse: true
placeholderText: JamiStrings.password
font.pointSize: JamiTheme.textFontSize
font.kerning: true
Layout.topMargin: 10
secondIco: JamiResources.eye_cross_svg
thirdIco: JamiResources.outline_info_24dp_svg
fontSize: 15
echoMode: TextInput.Password
KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
KeyNavigation.up: usernameManagerEdit
KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
KeyNavigation.tab: KeyNavigation.down
onTextChanged: errorText = ""
onSecondIcoClicked: { toggleEchoMode() }
onAccepted: connectBtn.forceActiveFocus()
}
@ -223,16 +195,17 @@ Rectangle {
spinnerTriggeredtext: JamiStrings.creatingAccount
normalText: JamiStrings.connect
enabled: accountManagerEdit.text.length !== 0
&& usernameManagerEdit.text.length !== 0
&& passwordManagerEdit.text.length !== 0
enabled: accountManagerEdit.dynamicText.length !== 0
&& usernameManagerEdit.dynamicText.length !== 0
&& passwordManagerEdit.dynamicText.length !== 0
&& !spinnerTriggered
color: JamiTheme.tintedBlue
KeyNavigation.tab: backButton
KeyNavigation.up: passwordManagerEdit
KeyNavigation.down: backButton
KeyNavigation.tab: KeyNavigation.down
onClicked: {
if (connectBtn.focus)
@ -275,13 +248,14 @@ Rectangle {
preferredSize: JamiTheme.wizardViewPageBackButtonSize
KeyNavigation.tab: accountManagerEdit
KeyNavigation.up: {
if (connectBtn.enabled)
return connectBtn
return passwordManagerEdit
}
KeyNavigation.down: KeyNavigation.tab
KeyNavigation.down: accountManagerEdit
KeyNavigation.tab: KeyNavigation.down
onClicked: WizardViewStepModel.previousStep()
}

View file

@ -48,7 +48,7 @@ Rectangle {
function clearAllTextFields() {
chooseUsernameButton.enabled = true
showAdvancedButton.enabled = true
usernameEdit.clear()
usernameEdit.dynamicText = ""
advancedAccountSettingsPage.clear()
}
@ -127,20 +127,19 @@ Rectangle {
wrapMode: Text.WordWrap
}
UsernameLineEdit {
UsernameTextEdit {
id: usernameEdit
objectName: "usernameEdit"
accountId: "" // During creation
Layout.topMargin: 15
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
placeholderText: root.isRendezVous ? JamiStrings.chooseAName :
JamiStrings.chooseYourUserName
staticText: ""
editMode: true
focus: visible
fontSize: 18
KeyNavigation.tab: chooseUsernameButton
KeyNavigation.up: backButton
@ -154,10 +153,12 @@ Rectangle {
}
}
Label {
Layout.alignment: Qt.AlignHCenter
Label {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
visible: text.length !==0 || usernameEdit.selected
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
text: {
switch(usernameEdit.nameRegistrationState){
@ -176,7 +177,7 @@ Rectangle {
}
}
font.pointSize: JamiTheme.textFontSize
color: JamiTheme.redColor
color: "#CC0022"
}
MaterialButton {
@ -205,7 +206,7 @@ Rectangle {
WizardViewStepModel.accountCreationInfo =
JamiQmlUtils.setUpAccountCreationInputPara(
{
registeredName : usernameEdit.text,
registeredName : usernameEdit.dynamicText,
alias: advancedAccountSettingsPage.alias,
password: advancedAccountSettingsPage.validatedPassword,
avatar: UtilsAdapter.tempCreationImage(),
@ -289,6 +290,7 @@ Rectangle {
KeyNavigation.down: usernameEdit
onClicked: {
if (createAccountStack.currentIndex > 0) {
createAccountStack.currentIndex--
} else {

View file

@ -35,11 +35,6 @@ Rectangle {
signal showThisPage
function clearAllTextFields() {
sipUsernameEdit.clear()
sipPasswordEdit.clear()
sipServernameEdit.clear()
sipProxyEdit.clear()
displayNameLineEdit.clear()
UtilsAdapter.setTempCreationImageFromString()
}
@ -106,7 +101,7 @@ Rectangle {
color: JamiTheme.textColor
}
EditableLineEdit {
ModalTextEdit {
id: sipServernameEdit
objectName: "sipServernameEdit"
@ -115,19 +110,17 @@ Rectangle {
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
focus: visible
selectByMouse: true
placeholderText: JamiStrings.server
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: sipProxyEdit
KeyNavigation.up: backButton
KeyNavigation.down: sipProxyEdit
KeyNavigation.tab: KeyNavigation.down
onAccepted: sipProxyEdit.forceActiveFocus()
onEditingFinished: sipProxyEdit.forceActiveFocus()
}
EditableLineEdit {
ModalTextEdit {
id: sipProxyEdit
objectName: "sipProxyEdit"
@ -135,20 +128,17 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
focus: visible
selectByMouse: true
placeholderText: JamiStrings.proxy
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: sipUsernameEdit
KeyNavigation.up: sipServernameEdit
KeyNavigation.down: sipUsernameEdit
KeyNavigation.tab: KeyNavigation.down
onAccepted: sipUsernameEdit.forceActiveFocus()
onEditingFinished: sipUsernameEdit.forceActiveFocus()
}
EditableLineEdit {
ModalTextEdit {
id: sipUsernameEdit
objectName: "sipUsernameEdit"
@ -156,19 +146,16 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
selectByMouse: true
placeholderText: JamiStrings.username
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: sipPasswordEdit
KeyNavigation.up: sipProxyEdit
KeyNavigation.down: sipPasswordEdit
KeyNavigation.tab: KeyNavigation.down
onEditingFinished: sipPasswordEdit.forceActiveFocus()
onAccepted: sipPasswordEdit.forceActiveFocus()
}
EditableLineEdit {
PasswordTextEdit {
id: sipPasswordEdit
objectName: "sipPasswordEdit"
@ -176,23 +163,14 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
selectByMouse: true
echoMode: TextInput.Password
placeholderText: JamiStrings.password
font.pointSize: JamiTheme.textFontSize
font.kerning: true
KeyNavigation.tab: createAccountButton
KeyNavigation.up: sipUsernameEdit
KeyNavigation.down: createAccountButton
KeyNavigation.tab: KeyNavigation.down
secondIco: JamiResources.eye_cross_svg
onAccepted: createAccountButton.forceActiveFocus()
onEditingFinished: createAccountButton.forceActiveFocus()
onSecondIcoClicked: { toggleEchoMode() }
}
MaterialButton {
@ -207,18 +185,18 @@ Rectangle {
text: JamiStrings.addSip
KeyNavigation.tab: personalizeAccount
KeyNavigation.up: sipPasswordEdit
KeyNavigation.down: personalizeAccount
KeyNavigation.tab: KeyNavigation.down
onClicked: {
WizardViewStepModel.accountCreationInfo =
JamiQmlUtils.setUpAccountCreationInputPara(
{hostname : sipServernameEdit.text,
alias: displayNameLineEdit.text,
username : sipUsernameEdit.text,
password : sipPasswordEdit.text,
proxy : sipProxyEdit.text,
{hostname : sipServernameEdit.dynamicText,
alias: displayNameLineEdit.dynamicText,
username : sipUsernameEdit.dynamicText,
password : sipPasswordEdit.dynamicText,
proxy : sipProxyEdit.dynamicText,
avatar: UtilsAdapter.tempCreationImage()})
WizardViewStepModel.nextStep()
}
@ -235,9 +213,9 @@ Rectangle {
Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: JamiTheme.wizardViewPageBackButtonMargins*2
KeyNavigation.tab: backButton
KeyNavigation.up: createAccountButton
KeyNavigation.down: backButton
KeyNavigation.tab: KeyNavigation.down
onClicked: createAccountStack.currentIndex += 1
}
@ -286,20 +264,14 @@ Rectangle {
buttonSize: JamiTheme.smartListAvatarSize
}
EditableLineEdit {
ModalTextEdit {
id: displayNameLineEdit
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(300, root.width - JamiTheme.preferredMarginSize * 2)
Layout.topMargin: 30
verticalAlignment: Text.AlignVCenter
font.pointSize: JamiTheme.textFontSize
placeholderText: JamiStrings.enterNickname
color: JamiTheme.textColor
}
Text {
@ -315,11 +287,8 @@ Rectangle {
font.pixelSize: JamiTheme.headerFontSize
color: JamiTheme.textColor
}
}
}
}
BackButton {
@ -333,9 +302,9 @@ Rectangle {
preferredSize: JamiTheme.wizardViewPageBackButtonSize
KeyNavigation.tab: sipServernameEdit
KeyNavigation.up: personalizeAccount
KeyNavigation.down: sipServernameEdit
KeyNavigation.tab: KeyNavigation.down
onClicked: {
if (createAccountStack.currentIndex !== 0) {

View file

@ -41,7 +41,6 @@ Rectangle {
function clearAllTextFields() {
connectBtn.spinnerTriggered = false
passwordFromBackupEdit.clear()
filePath = ""
errorText = ""
fileImportBtnText = JamiStrings.selectArchiveFile
@ -113,6 +112,7 @@ Rectangle {
secondary: true
color: JamiTheme.secAndTertiTextColor
secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
focus: visible
Layout.alignment: Qt.AlignCenter
Layout.topMargin: 35
@ -122,9 +122,9 @@ Rectangle {
text: fileImportBtnText
toolTipText: JamiStrings.importAccountArchive
KeyNavigation.tab: passwordFromBackupEdit
KeyNavigation.up: backButton
KeyNavigation.down: passwordFromBackupEdit
KeyNavigation.tab: KeyNavigation.down
onClicked: {
errorText = ""
@ -143,6 +143,7 @@ Rectangle {
filePath = file
if (file.length !== "") {
fileImportBtnText = UtilsAdapter.toFileInfoName(file)
passwordFromBackupEdit.forceActiveFocus()
} else {
fileImportBtnText = JamiStrings.archive
}
@ -153,7 +154,7 @@ Rectangle {
}
}
EditableLineEdit {
PasswordTextEdit {
id: passwordFromBackupEdit
objectName: "passwordFromBackupEdit"
@ -162,25 +163,13 @@ Rectangle {
Layout.topMargin: 20
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
focus: visible
placeholderText: JamiStrings.enterPassword
selectByMouse: true
placeholderText: JamiStrings.password
font.pointSize: JamiTheme.textFontSize
font.kerning: true
secondIco: JamiResources.eye_cross_svg
echoMode: TextInput.Password
KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
KeyNavigation.up: fileImportBtn
KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
KeyNavigation.tab: KeyNavigation.down
onTextChanged: errorText = ""
onSecondIcoClicked: { toggleEchoMode() }
onAccepted: connectBtn.forceActiveFocus()
}
SpinnerButton {
@ -207,9 +196,9 @@ Rectangle {
return false
}
KeyNavigation.tab: backButton
KeyNavigation.up: passwordFromBackupEdit
KeyNavigation.down: backButton
KeyNavigation.tab: KeyNavigation.down
onClicked: {
if (connectBtn.focus)
@ -219,7 +208,7 @@ Rectangle {
WizardViewStepModel.accountCreationInfo =
JamiQmlUtils.setUpAccountCreationInputPara(
{archivePath : UtilsAdapter.getAbsPath(filePath),
password : passwordFromBackupEdit.text})
password : passwordFromBackupEdit.dynamicText})
WizardViewStepModel.nextStep()
}
}

View file

@ -40,8 +40,6 @@ Rectangle {
function clearAllTextFields() {
connectBtn.spinnerTriggered = false
pinFromDevice.clear()
passwordFromDevice.clear()
}
function errorOccured(errorMessage) {
@ -139,10 +137,9 @@ Rectangle {
}
EditableLineEdit {
ModalTextEdit {
id: pinFromDevice
objectName: "pinFromDevice"
Layout.alignment: Qt.AlignCenter
@ -151,52 +148,40 @@ Rectangle {
focus: visible
selectByMouse: true
placeholderText: JamiStrings.pin
font.pointSize: JamiTheme.textFontSize
font.kerning: true
staticText: ""
KeyNavigation.tab: {
KeyNavigation.up: backButton
KeyNavigation.down: passwordFromDevice
KeyNavigation.tab: KeyNavigation.down
onAccepted: passwordFromDevice.forceActiveFocus()
}
PasswordTextEdit {
id: passwordFromDevice
objectName: "passwordFromDevice"
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
placeholderText: JamiStrings.enterPassword
KeyNavigation.up: pinFromDevice
KeyNavigation.down: {
if (connectBtn.enabled)
return connectBtn
else if (connectBtn.spinnerTriggered)
return passwordFromDevice
return backButton
}
KeyNavigation.up: passwordFromDevice
KeyNavigation.down: KeyNavigation.tab
KeyNavigation.tab: KeyNavigation.down
onTextChanged: errorText = ""
onAccepted: pinFromDevice.forceActiveFocus()
}
EditableLineEdit {
id: passwordFromDevice
objectName: "passwordFromDevice"
underlined: true
Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: Math.min(440, root.width - JamiTheme.preferredMarginSize * 2)
secondIco: JamiResources.eye_cross_svg
selectByMouse: true
placeholderText: JamiStrings.password
font.pointSize: JamiTheme.textFontSize
font.kerning: true
echoMode: TextInput.Password
KeyNavigation.tab: connectBtn.enabled ? connectBtn : backButton
KeyNavigation.up: pinFromDevice
KeyNavigation.down: connectBtn.enabled ? connectBtn : backButton
onTextChanged: errorText = ""
onEditingFinished: pinFromDevice.forceActiveFocus()
onSecondIcoClicked: { toggleEchoMode() }
}
SpinnerButton {
id: connectBtn
color: JamiTheme.tintedBlue
@ -212,7 +197,7 @@ Rectangle {
spinnerTriggeredtext: JamiStrings.generatingAccount
normalText: JamiStrings.connectFromAnotherDevice
enabled: pinFromDevice.text.length !== 0 && !spinnerTriggered
enabled: pinFromDevice.dynamicText.length !== 0 && !spinnerTriggered
KeyNavigation.tab: backButton
KeyNavigation.up: passwordFromDevice
@ -223,8 +208,8 @@ Rectangle {
WizardViewStepModel.accountCreationInfo =
JamiQmlUtils.setUpAccountCreationInputPara(
{archivePin : pinFromDevice.text,
password : passwordFromDevice.text})
{archivePin : pinFromDevice.dynamicText,
password : passwordFromDevice.dynamicText})
WizardViewStepModel.nextStep()
}
}