fix(StatusSelect): Expose a property to make arrow in the select item visible/invisible

This component also has dependecy on BE and hence should be moved out.

BREAKING CHANGE:

sandbox/main.qml

@@ -207,11 +207,6 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title);
                     }
-                    StatusNavigationListItem {
-                        title: "StatusAssetSelector"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.page(title);
-                    }
                     StatusNavigationListItem {
                         title: "StatusColorSelector"
                         selected: viewLoader.source.toString().includes(title)

sandbox/pages/StatusAssetSelectorPage.qml

@@ -1,50 +0,0 @@
-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 StatusQ.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                totalCurrencyBalance: 9992.01
-                totalBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                totalCurrencyBalance: 20.00001
-                totalBalance: 20.00001
-            }
-            ListElement {
-                address: "0x1234"
-                name: "ABYSS Token"
-                balance: "25"
-                symbol: "ABYSS"
-                totalCurrencyBalance: 24.1
-                totalBalance: 24.1
-            }
-        }
-    }
-}
-

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -1,158 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core.Utils 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-    property var assets
-    property var selectedAsset
-    property string defaultToken: ""
-    property string userSelectedToken: ""
-    property var tokenAssetSourceFn: function (symbol) {
-        return ""
-    }
-    // Define this in the usage to get balance in currency selected by user
-    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
-    implicitWidth: 106
-    implicitHeight: 32
-
-    function resetInternal() {
-        assets = null
-        selectedAsset = null
-    }
-
-    onSelectedAssetChanged: {
-        if (selectedAsset && selectedAsset.symbol) {
-            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
-            selectedTextField.text = selectedAsset.symbol.toUpperCase()
-        }
-    }
-
-    StatusSelect {
-        id: select
-        width: parent.width
-        bgColor: "transparent"
-        bgColorHover: Theme.palette.directColor8
-        model: root.assets
-        caretRightMargin: 0
-        select.radius: 6
-        select.height: root.height
-        selectMenu.width: 342
-        selectedItemComponent: Item {
-            anchors.fill: parent
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 4
-                width: 24
-                height: 24
-                anchors.verticalCenter: parent.verticalCenter
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            StatusBaseText {
-                id: selectedTextField
-                anchors.left: iconImg.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                width: 50
-                elide: Text.ElideRight
-                verticalAlignment: Text.AlignVCenter
-                color: Theme.palette.directColor1
-            }
-        }
-        selectMenu.delegate: menuItem
-    }
-
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === assets.rowCount() - 1
-
-            width: parent.width
-            height: 72
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            Column {
-                anchors.left: iconImg.right
-                anchors.leftMargin: 12
-                anchors.verticalCenter: parent.verticalCenter
-
-                StatusBaseText {
-                    text: symbol.toUpperCase()
-                    font.pixelSize: 15
-                    color: Theme.palette.directColor1
-                }
-
-                StatusBaseText {
-                    text: name
-                    color: Theme.palette.baseColor1
-                    font.pixelSize: 15
-                }
-            }
-            Column {
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                StatusBaseText {
-                    font.pixelSize: 15
-                    text: parseFloat(totalBalance).toFixed(4) + " " + symbol
-                }
-                StatusBaseText {
-                    font.pixelSize: 15
-                    anchors.right: parent.right
-                    text: getCurrencyBalanceString(totalCurrencyBalance)
-                    color: Theme.palette.baseColor1
-                }
-            }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-            }
-            // To-do move this out of StatusQ, this involves dependency on BE code
-            Component.onCompleted: {
-                if(userSelectedToken === "") {
-                    if(index === 0) {
-                        selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
-                    }
-                } else {
-                    if(symbol === userSelectedToken) {
-                        selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
-                    }
-                }
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    userSelectedToken = symbol
-                    // To-do move this out of StatusQ, this involves dependency on BE code
-                    selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance, balances: balances}
-                    select.selectMenu.close()
-                }
-            }
-        }
-    }
-}

src/StatusQ/Controls/StatusSelect.qml

@@ -21,6 +21,7 @@ Item {
     property alias selectMenu: selectMenu
     property color bgColorHover: bgColor
     property alias selectedItemComponent: selectedItemContainer.children
+    property bool caretVisible: true
     property int caretRightMargin: 16
     property alias select: inputRectangle
     property int menuAlignment: StatusSelect.MenuAlignment.Right
@@ -72,6 +73,7 @@ Item {
             height: 24
             icon: "chevron-down"
             color: Theme.palette.baseColor1
+            visible: caretVisible
         }
     }
 

src/StatusQ/Controls/qmldir

@@ -1,7 +1,6 @@
 module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
-StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusBanner 0.1 StatusBanner.qml
 StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml