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

@@ -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"]
+    }
+}

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 {}

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"
+              }
+          }
+      }
+  }
+}
+

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

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>