From e2c178ad435e202895e91914479cd31a3e442a67 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 14 Oct 2021 10:46:04 +0200
Subject: [PATCH] feat(StatusQ.Controls): introduce StatusColorSelector
 component

This is a select component to pick from various supplied colors.

Usage:

```qml
import StatusQ.Controls 0.1

StatusColorSelector {
    model: ["red", "blue", "green"]
}

```

Closes #444
---
 .../sandbox/StatusColorSelectorPage.qml       | 17 +++++++++
 ui/StatusQ/sandbox/main.qml                   | 10 +++++
 .../StatusQ/Controls/StatusColorSelector.qml  | 37 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Controls/qmldir        |  1 +
 ui/StatusQ/statusq.qrc                        |  1 +
 5 files changed, 66 insertions(+)
 create mode 100644 ui/StatusQ/sandbox/StatusColorSelectorPage.qml
 create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusColorSelector.qml

diff --git a/ui/StatusQ/sandbox/StatusColorSelectorPage.qml b/ui/StatusQ/sandbox/StatusColorSelectorPage.qml
new file mode 100644
index 0000000000..01f56c2a1e
--- /dev/null
+++ b/ui/StatusQ/sandbox/StatusColorSelectorPage.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
+
+    StatusColorSelector {
+        model: ["red", "blue", "green"]
+    }
+}
diff --git a/ui/StatusQ/sandbox/main.qml b/ui/StatusQ/sandbox/main.qml
index 715597ec72..70dcc20631 100644
--- a/ui/StatusQ/sandbox/main.qml
+++ b/ui/StatusQ/sandbox/main.qml
@@ -168,6 +168,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusAssetSelectorPageComponent
                             onClicked: page.sourceComponent = statusAssetSelectorPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusColorSelector" 
+                            selected: page.sourceComponent == statusColorSelectorPageComponent
+                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -291,6 +296,11 @@ StatusWindow {
         StatusAssetSelectorPage {}
     }
 
+    Component {
+        id: statusColorSelectorPageComponent
+        StatusColorSelectorPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorSelector.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorSelector.qml
new file mode 100644
index 0000000000..847ab60b3d
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorSelector.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Controls 0.1
+
+Item {
+  id: root
+  property string selectedColor
+  property string label: "Color"
+  property var model
+  height: accountColorInput.height
+  implicitWidth: 448
+
+  StatusSelect {
+      id: accountColorInput
+      bgColor: selectedColor
+      label: root.label
+      model: root.model
+
+      selectMenu.delegate: Component {
+          MenuItem {
+              property bool isFirstItem: index === 0
+              property bool isLastItem: index === root.model.length - 1
+              height: 52
+              width: parent.width
+              padding: 10
+              onTriggered: function () {
+                  const selectedColor = root.model[index]
+                  root.selectedColor = selectedColor
+              }
+              background: Rectangle {
+                  color: root.model[index] || "transparent"
+              }
+          }
+      }
+  }
+}
+
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 1d1dae9182..dc5219b3d4 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -4,6 +4,7 @@ StatusAccountSelector 0.1 StatusAccountSelector.qml
 StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
+StatusColorSelector 0.1 StatusColorSelector.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc
index da5253dfb9..3a080aeae1 100644
--- a/ui/StatusQ/statusq.qrc
+++ b/ui/StatusQ/statusq.qrc
@@ -42,6 +42,7 @@
         <file>src/StatusQ/Controls/StatusAssetSelector.qml</file>
         <file>src/StatusQ/Controls/StatusIconTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusChatInfoButton.qml</file>
+        <file>src/StatusQ/Controls/StatusColorSelector.qml</file>
         <file>src/StatusQ/Controls/qmldir</file>
         <file>src/StatusQ/Controls/StatusAccountSelector.qml</file>
         <file>src/StatusQ/Controls/StatusSlider.qml</file>