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

@@ -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
+    padding: JamiTheme.materialLineEditPadding
-
+    horizontalAlignment: Text.AlignLeft
-    onBorderColorModeChanged: {
+    verticalAlignment: Text.AlignVCenter
-        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
-        }
-    }
 
     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
 

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()

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
+    Image {
-    font.pointSize: 9
+        id: lineEditImage
-    font.kerning: true
+
+        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"
 
-    borderColorMode: {
         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
+            __iconSource = JamiResources.round_error_24dp_svg
-        case UsernameLineEdit.NameRegistrationState.FREE:
+            borderColor = "red"
-            return MaterialLineEdit.RIGHT
+            break
-        case UsernameLineEdit.NameRegistrationState.SEARCHING:
-            return MaterialLineEdit.SEARCHING
         }
     }
 

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

src/settingsview/components/LinkDeviceDialog.qml

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

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

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)

src/wizardview/components/ImportFromBackupPage.qml

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

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

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