mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 06:31:27 +00:00
Create & Join rooms UI/UX tweaks (#1005)
* Fix people icon size * Disable dismiss when loading in StartChatScreen * Reduce debounce on search * Add padding to invite button * Add show/hide bottom bar behaviour * Fix bg color in StartChatScreen form * Update localisations * Update search users results to 10 * Fix form background in InviteUsersScreen * Fix invites list bg color * Add mxid in InvitesScreenCell * Refactor InvitesScreenCell design * Fix separator spacing * Add more design fixes * Refine InvitesScreenCell layout * Refactor UserProfileCell design * Refactor FormRowAccessory * Update localisations * Fix camera size and security section padding * Change create button style * Refine InviteUsersScreenSelectedItem * Refine CreateRoomScreen * Refine UserProfileCell padding * Amend preview name * delete test code * Add separator in security section * Fix spacing in InviteUsersScreenSelectedItem * Revert confirmationAction in CreateRoomScreen * Refine HomeScreenInvitesButton * Add dismiss keyboard in InviteUsersScreen * Refactor FormRowAccessory * Remove isDisabled from FormButtonStyles * Update localisations * Cleanup RoomDetailsEditScreen * UI fixes on horizontal user carousel * Refactor InviteUsersScreenSelectedItem * Try fix flaky tests * Fix typo * Update snapshot tests * Fix flaky UTs * Fix HomeScreen ui tests * Fix scroll on selection * Refactor RoomFlowCoordinatorTests
This commit is contained in:
Alfonso Grillo
GitHub
@@ -17,13 +17,31 @@
|
||||
import SwiftUI
|
||||
|
||||
/// A view to be added on the trailing edge of a form row.
|
||||
enum FormRowAccessory: View {
|
||||
case navigationLink
|
||||
case progressView
|
||||
case selection(isSelected: Bool)
|
||||
struct FormRowAccessory: View {
|
||||
@Environment(\.isEnabled) private var isEnabled
|
||||
|
||||
enum Kind {
|
||||
case navigationLink
|
||||
case progressView
|
||||
case selection(isSelected: Bool)
|
||||
}
|
||||
|
||||
let kind: Kind
|
||||
|
||||
static var navigationLink: Self {
|
||||
.init(kind: .navigationLink)
|
||||
}
|
||||
|
||||
static var progressView: Self {
|
||||
.init(kind: .progressView)
|
||||
}
|
||||
|
||||
static func selection(isSelected: Bool) -> Self {
|
||||
.init(kind: .selection(isSelected: isSelected))
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
switch self {
|
||||
switch kind {
|
||||
case .navigationLink:
|
||||
Image(systemName: "chevron.forward")
|
||||
.font(.compound.bodyMD.bold())
|
||||
@@ -33,9 +51,13 @@ enum FormRowAccessory: View {
|
||||
case .selection(let isSelected):
|
||||
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
|
||||
.font(.compound.bodyLG)
|
||||
.foregroundColor(isSelected ? .element.primaryContent : .element.tertiaryContent)
|
||||
.foregroundColor(isSelected && isEnabled ? .element.primaryContent : .element.tertiaryContent)
|
||||
}
|
||||
}
|
||||
|
||||
private init(kind: Kind) {
|
||||
self.kind = kind
|
||||
}
|
||||
}
|
||||
|
||||
/// Default button styling for form rows.
|
||||
@@ -44,8 +66,6 @@ enum FormRowAccessory: View {
|
||||
/// to change the background colour depending on whether the button is currently pressed or not.
|
||||
struct FormButtonStyle: PrimitiveButtonStyle {
|
||||
var iconAlignment: VerticalAlignment = .firstTextBaseline
|
||||
/// Disables the button while providing an entry point for UI customizations
|
||||
var isDisabled = false
|
||||
/// An accessory to be added on the trailing side of the row.
|
||||
var accessory: FormRowAccessory?
|
||||
|
||||
@@ -55,14 +75,12 @@ struct FormButtonStyle: PrimitiveButtonStyle {
|
||||
.labelStyle(FormRowLabelStyle(alignment: iconAlignment, role: configuration.role))
|
||||
.frame(maxHeight: .infinity) // Make sure the label fills the cell vertically.
|
||||
}
|
||||
.buttonStyle(Style(isDisabled: isDisabled, accessory: accessory))
|
||||
.buttonStyle(Style(accessory: accessory))
|
||||
.listRowInsets(EdgeInsets()) // Remove insets so the background fills the cell.
|
||||
.disabled(isDisabled)
|
||||
}
|
||||
|
||||
/// Inner style used to set the pressed background colour.
|
||||
struct Style: ButtonStyle {
|
||||
var isDisabled: Bool
|
||||
private struct Style: ButtonStyle {
|
||||
var accessory: FormRowAccessory?
|
||||
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
@@ -73,7 +91,6 @@ struct FormButtonStyle: PrimitiveButtonStyle {
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
accessory
|
||||
.opacity(isDisabled ? 0.54 : 1)
|
||||
}
|
||||
.contentShape(Rectangle())
|
||||
.padding(FormRow.insets) // Re-apply the normal insets using padding.
|
||||
@@ -135,14 +152,18 @@ struct FormButtonStyles_Previews: PreviewProvider {
|
||||
Text("Hello world")
|
||||
}
|
||||
.buttonStyle(FormButtonStyle())
|
||||
|
||||
Button { } label: {
|
||||
Text("Selected")
|
||||
}
|
||||
.buttonStyle(FormButtonStyle(accessory: .selection(isSelected: true)))
|
||||
|
||||
Button { } label: {
|
||||
Text("Selected (disabled)")
|
||||
}
|
||||
.buttonStyle(FormButtonStyle(isDisabled: true, accessory: .selection(isSelected: true)))
|
||||
.buttonStyle(FormButtonStyle(accessory: .selection(isSelected: true)))
|
||||
.disabled(true)
|
||||
|
||||
Button { } label: {
|
||||
Text("Unselected")
|
||||
}
|
||||
|
||||
@@ -29,10 +29,9 @@ struct UserProfileCell: View {
|
||||
contentID: user.userID,
|
||||
avatarSize: .user(on: .startChat),
|
||||
imageProvider: imageProvider)
|
||||
.padding(.vertical, 10)
|
||||
.accessibilityHidden(true)
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text(user.displayName ?? user.userID)
|
||||
.font(.compound.headingSM)
|
||||
.foregroundColor(.element.primaryContent)
|
||||
@@ -40,6 +39,7 @@ struct UserProfileCell: View {
|
||||
subtitleContent
|
||||
|
||||
warningContent
|
||||
.padding(.top, 2)
|
||||
}
|
||||
.accessibilityElement(children: .combine)
|
||||
}
|
||||
@@ -63,15 +63,14 @@ struct UserProfileCell: View {
|
||||
@ViewBuilder
|
||||
private var warningContent: some View {
|
||||
if !user.isVerified, membership == nil {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 4) {
|
||||
HStack(alignment: .firstTextBaseline, spacing: 5) {
|
||||
Text(Image(systemName: "exclamationmark.circle.fill"))
|
||||
.foregroundColor(.compound.textCriticalPrimary)
|
||||
|
||||
Text(L10n.commonInviteUnknownProfile)
|
||||
.foregroundColor(.secondary)
|
||||
.foregroundColor(.element.tertiaryContent)
|
||||
}
|
||||
.font(.compound.bodyXS)
|
||||
.padding(.top, 4)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -109,13 +108,15 @@ struct UserProfileCell_Previews: PreviewProvider {
|
||||
Button(action: action) {
|
||||
UserProfileCell(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider())
|
||||
}
|
||||
.buttonStyle(FormButtonStyle(isDisabled: true, accessory: .selection(isSelected: true)))
|
||||
.disabled(true)
|
||||
.buttonStyle(FormButtonStyle(accessory: .selection(isSelected: true)))
|
||||
.previewDisplayName("Selected disabled user")
|
||||
|
||||
Button(action: action) {
|
||||
UserProfileCell(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider())
|
||||
}
|
||||
.buttonStyle(FormButtonStyle(isDisabled: true, accessory: .selection(isSelected: true)))
|
||||
.disabled(true)
|
||||
.buttonStyle(FormButtonStyle(accessory: .selection(isSelected: true)))
|
||||
.previewDisplayName("Unverified joined user")
|
||||
|
||||
Button(action: action) {
|
||||
|
||||
Reference in New Issue
Block a user