TextField: new design

GitLab: #1417
Change-Id: I89c97d02250b9b283f85a006b13c97e4bb54ee32

src/app/commoncomponents/MaterialTextField.qml

@@ -48,7 +48,7 @@ TextField {
     property alias suffixBisIconColor: suffixBisIcon.color
     property alias icon: container.data
 
-    property color accent: isActive || hovered ? prefixIconColor : JamiTheme.buttonTintedBlue
+    property color accent:  (isActive || hovered ? prefixIconColor : JamiTheme.passwordBaselineColor)
     property color baseColor: JamiTheme.primaryForegroundColor
     property color textColor: JamiTheme.textColor
     color: textColor
@@ -114,8 +114,11 @@ TextField {
         id: overBaseLineLabel
         font.pixelSize: root.font.pixelSize
         anchors.baseline: root.baseline
-        anchors.horizontalCenter: !isSwarmDetail ? root.horizontalCenter : undefined
+        anchors.left: root.left
+        anchors.leftMargin: 32
+        width: root.width - 64
         text: root.placeholderText
+        elide: Text.ElideRight
         color: isSwarmDetail ? root.color : root.baseColor
         visible: !root.isActive && !readOnly && root.text.toString() === ""
     }
@@ -206,12 +209,13 @@ TextField {
 
     TextFieldIcon {
         id: suffixBisIcon
-        size: 20
+        size: 16
         anchors.right: parent.right
         anchors.verticalCenter: root.verticalCenter
         anchors.verticalCenterOffset: -root.bottomPadding / 2
         color: suffixBisIconColor
         source: suffixBisIconSrc
+        opacity: 1
 
         TapHandler {
             cursorShape: Qt.ArrowCursor

src/app/commoncomponents/ModalTextEdit.qml

@@ -87,6 +87,7 @@ Loader {
 
         MaterialTextField {
             id: displayCompField
+
             font.pixelSize: root.fontPixelSize
             readOnly: root.readOnly
             text: elidedText != "" ? elidedText : staticText
@@ -94,6 +95,8 @@ Loader {
             isSwarmDetail: root.isSwarmDetail
             isSettings: root.isSettings
             textColor: root.textColor
+            suffixBisIconSrc: root.suffixBisIconSrc
+            suffixBisIconColor: root.suffixBisIconColor
             placeholderText: root.placeholderText
             prefixIconSrc: isSwarmDetail ? "" : root.prefixIconSrc
             prefixIconColor: root.prefixIconColor

src/app/commoncomponents/PasswordTextEdit.qml

@@ -28,7 +28,7 @@ ModalTextEdit {
     prefixIconSrc: firstEntry ? JamiResources.lock_svg : JamiResources.round_edit_24dp_svg
 
     suffixBisIconSrc: echoMode == TextInput.Password ? JamiResources.eye_cross_svg : JamiResources.noun_eye_svg
-    suffixBisIconColor: JamiTheme.buttonTintedBlue
+    suffixBisIconColor: JamiTheme.passwordEyeIconColor
 
     placeholderText: JamiStrings.password
     infoTipText: firstEntry ? JamiStrings.password : ""

src/app/constant/JamiTheme.qml

@@ -596,6 +596,10 @@ Item {
     property real textEditError: calcSize(15)
     property real maximumCharacters: 50
 
+    // PasswordTextEdit
+    property color passwordEyeIconColor: "#5d5d5d"
+    property color passwordBaselineColor: darkTheme ? "#6e6e6e" : "#9fbfd9"
+
     // MaterialButton
     property real buttontextPadding: 10
     property real buttontextWizzardPadding: 30