From 7114240e72a3ed9858bd6c5afa377ff121745617 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Mon, 25 Oct 2021 21:37:44 +0200 Subject: [PATCH] refactor: Replace and remove StatusRoundButton under ui/shared/status closes #3898 --- .../AppLayouts/Chat/popups/GroupChatPopup.qml | 1 + .../Chat/views/ContactsColumnView.qml | 1 - .../popups/EnterSeedPhraseModal.qml | 3 +- .../AppLayouts/Onboarding/views/LoginView.qml | 7 +- .../Profile/popups/NetworksModal.qml | 11 +- .../AppLayouts/Profile/views/ContactsView.qml | 17 +- .../AppLayouts/Profile/views/EnsListView.qml | 9 +- .../Profile/views/EnsSearchView.qml | 11 +- .../Wallet/controls/AddAccountButton.qml | 11 +- ui/shared/popups/SendModal.qml | 4 +- .../status/StatusETHTransactionModal.qml | 2 +- ui/shared/status/StatusRoundButton.qml | 209 ------------------ ui/shared/status/StatusStickersPopup.qml | 7 +- ui/shared/status/qmldir | 1 - ui/shared/views/TransactionSigner.qml | 6 +- 15 files changed, 51 insertions(+), 249 deletions(-) delete mode 100644 ui/shared/status/StatusRoundButton.qml diff --git a/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml b/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml index 256846e27e..1c9137bd65 100644 --- a/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml +++ b/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml @@ -163,6 +163,7 @@ ModalPopup { anchors.bottom: parent.bottom anchors.right: parent.right icon.name: "arrow-right" + type: StatusFlatRoundButton.Type.Secondary icon.width: 20 icon.height: 16 enabled: !!pubKeys.length diff --git a/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml b/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml index 213b9f9854..98d57953a6 100644 --- a/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml @@ -5,7 +5,6 @@ import QtQuick.Layouts 1.13 import utils 1.0 import "../../../../shared" -import "../../../../shared/status" import "../panels" import "../popups" diff --git a/ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml b/ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml index b2f747caf0..64452d8822 100644 --- a/ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml +++ b/ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml @@ -8,7 +8,8 @@ import "../../../../shared" import "../../../../shared/popups" import "../../../../shared/panels" import "../../../../shared/controls" -import "../../../../shared/status" + +import StatusQ.Controls 0.1 // TODO: replace with StatusModal ModalPopup { diff --git a/ui/app/AppLayouts/Onboarding/views/LoginView.qml b/ui/app/AppLayouts/Onboarding/views/LoginView.qml index 36cc1ce7da..fa3a9c7e2f 100644 --- a/ui/app/AppLayouts/Onboarding/views/LoginView.qml +++ b/ui/app/AppLayouts/Onboarding/views/LoginView.qml @@ -198,10 +198,11 @@ Item { } } - StatusRoundButton { + StatusQControls.StatusRoundButton { id: submitBtn - size: "medium" - type: "secondary" + width: 40 + height: 40 + type: StatusQControls.StatusRoundButton.Type.Secondary icon.name: "arrow-right" icon.width: 18 icon.height: 14 diff --git a/ui/app/AppLayouts/Profile/popups/NetworksModal.qml b/ui/app/AppLayouts/Profile/popups/NetworksModal.qml index 62aaae334e..5426f4a1fd 100644 --- a/ui/app/AppLayouts/Profile/popups/NetworksModal.qml +++ b/ui/app/AppLayouts/Profile/popups/NetworksModal.qml @@ -11,6 +11,8 @@ import "../../../../shared/status" import "../controls" import "../panels" +import StatusQ.Controls 0.1 as StatusQControls + // TODO: replace with StatusQ component ModalPopup { id: popup @@ -40,11 +42,12 @@ ModalPopup { width: parent.width height: addButton.height - StatusRoundButton { + StatusQControls.StatusRoundButton { id: addButton - icon.name: "plusSign" - size: "medium" - type: "secondary" + width: 40 + height: 40 + icon.name: "add" + type: StatusQControls.StatusRoundButton.Type.Secondary anchors.verticalCenter: parent.verticalCenter } diff --git a/ui/app/AppLayouts/Profile/views/ContactsView.qml b/ui/app/AppLayouts/Profile/views/ContactsView.qml index fa27f860f4..01fdc5ef84 100644 --- a/ui/app/AppLayouts/Profile/views/ContactsView.qml +++ b/ui/app/AppLayouts/Profile/views/ContactsView.qml @@ -3,13 +3,15 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import StatusQ.Components 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 + import utils 1.0 import "../../../../shared/popups" import "../../../../shared/panels" import "../../../../shared/controls" import "../../../../shared/views" -import "../../../../shared/status" import "../panels" import "../popups" @@ -49,9 +51,10 @@ Item { StatusRoundButton { id: addButton - icon.name: "plusSign" - size: "medium" - type: "secondary" + width: 40 + height: 40 + icon.name: "add" + type: StatusRoundButton.Type.Secondary anchors.verticalCenter: parent.verticalCenter } @@ -85,11 +88,11 @@ Item { StatusRoundButton { id: blockButton - anchors.verticalCenter: parent.verticalCenter - icon.name: "block-icon" - icon.color: Style.current.lightBlue width: 40 height: 40 + anchors.verticalCenter: parent.verticalCenter + icon.name: "cancel" + icon.color: Theme.palette.primaryColor1 } StyledText { diff --git a/ui/app/AppLayouts/Profile/views/EnsListView.qml b/ui/app/AppLayouts/Profile/views/EnsListView.qml index 535b78df6e..19e2c53d67 100644 --- a/ui/app/AppLayouts/Profile/views/EnsListView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml @@ -6,11 +6,11 @@ import utils 1.0 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 import "../popups" import "../../../../shared" import "../../../../shared/panels" -import "../../../../shared/status" //TODO remove these dependencies in imports import "../../Chat/views" @@ -152,10 +152,11 @@ Item { StatusRoundButton { id: addButton - icon.name: "plusSign" - size: "medium" - type: "secondary" + width: 40 + height: 40 anchors.verticalCenter: parent.verticalCenter + icon.name: "add" + type: StatusRoundButton.Type.Secondary } StatusBaseText { diff --git a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml index f9f0d7ba6f..0bc73afb4b 100644 --- a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml @@ -4,6 +4,7 @@ import QtQuick.Controls 2.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 as StatusQControls import utils 1.0 import "../../../../shared" @@ -169,16 +170,14 @@ Item { } } - // TODO: replace with StatusQ component - StatusRoundButton { + StatusQControls.StatusRoundButton { id: btnContinue - width: 44 - height: 44 + width: 40 + height: 40 anchors.top: circleAt.bottom anchors.topMargin: Style.current.bigPadding anchors.right: parent.right - size: "medium" - type: "secondary" + type: StatusQControls.StatusRoundButton.Type.Secondary icon.name: "arrow-right" icon.width: 18 icon.height: 14 diff --git a/ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml b/ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml index 050dce5124..e6c038a5b4 100644 --- a/ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml +++ b/ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml @@ -1,15 +1,16 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -import "../../../../shared/status" +import StatusQ.Controls 0.1 StatusRoundButton { id: btnAdd + property bool checked: false width: 36 height: 36 - icon.name: "plusSign" - pressedIconRotation: 45 - size: "medium" - type: "secondary" + icon.name: "add" + icon.rotation: checked ? 45 : 0 + type: StatusRoundButton.Type.Secondary + onPressed: checked = !checked } diff --git a/ui/shared/popups/SendModal.qml b/ui/shared/popups/SendModal.qml index 3c38542fcf..7622c7bab1 100644 --- a/ui/shared/popups/SendModal.qml +++ b/ui/shared/popups/SendModal.qml @@ -12,6 +12,8 @@ import "../controls" import "../views" import "." +import StatusQ.Controls 0.1 as StatusQControls + // TODO: replace with StatusModal ModalPopup { id: root @@ -220,7 +222,7 @@ ModalPopup { width: parent.width height: btnNext.height - StatusRoundButton { + StatusQControls.StatusRoundButton { id: btnBack anchors.left: parent.left visible: !stack.isFirstGroup diff --git a/ui/shared/status/StatusETHTransactionModal.qml b/ui/shared/status/StatusETHTransactionModal.qml index d78b1428ad..bf9e7b0324 100644 --- a/ui/shared/status/StatusETHTransactionModal.qml +++ b/ui/shared/status/StatusETHTransactionModal.qml @@ -182,7 +182,7 @@ ModalPopup { icon.name: "arrow-right" icon.width: 20 icon.height: 16 - rotation: 180 + icon.rotation: 180 visible: stack.currentGroup.showBackBtn enabled: stack.currentGroup.isValid || stack.isLastGroup onClicked: { diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml deleted file mode 100644 index 66b935a8c7..0000000000 --- a/ui/shared/status/StatusRoundButton.qml +++ /dev/null @@ -1,209 +0,0 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtGraphicalEffects 1.13 -import QtQml 2.14 - -import StatusQ.Components 0.1 -import utils 1.0 - -import "../../shared/panels" - -RoundButton { - property string type: "primary" - property string size: "large" - property int pressedIconRotation: 0 - property alias iconX: iconImg.x - id: control - - font.pixelSize: 15 - font.weight: Font.Medium - - implicitWidth: { - switch(size) { - case "large": - return 44 - case "medium": - return 40 - case "small": - return 32 - default: - return 44 - } - } - implicitHeight: implicitWidth - enabled: state === "default" || state === "pressed" - rotation: 0 - state: "default" - states: [ - State { - name: "default" - PropertyChanges { - target: iconColorOverlay - visible: true - rotation: 0 - } - PropertyChanges { - target: loadingIndicator - active: false - } - }, - State { - name: "pressed" - PropertyChanges { - target: iconColorOverlay - rotation: control.pressedIconRotation - visible: true - } - PropertyChanges { - target: loadingIndicator - active: false - } - }, - State { - name: "pending" - PropertyChanges { - target: loadingIndicator - active: true - } - PropertyChanges { - target: iconColorOverlay - visible: false - } - } - ] - - transitions: [ - Transition { - from: "default" - to: "pressed" - - RotationAnimation { - duration: 150 - direction: RotationAnimation.Clockwise - easing.type: Easing.InCubic - } - }, - - Transition { - from: "pressed" - to: "default" - RotationAnimation { - duration: 150 - direction: RotationAnimation.Counterclockwise - easing.type: Easing.OutCubic - } - } - ] - - icon.height: { - switch(size) { - case "large": - return 20 - case "medium": - return 14 - case "small": - return 12 - default: - return 20 - } - } - icon.width: { - switch(size) { - case "large": - return 20 - case "medium": - return 14 - case "small": - return 12 - default: - return 20 - } - } - icon.color: type === "secondary" ? - !enabled ? - Style.current.roundedButtonSecondaryDisabledForegroundColor : - Style.current.roundedButtonSecondaryForegroundColor - : - !enabled ? - Style.current.roundedButtonDisabledForegroundColor : - Style.current.roundedButtonForegroundColor - - onIconChanged: { - icon.source = icon.name ? Style.svg(icon.name) : "" - } - - background: Rectangle { - anchors.fill: parent - opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1 - color: { - if (size === "medium" || size === "small" || type === "secondary") { - return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor : - hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) : - (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor) - } - return !enabled ? - Style.current.roundedButtonDisabledBackgroundColor : - hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) : - (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor) - } - radius: parent.width / 2 - } - - contentItem: Item { - anchors.fill: parent - - SVGImage { - id: iconImg - visible: false - source: control.icon.source - height: control.icon.height - width: control.icon.width - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - fillMode: Image.PreserveAspectFit - } - - Component { - id: loadingComponent - StatusLoadingIndicator { - color: control.size === "medium" || control.size === "small" ? - Style.current.roundedButtonSecondaryDisabledForegroundColor : - Style.current.roundedButtonDisabledForegroundColor - } - } - - Loader { - id: loadingIndicator - sourceComponent: loadingComponent - height: size === "small" ? 14 : 18 - width: loadingIndicator.height - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - } - - - ColorOverlay { - id: iconColorOverlay - anchors.fill: iconImg - source: iconImg - color: { - if (type === "secondary") { - return !control.enabled ? - Style.current.roundedButtonSecondaryDisabledForegroundColor : - (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor) - } - return !control.enabled ? - Style.current.roundedButtonDisabledForegroundColor : - (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonForegroundColor) - } - antialiasing: true - } - } - - MouseArea { - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - onPressed: mouse.accepted = false - } -} diff --git a/ui/shared/status/StatusStickersPopup.qml b/ui/shared/status/StatusStickersPopup.qml index 0ccb360d83..dbca839d5e 100644 --- a/ui/shared/status/StatusStickersPopup.qml +++ b/ui/shared/status/StatusStickersPopup.qml @@ -3,14 +3,12 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 -import StatusQ.Components 0.1 - import utils 1.0 import StatusQ.Controls 0.1 as StatusQControls +import StatusQ.Components 0.1 import "../../shared/panels" -import "../../shared/status" //TODO improve this! import "../../app/AppLayouts/Chat/stores" @@ -185,9 +183,10 @@ Popup { StatusQControls.StatusFlatRoundButton { id: btnAddStickerPack - icon.name: "add" implicitWidth: 24 implicitHeight: 24 + type: StatusRoundButton.Type.Secondary + icon.name: "add" state: root.stickerPacksLoaded ? "default" : "pending" onClicked: { stickersContainer.visible = false diff --git a/ui/shared/status/qmldir b/ui/shared/status/qmldir index 311405bd7f..3bb138f4cf 100644 --- a/ui/shared/status/qmldir +++ b/ui/shared/status/qmldir @@ -7,7 +7,6 @@ StatusEmojiSection 1.0 StatusEmojiSection.qml StatusGifPopup 1.0 StatusGifPopup.qml StatusGifColumn 1.0 StatusGifColumn.qml StatusImageIdenticon 1.0 StatusImageIdenticon.qml -StatusRoundButton 1.0 StatusRoundButton.qml StatusSectionHeadline 1.0 StatusSectionHeadline.qml StatusStickerButton 1.0 StatusStickerButton.qml StatusStickerList 1.0 StatusStickerList.qml diff --git a/ui/shared/views/TransactionSigner.qml b/ui/shared/views/TransactionSigner.qml index 99cae95031..29bbf1ee46 100644 --- a/ui/shared/views/TransactionSigner.qml +++ b/ui/shared/views/TransactionSigner.qml @@ -9,6 +9,8 @@ import "../status" import "../panels" import "../controls" +import StatusQ.Controls 0.1 as StatusQControls + Item { id: root height: signingPhraseItem.height + signingPhrase.height + txtPassword.height + Style.current.smallPadding + Style.current.bigPadding @@ -52,7 +54,7 @@ Item { text: qsTrId("signing-phrase") } - StatusRoundButton { + StatusQControls.StatusRoundButton { id: infoButton anchors.left: labelSigningPhrase.right anchors.leftMargin: 7 @@ -79,7 +81,7 @@ Item { text: root.signingPhrase } - StatusRoundButton { + StatusQControls.StatusRoundButton { id: passwordInfoButton anchors.left: parent.left anchors.leftMargin: 67