commit 4effaa432424e877f15fe7d50939d1e92ee711e9
parent e2a4443a9c1c524634f610a5878f598ba555540a
Author: William Casarin <jb55@jb55.com>
Date: Wed, 16 Oct 2024 09:14:14 -0700
Merge 'Side menu redesign' from 'github/pr/2569' into master
ericholguin (1):
ui: Side menu redesign
Diffstat:
2 files changed, 86 insertions(+), 105 deletions(-)
diff --git a/damus/Views/PubkeyView.swift b/damus/Views/PubkeyView.swift
@@ -9,6 +9,7 @@ import SwiftUI
struct PubkeyView: View {
let pubkey: Pubkey
+ var sidemenu: Bool = false
@Environment(\.colorScheme) var colorScheme
@@ -45,20 +46,21 @@ struct PubkeyView: View {
let bech32 = pubkey.npub
HStack {
- Text(verbatim: "\(abbrev_pubkey(bech32, amount: 16))")
- .font(.footnote)
+ Text(verbatim: "\(abbrev_pubkey(bech32, amount: sidemenu ? 12 : 16))")
+ .font(sidemenu ? .system(size: 10) : .footnote)
.foregroundColor(keyColor())
.padding(5)
.padding([.leading], 5)
-
+ .lineLimit(1)
+
HStack {
if isCopied {
Image("check-circle")
.resizable()
.foregroundColor(DamusColors.green)
- .frame(width: 20, height: 20)
+ .frame(width: sidemenu ? 15 : 20, height: sidemenu ? 15 : 20)
Text("Copied", comment: "Label indicating that a user's key was copied.")
- .font(.footnote)
+ .font(sidemenu ? .system(size: 10) : .footnote)
.layoutPriority(1)
.foregroundColor(DamusColors.green)
} else {
@@ -72,7 +74,7 @@ struct PubkeyView: View {
.resizable()
.contentShape(Rectangle())
.foregroundColor(colorScheme == .light ? DamusColors.darkGrey : DamusColors.lightGrey)
- .frame(width: 20, height: 20)
+ .frame(width: sidemenu ? 15 : 20, height: sidemenu ? 15 : 20)
}
.labelStyle(IconOnlyLabelStyle())
.symbolRenderingMode(.hierarchical)
diff --git a/damus/Views/SideMenuView.swift b/damus/Views/SideMenuView.swift
@@ -14,21 +14,11 @@ struct SideMenuView: View {
@Binding var selected: Timeline
@State var confirm_logout: Bool = false
@State private var showQRCode = false
-
- @Environment(\.colorScheme) var colorScheme
var sideBarWidth = min(UIScreen.main.bounds.size.width * 0.65, 400.0)
- let verticalSpacing: CGFloat = 20
+ let verticalSpacing: CGFloat = 25
let padding: CGFloat = 30
- func fillColor() -> Color {
- colorScheme == .light ? DamusColors.white : DamusColors.black
- }
-
- func textColor() -> Color {
- colorScheme == .light ? DamusColors.black : DamusColors.white
- }
-
var body: some View {
ZStack {
GeometryReader { _ in
@@ -57,7 +47,7 @@ struct SideMenuView: View {
if damus_state.purple.enable_purple {
NavigationLink(destination: DamusPurpleView(damus_state: damus_state)) {
- HStack(spacing: 13) {
+ HStack(spacing: 23) {
Image("nostr-hashtag")
Text("Purple")
.foregroundColor(DamusColors.purple)
@@ -80,12 +70,22 @@ struct SideMenuView: View {
}
Link(destination: URL(string: "https://store.damus.io/?ref=damus_ios_app")!) {
- navLabel(title: NSLocalizedString("Merch", comment: "Sidebar menu label for merch store link."), img: "basket")
+ navLabel(title: NSLocalizedString("Merch", comment: "Sidebar menu label for merch store link."), img: "shop")
}
NavigationLink(value: Route.Config) {
navLabel(title: NSLocalizedString("Settings", comment: "Sidebar menu label for accessing the app settings"), img: "settings")
}
+
+ Button(action: {
+ if damus_state.keypair.privkey == nil {
+ logout(damus_state)
+ } else {
+ confirm_logout = true
+ }
+ }, label: {
+ navLabel(title: NSLocalizedString("Logout", comment: "Sidebar menu label to sign out of the account."), img: "logout")
+ })
}
}
@@ -100,38 +100,68 @@ struct SideMenuView: View {
display_name = profile?.display_name
}
- return VStack(alignment: .leading, spacing: verticalSpacing) {
- HStack {
- ProfilePicView(pubkey: damus_state.pubkey, size: 60, highlight: .none, profiles: damus_state.profiles, disable_animation: damus_state.settings.disable_animation)
-
- VStack(alignment: .leading) {
-
- if let display_name {
- Text(display_name)
- .foregroundColor(textColor())
- .font(.title)
- .lineLimit(1)
- }
- if let name {
+ return VStack(alignment: .leading) {
+ HStack(spacing: 10) {
+
+ ProfilePicView(pubkey: damus_state.pubkey, size: 50, highlight: .none, profiles: damus_state.profiles, disable_animation: damus_state.settings.disable_animation)
+
+ Spacer()
+
+ Button(action: {
+ present_sheet(.user_status)
+ isSidebarVisible = false
+ }, label: {
+ Image("add-reaction")
+ .resizable()
+ .frame(width: 25, height: 25)
+ .padding(5)
+ .foregroundColor(DamusColors.adaptableBlack)
+ .background {
+ Circle()
+ .foregroundColor(DamusColors.neutral3)
+ }
+ })
+
+ Button(action: {
+ showQRCode.toggle()
+ isSidebarVisible = false
+ }, label: {
+ Image("qr-code")
+ .resizable()
+ .frame(width: 25, height: 25)
+ .padding(5)
+ .foregroundColor(DamusColors.adaptableBlack)
+ .background {
+ Circle()
+ .foregroundColor(DamusColors.neutral3)
+ }
+ }).fullScreenCover(isPresented: $showQRCode) {
+ QRCodeView(damus_state: damus_state, pubkey: damus_state.pubkey)
+ }
+ }
+
+ VStack(alignment: .leading) {
+
+ if let display_name {
+ Text(display_name)
+ .font(.title2.weight(.bold))
+ .foregroundColor(DamusColors.adaptableBlack)
+ .frame(maxWidth: .infinity, alignment: .leading)
+ .dynamicTypeSize(.xSmall)
+ .lineLimit(1)
+ }
+ if let name {
+ if !name.isEmpty {
Text("@" + name)
.foregroundColor(DamusColors.mediumGrey)
.font(.body)
.lineLimit(1)
}
}
+
+ PubkeyView(pubkey: damus_state.pubkey, sidemenu: true)
+ .pubkey_context_menu(pubkey: damus_state.pubkey)
}
-
- navLabel(title: NSLocalizedString("Set Status", comment: "Sidebar menu label to set user status"), img: "add-reaction")
- .font(.title2)
- .foregroundColor(textColor())
- .frame(maxWidth: .infinity, alignment: .leading)
- .dynamicTypeSize(.xSmall)
- .onTapGesture {
- present_sheet(.user_status)
- }
-
- UserStatusView(status: damus_state.profiles.profile_data(damus_state.pubkey).status, show_general: true, show_music: true)
- .dynamicTypeSize(.xSmall)
}
}
@@ -141,68 +171,28 @@ struct SideMenuView: View {
let profile_model = ProfileModel(pubkey: damus_state.pubkey, damus: damus_state)
NavigationLink(value: Route.Profile(profile: profile_model, followers: followers), label: {
-
TopProfile
.padding(.bottom, verticalSpacing)
})
- Divider()
-
ScrollView {
SidemenuItems(profile_model: profile_model, followers: followers)
- .labelStyle(SideMenuLabelStyle())
- .padding([.top, .bottom], verticalSpacing)
+ .simultaneousGesture(TapGesture().onEnded {
+ isSidebarVisible = false
+ })
}
+ .scrollIndicators(.hidden)
}
}
var content: some View {
HStack(alignment: .top) {
ZStack(alignment: .top) {
- fillColor()
+ DamusColors.adaptableWhite
.ignoresSafeArea()
- VStack(alignment: .leading, spacing: 0) {
- MainSidemenu
- .simultaneousGesture(TapGesture().onEnded {
- isSidebarVisible = false
- })
-
- Divider()
-
- HStack() {
- Button(action: {
- //ConfigView(state: damus_state)
- if damus_state.keypair.privkey == nil {
- logout(damus_state)
- } else {
- confirm_logout = true
- }
- }, label: {
- Label(NSLocalizedString("Sign out", comment: "Sidebar menu label to sign out of the account."), image: "logout")
- .font(.title3)
- .foregroundColor(textColor())
- .frame(maxWidth: .infinity, alignment: .leading)
- .dynamicTypeSize(.xSmall)
- })
-
- Spacer()
-
- Button(action: {
- showQRCode.toggle()
- }, label: {
- Image("qr-code")
- .font(.title)
- .foregroundColor(textColor())
- .dynamicTypeSize(.xSmall)
- }).fullScreenCover(isPresented: $showQRCode) {
- QRCodeView(damus_state: damus_state, pubkey: damus_state.pubkey)
- }
- }
- .padding(.top, verticalSpacing)
- }
- .padding(.top, selected != .home ? -(padding / 2.0) : 30)
- .padding([.leading, .trailing, .bottom], padding)
+ MainSidemenu
+ .padding([.leading, .trailing], padding)
}
.frame(width: sideBarWidth)
.offset(x: isSidebarVisible ? 0 : -(sideBarWidth + padding))
@@ -223,28 +213,17 @@ struct SideMenuView: View {
}
func navLabel(title: String, img: String) -> some View {
- HStack {
+ HStack(spacing: 20) {
Image(img)
.tint(DamusColors.adaptableBlack)
Text(title)
- .font(.title2)
- .foregroundColor(textColor())
+ .font(.title2.weight(.bold))
+ .foregroundColor(DamusColors.adaptableBlack)
.frame(maxWidth: .infinity, alignment: .leading)
.dynamicTypeSize(.xSmall)
}
}
-
- struct SideMenuLabelStyle: LabelStyle {
- func makeBody(configuration: Configuration) -> some View {
- HStack(alignment: .center, spacing: 8) {
- configuration.icon
- .frame(width: 24, height: 24)
- .aspectRatio(contentMode: .fit)
- configuration.title
- }
- }
- }
}
struct Previews_SideMenuView_Previews: PreviewProvider {
