From c98f144fd8ba0b398d199d1746b328a91ced2402 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Mon, 4 Jul 2022 13:12:48 +0200
Subject: [PATCH] feat(StatusIconTextButton): Created new control

It defines a button composed with an icon and plain text.
It has been documented and added to sandbox.
---
 doc/src/images/status_icon_text_button.png    | Bin 0 -> 2086 bytes
 doc/src/statusqcontrols.qdoc                  |   1 +
 sandbox/controls/Buttons.qml                  |  22 +++++
 src/StatusQ/Controls/StatusIconTextButton.qml |  83 ++++++++++++++++++
 src/StatusQ/Controls/qmldir                   |   2 +
 5 files changed, 108 insertions(+)
 create mode 100644 doc/src/images/status_icon_text_button.png
 create mode 100644 src/StatusQ/Controls/StatusIconTextButton.qml

diff --git a/doc/src/images/status_icon_text_button.png b/doc/src/images/status_icon_text_button.png
new file mode 100644
index 0000000000000000000000000000000000000000..83058c72a3ce75c02b39cce398a1fe181963f89e
GIT binary patch
literal 2086
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
E3m2|qyZ`_I

literal 0
HcmV?d00001

diff --git a/doc/src/statusqcontrols.qdoc b/doc/src/statusqcontrols.qdoc
index 948aba8a..feef316b 100644
--- a/doc/src/statusqcontrols.qdoc
+++ b/doc/src/statusqcontrols.qdoc
@@ -31,6 +31,7 @@
        \li \l{StatusSlider}
        \li \l{StatusSelect}
        \li \l{StatusBaseInput}
+       \li \l{StatusIconTextButton}
        \li \l{StatusIdenticonRing}
        \li \l{StatusInput}
        \li \l{StatusItemPicker}
diff --git a/sandbox/controls/Buttons.qml b/sandbox/controls/Buttons.qml
index 34e040ff..cb444984 100644
--- a/sandbox/controls/Buttons.qml
+++ b/sandbox/controls/Buttons.qml
@@ -343,4 +343,26 @@ Column {
         text: "Button with Emoji"
         icon.emoji: "🖼️️"
     }
+
+    RowLayout {
+        spacing: 20
+
+        StatusIconTextButton {
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+            statusIcon: "next"
+            icon.width: 24
+            icon.height: 24
+            iconRotation: 180
+            text: "Previous page"
+            font.pixelSize: 15
+            onClicked: testText.visible = !testText.visible
+        }
+        StatusBaseText {
+            id: testText
+            Layout.alignment: Qt.AlignVCenter
+            text: "Click and hide!"
+            font.pixelSize: 15
+        }
+    }
 }
diff --git a/src/StatusQ/Controls/StatusIconTextButton.qml b/src/StatusQ/Controls/StatusIconTextButton.qml
new file mode 100644
index 00000000..80331a11
--- /dev/null
+++ b/src/StatusQ/Controls/StatusIconTextButton.qml
@@ -0,0 +1,83 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusIconTextButton
+   \inherits Item
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief It presents an icon + plain text button. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html}{AbstractButton}.
+
+   The \c StatusIconTextButton is a clickable icon + text control.
+
+   NOTE: It only contemplates `display` property as `AbstractButton.TextBesideIcon`.
+
+   Example of how the component looks like:
+   \image status_icon_text_button.png
+   Example of how to use it:
+   \qml
+        StatusIconTextButton {
+            spacing: 0
+            statusIcon: "next"
+            iconRotation: 180
+            icon.width: 12
+            icon.height: 12
+            text: qsTr("Back")
+            onClicked: console.log("Clicked!")
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+AbstractButton {
+    id: root
+
+    /*!
+       \qmlproperty string StatusIconTextButton::statusIcon
+       This property holds the status icon name.
+    */
+    property string statusIcon
+    /*!
+       \qmlproperty int StatusIconTextButton::iconRotation
+       This property holds the status icon rotation.
+    */
+    property int iconRotation
+    /*!
+       \qmlproperty color StatusIconTextButton::textColor
+       This property holds the text color.
+    */
+    property color textColor: Theme.palette.primaryColor1
+
+    icon.color: Theme.palette.primaryColor1
+    icon.height: 24
+    icon.width: 24
+    font.pixelSize: 13
+    contentItem: RowLayout {
+         spacing: root.spacing
+         StatusIcon {
+             Layout.alignment: Qt.AlignVCenter
+             icon: root.statusIcon
+             color: root.icon.color
+             width: root.icon.width
+             height: root.icon.height
+             rotation: root.iconRotation
+         }
+         StatusBaseText {
+             Layout.alignment: Qt.AlignVCenter
+             text: root.text
+             color: root.textColor
+             font.pixelSize: root.font.pixelSize
+         }
+     }
+
+    // TODO: To remove when switch to Qt 5.15
+    MouseArea {
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      acceptedButtons: Qt.NoButton
+      hoverEnabled: true
+    }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index ab39fcad..2ef09670 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -45,3 +45,5 @@ StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
 StatusImageCrop 0.1 StatusImageCrop.qml
 StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
 StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
+StatusDropdown 0.1 StatusDropdown.qml
+StatusIconTextButton 0.1 StatusIconTextButton.qml