From d8745049da533b4db119aae0abaff85e3f4e2d25 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 27 Oct 2021 13:06:54 +0200
Subject: [PATCH] feat(StatusQ.Controls): introduce `StatusWalletColorButton`
 component

Usage:

```qml
StatusWalletColorButton {
    icon.color: Theme.palette.miscColor1
    selected: true
}
```

Closes #466
---
 .../sandbox/StatusWalletColorButtonPage.qml   | 38 +++++++++++++++++
 ui/StatusQ/sandbox/main.qml                   | 10 +++++
 .../Controls/StatusWalletColorButton.qml      | 41 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Controls/qmldir        |  1 +
 4 files changed, 90 insertions(+)
 create mode 100644 ui/StatusQ/sandbox/StatusWalletColorButtonPage.qml
 create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusWalletColorButton.qml

diff --git a/ui/StatusQ/sandbox/StatusWalletColorButtonPage.qml b/ui/StatusQ/sandbox/StatusWalletColorButtonPage.qml
new file mode 100644
index 0000000000..41f8b7be0a
--- /dev/null
+++ b/ui/StatusQ/sandbox/StatusWalletColorButtonPage.qml
@@ -0,0 +1,38 @@
+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
+
+    Row {
+        spacing: 4
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor1
+            selected: true
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor2
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor3
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor4
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor5
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor6
+        }
+        StatusWalletColorButton {
+            icon.color: Theme.palette.miscColor7
+        }
+    }
+}
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index 6d3d4c4ba3..ab39027e39 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -183,6 +183,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusColorSelectorPageComponent
                             onClicked: page.sourceComponent = statusColorSelectorPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusWalletColorButton" 
+                            selected: page.sourceComponent == statusWalletColorButtonPageComponent
+                            onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -316,6 +321,11 @@ StatusWindow {
         StatusTabBarIconButtonPage {}
     }
 
+    Component {
+        id: statusWalletColorButtonPageComponent
+        StatusWalletColorButtonPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusWalletColorButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusWalletColorButton.qml
new file mode 100644
index 0000000000..a65266ad71
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusWalletColorButton.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusFlatRoundButton {
+    id: control
+    property bool selected: false
+    icon.name: "filled-account"
+    icon.width: 36
+    icon.height: 36
+    Rectangle {
+        anchors.fill: parent
+        color: control.hovered ? control.icon.color : "transparent"
+        opacity: 0.1
+        radius: 8
+    }
+
+    Rectangle {
+        width: 16
+        height: 16
+        anchors.top: parent.top
+        anchors.topMargin: 2
+        anchors.right: parent.right
+        anchors.rightMargin: 2
+        visible: control.selected
+        radius: width / 2
+        color: Theme.palette.successColor1
+        StatusIcon {
+            icon: "tiny/checkmark"
+            height: 12
+            color: Theme.palette.white
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}
+
+
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 68e7f2d6dc..1163fe7ba3 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -26,3 +26,4 @@ StatusPickerButton 0.1 StatusPickerButton.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
+StatusWalletColorButton 0.1 StatusWalletColorButton.qml