Fix CustomEmoji Baseline Offset (#1188)

2024-05-19 08:48:16 +00:00 · 2023-03-06 15:21:26 +01:00 · 2023-03-06 15:21:26 +01:00 · 2ac615b0ba
parent 28230ba184
commit 2ac615b0ba
19 changed files with 65 additions and 37 deletions
--- a/IceCubesApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/IceCubesApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@ -14,8 +14,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/divadretlaw/EmojiText",
      "state" : {
-        "revision" : "100661c947a2fa6b68c768ccae737a04476125fe",
-        "version" : "2.1.0"
+        "revision" : "3b1bd89937470d8970d3fdb6ac34943ecd2cda76",
+        "version" : "2.5.0"
      }
    },
    {
--- a/Packages/Account/Sources/Account/AccountDetailHeaderView.swift
+++ b/Packages/Account/Sources/Account/AccountDetailHeaderView.swift
@ -147,7 +147,8 @@ struct AccountDetailHeaderView: View {
            EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
              .font(.scaledHeadline)
              .foregroundColor(theme.labelColor)
-              .emojiSize(Font.scaledHeadlinePointSize)
+              .emojiSize(Font.scaledHeadlineFont.emojiSize)
+              .emojiBaselineOffset(Font.scaledHeadlineFont.emojiBaselineOffset)
            if account.bot {
              Text(Image(systemName: "poweroutlet.type.b.fill"))
                .font(.footnote)
@ -193,7 +194,8 @@ struct AccountDetailHeaderView: View {
      EmojiTextApp(account.note, emojis: account.emojis)
        .font(.scaledBody)
        .foregroundColor(theme.labelColor)
-        .emojiSize(Font.scaledBodyPointSize)
+        .emojiSize(Font.scaledBodyFont.emojiSize)
+        .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
        .padding(.top, 8)
        .textSelection(.enabled)
        .environment(\.openURL, OpenURLAction { url in
@ -271,7 +273,8 @@ struct AccountDetailHeaderView: View {
                    .foregroundColor(Color.green.opacity(0.80))
                }
                EmojiTextApp(field.value, emojis: viewModel.account?.emojis ?? [])
-                  .emojiSize(Font.scaledBodyPointSize)
+                  .emojiSize(Font.scaledBodyFont.emojiSize)
+                  .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
                  .foregroundColor(theme.tintColor)
                  .environment(\.openURL, OpenURLAction { url in
                    routerPath.handle(url: url)
--- a/Packages/Account/Sources/Account/AccountsList/AccountsListRow.swift
+++ b/Packages/Account/Sources/Account/AccountsList/AccountsListRow.swift
@ -44,14 +44,16 @@ public struct AccountsListRow: View {
      VStack(alignment: .leading, spacing: 2) {
        EmojiTextApp(.init(stringValue: viewModel.account.safeDisplayName), emojis: viewModel.account.emojis)
          .font(.scaledSubheadline)
-          .emojiSize(Font.scaledSubheadlinePointSize)
+          .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+          .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
          .fontWeight(.semibold)
        Text("@\(viewModel.account.acct)")
          .font(.scaledFootnote)
          .foregroundColor(.gray)
        EmojiTextApp(viewModel.account.note, emojis: viewModel.account.emojis)
          .font(.scaledFootnote)
-          .emojiSize(Font.scaledFootnotePointSize)
+          .emojiSize(Font.scaledFootnoteFont.emojiSize)
+          .emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
          .lineLimit(3)
          .environment(\.openURL, OpenURLAction { url in
            routerPath.handle(url: url)
--- a/Packages/Account/Sources/Account/Edit/EditAccountView.swift
+++ b/Packages/Account/Sources/Account/Edit/EditAccountView.swift
@ -108,7 +108,8 @@ public struct EditAccountView: View {
          TextField("account.edit.metadata-name-placeholder", text: $field.name)
            .font(.scaledHeadline)
          TextField("account.edit.metadata-value-placeholder", text: $field.value)
-            .emojiSize(Font.scaledBodyPointSize)
+            .emojiSize(Font.scaledBodyFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
            .foregroundColor(theme.tintColor)
        }
      }
--- a/Packages/AppAccount/Sources/AppAccount/AppAccountView.swift
+++ b/Packages/AppAccount/Sources/AppAccount/AppAccountView.swift
@ -61,7 +61,8 @@ public struct AppAccountView: View {
          EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
          Text("\(account.username)@\(viewModel.appAccount.server)")
            .font(.scaledSubheadline)
-            .emojiSize(Font.scaledSubheadlinePointSize)
+            .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
            .foregroundColor(.gray)
        }
      }
--- a/Packages/Conversations/Sources/Conversations/Detail/ConversationDetailView.swift
+++ b/Packages/Conversations/Sources/Conversations/Detail/ConversationDetailView.swift
@ -77,7 +77,8 @@ public struct ConversationDetailView: View {
          EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
            .font(.scaledHeadline)
            .foregroundColor(theme.labelColor)
-            .emojiSize(Font.scaledHeadlinePointSize)
+            .emojiSize(Font.scaledHeadlineFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledHeadlineFont.emojiBaselineOffset)
        } else {
          Text("Direct message with \(viewModel.conversation.accounts.count) people")
            .font(.scaledHeadline)
--- a/Packages/Conversations/Sources/Conversations/Detail/ConversationMessageView.swift
+++ b/Packages/Conversations/Sources/Conversations/Detail/ConversationMessageView.swift
@ -34,7 +34,8 @@ struct ConversationMessageView: View {
          EmojiTextApp(message.content, emojis: message.emojis)
            .font(.scaledBody)
            .foregroundColor(theme.labelColor)
-            .emojiSize(Font.scaledBodyPointSize)
+            .emojiSize(Font.scaledBodyFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
            .padding(6)
            .environment(\.openURL, OpenURLAction { url in
              routerPath.handleStatus(status: message, url: url)
--- a/Packages/Conversations/Sources/Conversations/List/ConversationsListRow.swift
+++ b/Packages/Conversations/Sources/Conversations/List/ConversationsListRow.swift
@ -24,7 +24,8 @@ struct ConversationsListRow: View {
                         emojis: conversation.accounts.flatMap { $0.emojis })
              .font(.scaledSubheadline)
              .foregroundColor(theme.labelColor)
-              .emojiSize(Font.scaledSubheadlinePointSize)
+              .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+              .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
              .fontWeight(.semibold)
              .foregroundColor(theme.labelColor)
              .multilineTextAlignment(.leading)
@ -43,7 +44,8 @@ struct ConversationsListRow: View {
            .multilineTextAlignment(.leading)
            .font(.scaledBody)
            .foregroundColor(theme.labelColor)
-            .emojiSize(Font.scaledBodyPointSize)
+            .emojiSize(Font.scaledBodyFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
        }
        Spacer()
      }
--- a/Packages/DesignSystem/Package.swift
+++ b/Packages/DesignSystem/Package.swift
@ -20,7 +20,7 @@ let package = Package(
    .package(name: "Env", path: "../Env"),
    .package(url: "https://github.com/markiv/SwiftUI-Shimmer", exact: "1.1.0"),
    .package(url: "https://github.com/kean/Nuke", branch: "nuke-12"),
-    .package(url: "https://github.com/divadretlaw/EmojiText", from: "2.0.0"),
+    .package(url: "https://github.com/divadretlaw/EmojiText", from: "2.5.0"),
  ],
  targets: [
    .target(
--- a/Packages/DesignSystem/Sources/DesignSystem/Font.swift
+++ b/Packages/DesignSystem/Sources/DesignSystem/Font.swift
@ -44,17 +44,17 @@ public extension Font {
  static var scaledHeadline: Font {
    customFont(size: userScaledFontSize(baseSize: headline), relativeTo: .headline).weight(.semibold)
  }
-
-  static var scaledHeadlinePointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: headline)).pointSize
+    
+  static var scaledHeadlineFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: headline))
  }

  static var scaledBody: Font {
    customFont(size: userScaledFontSize(baseSize: body), relativeTo: .body)
  }

-  static var scaledBodyPointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: body)).pointSize
+  static var scaledBodyFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: body))
  }

  static var scaledBodyUIFont: UIFont {
@ -65,32 +65,32 @@ public extension Font {
    customFont(size: userScaledFontSize(baseSize: callout), relativeTo: .callout)
  }

-  static var scaledCalloutPointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: body)).pointSize
+  static var scaledCalloutFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: body))
  }

  static var scaledSubheadline: Font {
    customFont(size: userScaledFontSize(baseSize: subheadline), relativeTo: .subheadline)
  }

-  static var scaledSubheadlinePointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: subheadline)).pointSize
+  static var scaledSubheadlineFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: subheadline))
  }

  static var scaledFootnote: Font {
    customFont(size: userScaledFontSize(baseSize: footnote), relativeTo: .footnote)
  }

