From 90ea3e6f79c837fdaa22e000c8185e9f5638a99b Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Mon, 24 Jun 2024 15:14:19 -0400 Subject: [PATCH 01/10] fix colors for pill kit --- .../Color.xcassets/Status/Neutral.colorset/Contents.json | 6 +++--- .../Color.xcassets/Status/Warning.colorset/Contents.json | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Neutral.colorset/Contents.json b/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Neutral.colorset/Contents.json index 7fee7e0f2..bb6df9bb5 100644 --- a/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Neutral.colorset/Contents.json +++ b/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Neutral.colorset/Contents.json @@ -5,9 +5,9 @@ "color-space" : "srgb", "components" : { "alpha" : "1.000", - "blue" : "214", - "green" : "205", - "red" : "193" + "blue" : "135", + "green" : "120", + "red" : "104" } }, "idiom" : "universal" diff --git a/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Warning.colorset/Contents.json b/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Warning.colorset/Contents.json index d2de33ecc..d3537b960 100644 --- a/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Warning.colorset/Contents.json +++ b/Sources/Playbook/Design Elements/Colors/Color.xcassets/Status/Warning.colorset/Contents.json @@ -6,8 +6,8 @@ "components" : { "alpha" : "1.000", "blue" : "0x00", - "green" : "0xBB", - "red" : "0xF9" + "green" : "0x95", + "red" : "0xC6" } }, "idiom" : "universal" From d39b9196ee11a771e006e8d58c3f4ee1ec0a57bc Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 08:59:17 -0400 Subject: [PATCH 02/10] multi user bubble WIP --- .../Playbook/Components/Avatar/PBAvatar.swift | 8 +- .../Multiple Users/MultipleUsersCatalog.swift | 30 ++- .../User/Multiple Users/PBMultipleUsers.swift | 176 ++++++++++++++---- .../Resources/Helper Files/Mocks.swift | 1 + 4 files changed, 180 insertions(+), 35 deletions(-) diff --git a/Sources/Playbook/Components/Avatar/PBAvatar.swift b/Sources/Playbook/Components/Avatar/PBAvatar.swift index 76c0aca3a..ffcf1d4d1 100644 --- a/Sources/Playbook/Components/Avatar/PBAvatar.swift +++ b/Sources/Playbook/Components/Avatar/PBAvatar.swift @@ -84,7 +84,10 @@ public extension PBAvatar { return nil } - enum Size: CaseIterable { + enum Size: CaseIterable, Hashable { + public static var allCases: [PBAvatar.Size] = [] + + case xxSmall case xSmall case small @@ -95,7 +98,7 @@ public extension PBAvatar { case defaultStackedIndicator case smallStacked case smallStackedIndicator - + case custom(_ size: CGFloat) var diameter: CGFloat { switch self { case .xxSmall: return 20 @@ -108,6 +111,7 @@ public extension PBAvatar { case .defaultStackedIndicator: return 18 case .smallStacked: return 22 case .smallStackedIndicator: return 16 + case .custom(let size): return size } } diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index 059363dd0..d2aaf7da7 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -15,7 +15,7 @@ public struct MultipleUsersCatalog: View { PBDoc(title: "xSmall") { xsmallView } - + PBDoc(title: "Small") { smallView } @@ -23,6 +23,9 @@ public struct MultipleUsersCatalog: View { PBDoc(title: "Small Reverse") { smallReverseView } + PBDoc(title: "Small Bubble") { + smallUserBubbleView + } } } } @@ -39,4 +42,29 @@ extension MultipleUsersCatalog { PBMultipleUsers(users: Mocks.twoUsers, size: .small, reversed: true) } } + var smallUserBubbleView: some View { + HStack(spacing: Spacing.small) { + PBMultipleUsers( + users: Mocks.twoUsers, + variant: .bubble, + bubbleSize: .small, + bubbleCount: .two + ) + PBMultipleUsers( + users: Mocks.threeUsers, + variant: .bubble, + bubbleSize: .small, + bubbleCount: .three + ) + PBMultipleUsers( + users: Mocks.multipleUsers, + variant: .bubble + ) + } + } +} + +#Preview { + registerFonts() + return MultipleUsersCatalog() } diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 0b540c3bb..83ac80f23 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -11,22 +11,52 @@ import SwiftUI public struct PBMultipleUsers: View { var users: [PBUser] - var size: AvatarSize + var size: PBAvatar.Size + var variant: Variant var reversed: Bool + var bubbleSize: BubbleSize + var bubbleCount: BubbleCount var maxDisplayedUsers: Int - + @State private var avSize: CGFloat = 20 public init( users: [PBUser] = [], - size: AvatarSize = .small, + size: PBAvatar.Size = .small, + variant: Variant = .linear, reversed: Bool = false, + bubbleSize: BubbleSize = .small, + bubbleCount: BubbleCount = .two, maxDisplayedUsers: Int = 4 ) { self.users = users self.size = size + self.variant = variant self.reversed = reversed + self.bubbleSize = bubbleSize + self.bubbleCount = bubbleCount self.maxDisplayedUsers = maxDisplayedUsers + } + + public var body: some View { +// multipleUsersView +// multipleUsersBubbleVariant + variantView + } +} + +public extension PBMultipleUsers { + + enum Variant { + case linear, bubble + } + @ViewBuilder + var variantView: some View { + switch variant { + case .linear: multipleUsersView + case .bubble: multipleUsersBubbleVariant + } + } var filteredUsers: ([PBUser], Int?) { var displayedUsers = users var additionalUsers = 0 @@ -38,70 +68,152 @@ public struct PBMultipleUsers: View { return (displayedUsers, additionalUsers) } - + func xOffset(index: Int) -> CGFloat { - let offset = size.avatarSize.diameter / 1.5 * CGFloat(index) + let offset = size.diameter / 1.5 * CGFloat(index) return reversed ? -offset : offset } var leadingPadding: CGFloat { - let padding = size.avatarSize.diameter / 1.5 * CGFloat(filteredUsers.0.count - (filteredUsers.1 == 0 ? 1 : 0)) + let padding = size.diameter / 1.5 * CGFloat(filteredUsers.0.count - (filteredUsers.1 == 0 ? 1 : 0)) return reversed ? padding : 0 } - + var totalWidth: CGFloat { - var width = size.avatarSize.diameter + var width = size.diameter if filteredUsers.0.count > 1 { - width = size.avatarSize.diameter / 1.5 * CGFloat(filteredUsers.0.count - 1) + size.avatarSize.diameter + width = size.diameter / 1.5 * CGFloat(filteredUsers.0.count - 1) + size.diameter } if users.count > maxDisplayedUsers { - width = size.avatarSize.diameter / 1.5 * CGFloat(maxDisplayedUsers - 1) + size.avatarSize.diameter + width = size.diameter / 1.5 * CGFloat(maxDisplayedUsers - 1) + size.diameter } return width } +} - public var body: some View { +public extension PBMultipleUsers { + + enum BubbleSize { + case small, medium, large, xLarge + } + enum BubbleCount { + case two, three, four + } +// var smallBubbleCount: [CGFloat] { +// switch bubbleCount { +// case .two: return [20, 12] +// case .three: return [16, 12, 10] +// case .four: return [16, 12, 10, 8] +// } +// } +// var medBubbleCount: [CGFloat] { +// switch bubbleCount { +// case .two: return [32, 16] +// case .three: return [24, 20, 16] +// case .four: return [28, 20, 16, 12] +// } +// } +// var largeBubbleCount: [CGFloat] { +// switch bubbleCount { +// case .two: return [44, 20] +// case .three: return [32, 24, 20] +// case .four: return [36, 28, 24, 16] +// } +// } +// var xLargeBubbleCount: [CGFloat] { +// switch bubbleCount { +// case .two: return [56, 24] +// case .three: return [44, 32, 24] +// case .four: return [44, 32, 24, 16] +// } +// } +// var smallBubbleSizes: [CGFloat] { +// switch bubbleSize { +// case .small: return smallBubbleCount +// case .medium: return medBubbleCount +// case .large: return largeBubbleCount +// case .xLarge: return xLargeBubbleCount +// } +// } + var multipleUsersView: some View { ZStack { ForEach(filteredUsers.0.indices, id: \.self) { index in PBAvatar( image: filteredUsers.0[index].image, name: filteredUsers.0[index].name, - size: size.avatarSize, + size: size, wrapped: true ) .offset(x: xOffset(index: index), y: 0) } - - PBMultipleUsersIndicator(usersCount: filteredUsers.1, size: size.avatarSize) + + PBMultipleUsersIndicator(usersCount: filteredUsers.1, size: size) .offset(x: xOffset(index: filteredUsers.0.endIndex), y: 0) } .padding(.leading, leadingPadding) .frame(width: totalWidth, alignment: .leading) } -} - -public extension PBMultipleUsers { - enum AvatarSize { - case xSmall - case small - - var avatarSize: PBAvatar.Size { - switch self { - case .xSmall: return .xSmall - case .small: return .small - } + var multipleUsersBubbleVariant: some View { + CircularLayout { + userBubbleView } + .frame(width: 35, height: 35) + .background(Color.background(.light)) + .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/) } -} - -public struct PBMultipleUsers_Previews: PreviewProvider { - public static var previews: some View { - registerFonts() - return MultipleUsersCatalog() + var userBubbleView: some View { + ForEach(filteredUsers.0.indices, id: \.self) { index in + let avSize = avatarSize(for: index, total: filteredUsers.0.count) + PBAvatar( + image: filteredUsers.0[index].image, + name: filteredUsers.0[index].name, + size: .custom(avSize), + wrapped: true + ) + .padding(index == 2 ? -1.5 : -1.6) + + // use the index to continue this ?? + .offset(x: index == 1 ? -1 : -4, y: 0) + + // + } + .padding(-2.2) } + func avatarSize(for index: Int, total: Int) -> CGFloat { + // I think these are ok for small but the order is off + if bubbleSize == .small { + switch total { + + case 1: + print("Index1: \(index)") + return 20 + case 2: + // //[20, 12] + print("Index2: \(index)") + return index == 0 ? 20 : 12 + + case 3: + //[16, 12, 10] + print("Index3: \(index)") + return index == 1 ? 10 : 16 + case 4: + // [16, 12, 10, 8] + print("Index4: \(index)") + return index == 1 ? 16 : index == 2 ? 12 : index == 3 ? 10 : 8 + default: + return 8 + } + + } + return CGFloat(total) + } +} +#Preview { + registerFonts() + return PBMultipleUsers() } diff --git a/Sources/Playbook/Resources/Helper Files/Mocks.swift b/Sources/Playbook/Resources/Helper Files/Mocks.swift index 7457ed5d7..c88391857 100644 --- a/Sources/Playbook/Resources/Helper Files/Mocks.swift +++ b/Sources/Playbook/Resources/Helper Files/Mocks.swift @@ -17,6 +17,7 @@ enum Mocks { static let luccile = PBUser(name: "Luccile Black", image: Image("Lu", bundle: .module), size: .small, title: "Senior User Experience Engineer") static let oneUser = [andrew] static let twoUsers = [andrew, ana] + static let threeUsers = [andrew, ana, patric] static let multipleUsers = [andrew, ana, patric, luccile] static let multipleUsersDictionary: [(String, PBUser)] = [(andrew.name, andrew), (ana.name, ana), (patric.name, patric), (luccile.name, luccile)] static let avatarXSmall = PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall) From 2386f613dc3a024f64439c1f9973c60019869e16 Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:01:31 -0400 Subject: [PATCH 03/10] commit wip --- .../Multiple Users/MultipleUsersCatalog.swift | 27 ++- .../User/Multiple Users/PBMultipleUsers.swift | 210 +++++++++++------- 2 files changed, 161 insertions(+), 76 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index d2aaf7da7..7bd33bea3 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -26,6 +26,9 @@ public struct MultipleUsersCatalog: View { PBDoc(title: "Small Bubble") { smallUserBubbleView } + PBDoc(title: "Medium Bubble") { + mediumUserBubbleView + } } } } @@ -58,7 +61,29 @@ extension MultipleUsersCatalog { ) PBMultipleUsers( users: Mocks.multipleUsers, - variant: .bubble + variant: .bubble, + bubbleSize: .small + ) + } + } + var mediumUserBubbleView: some View { + HStack(spacing: Spacing.small) { + PBMultipleUsers( + users: Mocks.twoUsers, + variant: .bubble, + bubbleSize: .medium, + bubbleCount: .two + ) + PBMultipleUsers( + users: Mocks.threeUsers, + variant: .bubble, + bubbleSize: .medium, + bubbleCount: .three + ) + PBMultipleUsers( + users: Mocks.multipleUsers, + variant: .bubble, + bubbleSize: .medium ) } } diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 83ac80f23..22ba5e2dc 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -36,10 +36,8 @@ public struct PBMultipleUsers: View { self.maxDisplayedUsers = maxDisplayedUsers } - + public var body: some View { -// multipleUsersView -// multipleUsersBubbleVariant variantView } } @@ -104,42 +102,7 @@ public extension PBMultipleUsers { enum BubbleCount { case two, three, four } -// var smallBubbleCount: [CGFloat] { -// switch bubbleCount { -// case .two: return [20, 12] -// case .three: return [16, 12, 10] -// case .four: return [16, 12, 10, 8] -// } -// } -// var medBubbleCount: [CGFloat] { -// switch bubbleCount { -// case .two: return [32, 16] -// case .three: return [24, 20, 16] -// case .four: return [28, 20, 16, 12] -// } -// } -// var largeBubbleCount: [CGFloat] { -// switch bubbleCount { -// case .two: return [44, 20] -// case .three: return [32, 24, 20] -// case .four: return [36, 28, 24, 16] -// } -// } -// var xLargeBubbleCount: [CGFloat] { -// switch bubbleCount { -// case .two: return [56, 24] -// case .three: return [44, 32, 24] -// case .four: return [44, 32, 24, 16] -// } -// } -// var smallBubbleSizes: [CGFloat] { -// switch bubbleSize { -// case .small: return smallBubbleCount -// case .medium: return medBubbleCount -// case .large: return largeBubbleCount -// case .xLarge: return xLargeBubbleCount -// } -// } + var multipleUsersView: some View { ZStack { ForEach(filteredUsers.0.indices, id: \.self) { index in @@ -158,60 +121,157 @@ public extension PBMultipleUsers { .padding(.leading, leadingPadding) .frame(width: totalWidth, alignment: .leading) } + var multipleUsersBubbleVariant: some View { CircularLayout { userBubbleView + } - .frame(width: 35, height: 35) + .padding(5) .background(Color.background(.light)) .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/) } var userBubbleView: some View { ForEach(filteredUsers.0.indices, id: \.self) { index in - let avSize = avatarSize(for: index, total: filteredUsers.0.count) + let avatarSize = avatarSize(for: index, total: filteredUsers.0.count) PBAvatar( image: filteredUsers.0[index].image, name: filteredUsers.0[index].name, - size: .custom(avSize), + size: .custom(avatarSize), wrapped: true ) - .padding(index == 2 ? -1.5 : -1.6) - - // use the index to continue this ?? - .offset(x: index == 1 ? -1 : -4, y: 0) - - // + .padding(bubbleSize == .small && index <= 1 ? -1 : -4) + .offset(x: avatarXPosition(for: index, total: filteredUsers.0.count), y: avatarYPosition(for: index, total: filteredUsers.0.count)) + } - .padding(-2.2) } + func avatarSize(for index: Int, total: Int) -> CGFloat { - // I think these are ok for small but the order is off - if bubbleSize == .small { - switch total { - - case 1: - print("Index1: \(index)") - return 20 - case 2: - // //[20, 12] - print("Index2: \(index)") - return index == 0 ? 20 : 12 - - case 3: - //[16, 12, 10] - print("Index3: \(index)") - return index == 1 ? 10 : 16 - case 4: - // [16, 12, 10, 8] - print("Index4: \(index)") - return index == 1 ? 16 : index == 2 ? 12 : index == 3 ? 10 : 8 - default: - return 8 - } - + let sizes: [BubbleSize: [Int: [CGFloat]]] = [ + .small: [ + 1: [20], + 2: [20, 12], + 3: [16, 12, 10], + 4: [16, 12, 10, 8] + ], + .medium: [ + 1: [32], + 2: [32, 16], + 3: [24, 20, 16], + 4: [28, 20, 16, 12] + ], + .large: [ + 1: [44], + 2: [44, 20], + 3: [32, 24, 20], + 4: [36, 28, 24, 16] + ], + .xLarge: [ + 1: [56], + 2: [56, 24], + 3: [44, 32, 24], + 4: [44, 32, 24, 16] + ] + ] + return sizes[bubbleSize]?[total]?[index] ?? 0 + } + +// func avatarSize(for index: Int, total: Int) -> CGFloat { +// switch bubbleSize { +// case .small: +// switch total { +// case 0, 1, 2: +// return index == 0 ? 20 : 12 +// case 3: +// return index == 0 ? 16 : index == 1 ? 12 : 10 +// case 4: +// return index == 0 ? 16 : index == 1 ? 12 : index == 2 ? 10 : 8 +// default: +// return 0 +// } +// case .medium: +// switch total { +// case 0, 1, 2: +// return index == 0 ? 32 : 16 +// case 3: +// return index == 0 ? 24 : index == 1 ? 20 : 16 +// case 4: +// return index == 0 ? 28 : index == 1 ? 20 : index == 2 ? 16 : 12 +// default: +// return 0 +// } +// case .large: +// switch total { +// case 0, 1, 2: +// return index == 0 ? 44 : 20 +// case 3: +// return index == 0 ? 32 : index == 1 ? 24 : 20 +// case 4: +// return index == 0 ? 36 : index == 1 ? 28 : index == 2 ? 24 : 16 +// default: +// return 0 +// } +// case .xLarge: +// switch total { +// case 0, 1, 2: +// return index == 0 ? 56 : 24 +// case 3: +// return index == 0 ? 44 : index == 1 ? 32 : 24 +// case 4: +// return index == 0 ? 44 : index == 1 ? 32 : index == 2 ? 24 : 16 +// default: +// return 0 +// } +// } +// } + func avatarXPosition(for index: Int, total: Int) -> CGFloat { + switch (total, index) { + case (2, 0): + return -6 + case (2, 1): + return 8 + case (3, 0): + return -6 + case (3, 1): + return 1 + case (3, 2): + return 6 + case (4, 0): + return -6 + case (4, 1): + return 1 + case (4, 2): + return -6 + case (4, 3): + return 25 + default: + return 0 } - return CGFloat(total) - } + } + func avatarYPosition(for index: Int, total: Int) -> CGFloat { + switch (total, index) { + case (2, 0): + return 0 + case (2, 1): + return -2 + case (3, 0): + return 0 + case (3, 1): + return -4 + case (3, 2): + return 4 + case (4, 0): + return 0 + case (4, 1): + return 4 + case (4, 2): + return -3 + case (4, 3): + return -10 + default: + return 0 + } + } } #Preview { registerFonts() From 3955a11be267670d960d7ace60ebb8a99dc62e66 Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:31:07 -0400 Subject: [PATCH 04/10] small message buuble --- .../Multiple Users/MultipleUsersCatalog.swift | 50 +++-------- .../User/Multiple Users/PBMultipleUsers.swift | 87 ++++--------------- 2 files changed, 33 insertions(+), 104 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index 7bd33bea3..2d482a5ea 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -12,23 +12,21 @@ import SwiftUI public struct MultipleUsersCatalog: View { public var body: some View { PBDocStack(title: "Multiple Users") { - PBDoc(title: "xSmall") { - xsmallView - } - - PBDoc(title: "Small") { - smallView - } - - PBDoc(title: "Small Reverse") { - smallReverseView - } +// PBDoc(title: "xSmall") { +// xsmallView +// } +// +// PBDoc(title: "Small") { +// smallView +// } +// +// PBDoc(title: "Small Reverse") { +// smallReverseView +// } +// PBDoc(title: "Small Bubble") { smallUserBubbleView } - PBDoc(title: "Medium Bubble") { - mediumUserBubbleView - } } } } @@ -62,28 +60,8 @@ extension MultipleUsersCatalog { PBMultipleUsers( users: Mocks.multipleUsers, variant: .bubble, - bubbleSize: .small - ) - } - } - var mediumUserBubbleView: some View { - HStack(spacing: Spacing.small) { - PBMultipleUsers( - users: Mocks.twoUsers, - variant: .bubble, - bubbleSize: .medium, - bubbleCount: .two - ) - PBMultipleUsers( - users: Mocks.threeUsers, - variant: .bubble, - bubbleSize: .medium, - bubbleCount: .three - ) - PBMultipleUsers( - users: Mocks.multipleUsers, - variant: .bubble, - bubbleSize: .medium + bubbleSize: .small, + bubbleCount: .four ) } } diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 22ba5e2dc..87635be17 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -92,17 +92,7 @@ public extension PBMultipleUsers { return width } -} - -public extension PBMultipleUsers { - - enum BubbleSize { - case small, medium, large, xLarge - } - enum BubbleCount { - case two, three, four - } - + var multipleUsersView: some View { ZStack { ForEach(filteredUsers.0.indices, id: \.self) { index in @@ -121,11 +111,20 @@ public extension PBMultipleUsers { .padding(.leading, leadingPadding) .frame(width: totalWidth, alignment: .leading) } - +} + +public extension PBMultipleUsers { + + enum BubbleSize { + case small, medium, large, xLarge + } + enum BubbleCount { + case two, three, four + } + var multipleUsersBubbleVariant: some View { CircularLayout { userBubbleView - } .padding(5) .background(Color.background(.light)) @@ -140,9 +139,9 @@ public extension PBMultipleUsers { size: .custom(avatarSize), wrapped: true ) - .padding(bubbleSize == .small && index <= 1 ? -1 : -4) + .padding(index <= 1 ? -1 : -5) .offset(x: avatarXPosition(for: index, total: filteredUsers.0.count), y: avatarYPosition(for: index, total: filteredUsers.0.count)) - + } } @@ -176,54 +175,6 @@ public extension PBMultipleUsers { return sizes[bubbleSize]?[total]?[index] ?? 0 } -// func avatarSize(for index: Int, total: Int) -> CGFloat { -// switch bubbleSize { -// case .small: -// switch total { -// case 0, 1, 2: -// return index == 0 ? 20 : 12 -// case 3: -// return index == 0 ? 16 : index == 1 ? 12 : 10 -// case 4: -// return index == 0 ? 16 : index == 1 ? 12 : index == 2 ? 10 : 8 -// default: -// return 0 -// } -// case .medium: -// switch total { -// case 0, 1, 2: -// return index == 0 ? 32 : 16 -// case 3: -// return index == 0 ? 24 : index == 1 ? 20 : 16 -// case 4: -// return index == 0 ? 28 : index == 1 ? 20 : index == 2 ? 16 : 12 -// default: -// return 0 -// } -// case .large: -// switch total { -// case 0, 1, 2: -// return index == 0 ? 44 : 20 -// case 3: -// return index == 0 ? 32 : index == 1 ? 24 : 20 -// case 4: -// return index == 0 ? 36 : index == 1 ? 28 : index == 2 ? 24 : 16 -// default: -// return 0 -// } -// case .xLarge: -// switch total { -// case 0, 1, 2: -// return index == 0 ? 56 : 24 -// case 3: -// return index == 0 ? 44 : index == 1 ? 32 : 24 -// case 4: -// return index == 0 ? 44 : index == 1 ? 32 : index == 2 ? 24 : 16 -// default: -// return 0 -// } -// } -// } func avatarXPosition(for index: Int, total: Int) -> CGFloat { switch (total, index) { case (2, 0): @@ -233,9 +184,9 @@ public extension PBMultipleUsers { case (3, 0): return -6 case (3, 1): - return 1 + return 3 case (3, 2): - return 6 + return 8 case (4, 0): return -6 case (4, 1): @@ -243,7 +194,7 @@ public extension PBMultipleUsers { case (4, 2): return -6 case (4, 3): - return 25 + return 22 default: return 0 } @@ -265,9 +216,9 @@ public extension PBMultipleUsers { case (4, 1): return 4 case (4, 2): - return -3 + return -4 case (4, 3): - return -10 + return -8 default: return 0 } From 3a3cf183fb7636c5ec9129d28603b528603837e5 Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:35:07 -0400 Subject: [PATCH 05/10] small multi-user bubble --- .../Multiple Users/MultipleUsersCatalog.swift | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index 2d482a5ea..dcb04d11b 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -12,18 +12,18 @@ import SwiftUI public struct MultipleUsersCatalog: View { public var body: some View { PBDocStack(title: "Multiple Users") { -// PBDoc(title: "xSmall") { -// xsmallView -// } -// -// PBDoc(title: "Small") { -// smallView -// } -// -// PBDoc(title: "Small Reverse") { -// smallReverseView -// } -// + PBDoc(title: "xSmall") { + xsmallView + } + + PBDoc(title: "Small") { + smallView + } + + PBDoc(title: "Small Reverse") { + smallReverseView + } + PBDoc(title: "Small Bubble") { smallUserBubbleView } From 80d30fcb3c88d2da9342904b67e81c9f366938a8 Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:38:08 -0400 Subject: [PATCH 06/10] padding commit --- .../Components/User/Multiple Users/PBMultipleUsers.swift | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 87635be17..d13f08091 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -139,9 +139,8 @@ public extension PBMultipleUsers { size: .custom(avatarSize), wrapped: true ) - .padding(index <= 1 ? -1 : -5) + .padding(index <= 1 ? -1 : -4) .offset(x: avatarXPosition(for: index, total: filteredUsers.0.count), y: avatarYPosition(for: index, total: filteredUsers.0.count)) - } } From c38c35bbfdfb90589145185a9e6d9780685970ba Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:42:03 -0400 Subject: [PATCH 07/10] commit --- .../Multiple Users/MultipleUsersCatalog.swift | 22 +++++++++---------- .../User/Multiple Users/PBMultipleUsers.swift | 6 ++--- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index dcb04d11b..a8d17a94f 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -12,17 +12,17 @@ import SwiftUI public struct MultipleUsersCatalog: View { public var body: some View { PBDocStack(title: "Multiple Users") { - PBDoc(title: "xSmall") { - xsmallView - } - - PBDoc(title: "Small") { - smallView - } - - PBDoc(title: "Small Reverse") { - smallReverseView - } +// PBDoc(title: "xSmall") { +// xsmallView +// } +// +// PBDoc(title: "Small") { +// smallView +// } +// +// PBDoc(title: "Small Reverse") { +// smallReverseView +// } PBDoc(title: "Small Bubble") { smallUserBubbleView diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index d13f08091..1e06fb4cd 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -191,9 +191,9 @@ public extension PBMultipleUsers { case (4, 1): return 1 case (4, 2): - return -6 + return -4 case (4, 3): - return 22 + return 24 default: return 0 } @@ -217,7 +217,7 @@ public extension PBMultipleUsers { case (4, 2): return -4 case (4, 3): - return -8 + return -10 default: return 0 } From 7264380910cf4fb6c69219d4f28cd541239e969d Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Tue, 23 Jul 2024 14:42:39 -0400 Subject: [PATCH 08/10] uncomment catalog commit --- .../Multiple Users/MultipleUsersCatalog.swift | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift index a8d17a94f..dcb04d11b 100644 --- a/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift +++ b/Sources/Playbook/Components/User/Multiple Users/MultipleUsersCatalog.swift @@ -12,17 +12,17 @@ import SwiftUI public struct MultipleUsersCatalog: View { public var body: some View { PBDocStack(title: "Multiple Users") { -// PBDoc(title: "xSmall") { -// xsmallView -// } -// -// PBDoc(title: "Small") { -// smallView -// } -// -// PBDoc(title: "Small Reverse") { -// smallReverseView -// } + PBDoc(title: "xSmall") { + xsmallView + } + + PBDoc(title: "Small") { + smallView + } + + PBDoc(title: "Small Reverse") { + smallReverseView + } PBDoc(title: "Small Bubble") { smallUserBubbleView From 1e79aa109bf47835b1ec7d847e7b29038607ad7a Mon Sep 17 00:00:00 2001 From: RachelRadford21 Date: Wed, 24 Jul 2024 09:15:34 -0400 Subject: [PATCH 09/10] commit --- .../Components/User/Multiple Users/PBMultipleUsers.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 1e06fb4cd..441cdacb4 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -52,7 +52,7 @@ public extension PBMultipleUsers { var variantView: some View { switch variant { case .linear: multipleUsersView - case .bubble: multipleUsersBubbleVariant + case .bubble: multipleUsersBubbleView } } var filteredUsers: ([PBUser], Int?) { @@ -122,7 +122,7 @@ public extension PBMultipleUsers { case two, three, four } - var multipleUsersBubbleVariant: some View { + var multipleUsersBubbleView: some View { CircularLayout { userBubbleView } From 29c012dcd55282dbc61311424acc171ada84b63a Mon Sep 17 00:00:00 2001 From: "isis.silva" Date: Tue, 6 Aug 2024 03:36:02 -0400 Subject: [PATCH 10/10] no message --- .../User/Multiple Users/PBMultipleUsers.swift | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift index 441cdacb4..cce757ac2 100644 --- a/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift +++ b/Sources/Playbook/Components/User/Multiple Users/PBMultipleUsers.swift @@ -18,6 +18,7 @@ public struct PBMultipleUsers: View { var bubbleCount: BubbleCount var maxDisplayedUsers: Int @State private var avSize: CGFloat = 20 + public init( users: [PBUser] = [], size: PBAvatar.Size = .small, @@ -34,7 +35,6 @@ public struct PBMultipleUsers: View { self.bubbleSize = bubbleSize self.bubbleCount = bubbleCount self.maxDisplayedUsers = maxDisplayedUsers - } public var body: some View { @@ -42,9 +42,7 @@ public struct PBMultipleUsers: View { } } - public extension PBMultipleUsers { - enum Variant { case linear, bubble } @@ -58,38 +56,31 @@ public extension PBMultipleUsers { var filteredUsers: ([PBUser], Int?) { var displayedUsers = users var additionalUsers = 0 - if users.count > maxDisplayedUsers { displayedUsers = Array(users.prefix(maxDisplayedUsers - 1)) additionalUsers = users.count - maxDisplayedUsers + 1 } - return (displayedUsers, additionalUsers) } func xOffset(index: Int) -> CGFloat { let offset = size.diameter / 1.5 * CGFloat(index) - return reversed ? -offset : offset } var leadingPadding: CGFloat { let padding = size.diameter / 1.5 * CGFloat(filteredUsers.0.count - (filteredUsers.1 == 0 ? 1 : 0)) - return reversed ? padding : 0 } var totalWidth: CGFloat { var width = size.diameter - if filteredUsers.0.count > 1 { width = size.diameter / 1.5 * CGFloat(filteredUsers.0.count - 1) + size.diameter } - if users.count > maxDisplayedUsers { width = size.diameter / 1.5 * CGFloat(maxDisplayedUsers - 1) + size.diameter } - return width } @@ -114,7 +105,6 @@ public extension PBMultipleUsers { } public extension PBMultipleUsers { - enum BubbleSize { case small, medium, large, xLarge } @@ -223,7 +213,12 @@ public extension PBMultipleUsers { } } } + #Preview { - registerFonts() - return PBMultipleUsers() + registerFonts() + return VStack { + PBMultipleUsers(users: Mocks.multipleUsers, variant: .linear) + PBMultipleUsers(users: Mocks.multipleUsers, variant: .bubble) + } + .padding() }