From 4cc0d2bbcaa2308618fec107b5da6788c0b61e37 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Mon, 25 Oct 2021 14:54:00 +0200
Subject: [PATCH] feat(StatusQ.Controls): introduce StatusChatCommandButton

Usage:

```qml
StatusChatCommandButton {
    icon.name: "send"
    icon.color: Theme.palette.miscColor2
    text: "Send transaction"
}
```

Closes #429
---
 sandbox/StatusChatCommandButtonPage.qml       | 26 +++++++
 sandbox/main.qml                              | 10 +++
 .../Controls/StatusChatCommandButton.qml      | 71 +++++++++++++++++++
 src/StatusQ/Controls/qmldir                   |  1 +
 4 files changed, 108 insertions(+)
 create mode 100644 sandbox/StatusChatCommandButtonPage.qml
 create mode 100644 src/StatusQ/Controls/StatusChatCommandButton.qml

diff --git a/sandbox/StatusChatCommandButtonPage.qml b/sandbox/StatusChatCommandButtonPage.qml
new file mode 100644
index 00000000..f7d483f0
--- /dev/null
+++ b/sandbox/StatusChatCommandButtonPage.qml
@@ -0,0 +1,26 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.color: Theme.palette.miscColor2
+        text: "Send transaction"
+    }
+
+    StatusChatCommandButton {
+        icon.name: "send"
+        icon.rotation: 180
+        icon.color: Theme.palette.miscColor8
+        text: "Receive transaction"
+    }
+}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index 2982dcab..6d3d4c4b 100644
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@@ -143,6 +143,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusTabSwitchesComponent
                             onClicked: page.sourceComponent = statusTabSwitchesComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusChatCommandButton" 
+                            selected: page.sourceComponent == statusChatCommandButtonPageComponent
+                            onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Controls" 
                             selected: page.sourceComponent == controlsComponent
@@ -336,6 +341,11 @@ StatusWindow {
         Buttons {}
     }
 
+    Component {
+        id: statusChatCommandButtonPageComponent
+        StatusChatCommandButtonPage {}
+    }
+
     Component {
         id: popupMenuComponent
         StatusPopupMenuPage {}
diff --git a/src/StatusQ/Controls/StatusChatCommandButton.qml b/src/StatusQ/Controls/StatusChatCommandButton.qml
new file mode 100644
index 00000000..493957c2
--- /dev/null
+++ b/src/StatusQ/Controls/StatusChatCommandButton.qml
@@ -0,0 +1,71 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+Rectangle {
+    id: root
+    implicitWidth: 168
+    implicitHeight: 95
+
+    property string text: ""
+    property bool highlighted: false
+    property bool enabled: true
+
+    signal clicked(var mouse)
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 24
+        height: 24
+        background: StatusIconBackgroundSettings {}
+    }
+
+    color: {
+        let actualColor = Qt.darker(root.icon.color, 1)
+        actualColor.a = sensor.containsMouse && enabled ? 0.3 : 0.2
+        return actualColor
+    }
+
+    radius: 16
+
+    MouseArea {
+        id: sensor
+        cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: function (mouse) {
+            root.clicked(mouse)
+        }
+
+        StatusRoundIcon {
+            icon.name: root.icon.name
+            icon.width: root.icon.width
+            icon.height: root.icon.height
+            icon.rotation: root.icon.rotation
+            icon.color: Theme.palette.white
+            icon.background.width: 40
+            icon.background.height: 40
+            icon.background.color: root.icon.color
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+        }
+
+        StatusBaseText {
+            text: root.text
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 8
+            font.pixelSize: 13
+            font.weight: Font.Medium
+            color: Theme.palette.white
+        }
+    }
+}
+
+
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index 415686d0..68e7f2d6 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -2,6 +2,7 @@ module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
 StatusAssetSelector 0.1 StatusAssetSelector.qml
+StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusColorSelector 0.1 StatusColorSelector.qml