mirrors/IceCubesApp
1
0
Fork 0
mirror of https://github.com/Dimillian/IceCubesApp.git synced 2024-12-23 07:36:48 +00:00
Code Issues Projects Releases Packages Wiki Activity

Better notifications UX

Browse source
This commit is contained in:
Thomas Ricouard 2022-12-24 10:14:47 +01:00
parent 8de2a8192b
commit 2c39af280e
2 changed files with 95 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
Packages/Notifications/Sources/Notifications/NotificationRowView.swift
View file

@ -13,46 +13,85 @@ struct NotificationRowView: View {
var body: some View {
if let type = notification.supportedType {
HStack(alignment: .top, spacing: 8) {
AvatarView(url: notification.account.avatar)
.onTapGesture {
routeurPath.navigate(to: .accountDetailWithAccount(account: notification.account))
}
makeAvatarView(type: type)
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 0) {
Text(notification.account.displayName)
.font(.subheadline)
.fontWeight(.semibold) +
Text(" ") +
Text(type.label())
.font(.subheadline) +
Text(" ⸱ ")
.font(.footnote)
.foregroundColor(.gray) +
Text(notification.createdAt.formatted)
.font(.footnote)
.foregroundColor(.gray)
Spacer()
}
if let status = notification.status {
StatusRowView(viewModel: .init(status: status, isEmbed: true))
.padding(8)
.background(Color.gray.opacity(0.10))
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(.gray.opacity(0.35), lineWidth: 1)
)
.padding(.top, 8)
} else {
Text(notification.account.acct)
.font(.callout)
.foregroundColor(.gray)
}
makeMainLabel(type: type)
makeContent(type: type)
}
}
} else {
EmptyView()
}
}
private func makeAvatarView(type: Models.Notification.NotificationType) -> some View {
ZStack(alignment: .topLeading) {
AvatarView(url: notification.account.avatar)
.onTapGesture {
routeurPath.navigate(to: .accountDetailWithAccount(account: notification.account))
}
ZStack(alignment: .center) {
Circle()
.strokeBorder(Color.white, lineWidth: 1)
.background(Circle().foregroundColor(Color.brand))
.frame(width: 24, height: 24)
Image(systemName: type.iconName())
.resizable()
.frame(width: 12, height: 12)
.foregroundColor(.white)
}
.offset(x: -14, y: -4)
}
}
private func makeMainLabel(type: Models.Notification.NotificationType) -> some View {
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 0) {
Text(notification.account.displayName)
.font(.subheadline)
.fontWeight(.semibold) +
Text(" ") +
Text(type.label())
.font(.subheadline) +
Text(" ⸱ ")
.font(.footnote)
.foregroundColor(.gray) +
Text(notification.createdAt.formatted)
.font(.footnote)
.foregroundColor(.gray)
Spacer()
}
}
}
@ViewBuilder
private func makeContent(type: Models.Notification.NotificationType) -> some View {
if let status = notification.status {
StatusRowView(viewModel: .init(status: status, isEmbed: true))
.padding(8)
.background(Color.gray.opacity(0.10))
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(.gray.opacity(0.35), lineWidth: 1)
)
.padding(.top, 8)
} else {
Text(notification.account.acct)
.font(.callout)
.foregroundColor(.gray)
if type == .follow {
Text(notification.account.note.asSafeAttributedString)
.lineLimit(3)
.font(.body)
.foregroundColor(.gray)
.environment(\.openURL, OpenURLAction { url in
routeurPath.handle(url: url)
})
}
}
}
}
extension Models.Notification.NotificationType {
@ -76,6 +115,25 @@ extension Models.Notification.NotificationType {
return "has been edited"
}
}
func iconName() -> String {
switch self {
case .status:
return "pencil"
case .mention:
return "at"
case .reblog:
return "arrow.left.arrow.right.circle.fill"
case .follow, .follow_request:
return "person.fill.badge.plus"
case .favourite:
return "star.fill"
case .poll:
return "chart.bar.fill"
case .update:
return "pencil.line"
}
}
}
struct NotificationRowView_Previews: PreviewProvider {

6
Packages/Status/Sources/Status/Row/StatusRowView.swift
View file

@ -16,8 +16,10 @@ public struct StatusRowView: View {
public var body: some View {
VStack(alignment: .leading) {
reblogView
replyView
if !viewModel.isEmbed {
reblogView
replyView
}
statusView
if !viewModel.isEmbed {
StatusActionsView(viewModel: viewModel)