Add an optional reveal password button to TextField

Similar to KPasswordWidget in kwidgetaddons

Also fixes:
- the clear button still being clickable when not enabled
- RTL icons
- Updating the right margin correctly

REVIEW: 128660

src/declarativeimports/plasmacomponents/qml/TextField.qml

@@ -31,8 +31,6 @@ import QtQuick.Controls.Styles.Plasma 2.0 as Styles
 QtControls.TextField {
     id: textField
 
-
-
     //Plasma api
 
     /**
@@ -40,6 +38,13 @@ QtControls.TextField {
      */
     property bool clearButtonShown: false
 
+    /*
+     * Whether to show a button that allows the user to reveal the password in plain text
+     * This only makes sense if the echoMode is set to Password.
+     * @since 5.26
+     */
+    property bool revealPasswordButtonShown: false
+
     //Deprecated/unsupported api
     /**
      * type: string
@@ -72,31 +77,57 @@ QtControls.TextField {
         print("DEPRECATED function");
     }
 
-
     style: Styles.TextFieldStyle {}
 
-    PlasmaCore.IconItem {
+    Row {
-        id: clearButton
-        source: "edit-clear-locationbar-rtl"
-        height: Math.max(parent.height*0.8, units.iconSizes.small)
-        width: height
-        opacity: (textField.length > 0 && clearButtonShown && textField.enabled) ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                duration: units.longDuration
-                easing.type: Easing.InOutQuad
-            }
-        }
         anchors {
-            right: parent.right
+            right: textField.right
             rightMargin: 6
             verticalCenter: textField.verticalCenter
         }
-        MouseArea {
+
-            anchors.fill: parent
+        PlasmaCore.IconItem {
-            onClicked: {
+            id: showPasswordButton
-                textField.text = ""
+            source: textField.echoMode === TextInput.Normal ? "hint" : "visibility"
-                textField.forceActiveFocus()
+            height: Math.max(textField.height * 0.8, units.iconSizes.small)
+            width: height
+            opacity: (textField.length > 0 && revealPasswordButtonShown && textField.enabled) ? 1 : 0
+            visible: opacity > 0
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: units.longDuration
+                    easing.type: Easing.InOutQuad
+                }
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    textField.echoMode = (textField.echoMode == TextInput.Normal ? TextInput.Password : TextInput.Normal)
+                    textField.forceActiveFocus()
+                }
+            }
+        }
+
+        PlasmaCore.IconItem {
+            id: clearButton
+            //ltr confusingly refers to the direction of the arrow in the icon, not the text direction which it should be used in
+            source: LayoutMirroring.enabled ? "edit-clear-locationbar-ltr" : "edit-clear-locationbar-rtl"
+            height: Math.max(textField.height * 0.8, units.iconSizes.small)
+            width: height
+            opacity: (textField.length > 0 && clearButtonShown && textField.enabled) ? 1 : 0
+            visible: opacity > 0
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: units.longDuration
+                    easing.type: Easing.InOutQuad
+                }
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    textField.text = ""
+                    textField.forceActiveFocus()
+                }
             }
         }
     }

src/declarativeimports/plasmastyle/TextFieldStyle.qml

@@ -63,12 +63,20 @@ QtQuickControlStyle.TextFieldStyle {
             imagePath: "widgets/lineedit"
             prefix: "base"
         }
+
         Component.onCompleted: {
             root.padding.left = base.margins.left
             root.padding.top = base.margins.top
-            //TODO: if QtControls gets a component for this, use it instead of this hardcoded heuristic
-            root.padding.right = base.margins.right + (control.clearButtonShown ? Math.max(control.parent.height*0.8, units.iconSizes.small)+units.smallSpacing : 0)
             root.padding.bottom = base.margins.bottom
+
+            //TODO: if QtControls gets a component for this, use it instead of this hardcoded heuristic
+            root.padding.right = Qt.binding(function() {
+                var actionIconSize = Math.max(textField.height * 0.8, units.iconSizes.small);
+                //actionCount is an int of the number of items
+                var actionCount = (control.hasOwnProperty("clearButtonShown") && control.clearButtonShown) +
+                                  (control.hasOwnProperty("revealPasswordButtonShown") && control.revealPasswordButtonShown);
+                return base.margins.right + (actionIconSize * actionCount) + (actionCount > 0 ? units.smallSpacing : 0);
+            })
         }
     }
 

tests/components/textfield.qml

@@ -34,5 +34,25 @@ Rectangle {
             width: 400
             placeholderText: longText
         }
+
+        PlasmaComponents.TextField {
+            text: root.longText
+            echoMode: TextInput.Password
+            revealPasswordButtonShown: true
+        }
+
+        PlasmaComponents.TextField {
+            text: longText
+            echoMode: TextInput.Password
+            revealPasswordButtonShown: true
+            clearButtonShown: true
+        }
+
+        PlasmaComponents.TextField {
+            text: longText
+            LayoutMirroring.enabled: true
+            LayoutMirroring.childrenInherit: true
+            clearButtonShown: true
+        }
     }
 }