diff --git a/src/app/modules/main/wallet_section/overview/item.nim b/src/app/modules/main/wallet_section/overview/item.nim index a7c650af8a..5b0f6952fc 100644 --- a/src/app/modules/main/wallet_section/overview/item.nim +++ b/src/app/modules/main/wallet_section/overview/item.nim @@ -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 + diff --git a/src/app/modules/main/wallet_section/overview/module.nim b/src/app/modules/main/wallet_section/overview/module.nim index 48cf8a18ac..df50f4920d 100644 --- a/src/app/modules/main/wallet_section/overview/module.nim +++ b/src/app/modules/main/wallet_section/overview/module.nim @@ -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: diff --git a/src/app/modules/main/wallet_section/overview/view.nim b/src/app/modules/main/wallet_section/overview/view.nim index 6e247c78e5..004de0ddc7 100644 --- a/src/app/modules/main/wallet_section/overview/view.nim +++ b/src/app/modules/main/wallet_section/overview/view.nim @@ -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() diff --git a/storybook/pages/WalletHeaderPage.qml b/storybook/pages/WalletHeaderPage.qml index e7f9874b75..13915561dc 100644 --- a/storybook/pages/WalletHeaderPage.qml +++ b/storybook/pages/WalletHeaderPage.qml @@ -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 + } } } } diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 1c54c1e9fc..82ffb43603 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -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 diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml index ea4556bd4b..50500b0b82 100644 --- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml +++ b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml @@ -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: { diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index 26b38ffecc..5d272f3f90 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -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 diff --git a/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml new file mode 100644 index 0000000000..f82ec24053 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml @@ -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 {} + } +} diff --git a/ui/app/AppLayouts/Wallet/controls/qmldir b/ui/app/AppLayouts/Wallet/controls/qmldir index 3b4c6bbb77..12d0d1db09 100644 --- a/ui/app/AppLayouts/Wallet/controls/qmldir +++ b/ui/app/AppLayouts/Wallet/controls/qmldir @@ -1,2 +1,3 @@ NetworkFilter 1.0 NetworkFilter.qml NetworkSelectItemDelegate 1.0 NetworkSelectItemDelegate.qml +AccountHeaderGradient 1.0 AccountHeaderGradient.qml