From 9b9fc7414016a8ff3003a1088efb2f995d47eeaa Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Thu, 28 Oct 2021 13:03:20 +0200 Subject: [PATCH] refactor: replace `Select` with `StatusSelect` --- .../shared/controls/AddressSourceSelector.qml | 49 ++--- ui/imports/shared/controls/AssetSelector.qml | 88 +++----- .../shared/controls/ContactSelector.qml | 67 +++--- ui/imports/shared/controls/Select.qml | 196 ------------------ ui/imports/shared/controls/qmldir | 1 - 5 files changed, 67 insertions(+), 334 deletions(-) delete mode 100644 ui/imports/shared/controls/Select.qml diff --git a/ui/imports/shared/controls/AddressSourceSelector.qml b/ui/imports/shared/controls/AddressSourceSelector.qml index a2f65f8754..6d8947ccca 100644 --- a/ui/imports/shared/controls/AddressSourceSelector.qml +++ b/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 "../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} -} -##^##*/ diff --git a/ui/imports/shared/controls/AssetSelector.qml b/ui/imports/shared/controls/AssetSelector.qml index efdd4b691f..af80898775 100644 --- a/ui/imports/shared/controls/AssetSelector.qml +++ b/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 "../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() } } } diff --git a/ui/imports/shared/controls/ContactSelector.qml b/ui/imports/shared/controls/ContactSelector.qml index 3057c1b047..46a72ee5dc 100644 --- a/ui/imports/shared/controls/ContactSelector.qml +++ b/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 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() } } } diff --git a/ui/imports/shared/controls/Select.qml b/ui/imports/shared/controls/Select.qml deleted file mode 100644 index eb3a416859..0000000000 --- a/ui/imports/shared/controls/Select.qml +++ /dev/null @@ -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} -} -##^##*/ diff --git a/ui/imports/shared/controls/qmldir b/ui/imports/shared/controls/qmldir index a9ee6ed96a..fe757be206 100644 --- a/ui/imports/shared/controls/qmldir +++ b/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