From ea9a56027786ed5a4910b5bf1f90fd4f495305d8 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 27 Oct 2021 13:19:55 +0200
Subject: [PATCH] feat(StatusQ.Controls): introduce `StatusWalletColorSelect`
 control

Usage:

```qml
StatusWalletColorSelect {
    model: Theme.palette.accountColors
}

```

Closes #467
---
 sandbox/StatusWalletColorSelectPage.qml       | 17 ++++++
 sandbox/main.qml                              | 10 +++
 .../Controls/StatusWalletColorSelect.qml      | 61 +++++++++++++++++++
 src/StatusQ/Controls/qmldir                   |  1 +
 4 files changed, 89 insertions(+)
 create mode 100644 sandbox/StatusWalletColorSelectPage.qml
 create mode 100644 src/StatusQ/Controls/StatusWalletColorSelect.qml

diff --git a/sandbox/StatusWalletColorSelectPage.qml b/sandbox/StatusWalletColorSelectPage.qml
new file mode 100644
index 00000000..a25a421d
--- /dev/null
+++ b/sandbox/StatusWalletColorSelectPage.qml
@@ -0,0 +1,17 @@
+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
+
+    StatusWalletColorSelect {
+        model: Theme.palette.accountColors
+    }
+}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index ab39027e..a7829b43 100644
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@@ -188,6 +188,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusWalletColorButtonPageComponent
                             onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusWalletColorSelect" 
+                            selected: page.sourceComponent == statusWalletColorSelectPageComponent
+                            onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -326,6 +331,11 @@ StatusWindow {
         StatusWalletColorButtonPage {}
     }
 
+    Component {
+        id: statusWalletColorSelectPageComponent
+        StatusWalletColorSelectPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
diff --git a/src/StatusQ/Controls/StatusWalletColorSelect.qml b/src/StatusQ/Controls/StatusWalletColorSelect.qml
new file mode 100644
index 00000000..b34dc280
--- /dev/null
+++ b/src/StatusQ/Controls/StatusWalletColorSelect.qml
@@ -0,0 +1,61 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: control
+    property string selectedColor
+    property string label: "Account color"
+    property var model
+    property bool enabled: true
+
+    height: childrenRect.height
+    implicitWidth: 480
+
+    StatusBaseText {
+        id: label
+        text: control.label
+        anchors.left: parent.left
+        anchors.top: parent.top
+        font.pixelSize: 15
+        color: control.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    }
+
+    RowLayout {
+        id: colors
+        spacing: 6
+        anchors.top: label.bottom
+        anchors.topMargin: 8
+        anchors.left: parent.left
+        anchors.right: parent.right
+        Repeater {
+            model: control.model
+            StatusWalletColorButton {
+                id: colorBtn
+                icon.color: modelData
+                selected: {
+                    const upperCaseColor = control.selectedColor.toUpperCase()
+                    const upperCaseModelDataColor = modelData.toString().toUpperCase()
+                    if (upperCaseColor === upperCaseModelDataColor) {
+                        return true
+                    }
+                    // Check the colors in the other theme
+                    const currentColor = Utils.getThemeAccountColor(upperCaseColor, Theme.palette.accountColors)
+                    if (!currentColor) {
+                        return false
+                    }
+
+                    return currentColor === upperCaseModelDataColor
+                }
+                onClicked: {
+                    control.selectedColor = modelData.toUpperCase()
+                }
+            }
+        }
+    }
+}
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index 1163fe7b..22cc6eda 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -27,3 +27,4 @@ StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
 StatusWalletColorButton 0.1 StatusWalletColorButton.qml
+StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml