status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): Header Gradient 

fixes #10333
This commit is contained in:
Khushboo Mehta 2023-05-11 12:29:19 +02:00 committed by Khushboo-dev-cpp
parent 1f3a595116
commit 43bd5631de
9 changed files with 234 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/modules/main/wallet_section/overview/item.nim
View File

@ -1,4 +1,4 @@
import strformat
import strformat, strutils
type
Item* = object
@ -10,6 +10,7 @@ type
emoji: string
isAllAccounts: bool
hideWatchAccounts: bool
colors: seq[string]
proc initItem*(
name: string = "",
@ -19,7 +20,8 @@ proc initItem*(
color: string,
emoji: string,
isAllAccounts: bool = false,
hideWatchAccounts: bool = false
hideWatchAccounts: bool = false,
colors: seq[string] = @[]
): Item =
result.name = name
result.mixedCaseAddress = mixedCaseAddress
@ -29,6 +31,7 @@ proc initItem*(
result.emoji = emoji
result.isAllAccounts = isAllAccounts
result.hideWatchAccounts = hideWatchAccounts
result.colors = colors
proc `$`*(self: Item): string =
result = fmt"""OverviewItem(
@ -39,7 +42,8 @@ proc `$`*(self: Item): string =
color: {self.color},
emoji: {self.emoji},
isAllAccounts: {self.isAllAccounts},
hideWatchAccounts: {self.hideWatchAccounts}
hideWatchAccounts: {self.hideWatchAccounts},
colors: {self.colors}
]"""
proc getName*(self: Item): string =
@ -66,3 +70,11 @@ proc getIsAllAccounts*(self: Item): bool =
proc getHideWatchAccounts*(self: Item): bool =
return self.hideWatchAccounts
proc getColors*(self: Item): string =
for color in self.colors:
if result.isEmptyOrWhitespace:
result = color
else:
result = result & ";" & color
return result

9
src/app/modules/main/wallet_section/overview/module.nim
View File

@ -59,6 +59,12 @@ proc setBalance(self: Module, tokens: seq[WalletTokenDto], chainIds: seq[int]) =
self.view.setCurrencyBalance(currencyAmountToItem(totalCurrencyBalanceForAllAssets, currencyFormat))
proc getWalletAccoutColors(self: Module, walletAccounts: seq[WalletAccountDto]) : seq[string] =
var colors: seq[string] = @[]
for account in walletAccounts:
colors.add(account.color)
return colors
method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int]) =
let walletAccounts = self.controller.getWalletAccountsByAddresses(addresses)
if addresses.len > 1:
@ -70,7 +76,8 @@ method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int])
"",
"",
isAllAccounts=true,
hideWatchAccounts=false # TODO(alaibe): need update when doing the action
hideWatchAccounts=false, # TODO(alaibe): need update when doing the action
self.getWalletAccoutColors(walletAccounts)
)
self.view.setData(item)
else:

11
src/app/modules/main/wallet_section/overview/view.nim
View File

@ -18,6 +18,7 @@ QtObject:
emoji: string
isAllAccounts: bool
hideWatchAccounts: bool
colors: string
proc setup(self: View) =
self.QObject.setup
@ -104,6 +105,13 @@ QtObject:
read = getHideWatchAccounts
notify = hideWatchAccountsChanged
proc getColors(self: View): QVariant {.slot.} =
return newQVariant(self.colors)
proc colorsChanged(self: View) {.signal.}
QtProperty[QVariant] colors:
read = getColors
notify = colorsChanged
proc setData*(self: View, item: Item) =
if(self.name != item.getName()):
self.name = item.getName()
@ -127,3 +135,6 @@ QtObject:
if(self.hideWatchAccounts != item.getHideWatchAccounts()):
self.hideWatchAccounts = item.getHideWatchAccounts()
self.hideWatchAccountsChanged()
if(self.colors != item.getColors()):
self.colors = item.getColors()
self.colorsChanged()

