Added Input with right icon

MerginMaps · Dec 20, 2023 · c936a27 · c936a27 · inputapp-bot · Dec 20, 2023
1 parent dada108
commit c936a27
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 4 deletions.
diff --git a/app/qml/inputs/MMInputEditor.qml b/app/qml/inputs/MMInputEditor.qml
@@ -10,8 +10,6 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
-import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import "../components"
 
 MMAbstractEditor {

diff --git a/app/qml/inputs/MMInputWithRightIconEditor.qml b/app/qml/inputs/MMInputWithRightIconEditor.qml
@@ -0,0 +1,53 @@
+/***************************************************************************
+ *                                                                         *
+ *   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  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import "../components"
+
+MMAbstractEditor {
+  id: root
+
+  property var parentValue: parent.value ?? ""
+  property bool parentValueIsNull: parent.valueIsNull ?? false
+  property bool isReadOnly: parent.readOnly ?? false
+
+  property alias placeholderText: textField.placeholderText
+  property alias text: textField.text
+  property alias iconSource: rightIcon.source
+
+  signal editorValueChanged( var newValue, var isNull )
+
+  hasFocus: textField.activeFocus
+
+  content: TextField {
+    id: textField
+
+    anchors.fill: parent
+
+    text: root.parentValue
+    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+    placeholderTextColor: __style.nightAlphaColor
+    font: __style.p5
+    hoverEnabled: true
+
+    background: Rectangle {
+      color: __style.transparentColor
+    }
+  }
+
+  rightAction: MMIcon {
+    id: rightIcon
+
+    height: parent.height
+
+    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+  }
+}
diff --git a/app/qml/inputs/MMPasswordEditor.qml b/app/qml/inputs/MMPasswordEditor.qml
@@ -18,7 +18,7 @@ MMAbstractEditor {
   id: root
 
   property alias placeholderText: textField.placeholderText
-  readonly property alias text: textField.text
+  property alias text: textField.text
 
   hasFocus: textField.activeFocus
 

diff --git a/gallery/qml.qrc b/gallery/qml.qrc
@@ -68,5 +68,6 @@
         <file>../app/qml/components/MMBackButton.qml</file>
         <file>../app/qml/components/MMIconCheckBoxHorizontal.qml</file>
         <file>../app/qml/components/MMIconCheckBoxVertical.qml</file>
+        <file>../app/qml/inputs/MMInputWithRightIconEditor.qml</file>
     </qresource>
 </RCC>
diff --git a/gallery/qml/pages/EditorsPage.qml b/gallery/qml/pages/EditorsPage.qml
@@ -70,9 +70,19 @@ ScrollView {
           warningMsg: text.length > 0 ? "" : "Write something"
         }
 
+        MMInputWithRightIconEditor {
+          title: "MMInputWithRightIconEditor"
+          placeholderText: "Placeholder"
+          enabled: checkbox.checked
+          width: parent.width
+          warningMsg: text.length > 0 ? "" : "Press button to scan"
+          iconSource: __style.qrCodeIcon
+          onRightActionClicked: { console.log("Show scan input"); text = "Scanned text ..." }
+        }
+
         MMPasswordEditor {
           title: "MMPasswordEditor"
-          parentValue: "Password"
+          text: "Password"
           //regexp: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,})'
           errorMsg: "Password must contain at least 6 characters\nMinimum 1 number, uppercase and lowercase letter and special character"
           enabled: checkbox.checked