-  static var scaledFootnotePointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: footnote)).pointSize
+  static var scaledFootnoteFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: footnote))
  }

  static var scaledCaption: Font {
    customFont(size: userScaledFontSize(baseSize: caption), relativeTo: .caption)
  }

-  static var scaledCaptionPointSize: CGFloat {
-    customUIFont(size: userScaledFontSize(baseSize: caption)).pointSize
+  static var scaledCaptionFont: UIFont {
+    customUIFont(size: userScaledFontSize(baseSize: caption))
  }
 }

@ -101,4 +101,11 @@ public extension UIFont {
    }
    return UIFont(descriptor: descriptor, size: pointSize)
  }
+  var emojiSize: CGFloat {
+    self.pointSize
+  }
+  var emojiBaselineOffset: CGFloat {
+    // Center emoji with capital letter size of font
+    -(self.emojiSize - self.capHeight) / 2
+  }
 }
--- a/Packages/Lists/Sources/Lists/Edit/ListEditView.swift
+++ b/Packages/Lists/Sources/Lists/Edit/ListEditView.swift
@ -33,7 +33,8 @@ public struct ListEditView: View {
                VStack(alignment: .leading) {
                  EmojiTextApp(.init(stringValue: account.safeDisplayName),
                               emojis: account.emojis)
-                    .emojiSize(Font.scaledBodyPointSize)
+                    .emojiSize(Font.scaledBodyFont.emojiSize)
+                    .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
                  Text("@\(account.acct)")
                    .foregroundColor(.gray)
                    .font(.scaledFootnote)
--- a/Packages/Notifications/Sources/Notifications/NotificationRowView.swift
+++ b/Packages/Notifications/Sources/Notifications/NotificationRowView.swift
@ -105,7 +105,8 @@ struct NotificationRowView: View {
                         .foregroundColor(.gray)
                     })
                     .font(.scaledSubheadline)
-                     .emojiSize(Font.scaledSubheadlinePointSize)
+                     .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+                     .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
                     .fontWeight(.semibold)
                     .lineLimit(3)
                     .fixedSize(horizontal: false, vertical: true)
@ -162,7 +163,8 @@ struct NotificationRowView: View {
                       emojis: notification.accounts[0].emojis)
            .lineLimit(3)
            .font(.scaledCallout)
-            .emojiSize(Font.scaledCalloutPointSize)
+            .emojiSize(Font.scaledCalloutFont.emojiSize)
+            .emojiBaselineOffset(Font.scaledCalloutFont.emojiBaselineOffset)
            .foregroundColor(.gray)
            .environment(\.openURL, OpenURLAction { url in
              routerPath.handle(url: url)
--- a/Packages/Status/Sources/Status/Editor/Components/StatusEditorAutoCompleteView.swift
+++ b/Packages/Status/Sources/Status/Editor/Components/StatusEditorAutoCompleteView.swift
@ -34,7 +34,8 @@ struct StatusEditorAutoCompleteView: View {
          VStack(alignment: .leading) {
            EmojiTextApp(.init(stringValue: account.safeDisplayName),
                         emojis: account.emojis)
-              .emojiSize(Font.scaledFootnotePointSize)
+              .emojiSize(Font.scaledFootnoteFont.emojiSize)
+              .emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
              .font(.scaledFootnote)
              .foregroundColor(theme.labelColor)
            Text("@\(account.acct)")
--- a/Packages/Status/Sources/Status/Embed/StatusEmbededView.swift
+++ b/Packages/Status/Sources/Status/Embed/StatusEmbededView.swift
@ -47,7 +47,8 @@ public struct StatusEmbeddedView: View {
      VStack(alignment: .leading, spacing: 0) {
        EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
          .font(.scaledFootnote)
-          .emojiSize(Font.scaledFootnotePointSize)
+          .emojiSize(Font.scaledFootnoteFont.emojiSize)
+          .emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
          .fontWeight(.semibold)
        Group {
          Text("@\(account.acct)") +
--- a/Packages/Status/Sources/Status/History/StatusEditHistoryView.swift
+++ b/Packages/Status/Sources/Status/History/StatusEditHistoryView.swift
@ -26,7 +26,8 @@ public struct StatusEditHistoryView: View {
              VStack(alignment: .leading, spacing: 8) {
                EmojiTextApp(edit.content, emojis: edit.emojis)
                  .font(.scaledBody)
-                  .emojiSize(Font.scaledBodyPointSize)
+                  .emojiSize(Font.scaledBodyFont.emojiSize)
+                  .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
                Group {
                  Text(edit.createdAt.asDate, style: .date) +
                    Text("status.summary.at-time") +
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowHeaderView.swift
+++ b/Packages/Status/Sources/Status/Row/Subviews/StatusRowHeaderView.swift
@ -40,7 +40,8 @@ struct StatusRowHeaderView: View {
                         emojis: viewModel.finalStatus.account.emojis)
              .font(.scaledSubheadline)
              .foregroundColor(theme.labelColor)
-              .emojiSize(Font.scaledSubheadlinePointSize)
+              .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+              .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
              .fontWeight(.semibold)
              .lineLimit(1)
            accountBadgeView
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowReblogView.swift
+++ b/Packages/Status/Sources/Status/Row/Subviews/StatusRowReblogView.swift
@ -19,7 +19,8 @@ struct StatusRowReblogView: View {
          + Text("status.row.was-boosted")
      )
      .font(.scaledFootnote)
-      .emojiSize(Font.scaledFootnotePointSize)
+      .emojiSize(Font.scaledFootnoteFont.emojiSize)
+      .emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
      .foregroundColor(.gray)
      .fontWeight(.semibold)
      .onTapGesture {
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowSpoilerView.swift
+++ b/Packages/Status/Sources/Status/Row/Subviews/StatusRowSpoilerView.swift
@ -13,7 +13,8 @@ struct StatusRowSpoilerView: View {
        .foregroundColor(.secondary)
      EmojiTextApp(status.spoilerText, emojis: status.emojis, language: status.language)
        .font(.system(.subheadline, weight: .bold))
-        .emojiSize(Font.scaledSubheadlinePointSize)
+        .emojiSize(Font.scaledSubheadlineFont.emojiSize)
+        .emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
        .foregroundColor(.secondary)
        .multilineTextAlignment(.leading)
      Spacer()
--- a/Packages/Status/Sources/Status/Row/Subviews/StatusRowTextView.swift
+++ b/Packages/Status/Sources/Status/Row/Subviews/StatusRowTextView.swift
@ -17,7 +17,8 @@ struct StatusRowTextView: View {
                     lineLimit: viewModel.lineLimit)
          .font(.scaledBody)
          .foregroundColor(viewModel.textDisabled ? .gray : theme.labelColor)
-          .emojiSize(Font.scaledBodyPointSize)
+          .emojiSize(Font.scaledBodyFont.emojiSize)
+          .emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
          .environment(\.openURL, OpenURLAction { url in
            viewModel.routerPath.handleStatus(status: viewModel.finalStatus, url: url)
          })