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
2023-06-06 10:03:38 +02:00
committed by GitHub
parent fedd401a56
commit 4e926c3334
87 changed files with 484 additions and 315 deletions
@@ -21,30 +21,50 @@ struct InviteUsersScreenSelectedItem: View {
let imageProvider: ImageProviderProtocol?
let dismissAction: () -> Void
@ScaledMetric private var buttonSize: CGFloat = 20
var body: some View {
VStack(spacing: 4) {
LoadableAvatarImage(url: user.avatarURL,
name: user.displayName,
contentID: user.userID,
avatarSize: .user(on: .inviteUsers),
imageProvider: imageProvider)
VStack(spacing: 0) {
avatar
Text(user.displayName ?? user.userID)
.font(.compound.headingSM)
.font(.compound.bodyMD)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
}
.overlay(alignment: .topTrailing) {
Button(action: dismissAction) {
Image(systemName: "xmark.circle.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(Color.element.systemPrimaryBackground, Color.element.primaryContent)
}
// MARK: - Private
var avatar: some View {
LoadableAvatarImage(url: user.avatarURL,
name: user.displayName,
contentID: user.userID,
avatarSize: .user(on: .inviteUsers),
imageProvider: imageProvider)
.overlay(alignment: .topTrailing) {
Button(action: dismissAction) {
Image(systemName: "xmark.circle.fill")
.resizable()
.frame(width: buttonSize, height: buttonSize)
.symbolRenderingMode(.palette)
.foregroundStyle(Color.element.systemPrimaryBackground, Color.element.primaryContent)
}
}
}
}
}
struct InviteUsersScreenSelectedItem_Previews: PreviewProvider {
static let people: [UserProfileProxy] = [.mockAlice, .mockVerbose]
static var previews: some View {
InviteUsersScreenSelectedItem(user: .mockAlice, imageProvider: MockMediaProvider(), dismissAction: { })
ScrollView(.horizontal) {
HStack(spacing: 28) {
ForEach(Self.people, id: \.userID) { user in
InviteUsersScreenSelectedItem(user: user, imageProvider: MockMediaProvider(), dismissAction: { })
.frame(width: 72)
}
}
}
}
}