refactor: replace `Select` with `StatusSelect`
This commit is contained in:
Pascal Precht
Iuri Matias
parent
edb103ee01
commit
9b9fc74140
|
|
@ -3,11 +3,12 @@ import QtQuick.Controls 2.13
|
|||
import QtQuick.Layouts 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import utils 1.0
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
import "../"
|
||||
import "../panels"
|
||||
import "."
|
||||
import utils 1.0
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
|
@ -16,14 +17,14 @@ Item {
|
|||
property int dropdownWidth: 220
|
||||
height: select.height
|
||||
|
||||
Select {
|
||||
StatusSelect {
|
||||
id: select
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
model: root.sources
|
||||
selectedItemView: Item {
|
||||
selectedItemComponent: Item {
|
||||
anchors.fill: parent
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
id: selectedTextField
|
||||
//% "Invalid source"
|
||||
text: !!root.selectedSource ? root.selectedSource.text : qsTrId("invalid-source")
|
||||
|
|
@ -33,41 +34,17 @@ Item {
|
|||
font.pixelSize: 15
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
height: 24
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
menu.width: dropdownWidth
|
||||
menu.topPadding: 8
|
||||
menu.bottomPadding: 8
|
||||
menu.delegate: Component {
|
||||
MenuItem {
|
||||
id: menuItem
|
||||
height: 40
|
||||
width: parent.width
|
||||
selectMenu.delegate: StatusMenuItemDelegate {
|
||||
statusPopupMenu: select
|
||||
action: StatusMenuItem {
|
||||
text: root.sources[index].text
|
||||
onTriggered: function () {
|
||||
root.selectedSource = root.sources[index]
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: itemText
|
||||
text: root.sources[index].text
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 15
|
||||
height: 22
|
||||
color: menuItem.highlighted ? Style.current.primaryMenuItemTextHover : Style.current.textColor
|
||||
}
|
||||
background: Rectangle {
|
||||
color: menuItem.highlighted ? Style.current.primaryMenuItemHover : Style.current.transparent
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;autoSize:true;height:480;width:640}
|
||||
}
|
||||
##^##*/
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import QtQuick.Controls 2.13
|
|||
import QtQuick.Layouts 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import utils 1.0
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import "../"
|
||||
import "../panels"
|
||||
import "."
|
||||
import utils 1.0
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
|
@ -23,7 +24,7 @@ Item {
|
|||
|
||||
onSelectedAssetChanged: {
|
||||
if (selectedAsset && selectedAsset.symbol) {
|
||||
iconImg.source = Style.png("tokens/" + selectedAsset.symbol.toUpperCase())
|
||||
iconImg.image.source = Style.png("tokens/" + selectedAsset.symbol.toUpperCase())
|
||||
selectedTextField.text = selectedAsset.symbol.toUpperCase()
|
||||
}
|
||||
}
|
||||
|
|
@ -43,29 +44,27 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
Select {
|
||||
StatusSelect {
|
||||
id: select
|
||||
width: parent.width
|
||||
bgColor: Style.current.transparent
|
||||
bgColorHover: Style.current.secondaryHover
|
||||
model: root.assets
|
||||
caretRightMargin: 7
|
||||
caretRightMargin: 0
|
||||
select.radius: 6
|
||||
select.height: root.height
|
||||
menu.width: 343
|
||||
selectedItemView: Item {
|
||||
selectMenu.width: 342
|
||||
selectedItemComponent: Item {
|
||||
anchors.fill: parent
|
||||
SVGImage {
|
||||
StatusRoundedImage {
|
||||
id: iconImg
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 4
|
||||
sourceSize.height: 24
|
||||
sourceSize.width: 24
|
||||
width: 24
|
||||
height: 24
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
fillMode: Image.PreserveAspectFit
|
||||
}
|
||||
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
id: selectedTextField
|
||||
anchors.left: iconImg.right
|
||||
anchors.leftMargin: 4
|
||||
|
|
@ -73,10 +72,10 @@ Item {
|
|||
font.pixelSize: 15
|
||||
height: 22
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
menu.delegate: menuItem
|
||||
selectMenu.delegate: menuItem
|
||||
}
|
||||
|
||||
Component {
|
||||
|
|
@ -88,83 +87,56 @@ Item {
|
|||
|
||||
width: parent.width
|
||||
height: 72
|
||||
SVGImage {
|
||||
StatusRoundedImage {
|
||||
id: iconImg
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 40
|
||||
height: 40
|
||||
sourceSize.height: height
|
||||
sourceSize.width: width
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: Style.png("tokens/" + symbol.toUpperCase())
|
||||
image.source: Style.png("tokens/" + symbol.toUpperCase())
|
||||
}
|
||||
Column {
|
||||
anchors.left: iconImg.right
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
text: symbol.toUpperCase()
|
||||
font.pixelSize: 15
|
||||
height: 22
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
text: name
|
||||
color: Style.current.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 15
|
||||
height: 22
|
||||
}
|
||||
}
|
||||
Column {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.rightMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
height: 22
|
||||
text: parseFloat(balance).toFixed(4) + " " + symbol
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
anchors.right: parent.right
|
||||
height: 22
|
||||
text: currencyBalance.toString().toUpperCase()
|
||||
color: Style.current.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
background: Rectangle {
|
||||
color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background
|
||||
radius: Style.current.radius
|
||||
|
||||
// cover bottom left/right corners with square corners
|
||||
Rectangle {
|
||||
visible: !isLastItem
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
// cover top left/right corners with square corners
|
||||
Rectangle {
|
||||
visible: !isFirstItem
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
}
|
||||
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
|
||||
}
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: itemContainer
|
||||
onClicked: {
|
||||
root.selectedAsset = { address, name, balance, symbol, currencyBalance, fiatBalanceDisplay: "" }
|
||||
select.menu.close()
|
||||
select.selectMenu.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,16 @@ import QtQuick.Controls 2.13
|
|||
import QtQuick.Layouts 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import utils 1.0
|
||||
import "../"
|
||||
|
||||
import "../views"
|
||||
import "../panels"
|
||||
import "."
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import "./"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
|
@ -83,14 +86,14 @@ Item {
|
|||
customHeight: 56
|
||||
}
|
||||
|
||||
Select {
|
||||
StatusSelect {
|
||||
id: select
|
||||
label: ""
|
||||
model: root.contacts
|
||||
width: parent.width
|
||||
visible: !root.readOnly
|
||||
menuAlignment: Select.MenuAlignment.Left
|
||||
selectedItemView: Item {
|
||||
menuAlignment: StatusSelect.MenuAlignment.Left
|
||||
selectedItemComponent: Item {
|
||||
anchors.fill: parent
|
||||
StatusSmartIdenticon {
|
||||
id: iconImg
|
||||
|
|
@ -103,7 +106,7 @@ Item {
|
|||
image.isIdenticon: true
|
||||
active: !!selectedContact && !!selectedContact.identicon
|
||||
}
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
id: selectedTextField
|
||||
text: !!selectedContact ? selectedContact.name : ""
|
||||
anchors.left: iconImg.right
|
||||
|
|
@ -112,11 +115,12 @@ Item {
|
|||
font.pixelSize: 15
|
||||
height: 22
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
zeroItemsView: Item {
|
||||
height: 186
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
anchors.fill: parent
|
||||
//% "You don’t have any contacts yet"
|
||||
text: qsTrId("you-don-t-have-any-contacts-yet")
|
||||
|
|
@ -124,12 +128,12 @@ Item {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pixelSize: 13
|
||||
height: 18
|
||||
color: Style.current.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
menu.delegate: menuItem
|
||||
menu.width: dropdownWidth
|
||||
selectMenu.delegate: menuItem
|
||||
selectMenu.width: dropdownWidth
|
||||
}
|
||||
|
||||
EnsResolver {
|
||||
|
|
@ -173,56 +177,33 @@ Item {
|
|||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Text {
|
||||
StatusBaseText {
|
||||
text: name
|
||||
font.pixelSize: 15
|
||||
font.family: Style.current.fontRegular.name
|
||||
font.weight: Font.Medium
|
||||
color: Style.current.textColor
|
||||
color: Theme.palette.directColor1
|
||||
height: 22
|
||||
}
|
||||
|
||||
Row {
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
text: alias + " • "
|
||||
visible: ensVerified
|
||||
color: Style.current.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 12
|
||||
height: 16
|
||||
}
|
||||
StyledText {
|
||||
StatusBaseText {
|
||||
text: address
|
||||
width: 85
|
||||
elide: Text.ElideMiddle
|
||||
color: Style.current.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 12
|
||||
height: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
background: Rectangle {
|
||||
color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background
|
||||
radius: Style.current.radius
|
||||
|
||||
// cover bottom left/right corners with square corners
|
||||
Rectangle {
|
||||
visible: !isLastItem
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
// cover top left/right corners with square corners
|
||||
Rectangle {
|
||||
visible: !isFirstItem
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
}
|
||||
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
|
||||
}
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
|
@ -230,7 +211,7 @@ Item {
|
|||
onClicked: {
|
||||
root.selectedContact = { address, name, alias, isContact, identicon, ensVerified }
|
||||
resolveEns()
|
||||
select.menu.close()
|
||||
select.selectMenu.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,196 +0,0 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtQuick.Layouts 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import utils 1.0
|
||||
import "../"
|
||||
import "../panels"
|
||||
|
||||
Item {
|
||||
enum MenuAlignment {
|
||||
Left,
|
||||
Right,
|
||||
Center
|
||||
}
|
||||
property string label: ""
|
||||
readonly property bool hasLabel: label !== ""
|
||||
property color bgColor: Style.current.inputBackground
|
||||
readonly property int labelMargin: 7
|
||||
property var model
|
||||
property alias menu: selectMenu
|
||||
property color bgColorHover: bgColor
|
||||
property alias selectedItemView: selectedItemContainer.children
|
||||
property int caretRightMargin: Style.current.padding
|
||||
property int caretLeftMargin: Style.current.halfPadding
|
||||
property alias select: inputRectangle
|
||||
property int menuAlignment: Select.MenuAlignment.Right
|
||||
property Item zeroItemsView: Item {}
|
||||
property int selectedItemRightMargin: caret.width + caretRightMargin + caretLeftMargin
|
||||
property string validationError: ""
|
||||
property alias validationErrorAlignment: validationErrorText.horizontalAlignment
|
||||
property int validationErrorTopMargin: Style.current.halfPadding
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
id: root
|
||||
height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
|
||||
|
||||
StyledText {
|
||||
id: inputLabel
|
||||
visible: hasLabel
|
||||
text: root.label
|
||||
font.weight: Font.Medium
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 0
|
||||
font.pixelSize: 13
|
||||
height: 18
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
property bool hovered: false
|
||||
id: inputRectangle
|
||||
height: 56
|
||||
color: hovered ? bgColorHover : bgColor
|
||||
radius: Style.current.radius
|
||||
anchors.top: root.hasLabel ? inputLabel.bottom : parent.top
|
||||
anchors.topMargin: root.hasLabel ? root.labelMargin : 0
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
border.width: !!validationError ? 1 : 0
|
||||
border.color: Style.current.danger
|
||||
|
||||
Item {
|
||||
id: selectedItemContainer
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
id: caret
|
||||
width: 11
|
||||
height: 6
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: caretRightMargin
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: Style.svg("caret")
|
||||
}
|
||||
ColorOverlay {
|
||||
anchors.fill: caret
|
||||
source: caret
|
||||
color: Style.current.secondaryText
|
||||
}
|
||||
}
|
||||
|
||||
// create a drop shadow externally so that it is not clipped by the
|
||||
// rounded corners of the menu background
|
||||
Rectangle {
|
||||
width: selectMenu.width
|
||||
height: selectMenu.height
|
||||
x: selectMenu.x
|
||||
y: selectMenu.y
|
||||
visible: selectMenu.opened
|
||||
color: Style.current.background
|
||||
radius: Style.current.radius
|
||||
border.color: Style.current.border
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
verticalOffset: 3
|
||||
radius: Style.current.radius
|
||||
samples: 15
|
||||
fast: true
|
||||
cached: true
|
||||
color: "#22000000"
|
||||
}
|
||||
}
|
||||
|
||||
Menu {
|
||||
id: selectMenu
|
||||
property var items: []
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
||||
width: parent.width
|
||||
background: Rectangle {
|
||||
// do not add a drop shadow effect here or it will be clipped
|
||||
radius: Style.current.radius
|
||||
color: Style.current.background
|
||||
}
|
||||
clip: true
|
||||
delegate: menuItem
|
||||
|
||||
Repeater {
|
||||
id: menuItems
|
||||
model: root.model
|
||||
property int zeroItemsViewHeight
|
||||
delegate: selectMenu.delegate
|
||||
onItemAdded: {
|
||||
root.zeroItemsView.visible = false
|
||||
root.zeroItemsView.height = 0
|
||||
}
|
||||
onItemRemoved: {
|
||||
if (count === 0) {
|
||||
root.zeroItemsView.visible = true
|
||||
root.zeroItemsView.height = zeroItemsViewHeight
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
zeroItemsViewHeight = root.zeroItemsView.height
|
||||
root.zeroItemsView.visible = count === 0
|
||||
root.zeroItemsView.height = count !== 0 ? 0 : root.zeroItemsView.height
|
||||
selectMenu.insertItem(0, root.zeroItemsView)
|
||||
}
|
||||
}
|
||||
}
|
||||
TextEdit {
|
||||
id: validationErrorText
|
||||
visible: !!validationError
|
||||
text: validationError
|
||||
anchors.top: inputRectangle.bottom
|
||||
anchors.topMargin: validationErrorTopMargin
|
||||
selectByMouse: true
|
||||
readOnly: true
|
||||
font.pixelSize: 12
|
||||
height: 16
|
||||
color: Style.current.danger
|
||||
width: parent.width
|
||||
horizontalAlignment: TextEdit.AlignRight
|
||||
}
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: inputRectangle
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
inputRectangle.hovered = true
|
||||
}
|
||||
onExited: {
|
||||
inputRectangle.hovered = false
|
||||
}
|
||||
onClicked: {
|
||||
if (selectMenu.opened) {
|
||||
selectMenu.close()
|
||||
} else {
|
||||
const rightOffset = inputRectangle.width - selectMenu.width
|
||||
let offset = rightOffset
|
||||
switch (root.menuAlignment) {
|
||||
case Select.MenuAlignment.Left:
|
||||
offset = 0
|
||||
break
|
||||
case Select.MenuAlignment.Right:
|
||||
offset = rightOffset
|
||||
break
|
||||
case Select.MenuAlignment.Center:
|
||||
offset = rightOffset / 2
|
||||
}
|
||||
selectMenu.popup(inputRectangle.x + offset, inputRectangle.y + inputRectangle.height + 8)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*##^##
|
||||
Designer {
|
||||
D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
|
||||
}
|
||||
##^##*/
|
||||
|
|
@ -15,7 +15,6 @@ RadioButtonSelector 1.0 RadioButtonSelector.qml
|
|||
RecipientSelector 1.0 RecipientSelector.qml
|
||||
SearchBox 1.0 SearchBox.qml
|
||||
SeedPhraseTextArea 1.0 SeedPhraseTextArea.qml
|
||||
Select 1.0 Select.qml
|
||||
SendToContractWarning 1.0 SendToContractWarning.qml
|
||||
StatusTabButton 1.0 StatusTabButton.qml
|
||||
StyledButton 1.0 StyledButton.qml
|
||||
|
|
|
|||
Loading…
Reference in New Issue