From aa84b33d1702ce8ac9d5145168d00c59071fa8b4 Mon Sep 17 00:00:00 2001 From: GBKS Date: Fri, 4 Jul 2025 14:29:44 +0200 Subject: [PATCH 1/3] Activity screen visual tweaks This is still a WIP, because I'd like to get feedback on a few things. This commit does: - Lighten the separator component to match the design system - Reduce the hover state for navigation items vertically, and center it - Add RGB values to the green color in the Theme, which can be used via Qt.rgba to calculate transparencies (I used this in a test for more complex visual amount rendering, but need to clarify things there) - In transaction details, change the "Address" label to "To" or "From" based on the direction of the transaction - Makes transaction details amount bold - Makes transaction details circle white for sends - Tightens up some spacing in the activity list item to match the design system - Fixes an issue with the Icon component that caused images to be cropped and incorrectly sizes - Switches the Icon in the activity list item to an Image. The Icon component is based on a Button, so it's not quite appropriate. Also, Icon rendering gets blurry when the image is resized, while the Image renders crisp. I think there's a question here whether the Icon should be based on an image, or be called IconButton (and just be used for buttons) --- src/qml/components/Separator.qml | 2 +- src/qml/controls/Icon.qml | 4 +-- src/qml/controls/NavigationTab.qml | 4 ++- src/qml/controls/Theme.qml | 3 ++ src/qml/pages/wallet/Activity.qml | 35 +++++++++++++++--------- src/qml/pages/wallet/ActivityDetails.qml | 13 +++++++-- 6 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/qml/components/Separator.qml b/src/qml/components/Separator.qml index 8e14bb9ff..fcd6f9d21 100644 --- a/src/qml/components/Separator.qml +++ b/src/qml/components/Separator.qml @@ -8,7 +8,7 @@ import "../controls" Rectangle { height: 1 - color: enabled ? Theme.color.neutral5 : Theme.color.neutral4 + color: enabled ? Theme.color.neutral4 : Theme.color.neutral3 Behavior on color { ColorAnimation { duration: 150 } diff --git a/src/qml/controls/Icon.qml b/src/qml/controls/Icon.qml index aa6544404..1d20baa25 100644 --- a/src/qml/controls/Icon.qml +++ b/src/qml/controls/Icon.qml @@ -8,8 +8,8 @@ import org.bitcoincore.qt 1.0 Button { id: root - width: icon.width - height: icon.height + width: root.size + height: root.size required property color color required property url source property int size: 32 diff --git a/src/qml/controls/NavigationTab.qml b/src/qml/controls/NavigationTab.qml index 27f95ea41..7f7cff422 100644 --- a/src/qml/controls/NavigationTab.qml +++ b/src/qml/controls/NavigationTab.qml @@ -50,7 +50,9 @@ Button { background: Item { Rectangle { id: bg - height: parent.height - 5 + anchors.top: parent.top + anchors.topMargin: 12 + height: parent.height - 26 width: parent.width radius: 5 color: Theme.color.neutral3 diff --git a/src/qml/controls/Theme.qml b/src/qml/controls/Theme.qml index 319d85416..005922ae0 100644 --- a/src/qml/controls/Theme.qml +++ b/src/qml/controls/Theme.qml @@ -24,6 +24,7 @@ Control { required property color orangeLight2 required property color red required property color green + required property var greenRGB required property color blue required property color amber required property color purple @@ -58,6 +59,7 @@ Control { orangeLight2: "#FFBF72" red: "#EC6363" green: "#36B46B" + greenRGB: [54, 180, 107] blue: "#3CA3DE" amber: "#C9B500" purple: "#C075DC" @@ -91,6 +93,7 @@ Control { orangeLight2: "#FFBF72" red: "#EB5757" green: "#27AE60" + greenRGB: [39, 174, 96] blue: "#2D9CDB" amber: "#C9B500" purple: "#BB6BD9" diff --git a/src/qml/pages/wallet/Activity.qml b/src/qml/pages/wallet/Activity.qml index a4b3744b7..5d18c7bb7 100644 --- a/src/qml/pages/wallet/Activity.qml +++ b/src/qml/pages/wallet/Activity.qml @@ -5,6 +5,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.0 import org.bitcoincore.qt 1.0 import "../../controls" @@ -101,6 +102,11 @@ PageStack { required property int status; required property int type; + leftPadding: 0 + rightPadding: 0 + topPadding: 10 + bottomPadding: 10 + HoverHandler { cursorShape: Qt.PointingHandCursor } @@ -117,9 +123,7 @@ PageStack { } contentItem: RowLayout { - Icon { - Layout.alignment: Qt.AlignCenter - Layout.margins: 6 + Image { source: { if (delegate.type == Transaction.RecvWithAddress || delegate.type == Transaction.RecvFromOther) { @@ -130,20 +134,25 @@ PageStack { "qrc:/icons/triangle-up" } } - color: { - if (delegate.status == Transaction.Confirmed) { - if (delegate.type == Transaction.RecvWithAddress || - delegate.type == Transaction.RecvFromOther || - delegate.type == Transaction.Generated) { - Theme.color.green + Layout.preferredWidth: 14 + Layout.preferredHeight: 14 + fillMode: Image.PreserveAspectFit + layer.enabled: true + layer.effect: ColorOverlay { + color: { + if (delegate.status == Transaction.Confirmed) { + if (delegate.type == Transaction.RecvWithAddress || + delegate.type == Transaction.RecvFromOther || + delegate.type == Transaction.Generated) { + Theme.color.green + } else { + Theme.color.orange + } } else { - Theme.color.orange + Theme.color.blue } - } else { - Theme.color.blue } } - size: 14 } CoreText { Layout.alignment: Qt.AlignCenter diff --git a/src/qml/pages/wallet/ActivityDetails.qml b/src/qml/pages/wallet/ActivityDetails.qml index e04e567ae..f79a2ea4b 100644 --- a/src/qml/pages/wallet/ActivityDetails.qml +++ b/src/qml/pages/wallet/ActivityDetails.qml @@ -29,7 +29,7 @@ Page { delegate.type == Transaction.Generated) { Theme.color.green } else { - Theme.color.orange + Theme.color.neutral9 } } else { Theme.color.blue @@ -114,6 +114,7 @@ Page { text: root.amount color: amountColor font.pixelSize: 28 + bold: true } CoreText { @@ -160,7 +161,15 @@ Page { anchors.left: parent.left anchors.top: parent.top color: Theme.color.neutral7 - text: qsTr("Address") + text: { + if (delegate.type == Transaction.RecvWithAddress || + delegate.type == Transaction.RecvFromOther || + delegate.type == Transaction.Generated) { + qsTr("From") + } else { + qsTr("To") + } + } font.pixelSize: 15 } From ff681b68e691c21c87579a33329784893fa6632f Mon Sep 17 00:00:00 2001 From: GBKS Date: Fri, 4 Jul 2025 14:36:22 +0200 Subject: [PATCH 2/3] Reversing icon color change --- src/qml/pages/wallet/ActivityDetails.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/qml/pages/wallet/ActivityDetails.qml b/src/qml/pages/wallet/ActivityDetails.qml index f79a2ea4b..9f59859e1 100644 --- a/src/qml/pages/wallet/ActivityDetails.qml +++ b/src/qml/pages/wallet/ActivityDetails.qml @@ -29,7 +29,7 @@ Page { delegate.type == Transaction.Generated) { Theme.color.green } else { - Theme.color.neutral9 + Theme.color.orange } } else { Theme.color.blue From 040cf7af96e4a958d2cd37fd7ec0a3b9565515e5 Mon Sep 17 00:00:00 2001 From: GBKS Date: Mon, 7 Jul 2025 08:27:40 +0200 Subject: [PATCH 3/3] Undo addition of greenRGB theme color --- src/qml/controls/Theme.qml | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/qml/controls/Theme.qml b/src/qml/controls/Theme.qml index 005922ae0..319d85416 100644 --- a/src/qml/controls/Theme.qml +++ b/src/qml/controls/Theme.qml @@ -24,7 +24,6 @@ Control { required property color orangeLight2 required property color red required property color green - required property var greenRGB required property color blue required property color amber required property color purple @@ -59,7 +58,6 @@ Control { orangeLight2: "#FFBF72" red: "#EC6363" green: "#36B46B" - greenRGB: [54, 180, 107] blue: "#3CA3DE" amber: "#C9B500" purple: "#C075DC" @@ -93,7 +91,6 @@ Control { orangeLight2: "#FFBF72" red: "#EB5757" green: "#27AE60" - greenRGB: [39, 174, 96] blue: "#2D9CDB" amber: "#C9B500" purple: "#BB6BD9"