From ca07c502df4cd36a55bd1170e230347e213f7910 Mon Sep 17 00:00:00 2001 From: Stephen Heaps Date: Wed, 18 Oct 2023 15:35:44 -0400 Subject: [PATCH] =?UTF-8?q?Navigation=20structure=20updates;=20each=20tab?= =?UTF-8?q?=20has=20it=E2=80=99s=20own=20`NavigationView`.=20Portfolio=20n?= =?UTF-8?q?avigation=20bar=20matches=20Portfolio=20background=20&=20has=20?= =?UTF-8?q?no=20shadow=20until=20scrolled.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BraveWallet/Crypto/CryptoTabsView.swift | 207 ++++++++++++------ Sources/BraveWallet/Crypto/CryptoView.swift | 13 +- 2 files changed, 144 insertions(+), 76 deletions(-) diff --git a/Sources/BraveWallet/Crypto/CryptoTabsView.swift b/Sources/BraveWallet/Crypto/CryptoTabsView.swift index da16b757daa..313f2346ce8 100644 --- a/Sources/BraveWallet/Crypto/CryptoTabsView.swift +++ b/Sources/BraveWallet/Crypto/CryptoTabsView.swift @@ -11,8 +11,8 @@ import PanModal import BraveUI import Strings -struct CryptoTabsView: View { - private enum Tab: Equatable, Hashable { +struct CryptoTabsView: View { + private enum Tab: Equatable, Hashable, CaseIterable { case portfolio case activity case accounts @@ -34,9 +34,10 @@ struct CryptoTabsView: View { @ObservedObject var cryptoStore: CryptoStore @ObservedObject var keyringStore: KeyringStore + var toolbarDismissContent: DismissContent @State private var isShowingMainMenu: Bool = false - @State private var isShowingSettings: Bool = false + @State private var isTabShowingSettings: [Tab: Bool] = Tab.allCases.reduce(into: [Tab: Bool]()) { $0[$1] = false } @State private var isShowingSearch: Bool = false @State private var fetchedPendingRequestsThisSession: Bool = false @State private var selectedTab: Tab = .portfolio @@ -50,39 +51,93 @@ struct CryptoTabsView: View { var body: some View { TabView(selection: $selectedTab) { - PortfolioView( - cryptoStore: cryptoStore, - keyringStore: keyringStore, - networkStore: cryptoStore.networkStore, - portfolioStore: cryptoStore.portfolioStore - ) + NavigationView { + PortfolioView( + cryptoStore: cryptoStore, + keyringStore: keyringStore, + networkStore: cryptoStore.networkStore, + portfolioStore: cryptoStore.portfolioStore + ) + .navigationTitle(Strings.Wallet.portfolioPageTitle) + .navigationBarTitleDisplayMode(.inline) + .introspectViewController(customize: { vc in + vc.navigationItem.do { + // no shadow when content is at top. + let noShadowAppearance: UINavigationBarAppearance = { + let appearance = UINavigationBarAppearance() + appearance.configureWithOpaqueBackground() + appearance.titleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.backgroundColor = UIColor(braveSystemName: .pageBackground) + appearance.shadowColor = .clear + return appearance + }() + $0.scrollEdgeAppearance = noShadowAppearance + $0.compactScrollEdgeAppearance = noShadowAppearance + // shadow when content is scrolled behind navigation bar. + let shadowAppearance: UINavigationBarAppearance = { + let appearance = UINavigationBarAppearance() + appearance.configureWithOpaqueBackground() + appearance.titleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.backgroundColor = UIColor(braveSystemName: .pageBackground) + return appearance + }() + $0.standardAppearance = shadowAppearance + $0.compactAppearance = shadowAppearance + } + }) + .toolbar { sharedToolbarItems } + .background(settingsNavigationLink(for: .portfolio)) + } .tabItem { Tab.portfolio.tabLabel } .tag(Tab.portfolio) - TransactionsActivityView( - store: cryptoStore.transactionsActivityStore, - networkStore: cryptoStore.networkStore - ) + NavigationView { + TransactionsActivityView( + store: cryptoStore.transactionsActivityStore, + networkStore: cryptoStore.networkStore + ) + .navigationTitle(Strings.Wallet.activityPageTitle) + .navigationBarTitleDisplayMode(.inline) + .applyRegularNavigationAppearance() + .toolbar { sharedToolbarItems } + .background(settingsNavigationLink(for: .activity)) + } .tabItem { Tab.activity.tabLabel } .tag(Tab.activity) - AccountsView( - cryptoStore: cryptoStore, - keyringStore: keyringStore - ) + NavigationView { + AccountsView( + cryptoStore: cryptoStore, + keyringStore: keyringStore + ) + .navigationTitle(Strings.Wallet.accountsPageTitle) + .navigationBarTitleDisplayMode(.inline) + .applyRegularNavigationAppearance() + .toolbar { sharedToolbarItems } + .background(settingsNavigationLink(for: .accounts)) + } .tabItem { Tab.accounts.tabLabel } .tag(Tab.accounts) - MarketView( - cryptoStore: cryptoStore, - keyringStore: keyringStore - ) + NavigationView { + MarketView( + cryptoStore: cryptoStore, + keyringStore: keyringStore + ) + .navigationTitle(Strings.Wallet.marketPageTitle) + .navigationBarTitleDisplayMode(.inline) + .applyRegularNavigationAppearance() + .toolbar { sharedToolbarItems } + .background(settingsNavigationLink(for: .market)) + } .tabItem { Tab.market.tabLabel } @@ -119,36 +174,6 @@ struct CryptoTabsView: View { } } .ignoresSafeArea() - .navigationTitle(Strings.Wallet.cryptoTitle) - .navigationBarTitleDisplayMode(.inline) - .introspectViewController(customize: { vc in - vc.navigationItem.do { - let appearance: UINavigationBarAppearance = { - let appearance = UINavigationBarAppearance() - appearance.configureWithOpaqueBackground() - appearance.titleTextAttributes = [.foregroundColor: UIColor.braveLabel] - appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.braveLabel] - appearance.backgroundColor = .braveBackground - return appearance - }() - $0.standardAppearance = appearance - $0.compactAppearance = appearance - $0.scrollEdgeAppearance = appearance - } - }) - .background( - NavigationLink( - destination: Web3SettingsView( - settingsStore: cryptoStore.settingsStore, - networkStore: cryptoStore.networkStore, - keyringStore: keyringStore - ), - isActive: $isShowingSettings - ) { - Text(Strings.Wallet.settings) - } - .hidden() - ) .background( Color.clear .sheet(isPresented: $cryptoStore.isPresentingAssetSearch) { @@ -159,29 +184,73 @@ struct CryptoTabsView: View { ) } ) - .toolbar { - ToolbarItemGroup(placement: .navigationBarTrailing) { - Button(action: { - cryptoStore.isPresentingAssetSearch = true - }) { - Label(Strings.Wallet.searchTitle, systemImage: "magnifyingglass") - .labelStyle(.iconOnly) - .foregroundColor(Color(.braveBlurpleTint)) - } - Button(action: { self.isShowingMainMenu = true }) { - Label(Strings.Wallet.otherWalletActionsAccessibilityTitle, braveSystemImage: "leo.more.horizontal") - .labelStyle(.iconOnly) - .foregroundColor(Color(.braveBlurpleTint)) - } - .accessibilityLabel(Strings.Wallet.otherWalletActionsAccessibilityTitle) - } - } .sheet(isPresented: $isShowingMainMenu) { MainMenuView( isFromPortfolio: selectedTab == .portfolio, - isShowingSettings: $isShowingSettings, + isShowingSettings: Binding(get: { + self.isTabShowingSettings[selectedTab, default: false] + }, set: { isActive, _ in + self.isTabShowingSettings[selectedTab] = isActive + }), keyringStore: keyringStore ) } } + + @ToolbarContentBuilder private var sharedToolbarItems: some ToolbarContent { + ToolbarItemGroup(placement: .navigationBarTrailing) { + Button(action: { + cryptoStore.isPresentingAssetSearch = true + }) { + Label(Strings.Wallet.searchTitle, systemImage: "magnifyingglass") + .labelStyle(.iconOnly) + .foregroundColor(Color(.braveBlurpleTint)) + } + Button(action: { self.isShowingMainMenu = true }) { + Label(Strings.Wallet.otherWalletActionsAccessibilityTitle, braveSystemImage: "leo.more.horizontal") + .labelStyle(.iconOnly) + .foregroundColor(Color(.braveBlurpleTint)) + } + .accessibilityLabel(Strings.Wallet.otherWalletActionsAccessibilityTitle) + } + toolbarDismissContent + } + + private func settingsNavigationLink(for tab: Tab) -> some View { + NavigationLink( + destination: Web3SettingsView( + settingsStore: cryptoStore.settingsStore, + networkStore: cryptoStore.networkStore, + keyringStore: keyringStore + ), + isActive: Binding(get: { + self.isTabShowingSettings[tab, default: false] + }, set: { isActive, _ in + self.isTabShowingSettings[tab] = isActive + }) + ) { + Text(Strings.Wallet.settings) + } + .hidden() + } +} + +private extension View { + func applyRegularNavigationAppearance() -> some View { + introspectViewController(customize: { vc in + vc.navigationItem.do { + let appearance: UINavigationBarAppearance = { + let appearance = UINavigationBarAppearance() + appearance.configureWithOpaqueBackground() + appearance.titleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.braveLabel] + appearance.backgroundColor = .braveBackground + return appearance + }() + $0.standardAppearance = appearance + $0.compactAppearance = appearance + $0.scrollEdgeAppearance = appearance + } + }) + } } diff --git a/Sources/BraveWallet/Crypto/CryptoView.swift b/Sources/BraveWallet/Crypto/CryptoView.swift index 63dee105a13..d6284c1ba58 100644 --- a/Sources/BraveWallet/Crypto/CryptoView.swift +++ b/Sources/BraveWallet/Crypto/CryptoView.swift @@ -312,12 +312,11 @@ private struct CryptoContainerView: View { } var body: some View { - UIKitNavigationView { - CryptoTabsView(cryptoStore: cryptoStore, keyringStore: keyringStore) - .toolbar { - toolbarDismissContent - } - } + CryptoTabsView( + cryptoStore: cryptoStore, + keyringStore: keyringStore, + toolbarDismissContent: toolbarDismissContent + ) .background( Color.clear .sheet(item: $cryptoStore.buySendSwapDestination) { action in @@ -366,7 +365,7 @@ private struct CryptoContainerView: View { ) .environment( \.buySendSwapDestination, - Binding( + Binding( get: { [weak cryptoStore] in cryptoStore?.buySendSwapDestination }, set: { [weak cryptoStore] destination in if cryptoStore?.isPresentingAssetSearch == true {