Mastodon
/
IceCubes
mirror of https://github.com/Dimillian/IceCubesApp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add account popovers for display name and handle (#1687)

This commit is contained in:
Thai D. V 2023-11-27 15:00:52 +07:00 committed by GitHub
parent 98e8ffe4a3
commit ea5480ef46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
IceCubesApp/App/Tabs/Settings/AccountSettingView.swift
View File

@ -105,7 +105,7 @@ struct AccountSettingsView: View {
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
AvatarView(account: account, config: .embed)
AvatarView(account.avatar, config: .embed)
Text(account.safeDisplayName)
.font(.headline)
}

2
Packages/Account/Sources/Account/AccountDetailHeaderView.swift
View File

@ -99,7 +99,7 @@ struct AccountDetailHeaderView: View {
private var accountAvatarView: some View {
HStack {
ZStack(alignment: .topTrailing) {
AvatarView(account: account, config: .account)
AvatarView(account.avatar, config: .account)
.accessibilityLabel("accessibility.tabs.profile.user-avatar.label")
if viewModel.isCurrentUser, isSupporter {
Image(systemName: "checkmark.seal.fill")

2
Packages/Account/Sources/Account/AccountDetailView.swift
View File

@ -214,7 +214,7 @@ public struct AccountDetailView: View {
Button {
routerPath.navigate(to: .accountDetailWithAccount(account: account))
} label: {
AvatarView(account: account, config: .badge)
AvatarView(account.avatar, config: .badge)
.padding(.leading, -4)
.accessibilityLabel(account.safeDisplayName)

2
Packages/Account/Sources/Account/AccountsList/AccountsListRow.swift
View File

@ -44,7 +44,7 @@ public struct AccountsListRow: View {
public var body: some View {
HStack(alignment: .top) {
AvatarView(account: viewModel.account, config: .status)
AvatarView(viewModel.account.avatar)
VStack(alignment: .leading, spacing: 2) {
EmojiTextApp(.init(stringValue: viewModel.account.safeDisplayName), emojis: viewModel.account.emojis)
.font(.scaledSubheadline)

4
Packages/AppAccount/Sources/AppAccount/AppAccountView.swift
View File

@ -35,7 +35,7 @@ public struct AppAccountView: View {
private var compactView: some View {
HStack {
if let account = viewModel.account {
AvatarView(account: account)
AvatarView(account.avatar)
} else {
ProgressView()
}
@ -61,7 +61,7 @@ public struct AppAccountView: View {
HStack {
if let account = viewModel.account {
ZStack(alignment: .topTrailing) {
AvatarView(account: account)
AvatarView(account.avatar)
if viewModel.appAccount.id == appAccounts.currentAccount.id {
Image(systemName: "checkmark.circle.fill")
.foregroundStyle(.white, .green)

4
Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift
View File

@ -73,9 +73,9 @@ public struct AppAccountsSelectorView: View {
private var labelView: some View {
Group {
if let account = currentAccount.account, !currentAccount.isLoadingAccount {
AvatarView(account: account, config: avatarConfig)
AvatarView(account.avatar, config: avatarConfig)
} else {
AvatarView(account: nil, config: avatarConfig)
AvatarView(config: avatarConfig)
.redacted(reason: .placeholder)
.allowsHitTesting(false)
}

2
Packages/Conversations/Sources/Conversations/Detail/ConversationMessageView.swift
View File

@ -27,7 +27,7 @@ struct ConversationMessageView: View {
if isOwnMessage {
Spacer()
} else {
AvatarView(account: message.account, config: .status)
AvatarView(message.account.avatar)
.onTapGesture {
routerPath.navigate(to: .accountDetailWithAccount(account: message.account))
}

2
Packages/Conversations/Sources/Conversations/List/ConversationsListRow.swift
View File

@ -24,7 +24,7 @@ struct ConversationsListRow: View {
} label: {
VStack(alignment: .leading) {
HStack(alignment: .top, spacing: 8) {
AvatarView(account: conversation.accounts.first!)
AvatarView(conversation.accounts.first!.avatar)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 4) {
HStack {

114
Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift
View File

@ -8,49 +8,13 @@ import Models
public struct AvatarView: View {
@Environment(Theme.self) private var theme
@State private var showPopup = false
@State private var autoDismiss = true
@State private var toggleTask: Task<Void, Never> = Task {}
public let account: Account?
public let avatar: URL?
public let config: FrameConfig
public let hasPopup: Bool
public var body: some View {
if let account = account {
if hasPopup {
AvatarImage(account: account, config: adaptiveConfig)
.frame(width: config.width, height: config.height)
.onHover { hovering in
if hovering {
toggleTask.cancel()
toggleTask = Task {
try? await Task.sleep(nanoseconds: NSEC_PER_SEC / 2)
guard !Task.isCancelled else { return }
if !showPopup {
showPopup = true
}
}
} else {
if !showPopup {
toggleTask.cancel()
}
}
}
.hoverEffect(.lift)
.popover(isPresented: $showPopup) {
AccountPopupView(
account: account,
theme: theme,
showPopup: $showPopup,
autoDismiss: $autoDismiss,
toggleTask: $toggleTask
)
}
} else {
AvatarImage(account: account, config: adaptiveConfig)
.frame(width: config.width, height: config.height)
}
if let avatar {
AvatarImage(avatar, config: adaptiveConfig)
.frame(width: config.width, height: config.height)
} else {
AvatarPlaceHolder(config: adaptiveConfig)
}
@ -66,10 +30,9 @@ public struct AvatarView: View {
return FrameConfig(width: config.width, height: config.height, cornerRadius: cornerRadius)
}
public init(account: Account?, config: FrameConfig = FrameConfig.status, hasPopup: Bool = false) {
self.account = account
public init(_ avatar: URL? = nil, config: FrameConfig = .status) {
self.avatar = avatar
self.config = config
self.hasPopup = hasPopup
}
public struct FrameConfig: Equatable {
@ -110,7 +73,7 @@ struct PreviewWrapper: View {
var body: some View {
VStack(alignment: .leading) {
AvatarView(account: Self.account, config: .status)
AvatarView(Self.account.avatar)
.environment(Theme.shared)
Toggle("Avatar Shape", isOn: $isCircleAvatar)
}
@ -147,14 +110,14 @@ struct PreviewWrapper: View {
struct AvatarImage: View {
@Environment(\.redactionReasons) private var reasons
public let account: Account
public let avatar: URL
public let config: AvatarView.FrameConfig
var body: some View {
if reasons == .placeholder {
AvatarPlaceHolder(config: config)
} else {
LazyImage(request: ImageRequest(url: account.avatar, processors: [.resize(size: config.size)])
LazyImage(request: ImageRequest(url: avatar, processors: [.resize(size: config.size)])
) { state in
if let image = state.image {
image
@ -169,6 +132,11 @@ struct AvatarImage: View {
}
}
}
init(_ avatar: URL, config: AvatarView.FrameConfig) {
self.avatar = avatar
self.config = config
}
}
struct AvatarPlaceHolder: View {
@ -181,7 +149,7 @@ struct AvatarPlaceHolder: View {
}
}
struct AccountPopupView: View {
struct AccountPopoverView: View {
let account: Account
let theme: Theme // using `@Environment(Theme.self) will crash the SwiftUI preview
private let config: AvatarView.FrameConfig = .account
@ -204,7 +172,7 @@ struct AccountPopupView: View {
VStack(alignment: .leading) {
HStack(alignment: .bottomAvatar) {
AvatarImage(account: account, config: adaptiveConfig)
AvatarImage(account.avatar, config: adaptiveConfig)
Spacer()
makeCustomInfoLabel(title: "account.following", count: account.followingCount ?? 0)
makeCustomInfoLabel(title: "account.posts", count: account.statusesCount ?? 0)
@ -317,3 +285,53 @@ private enum BottomAvatarAlignment: AlignmentID {
extension VerticalAlignment {
static let bottomAvatar = VerticalAlignment(BottomAvatarAlignment.self)
}
public struct AccountPopoverModifier : ViewModifier {
@Environment(Theme.self) private var theme
@State private var showPopup = false
@State private var autoDismiss = true
@State private var toggleTask: Task<Void, Never> = Task {}
let account: Account
public func body(content: Content) -> some View {
content
.onHover { hovering in
if hovering {
toggleTask.cancel()
toggleTask = Task {
try? await Task.sleep(nanoseconds: NSEC_PER_SEC / 2)
guard !Task.isCancelled else { return }
if !showPopup {
showPopup = true
}
}
} else {
if !showPopup {
toggleTask.cancel()
}
}
}
.hoverEffect(.lift)
.popover(isPresented: $showPopup) {
AccountPopoverView(
account: account,
theme: theme,
showPopup: $showPopup,
autoDismiss: $autoDismiss,
toggleTask: $toggleTask
)
}
}
init(_ account: Account) {
self.account = account
}
}
extension View {
public func accountPopover(_ account: Account) -> some View {
modifier(AccountPopoverModifier(account))
}
}

2
Packages/Lists/Sources/Lists/Edit/ListEditView.swift
View File

@ -30,7 +30,7 @@ public struct ListEditView: View {
} else {
ForEach(viewModel.accounts) { account in
HStack {
AvatarView(account: account, config: .status)
AvatarView(account.avatar)
VStack(alignment: .leading) {
EmojiTextApp(.init(stringValue: account.safeDisplayName),
emojis: account.emojis)

4
Packages/Notifications/Sources/Notifications/NotificationRowView.swift
View File

@ -52,7 +52,7 @@ struct NotificationRowView: View {
private func makeAvatarView(type: Models.Notification.NotificationType) -> some View {
ZStack(alignment: .topLeading) {
AvatarView(account: notification.accounts[0], hasPopup: true)
AvatarView(notification.accounts[0].avatar)
makeNotificationIconView(type: type)
.offset(x: -8, y: -8)
}
@ -83,7 +83,7 @@ struct NotificationRowView: View {
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 8) {
ForEach(notification.accounts) { account in
AvatarView(account: account, hasPopup: true)
AvatarView(account.avatar)
.contentShape(Rectangle())
.onTapGesture {
routerPath.navigate(to: .accountDetailWithAccount(account: account))

2
Packages/Status/Sources/Status/Editor/Components/StatusEditorAutoCompleteView.swift
View File

@ -31,7 +31,7 @@ struct StatusEditorAutoCompleteView: View {
viewModel.selectMentionSuggestion(account: account)
} label: {
HStack {
AvatarView(account: account, config: AvatarView.FrameConfig.badge)
AvatarView(account.avatar, config: AvatarView.FrameConfig.badge)
VStack(alignment: .leading) {
EmojiTextApp(.init(stringValue: account.safeDisplayName),
emojis: account.emojis)

2
Packages/Status/Sources/Status/Editor/StatusEditorView.swift
View File

@ -248,7 +248,7 @@ public struct StatusEditorView: View {
accountCreationEnabled: false,
avatarConfig: .status)
} else {
AvatarView(account: account, config: AvatarView.FrameConfig.status)
AvatarView(account.avatar, config: AvatarView.FrameConfig.status)
.environment(theme)
.accessibilityHidden(true)
}

2
Packages/Status/Sources/Status/Embed/StatusEmbeddedView.swift
View File

@ -46,7 +46,7 @@ public struct StatusEmbeddedView: View {
private func makeAccountView(account: Account) -> some View {
HStack(alignment: .center) {
AvatarView(account: account, config: .embed, hasPopup: true)
AvatarView(account.avatar, config: .embed)
VStack(alignment: .leading, spacing: 0) {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
.font(.scaledFootnote)

2
Packages/Status/Sources/Status/Row/StatusRowView.swift
View File

@ -68,7 +68,7 @@ public struct StatusRowView: View {
Button {
viewModel.navigateToAccountDetail(account: viewModel.finalStatus.account)
} label: {
AvatarView(account: viewModel.finalStatus.account, config: .status, hasPopup: true)
AvatarView(viewModel.finalStatus.account.avatar)
}
}
VStack(alignment: .leading) {

2
Packages/Status/Sources/Status/Row/Subviews/StatusRowDetailView.swift
View File

@ -103,7 +103,7 @@ struct StatusRowDetailView: View {
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 0) {
ForEach(accounts) { account in
AvatarView(account: account, config: .list, hasPopup: true)
AvatarView(account.avatar, config: .list)
.padding(.leading, -4)
}
.transition(.opacity)

19
Packages/Status/Sources/Status/Row/Subviews/StatusRowHeaderView.swift
View File

@ -42,19 +42,22 @@ struct StatusRowHeaderView: View {
private var accountView: some View {
HStack(alignment: .center) {
if theme.avatarPosition == .top {
AvatarView(account: viewModel.finalStatus.account, config: .status, hasPopup: true)
AvatarView(viewModel.finalStatus.account.avatar)
.accountPopover(viewModel.finalStatus.account)
}
VStack(alignment: .leading, spacing: 2) {
HStack(alignment: .firstTextBaseline, spacing: 2) {
Group {
EmojiTextApp(.init(stringValue: viewModel.finalStatus.account.safeDisplayName),
emojis: viewModel.finalStatus.account.emojis)
.font(.scaledSubheadline)
.foregroundColor(theme.labelColor)
.emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold)
.lineLimit(1)
.font(.scaledSubheadline)
.foregroundColor(theme.labelColor)
.emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold)
.lineLimit(1)
.accountPopover(viewModel.finalStatus.account)
accountBadgeView
.font(.footnote)
}
@ -69,6 +72,7 @@ struct StatusRowHeaderView: View {
.font(.scaledFootnote)
.foregroundColor(.gray)
.lineLimit(1)
.accountPopover(viewModel.finalStatus.account)
}
}
if theme.avatarPosition == .top {
@ -82,6 +86,7 @@ struct StatusRowHeaderView: View {
.foregroundColor(.gray)
.lineLimit(1)
.offset(y: 1)
.accountPopover(viewModel.finalStatus.account)
}
}
}

2
Packages/Status/Sources/Status/Row/Subviews/StatusRowReblogView.swift
View File

@ -8,7 +8,7 @@ struct StatusRowReblogView: View {
if viewModel.status.reblog != nil {
HStack(spacing: 2) {
Image("Rocket.Fill")
AvatarView(account: viewModel.status.account, config: .boost, hasPopup: true)
AvatarView(viewModel.status.account.avatar, config: .boost)
EmojiTextApp(.init(stringValue: viewModel.status.account.safeDisplayName), emojis: viewModel.status.account.emojis)
Text("status.row.was-boosted")
}