From a811b9666c8877c0fdb26d52ccd74b4d6d5d49ed Mon Sep 17 00:00:00 2001
From: Ming Rui Zhang <mingrui.zhang@savoirfairelinux.com>
Date: Mon, 9 Aug 2021 16:15:42 -0400
Subject: [PATCH] materialLineEdit: ui simplification
materialLineEdit should be a rather simple component and
any futher changes should be in another component such as
UsernameLineEdit.
Change-Id: I7d284c6fa87653468e64fd42874f8042a58d99cf
---
src/commoncomponents/MaterialLineEdit.qml | 98 ++-----------------
src/commoncomponents/PasswordDialog.qml | 2 -
src/commoncomponents/UsernameLineEdit.qml | 78 ++++++++++++---
src/constant/JamiTheme.qml | 8 ++
.../components/LinkDeviceDialog.qml | 2 -
.../components/RevokeDevicePasswordDialog.qml | 1 -
.../ConnectToAccountManagerPage.qml | 5 -
.../components/ImportFromBackupPage.qml | 1 -
.../components/ImportFromDevicePage.qml | 3 -
src/wizardview/components/ProfilePage.qml | 2 -
10 files changed, 81 insertions(+), 119 deletions(-)
diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index ea6348478..e798f443a 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/src/commoncomponents/MaterialLineEdit.qml
@@ -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
diff --git a/src/commoncomponents/PasswordDialog.qml b/src/commoncomponents/PasswordDialog.qml
index c2b0059d3..efe04137d 100644
--- a/src/commoncomponents/PasswordDialog.qml
+++ b/src/commoncomponents/PasswordDialog.qml
@@ -42,8 +42,6 @@ BaseDialog {
purpose = purposeIn
path = exportPathIn
currentPasswordEdit.clear()
- passwordEdit.borderColorMode = MaterialLineEdit.NORMAL
- confirmPasswordEdit.borderColorMode = MaterialLineEdit.NORMAL
passwordEdit.clear()
confirmPasswordEdit.clear()
validatePassword()
diff --git a/src/commoncomponents/UsernameLineEdit.qml b/src/commoncomponents/UsernameLineEdit.qml
index c454af954..8afa7005b 100644
--- a/src/commoncomponents/UsernameLineEdit.qml
+++ b/src/commoncomponents/UsernameLineEdit.qml
@@ -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
+
+ 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
+ }
- borderColorMode: {
- switch (nameRegistrationState){
+ 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
}
}
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 91de9fe2a..fa84d004e 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -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
diff --git a/src/settingsview/components/LinkDeviceDialog.qml b/src/settingsview/components/LinkDeviceDialog.qml
index 3afddc87a..9475b92af 100644
--- a/src/settingsview/components/LinkDeviceDialog.qml
+++ b/src/settingsview/components/LinkDeviceDialog.qml
@@ -154,8 +154,6 @@ BaseDialog {
placeholderText: JamiStrings.enterCurrentPassword
- borderColorMode: MaterialLineEdit.NORMAL
-
onTextChanged: {
btnConfirm.enabled = text.length > 0
}
diff --git a/src/settingsview/components/RevokeDevicePasswordDialog.qml b/src/settingsview/components/RevokeDevicePasswordDialog.qml
index ce195c8bc..717737070 100644
--- a/src/settingsview/components/RevokeDevicePasswordDialog.qml
+++ b/src/settingsview/components/RevokeDevicePasswordDialog.qml
@@ -76,7 +76,6 @@ BaseDialog {
echoMode: TextInput.Password
placeholderText: JamiStrings.enterCurrentPassword
- borderColorMode: MaterialLineEdit.NORMAL
onTextChanged: {
btnRemove.enabled = text.length > 0
diff --git a/src/wizardview/components/ConnectToAccountManagerPage.qml b/src/wizardview/components/ConnectToAccountManagerPage.qml
index e05cdb000..7550f34cb 100644
--- a/src/wizardview/components/ConnectToAccountManagerPage.qml
+++ b/src/wizardview/components/ConnectToAccountManagerPage.qml
@@ -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)
diff --git a/src/wizardview/components/ImportFromBackupPage.qml b/src/wizardview/components/ImportFromBackupPage.qml
index b55779cf5..06c89b2d4 100644
--- a/src/wizardview/components/ImportFromBackupPage.qml
+++ b/src/wizardview/components/ImportFromBackupPage.qml
@@ -182,7 +182,6 @@ Rectangle {
font.kerning: true
echoMode: TextInput.Password
- borderColorMode: MaterialLineEdit.NORMAL
KeyNavigation.tab: {
if (connectBtn.enabled)
diff --git a/src/wizardview/components/ImportFromDevicePage.qml b/src/wizardview/components/ImportFromDevicePage.qml
index d8377e4f5..a3a104eb1 100644
--- a/src/wizardview/components/ImportFromDevicePage.qml
+++ b/src/wizardview/components/ImportFromDevicePage.qml
@@ -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
diff --git a/src/wizardview/components/ProfilePage.qml b/src/wizardview/components/ProfilePage.qml
index e4009525d..31c11203c 100644
--- a/src/wizardview/components/ProfilePage.qml
+++ b/src/wizardview/components/ProfilePage.qml
@@ -146,8 +146,6 @@ Rectangle {
font.pointSize: JamiTheme.textFontSize
font.kerning: true
- borderColorMode: MaterialLineEdit.NORMAL
-
fieldLayoutWidth: saveProfileBtn.width
KeyNavigation.tab: saveProfileBtn
--
GitLab