diff --git a/ui/StatusQ/doc/src/images/status_emoji_and_color_combobox.png b/ui/StatusQ/doc/src/images/status_emoji_and_color_combobox.png new file mode 100644 index 0000000000..f24832e567 Binary files /dev/null and b/ui/StatusQ/doc/src/images/status_emoji_and_color_combobox.png differ diff --git a/ui/StatusQ/doc/src/statusqcomponents.qdoc b/ui/StatusQ/doc/src/statusqcomponents.qdoc index 22e047a528..28382c6610 100644 --- a/ui/StatusQ/doc/src/statusqcomponents.qdoc +++ b/ui/StatusQ/doc/src/statusqcomponents.qdoc @@ -38,6 +38,10 @@ \li \l{StatusNavigationPanelHeadline} \li \l{StatusRoundIcon} \li \l{StatusRoundedImage} + \li \l{StatusMacWindowButtons} + \li \l{StatusListItemBadge} + \li \l{StatusExpandableItem} + \li \l{StatusEmojiAndColorComboBox} \li \l{StatusSmartIdenticon} \li \l{StatusTagSelector} \li \l{StatusToastMessage} diff --git a/ui/StatusQ/src/StatusQ/Components/StatusEmojiAndColorComboBox.qml b/ui/StatusQ/src/StatusQ/Components/StatusEmojiAndColorComboBox.qml new file mode 100644 index 0000000000..e8d694940e --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusEmojiAndColorComboBox.qml @@ -0,0 +1,114 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Core 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Core.Utils 0.1 +import StatusQ.Core.Theme 0.1 + +// model expected roles: emoji, color, name +/*! + \qmltype StatusEmojiAndColorComboBox + \inherits StatusComboBox + \inqmlmodule StatusQ.Components + \since StatusQ.Components 0.1 + \brief It is a combobox where the delegate and the content item are an emoji + color and the text. + + The \c StatusEmojiAndColorComboBox behaves like a combobox but with specific content item and delegate look (emoji + color + text) + + Example of how the control looks like: + \image status_emoji_and_color_combobox.png + + Example of how to use it: + + \qml + StatusEmojiAndColorComboBox { + Layout.preferredWidth: 300 + model: WalletAccountsModel {} + type: StatusComboBox.Type.Secondary + size: StatusComboBox.Size.Small + implicitHeight: 44 + defaultAssetName: "filled-account" + } + \endqml + + For a list of components available see StatusQ. +*/ +StatusComboBox { + id: root + + /*! + \qmlproperty string StatusEmojiAndColorComboBox::v + This property holds the default asset shown if no emoji provided. + */ + property string defaultAssetName: "info" + + /*! + \qmlproperty string StatusEmojiAndColorComboBox::v + This property holds the delegate height value. + */ + property int delegateHeight: 44 + + QtObject { + id: d + + readonly property string emoji: ModelUtils.get(root.model, currentIndex, "emoji") + readonly property string color: ModelUtils.get(root.model, currentIndex, "color") + } + + control.textRole: "name" + + contentItem: CustomComboItem { + anchors.top: parent.top + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + text: root.control.displayText + emoji: d.emoji + color: d.color + } + + delegate: CustomComboItem { + width: root.width + text: model.name + emoji: model.emoji + color: model.color + highlighted: root.control.highlightedIndex === index + } + + component CustomComboItem: StatusItemDelegate { + id: comboItem + + property string emoji + property color color + + height: root.delegateHeight + + contentItem: RowLayout { + anchors.fill: parent + anchors.margins: 8 + spacing: 8 + + StatusSmartIdenticon { + asset.emoji: comboItem.emoji ?? "" + asset.color: comboItem.color + asset.name: !!comboItem.emoji ? "" : root.defaultAssetName + asset.width: 22 + asset.height: asset.width + asset.isLetterIdenticon: !!comboItem.emoji + asset.bgColor: Theme.palette.primaryColor3 + } + + StatusBaseText { + Layout.fillWidth: true + Layout.fillHeight: true + text: comboItem.text + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + font.pixelSize: 13 + wrapMode: Text.WordWrap + color: Theme.palette.directColor1 + } + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 96c1ac527c..e55aa4c8ec 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -31,6 +31,7 @@ StatusListItemBadge 0.1 StatusListItemBadge.qml StatusListItemTag 0.1 StatusListItemTag.qml StatusListPicker 0.1 StatusListPicker.qml StatusExpandableItem 0.1 StatusExpandableItem.qml +StatusEmojiAndColorComboBox 0.1 StatusEmojiAndColorComboBox.qml StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml StatusMessage 0.1 StatusMessage.qml StatusMessageHeader 0.1 StatusMessageHeader.qml