mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 15:26:40 +00:00
Knock Requests List Screen (#3533)
* created the basic navigation and files * updated the logic so that the buttons that do not have permissions won't show * added the empty state * progress in making the list UI * update tests * UI improvements * fixed an issue with media provider * update button style * fixed a navigation bug * pr suggestions * pr suggestions
This commit is contained in:
Mauro
GitHub
@@ -15,8 +15,9 @@
|
||||
import Compound
|
||||
import SwiftUI
|
||||
|
||||
struct KnockRequestCellInfo {
|
||||
let userID: String
|
||||
struct KnockRequestCellInfo: Identifiable {
|
||||
/// user identifier of the usee that sent the request
|
||||
let id: String
|
||||
let displayName: String?
|
||||
let avatarUrl: URL?
|
||||
let timestamp: String?
|
||||
@@ -26,67 +27,92 @@ struct KnockRequestCellInfo {
|
||||
struct KnockRequestCell: View {
|
||||
let cellInfo: KnockRequestCellInfo
|
||||
var mediaProvider: MediaProviderProtocol?
|
||||
let onAccept: (String) -> Void
|
||||
let onDecline: (String) -> Void
|
||||
let onDeclineAndBan: (String) -> Void
|
||||
let onAccept: ((String) -> Void)?
|
||||
let onDecline: ((String) -> Void)?
|
||||
let onDeclineAndBan: ((String) -> Void)?
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
HStack(alignment: .top, spacing: 16) {
|
||||
LoadableAvatarImage(url: cellInfo.avatarUrl,
|
||||
name: cellInfo.displayName,
|
||||
contentID: cellInfo.userID,
|
||||
avatarSize: .user(on: .knockingUserList),
|
||||
mediaProvider: mediaProvider)
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
HStack(alignment: .top, spacing: 0) {
|
||||
Text(cellInfo.displayName ?? cellInfo.userID)
|
||||
.font(.compound.bodyLGSemibold)
|
||||
.foregroundStyle(.compound.textPrimary)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
if let timestamp = cellInfo.timestamp {
|
||||
Text(timestamp)
|
||||
.font(.compound.bodySM)
|
||||
.foregroundStyle(.compound.textSecondary)
|
||||
}
|
||||
}
|
||||
if cellInfo.displayName != nil {
|
||||
Text(cellInfo.userID)
|
||||
.font(.compound.bodyMD)
|
||||
.foregroundStyle(.compound.textSecondary)
|
||||
}
|
||||
}
|
||||
if let reason = cellInfo.reason {
|
||||
DisclosableText(text: reason)
|
||||
}
|
||||
actions
|
||||
HStack(alignment: .top, spacing: 16) {
|
||||
LoadableAvatarImage(url: cellInfo.avatarUrl,
|
||||
name: cellInfo.displayName,
|
||||
contentID: cellInfo.id,
|
||||
avatarSize: .user(on: .knockingUserList),
|
||||
mediaProvider: mediaProvider)
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
header
|
||||
if let reason = cellInfo.reason {
|
||||
DisclosableText(text: reason)
|
||||
}
|
||||
actions
|
||||
}
|
||||
.padding(.trailing, 16)
|
||||
.overlay(alignment: .bottom) {
|
||||
// Custom separator that uses the same color from the compound one
|
||||
Color.compound._borderInteractiveSecondaryAlpha
|
||||
.frame(height: 0.5)
|
||||
}
|
||||
}
|
||||
.padding(.top, 16)
|
||||
.padding(.leading, 16)
|
||||
.background(.compound.bgCanvasDefault)
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
HStack(alignment: .top, spacing: 0) {
|
||||
Text(cellInfo.displayName ?? cellInfo.id)
|
||||
.font(.compound.bodyLGSemibold)
|
||||
.foregroundStyle(.compound.textPrimary)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
if let timestamp = cellInfo.timestamp {
|
||||
Text(timestamp)
|
||||
.font(.compound.bodySM)
|
||||
.foregroundStyle(.compound.textSecondary)
|
||||
}
|
||||
}
|
||||
.padding(16)
|
||||
Divider()
|
||||
if cellInfo.displayName != nil {
|
||||
Text(cellInfo.id)
|
||||
.font(.compound.bodyMD)
|
||||
.foregroundStyle(.compound.textSecondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var actions: some View {
|
||||
HStack(spacing: 16) {
|
||||
Button(L10n.actionDecline) {
|
||||
onDecline(cellInfo.userID)
|
||||
VStack(spacing: 0) {
|
||||
if onDecline != nil || onAccept != nil {
|
||||
HStack(spacing: 16) {
|
||||
if let onDecline {
|
||||
Button(L10n.actionDecline) {
|
||||
onDecline(cellInfo.id)
|
||||
}
|
||||
.buttonStyle(.compound(.secondary, size: .medium))
|
||||
}
|
||||
|
||||
if let onAccept {
|
||||
Button(L10n.actionAccept) {
|
||||
onAccept(cellInfo.id)
|
||||
}
|
||||
.buttonStyle(.compound(.primary, size: .medium))
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.compound(.secondary))
|
||||
Button(L10n.actionAccept) {
|
||||
onAccept(cellInfo.userID)
|
||||
|
||||
if let onDeclineAndBan {
|
||||
Button(role: .destructive) {
|
||||
onDeclineAndBan(cellInfo.id)
|
||||
} label: {
|
||||
Text(L10n.screenKnockRequestsListDeclineAndBanActionTitle)
|
||||
.padding(.top, 8)
|
||||
.padding(.bottom, 4)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.buttonStyle(.compound(.plain))
|
||||
.padding(.top, 16)
|
||||
}
|
||||
.buttonStyle(.compound(.primary))
|
||||
}
|
||||
Button(L10n.screenKnockRequestsListDeclineAndBanActionTitle, role: .destructive) {
|
||||
onDeclineAndBan(cellInfo.userID)
|
||||
}
|
||||
.buttonStyle(.compound(.plain))
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.top, 12)
|
||||
.padding(.bottom, 4)
|
||||
.padding(.bottom, 16)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,9 +156,10 @@ private struct DisclosableText: View {
|
||||
}
|
||||
} label: {
|
||||
CompoundIcon(\.chevronDown, size: .medium, relativeTo: .compound.bodyMD)
|
||||
.foregroundStyle(.compound.iconTertiary)
|
||||
.rotationEffect(.degrees(isExpanded ? 180 : 0))
|
||||
}
|
||||
.rotationEffect(.degrees(isExpanded ? 180 : 0))
|
||||
.foregroundStyle(.compound.iconTertiary)
|
||||
.buttonStyle(.plain)
|
||||
.opacity(collapsedHeight < expandedHeight ? 1 : 0)
|
||||
.disabled(collapsedHeight >= expandedHeight)
|
||||
}
|
||||
@@ -141,13 +168,13 @@ private struct DisclosableText: View {
|
||||
|
||||
struct KnockRequestCell_Previews: PreviewProvider, TestablePreview {
|
||||
// swiftlint:disable:next line_length
|
||||
static let aliceWithLongReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello would like to join this room, also this is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason")
|
||||
static let aliceWithLongReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello would like to join this room, also this is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long reason")
|
||||
|
||||
static let aliceWithShortReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello, I am Alice and would like to join this room, please")
|
||||
static let aliceWithShortReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: "Hello, I am Alice and would like to join this room, please")
|
||||
|
||||
static let aliceWithNoReason = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
|
||||
static let aliceWithNoReason = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: "Alice", avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
|
||||
|
||||
static let aliceWithNoName = KnockRequestCellInfo(userID: "@alice:matrix.org", displayName: nil, avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
|
||||
static let aliceWithNoName = KnockRequestCellInfo(id: "@alice:matrix.org", displayName: nil, avatarUrl: nil, timestamp: "20 Nov 2024", reason: nil)
|
||||
|
||||
static var previews: some View {
|
||||
KnockRequestCell(cellInfo: aliceWithLongReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
|
||||
@@ -158,5 +185,11 @@ struct KnockRequestCell_Previews: PreviewProvider, TestablePreview {
|
||||
.previewDisplayName("No reason")
|
||||
KnockRequestCell(cellInfo: aliceWithNoName, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: { _ in })
|
||||
.previewDisplayName("No name")
|
||||
KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: nil, onDecline: { _ in }, onDeclineAndBan: { _ in })
|
||||
.previewDisplayName("No Accept")
|
||||
KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: nil, onDecline: nil, onDeclineAndBan: { _ in })
|
||||
.previewDisplayName("No Accept and Decline")
|
||||
KnockRequestCell(cellInfo: aliceWithShortReason, onAccept: { _ in }, onDecline: { _ in }, onDeclineAndBan: nil)
|
||||
.previewDisplayName("No Ban")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user