From 96c4a2c98ff5193b52996408f6384f912824b488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=BDubo=C5=A1?= <lubos@iiteam.eu>
Date: Thu, 21 Dec 2023 08:26:53 +0100
Subject: [PATCH] Added Input with button (#2973)

---
 app/qml/inputs/MMButtonInputEditor.qml | 78 ++++++++++++++++++++++++++
 app/qml/inputs/MMPasswordEditor.qml    |  2 +-
 gallery/qml.qrc                        |  1 +
 gallery/qml/pages/EditorsPage.qml      | 22 +++++++-
 4 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 app/qml/inputs/MMButtonInputEditor.qml

diff --git a/app/qml/inputs/MMButtonInputEditor.qml b/app/qml/inputs/MMButtonInputEditor.qml
new file mode 100644
index 000000000..be1e1aa3b
--- /dev/null
+++ b/app/qml/inputs/MMButtonInputEditor.qml
@@ -0,0 +1,78 @@
+/***************************************************************************
+ *                                                                         *
+ *   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 buttonText: buttonText.text
+  property alias buttonEnabled: rightButton.enabled
+
+  signal editorValueChanged( var newValue, var isNull )
+  signal buttonClicked()
+
+  hasFocus: textField.activeFocus
+
+  content: TextField {
+    id: textField
+
+    anchors.verticalCenter: parent.verticalCenter
+    width: parent.width + rightButton.x
+
+    text: root.parentValue
+    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+    placeholderTextColor: __style.nightAlphaColor
+    font: __style.p5
+    hoverEnabled: true
+
+    background: Rectangle {
+      color: __style.transparentColor
+    }
+  }
+
+  rightAction: Button {
+    id: rightButton
+
+    property bool transparent: false
+
+    x: 10 * __dp - buttonText.width
+    height: 34 * __dp
+    anchors.verticalCenter: parent.verticalCenter
+
+    contentItem: Text {
+      id: buttonText
+
+      anchors.centerIn: rightButton
+      font: __style.t3
+      color: rightButton.enabled ? rightButton.down || rightButton.hovered ? __style.grassColor : __style.forestColor : __style.deepOceanColor
+      horizontalAlignment: Text.AlignHCenter
+      verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+      color: rightButton.enabled ? rightButton.down || rightButton.hovered ? __style.forestColor : __style.grassColor : __style.mediumGreenColor
+      radius: height / 2
+    }
+
+    onClicked: {
+      textField.forceActiveFocus()
+      root.buttonClicked()
+    }
+  }
+}
diff --git a/app/qml/inputs/MMPasswordEditor.qml b/app/qml/inputs/MMPasswordEditor.qml
index 5385c9da4..22d548145 100644
--- 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
index c2a1f484d..353ac809c 100644
--- 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/MMButtonInputEditor.qml</file>
     </qresource>
 </RCC>
diff --git a/gallery/qml/pages/EditorsPage.qml b/gallery/qml/pages/EditorsPage.qml
index fcc8fcfef..987b487fb 100644
--- a/gallery/qml/pages/EditorsPage.qml
+++ b/gallery/qml/pages/EditorsPage.qml
@@ -62,6 +62,26 @@ ScrollView {
           checkboxChecked: false
         }
 
+        MMButtonInputEditor {
+          title: "MMButtonInputEditor"
+          placeholderText: "Write something"
+          text: "Text to copy"
+          buttonText: "Copy"
+          enabled: checkbox.checked
+          width: parent.width
+          onButtonClicked: console.log("Copy pressed")
+          buttonEnabled: text.length > 0
+        }
+
+        MMButtonInputEditor {
+          title: "MMButtonInputEditor"
+          placeholderText: "Píš"
+          buttonText: "Kopíruj"
+          enabled: checkbox.checked
+          width: parent.width
+          buttonEnabled: text.length > 0
+        }
+
         MMInputEditor {
           title: "MMInputEditor"
           placeholderText: "Placeholder"
@@ -72,7 +92,7 @@ ScrollView {
 
         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