143
storybook/pages/WalletHeaderPage.qml
View File

@ -1,13 +1,17 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import AppLayouts.Wallet.panels 1.0
import AppLayouts.Wallet.controls 1.0
import AppLayouts.Chat.panels 1.0
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import utils 1.0
import Storybook 1.0
import AppLayouts.Wallet.panels 1.0
import Models 1.0
SplitView {
@ -35,39 +39,46 @@ SplitView {
readonly property string emptyString: ""
property var dummyOverview:({
name: "helloworld",
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
ens: emptyString,
color: "#2A4AF5",
emoji: "⚽",
balanceLoading: false,
hasBalanceCache: true,
currencyBalance: ({amount: 1.25,
symbol: "USD",
displayDecimals: 4,
stripTrailingZeroes: false}),
isAllAccounts: false,
hideWatchAccounts: false
property var dummyOverview: updateDummyView(StatusColors.colors['black'])
})
function updateDummyView(color) {
dummyOverview = ({
name: "helloworld",
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
ens: emptyString,
color: color,
emoji: "⚽",
balanceLoading: false,
hasBalanceCache: true,
currencyBalance: ({amount: 1.25,
symbol: "USD",
displayDecimals: 4,
stripTrailingZeroes: false}),
isAllAccounts: false,
hideWatchAccounts: false
})
}
property var dummyAllAccountsOverview:({
name: "helloworld",
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
ens: emptyString,
color: "#2A4AF5",
emoji: "⚽",
balanceLoading: false,
hasBalanceCache: true,
currencyBalance: ({amount: 1.25,
symbol: "USD",
displayDecimals: 4,
stripTrailingZeroes: false}),
isAllAccounts: true,
hideWatchAccounts: true
})
name: "",
mixedcaseAddress: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421",
ens: emptyString,
color: "",
emoji: "",
balanceLoading: false,
hasBalanceCache: true,
currencyBalance: ({amount: 1.25,
symbol: "USD",
displayDecimals: 4,
stripTrailingZeroes: false}),
isAllAccounts: true,
hideWatchAccounts: true,
colors: StatusColors.colors['blue2']+ ";" +
StatusColors.colors['yellow']+ ";" +
StatusColors.colors['green2'] + ";" +
StatusColors.colors['red2']
})
readonly property QtObject connectionStore: QtObject {
property bool accountBalanceNotAvailable: false
@ -108,15 +119,33 @@ SplitView {
SplitView.fillWidth: true
SplitView.fillHeight: true
Loader {
anchors.fill: parent
active: globalUtilsReady && mainModuleReady
Rectangle {
id: rect
width: 800
height: 200
color: Theme.palette.white
border.width: 1
anchors.centerIn: parent
sourceComponent: WalletHeader {
networkConnectionStore: d.connectionStore
overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview : d.dummyOverview
walletStore: d.walletStore
AccountHeaderGradient {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview : d.dummyOverview
}
Loader {
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
active: globalUtilsReady && mainModuleReady
sourceComponent: WalletHeader {
networkConnectionStore: d.connectionStore
overview: allAccountsCheckbox.checked ? d.dummyAllAccountsOverview : d.dummyOverview
walletStore: d.walletStore
width: parent.width
}
}
}
}
@ -129,10 +158,38 @@ SplitView {
logsView.logText: logs.logText
CheckBox {
id: allAccountsCheckbox
text: "All Accounts"
checked: false
Column {
spacing: 20
Row {
CheckBox {
id: allAccountsCheckbox
text: "All Accounts"
checked: false
}
CheckBox {
id: darkMode
text: "Dark Mode"
checked: false
onCheckedChanged: rect.color = Theme.palette.baseColor3
}
}
Row {
spacing: 10
id: row
Repeater {
id: repeater
model: Constants.preDefinedWalletAccountColors
delegate: StatusColorRadioButton {
radioButtonColor: repeater.model[index]
checked: index === 0
onCheckedChanged: d.updateDummyView(repeater.model[index])
}
}
}
ButtonGroup {
buttons: row.children
}
}
}
}

1
ui/StatusQ/src/StatusQ/Controls/qmldir
View File

@ -55,3 +55,4 @@ StatusPasswordInput 0.1 StatusPasswordInput.qml
StatusTextWithLoadingState 0.1 StatusTextWithLoadingState.qml
StatusLinkText 0.1 StatusLinkText.qml
StatusImageSelector 0.1 StatusImageSelector.qml
StatusColorRadioButton 0.1 StatusColorRadioButton.qml

22
ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
View File

@ -71,7 +71,11 @@ SplitView {
This property holds the footer of the component.
*/
property Item footer
/*!
\qmlproperty Component StatusAppLayout::headerBackground
This property holds the headerBackground of the component.
*/
property Item headerBackground
/*!
\qmlproperty bool StatusAppLayout::showRightPanel
This property sets the right panel component's visibility to true/false.
@ -145,6 +149,12 @@ SplitView {
}
}
onHeaderBackgroundChanged: {
if (!!headerBackground) {
headerBackground.parent = headerBackgroundSlot
}
}
Control {
SplitView.minimumWidth: (!!leftPanel) ? 304 : 0
SplitView.preferredWidth: (!!leftPanel) ? 304 : 0
@ -163,8 +173,18 @@ SplitView {
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
}
contentItem: Item {
Item {
id: headerBackgroundSlot
anchors.top: parent.top
// Needed cause I see a gap otherwise
anchors.topMargin: -3
width: visible ? parent.width : 0
height: visible ? childrenRect.height : 0
visible: (!!headerBackground)
}
StatusToolBar {
id: statusToolBar
anchors.top: parent.top
width: visible ? parent.width : 0
visible: root.showHeader
onBackButtonClicked: {

5
ui/app/AppLayouts/Wallet/WalletLayout.qml
View File

@ -11,6 +11,7 @@ import "popups"
import "panels"
import "views"
import "stores"
import "controls"
Item {
id: root
@ -114,6 +115,10 @@ Item {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
}
}
headerBackground: AccountHeaderGradient {
width: parent.width
overview: RootStore.overview
}
footer: WalletFooter {
sendModal: root.sendModalPopup

72
ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml Normal file
View File

@ -0,0 +1,72 @@
import QtQuick 2.13
import QtGraphicalEffects 1.12
import StatusQ.Core.Theme 0.1
Loader {
id: root
property var overview
sourceComponent: root.overview.isAllAccounts ? multipleAccountsGradient : singleAccountGradient
Component {
id: singleAccountGradient
Rectangle {
implicitHeight: 115
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.palette.alphaColor(root.overview.color, 0.1) }
GradientStop { position: 1.0; color: "transparent" }
}
}
}
Component {
id: multipleAccountsGradient
Item {
implicitHeight: 115
Rectangle {
id: base
anchors.fill: parent
Component.onCompleted: {
let splitWords = root.overview.colors.split(';')
var stops = []
let numOfColors = splitWords.length
let gap = 1/splitWords.length
let startPosition = gap
for (const word of splitWords) {
stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(word, 0.1)}))
startPosition += gap
}
gradient.stops = stops
}
gradient: Gradient {
id: gradient
orientation: Gradient.Horizontal
}
visible: false
}
Rectangle {
id: mask
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: Theme.palette.statusAppLayout.rightPanelBackgroundColor}
GradientStop { position: 1.0; color: "transparent" }
}
visible: false
}
OpacityMask {
anchors.fill: base
source: base
maskSource: mask
}
}
}
Component {
id:stopComponent
GradientStop {}
}
}

1
ui/app/AppLayouts/Wallet/controls/qmldir
View File

@ -1,2 +1,3 @@
NetworkFilter 1.0 NetworkFilter.qml
NetworkSelectItemDelegate 1.0 NetworkSelectItemDelegate.qml
AccountHeaderGradient 1.0 AccountHeaderGradient.qml