Flatten room list (#121)

* #121 Flatten the room list

* #121 Add changelog

* #121 UI tweaks for avatar and display name and preview

* #121 Make avatar and label one button
This commit is contained in:
ismailgulek 2022-06-30 12:56:36 +03:00 committed by GitHub
parent baeffd2121
commit 83a25d5501
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 73 deletions

View File

@ -36,20 +36,12 @@ struct HomeScreenViewState: BindableState {
var isLoadingRooms: Bool = false var isLoadingRooms: Bool = false
var unencryptedDMs: [HomeScreenRoom] { var visibleDMs: [HomeScreenRoom] {
searchFilteredRooms.filter { $0.isDirect && !$0.isEncrypted } searchFilteredRooms.filter { $0.isDirect }
} }
var encryptedDMs: [HomeScreenRoom] { var visibleRooms: [HomeScreenRoom] {
searchFilteredRooms.filter { $0.isDirect && $0.isEncrypted} searchFilteredRooms.filter { !$0.isDirect }
}
var unencryptedRooms: [HomeScreenRoom] {
searchFilteredRooms.filter { !$0.isDirect && !$0.isEncrypted }
}
var encryptedRooms: [HomeScreenRoom] {
searchFilteredRooms.filter { !$0.isDirect && $0.isEncrypted }
} }
private var searchFilteredRooms: LazyFilterSequence<LazySequence<[HomeScreenRoom]>.Elements> { private var searchFilteredRooms: LazyFilterSequence<LazySequence<[HomeScreenRoom]>.Elements> {

View File

@ -26,43 +26,22 @@ struct HomeScreen: View {
VStack(spacing: 16.0) { VStack(spacing: 16.0) {
if context.viewState.isLoadingRooms { if context.viewState.isLoadingRooms {
VStack { VStack {
Text("Loading rooms") Text(ElementL10n.loading)
ProgressView() ProgressView()
} }
} else { } else {
List { List {
Section("Rooms") { Section(ElementL10n.rooms) {
ForEach(context.viewState.unencryptedRooms) { room in ForEach(context.viewState.visibleRooms) { room in
RoomCell(room: room, context: context) RoomCell(room: room, context: context)
.listRowBackground(Color.clear) .listRowBackground(Color.clear)
} }
let other = context.viewState.encryptedRooms
if other.count > 0 {
DisclosureGroup("Encrypted") {
ForEach(other) { room in
RoomCell(room: room, context: context)
}
}
.listRowBackground(Color.clear)
}
} }
Section("People") { Section(ElementL10n.bottomActionPeople) {
ForEach(context.viewState.unencryptedDMs) { room in ForEach(context.viewState.visibleDMs) { room in
RoomCell(room: room, context: context) RoomCell(room: room, context: context)
} .listRowBackground(Color.clear)
let other = context.viewState.encryptedDMs
if other.count > 0 {
DisclosureGroup("Encrypted") {
ForEach(other) { room in
RoomCell(room: room, context: context)
}
}
.listRowBackground(Color.clear)
} }
} }
} }
@ -77,41 +56,46 @@ struct HomeScreen: View {
.navigationBarTitleDisplayMode(.inline) .navigationBarTitleDisplayMode(.inline)
.toolbar { .toolbar {
ToolbarItem(placement: .navigationBarLeading) { ToolbarItem(placement: .navigationBarLeading) {
HStack { Button { context.send(viewAction: .tapUserAvatar) } label: {
ZStack { HStack {
if let avatar = context.viewState.userAvatar { userAvatarImage
Button { context.send(viewAction: .tapUserAvatar) } label: { .animation(.default, value: context.viewState.userAvatar)
Image(uiImage: avatar) .transition(.opacity)
.resizable()
.scaledToFill() userDisplayNameView
.frame(width: 40, height: 40, alignment: .center) .animation(.default, value: context.viewState.userDisplayName)
.mask(Circle()) .transition(.opacity)
}
} else {
EmptyView()
}
} }
.animation(.default, value: context.viewState.userAvatar)
.transition(.opacity)
ZStack {
if let displayName = context.viewState.userDisplayName {
Button { context.send(viewAction: .tapUserAvatar) } label: {
Text("Hello, \(displayName)!")
.font(.subheadline)
.fontWeight(.bold)
.foregroundColor(.primary)
}
} else {
EmptyView()
}
}
.animation(.default, value: context.viewState.userDisplayName)
.transition(.opacity)
} }
} }
} }
} }
@ViewBuilder
private var userAvatarImage: some View {
if let avatar = context.viewState.userAvatar {
Image(uiImage: avatar)
.resizable()
.scaledToFill()
.frame(width: 32, height: 32, alignment: .center)
.clipShape(Circle())
.accessibilityIdentifier("userAvatarImage")
} else {
EmptyView()
}
}
@ViewBuilder
private var userDisplayNameView: some View {
if let displayName = context.viewState.userDisplayName {
Text(displayName)
.font(.headline)
.fontWeight(.bold)
.foregroundColor(.primary)
} else {
EmptyView()
}
}
} }
struct RoomCell: View { struct RoomCell: View {
@ -129,7 +113,7 @@ struct RoomCell: View {
.resizable() .resizable()
.scaledToFill() .scaledToFill()
.frame(width: 40, height: 40) .frame(width: 40, height: 40)
.mask(Circle()) .clipShape(Circle())
} else { } else {
PlaceholderAvatarImage(text: room.displayName ?? room.id) PlaceholderAvatarImage(text: room.displayName ?? room.id)
.clipShape(Circle()) .clipShape(Circle())
@ -192,11 +176,14 @@ struct HomeScreen_Previews: PreviewProvider {
MockRoomSummary(displayName: "Omega", lastMessage: eventBrief)] MockRoomSummary(displayName: "Omega", lastMessage: eventBrief)]
viewModel.updateWithRoomSummaries(roomSummaries) viewModel.updateWithRoomSummaries(roomSummaries)
viewModel.updateWithUserDisplayName("username")
if let avatarImage = UIImage(systemName: "person.fill.questionmark") { if let avatarImage = UIImage(systemName: "person.fill") {
viewModel.updateWithUserAvatar(avatarImage) viewModel.updateWithUserAvatar(avatarImage)
} }
return HomeScreen(context: viewModel.context) return NavigationView {
HomeScreen(context: viewModel.context)
}
} }
} }

View File

@ -0,0 +1 @@
Flatten the room list by removing the encrypted groups.