new pill view color and size

element-hq · Oct 23, 2023 · 019dc32 · 019dc32
1 parent 68442d5
commit 019dc32
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 24 deletions.
diff --git a/ElementX.xcodeproj/project.pbxproj b/ElementX.xcodeproj/project.pbxproj
@@ -6460,7 +6460,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = d6938dde5b345e5e7a8dea06a0481adaa5246327;
+				revision = 01b71e45542a73cb2dd8d5e56d289abff68fe715;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

diff --git a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -13,7 +13,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-ios",
       "state" : {
-        "revision" : "d6938dde5b345e5e7a8dea06a0481adaa5246327"
+        "revision" : "01b71e45542a73cb2dd8d5e56d289abff68fe715"
       }
     },
     {

diff --git a/ElementX/Sources/Other/Pills/PillView.swift b/ElementX/Sources/Other/Pills/PillView.swift
@@ -21,19 +21,27 @@ struct PillView: View {
     @ObservedObject var context: PillContext
     /// callback triggerd by changes in the display text
     let didChangeText: () -> Void
+
+    var textColor: Color {
+        context.viewState.isOwnMention ? .compound.textOnSolidPrimary : .compound.textSuccessPrimary
+    }
+
+    var backgroundColor: Color {
+        context.viewState.isOwnMention ? .compound._bgOwnPill : .compound._bgPill
+    }
 
     var body: some View {
-        HStack(spacing: 4) {
-            LoadableAvatarImage(url: context.viewState.avatarURL, name: context.viewState.name, contentID: context.viewState.contentID, avatarSize: .custom(24), imageProvider: imageProvider)
+        HStack(spacing: 2) {
+            LoadableAvatarImage(url: context.viewState.avatarURL, name: context.viewState.name, contentID: context.viewState.contentID, avatarSize: .custom(16), imageProvider: imageProvider)
             Text(context.viewState.displayText)
                 .font(.compound.bodyLGSemibold)
-                .foregroundColor(.compound.textOnSolidPrimary)
+                .foregroundColor(textColor)
                 .lineLimit(1)
         }
-        .padding(.horizontal, 8)
-        .padding(.vertical, 4)
-        // for now design has defined no color so we will just use gray
-        .background(Capsule().foregroundColor(context.viewState.isOwnMention ? .compound.bgCriticalPrimary : .gray))
+        .padding(.leading, 4)
+        .padding(.trailing, 6)
+        .padding(.vertical, 1)
+        .background { Capsule().foregroundColor(backgroundColor) }
         .frame(maxWidth: PillConstants.maxWidth)
         .onChange(of: context.viewState.displayText) { _ in
             didChangeText()
@@ -53,11 +61,9 @@ struct PillView_Previews: PreviewProvider, TestablePreview {
             .previewDisplayName("Loading Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: false))) { }
-            // To simulate the trimming that happens at UIKit level
             .previewDisplayName("Loaded Long")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .loadedUser(isOwn: true))) { }
-            // To simulate the trimming that happens at UIKit level
             .previewDisplayName("Loaded Long Own")
         PillView(imageProvider: mockMediaProvider,
                  context: PillContext.mock(type: .allUsers)) { }

diff --git a/UnitTests/__Snapshots__/PreviewTests/test_messageText.Custom-Attachment.png b/UnitTests/__Snapshots__/PreviewTests/test_messageText.Custom-Attachment.png
diff --git a/UnitTests/__Snapshots__/PreviewTests/test_pillView.All-Users.png b/UnitTests/__Snapshots__/PreviewTests/test_pillView.All-Users.png
diff --git a/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loaded-Long-Own.png b/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loaded-Long-Own.png
diff --git a/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loaded-Long.png b/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loaded-Long.png
diff --git a/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loading-Own.png b/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loading-Own.png
diff --git a/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loading.png b/UnitTests/__Snapshots__/PreviewTests/test_pillView.Loading.png
diff --git a/project.yml b/project.yml
@@ -49,7 +49,7 @@ packages:
     # path: ../matrix-rust-sdk
   Compound:
     url: https://github.com/vector-im/compound-ios
-    revision: d6938dde5b345e5e7a8dea06a0481adaa5246327
+    revision: 01b71e45542a73cb2dd8d5e56d289abff68fe715
     # path: ../compound-ios
   AnalyticsEvents:
     url: https://github.com/matrix-org/matrix-analytics-events