lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-14 12:35:23 +02:00
Code Activity

materialLineEdit: ui simplification

Browse source 
materialLineEdit should be a rather simple component and
any futher changes should be in another component such as
UsernameLineEdit.

Change-Id: I7d284c6fa87653468e64fd42874f8042a58d99cf
This commit is contained in:
Ming Rui Zhang 2021-08-09 16:15:42 -04:00
parent 37fd251413
commit a811b9666c
10 changed files with 81 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/commoncomponents/MaterialLineEdit.qml
View file

@ -1,6 +1,7 @@
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Copyright (C) 2021 by Savoir-faire Linux
* Author: Sébastien blin <sebastien.blin@savoirfairelinux.com>
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
@ -18,69 +19,33 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14
import net.jami.Constants 1.0
TextField {
id: root
enum BorderColorMode {
NORMAL,
SEARCHING,
RIGHT,
ERROR
}
property int fieldLayoutWidth: 256
property int fieldLayoutHeight: 48
property bool layoutFillwidth: false
property int borderColorMode: MaterialLineEdit.NORMAL
property var iconSource: ""
property var backgroundColor: JamiTheme.editBackgroundColor
property var borderColor: JamiTheme.greyBorderColor
property bool loseFocusWhenEnterPressed: false
signal imageClicked
onBorderColorModeChanged: {
if (!enabled)
borderColor = "transparent"
if (readOnly)
iconSource = ""
switch(borderColorMode){
case MaterialLineEdit.SEARCHING:
iconSource = JamiResources.jami_rolling_spinner_gif
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.NORMAL:
iconSource = ""
borderColor = JamiTheme.greyBorderColor
break
case MaterialLineEdit.RIGHT:
iconSource = JamiResources.round_check_circle_24dp_svg
borderColor = "green"
break
case MaterialLineEdit.ERROR:
iconSource = JamiResources.round_error_24dp_svg
borderColor = "red"
break
}
}
padding: JamiTheme.materialLineEditPadding
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap
readOnly: false
selectByMouse: true
selectionColor: JamiTheme.placeHolderTextFontColor
font.pointSize: 10
padding: 16
font.pointSize: JamiTheme.materialLineEditPointSize
font.kerning: true
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
color: JamiTheme.textColor
LineEditContextMenu {
@ -90,53 +55,6 @@ TextField {
selectOnly: readOnly
}
Image {
id: lineEditImage
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
width: 24
height: 24
visible: borderColorMode !== MaterialLineEdit.SEARCHING
source: borderColorMode === MaterialLineEdit.SEARCHING ? "" : iconSource
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: borderColor
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton
enabled: borderColorMode === MaterialLineEdit.RIGHT
onReleased: {
imageClicked()
}
}
}
AnimatedImage {
anchors.left: lineEditImage.left
anchors.verticalCenter: parent.verticalCenter
width: 24
height: 24
source: borderColorMode !== MaterialLineEdit.SEARCHING ? "" : iconSource
playing: true
paused: false
fillMode: Image.PreserveAspectFit
mipmap: true
visible: borderColorMode === MaterialLineEdit.SEARCHING
}
background: Rectangle {
anchors.fill: parent

2
src/commoncomponents/PasswordDialog.qml
View file

@ -42,8 +42,6 @@ BaseDialog {
purpose = purposeIn
path = exportPathIn
currentPasswordEdit.clear()
passwordEdit.borderColorMode = MaterialLineEdit.NORMAL
confirmPasswordEdit.borderColorMode = MaterialLineEdit.NORMAL
passwordEdit.clear()
confirmPasswordEdit.clear()
validatePassword()

78
src/commoncomponents/UsernameLineEdit.qml
View file

@ -1,5 +1,5 @@
/*
* Copyright (C) 2020 by Savoir-faire Linux
* Copyright (C) 2021 by Savoir-faire Linux
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
@ -18,8 +18,10 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import net.jami.Models 1.0
import net.jami.Constants 1.0
MaterialLineEdit {
id: root
@ -33,6 +35,11 @@ MaterialLineEdit {
}
property int nameRegistrationState: UsernameLineEdit.NameRegistrationState.BLANK
property var __iconSource: ""
selectByMouse: true
font.pointSize: JamiTheme.usernameLineEditPointSize
font.kerning: true
Connections {
id: registeredNameFoundConnection
@ -63,7 +70,7 @@ MaterialLineEdit {
id: lookupTimer
repeat: false
interval: 200
interval: JamiTheme.usernameLineEditlookupInterval
onTriggered: {
if (text.length !== 0 && readOnly === false) {
@ -75,21 +82,66 @@ MaterialLineEdit {
}
}
selectByMouse: true
font.pointSize: 9
font.kerning: true
Image {
id: lineEditImage
borderColorMode: {
switch (nameRegistrationState){
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
width: 24
height: 24
visible: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING
source: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING ?
"" : __iconSource
layer {
enabled: true
effect: ColorOverlay {
id: overlay
color: borderColor
}
}
}
AnimatedImage {
anchors.left: lineEditImage.left
anchors.verticalCenter: parent.verticalCenter
width: 24
height: 24
source: nameRegistrationState !== UsernameLineEdit.NameRegistrationState.SEARCHING ?
"" : __iconSource
playing: true
paused: false
fillMode: Image.PreserveAspectFit
mipmap: true
visible: nameRegistrationState === UsernameLineEdit.NameRegistrationState.SEARCHING
}
onNameRegistrationStateChanged: {
if (!enabled)
borderColor = "transparent"
switch(nameRegistrationState){
case UsernameLineEdit.NameRegistrationState.SEARCHING:
__iconSource = JamiResources.jami_rolling_spinner_gif
borderColor = JamiTheme.greyBorderColor
break
case UsernameLineEdit.NameRegistrationState.BLANK:
return MaterialLineEdit.NORMAL
__iconSource = ""
borderColor = JamiTheme.greyBorderColor
break
case UsernameLineEdit.NameRegistrationState.FREE:
__iconSource = JamiResources.round_check_circle_24dp_svg
borderColor = "green"
break
case UsernameLineEdit.NameRegistrationState.INVALID:
case UsernameLineEdit.NameRegistrationState.TAKEN:
return MaterialLineEdit.ERROR
case UsernameLineEdit.NameRegistrationState.FREE:
return MaterialLineEdit.RIGHT
case UsernameLineEdit.NameRegistrationState.SEARCHING:
return MaterialLineEdit.SEARCHING
__iconSource = JamiResources.round_error_24dp_svg
borderColor = "red"
break
}
}

8
src/constant/JamiTheme.qml
View file

@ -310,6 +310,14 @@ Item {
property real welcomeLogoHeight: 110
property real wizardButtonWidth: 400
// MaterialLineEdit
property real materialLineEditPointSize: 10
property real materialLineEditPadding: 16
// UsernameLineEdit
property real usernameLineEditPointSize: 9
property real usernameLineEditlookupInterval: 200
// Main application spec
property real mainViewMinWidth: 332
property real mainViewMinHeight: 500

2
src/settingsview/components/LinkDeviceDialog.qml
View file

@ -154,8 +154,6 @@ BaseDialog {
placeholderText: JamiStrings.enterCurrentPassword
borderColorMode: MaterialLineEdit.NORMAL
onTextChanged: {
btnConfirm.enabled = text.length > 0
}

1
src/settingsview/components/RevokeDevicePasswordDialog.qml
View file

@ -76,7 +76,6 @@ BaseDialog {
echoMode: TextInput.Password
placeholderText: JamiStrings.enterCurrentPassword
borderColorMode: MaterialLineEdit.NORMAL
onTextChanged: {
btnRemove.enabled = text.length > 0

5
src/wizardview/components/ConnectToAccountManagerPage.qml
View file

@ -108,8 +108,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: usernameManagerEdit
KeyNavigation.up: {
if (backButton.visible)
@ -150,8 +148,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: passwordManagerEdit
KeyNavigation.up: accountManagerEdit
KeyNavigation.down: KeyNavigation.tab
@ -175,7 +171,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)

1
src/wizardview/components/ImportFromBackupPage.qml
View file

@ -182,7 +182,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)

3
src/wizardview/components/ImportFromDevicePage.qml
View file

@ -97,7 +97,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: pinFromDevice
KeyNavigation.up: {
@ -146,8 +145,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)
return connectBtn

2
src/wizardview/components/ProfilePage.qml
View file

@ -146,8 +146,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
borderColorMode: MaterialLineEdit.NORMAL
fieldLayoutWidth: saveProfileBtn.width
KeyNavigation.tab: saveProfileBtn