chore: Remove StatusAssetSelector from StatusQ (#792)
* chore: Remove StatusAssetSelector from StatusQ as its base component StatusSelect is enough to build this further on desktop side. This component also has dependecy on BE and hence should be moved out. BREAKING CHANGE: * fix(StatusSelect): Expose a property to make arrow in the select item visible/invisible
This commit is contained in:
Khushboo-dev-cpp
Michał Cieślak
parent
fa890b3b18
commit
0e50dbd034
|
|
@ -207,11 +207,6 @@ StatusWindow {
|
||||||
selected: viewLoader.source.toString().includes(title)
|
selected: viewLoader.source.toString().includes(title)
|
||||||
onClicked: mainPageView.page(title);
|
onClicked: mainPageView.page(title);
|
||||||
}
|
}
|
||||||
StatusNavigationListItem {
|
|
||||||
title: "StatusAssetSelector"
|
|
||||||
selected: viewLoader.source.toString().includes(title)
|
|
||||||
onClicked: mainPageView.page(title);
|
|
||||||
}
|
|
||||||
StatusNavigationListItem {
|
StatusNavigationListItem {
|
||||||
title: "StatusColorSelector"
|
title: "StatusColorSelector"
|
||||||
selected: viewLoader.source.toString().includes(title)
|
selected: viewLoader.source.toString().includes(title)
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -21,6 +21,7 @@ Item {
|
||||||
property alias selectMenu: selectMenu
|
property alias selectMenu: selectMenu
|
||||||
property color bgColorHover: bgColor
|
property color bgColorHover: bgColor
|
||||||
property alias selectedItemComponent: selectedItemContainer.children
|
property alias selectedItemComponent: selectedItemContainer.children
|
||||||
|
property bool caretVisible: true
|
||||||
property int caretRightMargin: 16
|
property int caretRightMargin: 16
|
||||||
property alias select: inputRectangle
|
property alias select: inputRectangle
|
||||||
property int menuAlignment: StatusSelect.MenuAlignment.Right
|
property int menuAlignment: StatusSelect.MenuAlignment.Right
|
||||||
|
|
@ -72,6 +73,7 @@ Item {
|
||||||
height: 24
|
height: 24
|
||||||
icon: "chevron-down"
|
icon: "chevron-down"
|
||||||
color: Theme.palette.baseColor1
|
color: Theme.palette.baseColor1
|
||||||
|
visible: caretVisible
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
module StatusQ.Controls
|
module StatusQ.Controls
|
||||||
|
|
||||||
StatusAccountSelector 0.1 StatusAccountSelector.qml
|
StatusAccountSelector 0.1 StatusAccountSelector.qml
|
||||||
StatusAssetSelector 0.1 StatusAssetSelector.qml
|
|
||||||
StatusBanner 0.1 StatusBanner.qml
|
StatusBanner 0.1 StatusBanner.qml
|
||||||
StatusChatCommandButton 0.1 StatusChatCommandButton.qml
|
StatusChatCommandButton 0.1 StatusChatCommandButton.qml
|
||||||
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
|
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue