Files
pay/guis/desktop/ActivityConfigBar.qml
T
tomFlowee d396e1bdfd Improve UX of desktop wallet
This redoes the "AccountDetails" page, matching ideas from the mobile
wallet and fixing a lot of bad interactions.

This also looked at the colors in desktop to be consistent and nicer.

Lots of smaller fixes and UI changes.
2025-11-16 12:35:01 +01:00

173 lines
5.1 KiB
QML

/*
* This file is part of the Flowee project
* Copyright (C) 2025 Tom Zander <tom@flowee.org>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick
import QtQuick.Layouts
import "../Flowee" as Flowee
import Flowee.org.pay;
Item {
id: root
height: 50
property QtObject wallet: portfolio.current;
onWalletChanged: wallet.transactions.filterString = filterText.text.trim();
function toggleFlag(flag, on) {
var cf = portfolio.current.transactions.includeFlags
if (((cf & flag) > 0) === on) // nothing to do.
return;
if (on)
cf += flag;
else
cf -= flag;
portfolio.current.transactions.includeFlags = cf
}
Item {
x: -11
y: -3
height: parent.height + 7
width: 23
clip: true
Rectangle {
height: parent.height + 18
y: -20
width: 40
radius: 10
color: "#00000000"
border.width: 7
border.color: mainWindow.floweeGreen
}
}
Flowee.TextField {
id: filterText
y: 6
width: Math.min(500, parent.width - 20)
placeholderText: qsTr("Filter")
onTextChanged: portfolio.current.transactions.filterString = text.trim();
}
Rectangle {
id: cfCheckbox
anchors.left: filterText.right
anchors.leftMargin: 10
y: 4
width: 40
height: 40
radius: 2
color: checked ? palette.alternateBase : palette.base
border.width: 2
border.color: {
if (cfHoverArea.containsMouse)
return Pay.useDarkSkin ? mainWindow.floweeSalmon : mainWindow.floweeBlue;
if (checked)
return palette.midlight;
return palette.mid
}
visible: portfolio.current.hasAnonimityTransactions
property bool checked: (portfolio.current.transactions.includeFlags
& Wallet.IncludeCFs) > 0;
Image {
source: "qrc:/cf.svg";
width: 30
height: 30
smooth: true
anchors.centerIn: parent
opacity: cfCheckbox.checked ? 1 : 0.5
}
MouseArea {
id: cfHoverArea
anchors.fill: parent
hoverEnabled: true
onClicked: toggleFlag(Wallet.IncludeCFs, !cfCheckbox.checked);
}
}
Item {
id: sendReceiveFilter
anchors.left: cfCheckbox.right
anchors.leftMargin: 10
height: 44
width: grid.width + 12
y: 4
property bool includeSent: {
var flags = portfolio.current.transactions.includeFlags;
var filter = Wallet.IncludeSentTransactions;
return (flags & filter) === filter;
}
property bool includeReceived: {
var flags = portfolio.current.transactions.includeFlags;
var filter = Wallet.IncludeReceivedTransactions;
return (flags & filter) === filter;
}
Grid {
id: grid
y: 4
x: 6
columns: 2
columnSpacing: 6
Rectangle {
color: "#00000000"
border.width: 1.3
border.color: palette.button
width: 14
height: 14
Flowee.CheckShape {
visible: sendReceiveFilter.includeReceived
}
}
Flowee.Label {
text: qsTr("Received")
font.pixelSize: 14
}
Rectangle {
color: "#00000000"
border.width: 1.3
border.color: palette.button
width: 14
height: 14
Flowee.CheckShape {
visible: sendReceiveFilter.includeSent
}
}
Flowee.Label {
text: qsTr("Sent")
font.pixelSize: 14
}
}
MouseArea {
id: sendReceiveMouse
anchors.fill: parent
anchors.margins: -6
onClicked: (event) => {
if (event.y < height / 2) {
root.toggleFlag(Wallet.IncludeReceivedTransactions,
!sendReceiveFilter.includeReceived);
} else {
root.toggleFlag(Wallet.IncludeSentTransactions,
!sendReceiveFilter.includeSent);
}
}
}
}
}