refactor: replace `Select` with `StatusSelect`

ui/imports/shared/controls/AddressSourceSelector.qml

@@ -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 utils 1.0
-import "../panels"
-import "."
 
 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
+        selectMenu.delegate: StatusMenuItemDelegate {
-        menu.topPadding: 8
+            statusPopupMenu: select
-        menu.bottomPadding: 8
+            action: StatusMenuItem {
-        menu.delegate: Component {
+                text: root.sources[index].text
-            MenuItem {
-                id: menuItem
-                height: 40
-                width: parent.width
                 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}
-}
-##^##*/

ui/imports/shared/controls/AssetSelector.qml

@@ -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 utils 1.0
-import "../panels"
-import "."
 
 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
+        selectMenu.width: 342
-        selectedItemView: Item {
+        selectedItemComponent: Item {
             anchors.fill: parent
-            SVGImage {
+            StatusRoundedImage {
                 id: iconImg
                 anchors.left: parent.left
                 anchors.leftMargin: 4
-                sourceSize.height: 24
+                width: 24
-                sourceSize.width: 24
+                height: 24
                 anchors.verticalCenter: parent.verticalCenter
-                fillMode: Image.PreserveAspectFit
             }
-
+            StatusBaseText {
-            StyledText {
                 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
             }
         }
-
+        selectMenu.delegate: menuItem
-        menu.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
+                image.source: Style.png("tokens/" + symbol.toUpperCase())
-                height: 40
-                sourceSize.height: height
-                sourceSize.width: width
-                fillMode: Image.PreserveAspectFit
-                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
+                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-                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
-                }
             }
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: itemContainer
                 onClicked: {
                     root.selectedAsset = { address, name, balance, symbol, currencyBalance, fiatBalanceDisplay: "" }
-                    select.menu.close()
+                    select.selectMenu.close()
                 }
             }
         }

ui/imports/shared/controls/ContactSelector.qml

@@ -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 "./"
-
-import StatusQ.Components 0.1
 
 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
+        menuAlignment: StatusSelect.MenuAlignment.Left
-        selectedItemView: Item {
+        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
+        selectMenu.delegate: menuItem
-        menu.width: dropdownWidth
+        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
+                    color: Theme.palette.directColor1
-                    font.weight: Font.Medium
-                    color: Style.current.textColor
                     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
+                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-                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
-                }
             }
             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()
                 }
             }
         }

ui/imports/shared/controls/Select.qml

@@ -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}
-}
-##^##*/

ui/imports/shared/controls/qmldir

@@ -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