Fix CustomEmoji Baseline Offset (#1188)

This commit is contained in:
David Walter 2023-03-06 15:21:26 +01:00 committed by GitHub
parent 28230ba184
commit 2ac615b0ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 65 additions and 37 deletions

View file

@ -14,8 +14,8 @@
"kind" : "remoteSourceControl", "kind" : "remoteSourceControl",
"location" : "https://github.com/divadretlaw/EmojiText", "location" : "https://github.com/divadretlaw/EmojiText",
"state" : { "state" : {
"revision" : "100661c947a2fa6b68c768ccae737a04476125fe", "revision" : "3b1bd89937470d8970d3fdb6ac34943ecd2cda76",
"version" : "2.1.0" "version" : "2.5.0"
} }
}, },
{ {

View file

@ -147,7 +147,8 @@ struct AccountDetailHeaderView: View {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis) EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
.font(.scaledHeadline) .font(.scaledHeadline)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledHeadlinePointSize) .emojiSize(Font.scaledHeadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledHeadlineFont.emojiBaselineOffset)
if account.bot { if account.bot {
Text(Image(systemName: "poweroutlet.type.b.fill")) Text(Image(systemName: "poweroutlet.type.b.fill"))
.font(.footnote) .font(.footnote)
@ -193,7 +194,8 @@ struct AccountDetailHeaderView: View {
EmojiTextApp(account.note, emojis: account.emojis) EmojiTextApp(account.note, emojis: account.emojis)
.font(.scaledBody) .font(.scaledBody)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
.padding(.top, 8) .padding(.top, 8)
.textSelection(.enabled) .textSelection(.enabled)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
@ -271,7 +273,8 @@ struct AccountDetailHeaderView: View {
.foregroundColor(Color.green.opacity(0.80)) .foregroundColor(Color.green.opacity(0.80))
} }
EmojiTextApp(field.value, emojis: viewModel.account?.emojis ?? []) EmojiTextApp(field.value, emojis: viewModel.account?.emojis ?? [])
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
.foregroundColor(theme.tintColor) .foregroundColor(theme.tintColor)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
routerPath.handle(url: url) routerPath.handle(url: url)

View file

@ -44,14 +44,16 @@ public struct AccountsListRow: View {
VStack(alignment: .leading, spacing: 2) { VStack(alignment: .leading, spacing: 2) {
EmojiTextApp(.init(stringValue: viewModel.account.safeDisplayName), emojis: viewModel.account.emojis) EmojiTextApp(.init(stringValue: viewModel.account.safeDisplayName), emojis: viewModel.account.emojis)
.font(.scaledSubheadline) .font(.scaledSubheadline)
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold) .fontWeight(.semibold)
Text("@\(viewModel.account.acct)") Text("@\(viewModel.account.acct)")
.font(.scaledFootnote) .font(.scaledFootnote)
.foregroundColor(.gray) .foregroundColor(.gray)
EmojiTextApp(viewModel.account.note, emojis: viewModel.account.emojis) EmojiTextApp(viewModel.account.note, emojis: viewModel.account.emojis)
.font(.scaledFootnote) .font(.scaledFootnote)
.emojiSize(Font.scaledFootnotePointSize) .emojiSize(Font.scaledFootnoteFont.emojiSize)
.emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
.lineLimit(3) .lineLimit(3)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
routerPath.handle(url: url) routerPath.handle(url: url)

View file

@ -108,7 +108,8 @@ public struct EditAccountView: View {
TextField("account.edit.metadata-name-placeholder", text: $field.name) TextField("account.edit.metadata-name-placeholder", text: $field.name)
.font(.scaledHeadline) .font(.scaledHeadline)
TextField("account.edit.metadata-value-placeholder", text: $field.value) TextField("account.edit.metadata-value-placeholder", text: $field.value)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
.foregroundColor(theme.tintColor) .foregroundColor(theme.tintColor)
} }
} }

View file

@ -61,7 +61,8 @@ public struct AppAccountView: View {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis) EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
Text("\(account.username)@\(viewModel.appAccount.server)") Text("\(account.username)@\(viewModel.appAccount.server)")
.font(.scaledSubheadline) .font(.scaledSubheadline)
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.foregroundColor(.gray) .foregroundColor(.gray)
} }
} }

View file

@ -77,7 +77,8 @@ public struct ConversationDetailView: View {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis) EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
.font(.scaledHeadline) .font(.scaledHeadline)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledHeadlinePointSize) .emojiSize(Font.scaledHeadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledHeadlineFont.emojiBaselineOffset)
} else { } else {
Text("Direct message with \(viewModel.conversation.accounts.count) people") Text("Direct message with \(viewModel.conversation.accounts.count) people")
.font(.scaledHeadline) .font(.scaledHeadline)

View file

@ -34,7 +34,8 @@ struct ConversationMessageView: View {
EmojiTextApp(message.content, emojis: message.emojis) EmojiTextApp(message.content, emojis: message.emojis)
.font(.scaledBody) .font(.scaledBody)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
.padding(6) .padding(6)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
routerPath.handleStatus(status: message, url: url) routerPath.handleStatus(status: message, url: url)

View file

@ -24,7 +24,8 @@ struct ConversationsListRow: View {
emojis: conversation.accounts.flatMap { $0.emojis }) emojis: conversation.accounts.flatMap { $0.emojis })
.font(.scaledSubheadline) .font(.scaledSubheadline)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold) .fontWeight(.semibold)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.multilineTextAlignment(.leading) .multilineTextAlignment(.leading)
@ -43,7 +44,8 @@ struct ConversationsListRow: View {
.multilineTextAlignment(.leading) .multilineTextAlignment(.leading)
.font(.scaledBody) .font(.scaledBody)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
} }
Spacer() Spacer()
} }

View file

@ -20,7 +20,7 @@ let package = Package(
.package(name: "Env", path: "../Env"), .package(name: "Env", path: "../Env"),
.package(url: "https://github.com/markiv/SwiftUI-Shimmer", exact: "1.1.0"), .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/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: [ targets: [
.target( .target(

View file

@ -44,17 +44,17 @@ public extension Font {
static var scaledHeadline: Font { static var scaledHeadline: Font {
customFont(size: userScaledFontSize(baseSize: headline), relativeTo: .headline).weight(.semibold) customFont(size: userScaledFontSize(baseSize: headline), relativeTo: .headline).weight(.semibold)
} }
static var scaledHeadlinePointSize: CGFloat { static var scaledHeadlineFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: headline)).pointSize customUIFont(size: userScaledFontSize(baseSize: headline))
} }
static var scaledBody: Font { static var scaledBody: Font {
customFont(size: userScaledFontSize(baseSize: body), relativeTo: .body) customFont(size: userScaledFontSize(baseSize: body), relativeTo: .body)
} }
static var scaledBodyPointSize: CGFloat { static var scaledBodyFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: body)).pointSize customUIFont(size: userScaledFontSize(baseSize: body))
} }
static var scaledBodyUIFont: UIFont { static var scaledBodyUIFont: UIFont {
@ -65,32 +65,32 @@ public extension Font {
customFont(size: userScaledFontSize(baseSize: callout), relativeTo: .callout) customFont(size: userScaledFontSize(baseSize: callout), relativeTo: .callout)
} }
static var scaledCalloutPointSize: CGFloat { static var scaledCalloutFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: body)).pointSize customUIFont(size: userScaledFontSize(baseSize: body))
} }
static var scaledSubheadline: Font { static var scaledSubheadline: Font {
customFont(size: userScaledFontSize(baseSize: subheadline), relativeTo: .subheadline) customFont(size: userScaledFontSize(baseSize: subheadline), relativeTo: .subheadline)
} }
static var scaledSubheadlinePointSize: CGFloat { static var scaledSubheadlineFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: subheadline)).pointSize customUIFont(size: userScaledFontSize(baseSize: subheadline))
} }
static var scaledFootnote: Font { static var scaledFootnote: Font {
customFont(size: userScaledFontSize(baseSize: footnote), relativeTo: .footnote) customFont(size: userScaledFontSize(baseSize: footnote), relativeTo: .footnote)
} }
static var scaledFootnotePointSize: CGFloat { static var scaledFootnoteFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: footnote)).pointSize customUIFont(size: userScaledFontSize(baseSize: footnote))
} }
static var scaledCaption: Font { static var scaledCaption: Font {
customFont(size: userScaledFontSize(baseSize: caption), relativeTo: .caption) customFont(size: userScaledFontSize(baseSize: caption), relativeTo: .caption)
} }
static var scaledCaptionPointSize: CGFloat { static var scaledCaptionFont: UIFont {
customUIFont(size: userScaledFontSize(baseSize: caption)).pointSize customUIFont(size: userScaledFontSize(baseSize: caption))
} }
} }
@ -101,4 +101,11 @@ public extension UIFont {
} }
return UIFont(descriptor: descriptor, size: pointSize) 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
}
} }

View file

@ -33,7 +33,8 @@ public struct ListEditView: View {
VStack(alignment: .leading) { VStack(alignment: .leading) {
EmojiTextApp(.init(stringValue: account.safeDisplayName), EmojiTextApp(.init(stringValue: account.safeDisplayName),
emojis: account.emojis) emojis: account.emojis)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
Text("@\(account.acct)") Text("@\(account.acct)")
.foregroundColor(.gray) .foregroundColor(.gray)
.font(.scaledFootnote) .font(.scaledFootnote)

View file

@ -105,7 +105,8 @@ struct NotificationRowView: View {
.foregroundColor(.gray) .foregroundColor(.gray)
}) })
.font(.scaledSubheadline) .font(.scaledSubheadline)
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold) .fontWeight(.semibold)
.lineLimit(3) .lineLimit(3)
.fixedSize(horizontal: false, vertical: true) .fixedSize(horizontal: false, vertical: true)
@ -162,7 +163,8 @@ struct NotificationRowView: View {
emojis: notification.accounts[0].emojis) emojis: notification.accounts[0].emojis)
.lineLimit(3) .lineLimit(3)
.font(.scaledCallout) .font(.scaledCallout)
.emojiSize(Font.scaledCalloutPointSize) .emojiSize(Font.scaledCalloutFont.emojiSize)
.emojiBaselineOffset(Font.scaledCalloutFont.emojiBaselineOffset)
.foregroundColor(.gray) .foregroundColor(.gray)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
routerPath.handle(url: url) routerPath.handle(url: url)

View file

@ -34,7 +34,8 @@ struct StatusEditorAutoCompleteView: View {
VStack(alignment: .leading) { VStack(alignment: .leading) {
EmojiTextApp(.init(stringValue: account.safeDisplayName), EmojiTextApp(.init(stringValue: account.safeDisplayName),
emojis: account.emojis) emojis: account.emojis)
.emojiSize(Font.scaledFootnotePointSize) .emojiSize(Font.scaledFootnoteFont.emojiSize)
.emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
.font(.scaledFootnote) .font(.scaledFootnote)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
Text("@\(account.acct)") Text("@\(account.acct)")

View file

@ -47,7 +47,8 @@ public struct StatusEmbeddedView: View {
VStack(alignment: .leading, spacing: 0) { VStack(alignment: .leading, spacing: 0) {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis) EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
.font(.scaledFootnote) .font(.scaledFootnote)
.emojiSize(Font.scaledFootnotePointSize) .emojiSize(Font.scaledFootnoteFont.emojiSize)
.emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
.fontWeight(.semibold) .fontWeight(.semibold)
Group { Group {
Text("@\(account.acct)") + Text("@\(account.acct)") +

View file

@ -26,7 +26,8 @@ public struct StatusEditHistoryView: View {
VStack(alignment: .leading, spacing: 8) { VStack(alignment: .leading, spacing: 8) {
EmojiTextApp(edit.content, emojis: edit.emojis) EmojiTextApp(edit.content, emojis: edit.emojis)
.font(.scaledBody) .font(.scaledBody)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
Group { Group {
Text(edit.createdAt.asDate, style: .date) + Text(edit.createdAt.asDate, style: .date) +
Text("status.summary.at-time") + Text("status.summary.at-time") +

View file

@ -40,7 +40,8 @@ struct StatusRowHeaderView: View {
emojis: viewModel.finalStatus.account.emojis) emojis: viewModel.finalStatus.account.emojis)
.font(.scaledSubheadline) .font(.scaledSubheadline)
.foregroundColor(theme.labelColor) .foregroundColor(theme.labelColor)
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.fontWeight(.semibold) .fontWeight(.semibold)
.lineLimit(1) .lineLimit(1)
accountBadgeView accountBadgeView

View file

@ -19,7 +19,8 @@ struct StatusRowReblogView: View {
+ Text("status.row.was-boosted") + Text("status.row.was-boosted")
) )
.font(.scaledFootnote) .font(.scaledFootnote)
.emojiSize(Font.scaledFootnotePointSize) .emojiSize(Font.scaledFootnoteFont.emojiSize)
.emojiBaselineOffset(Font.scaledFootnoteFont.emojiBaselineOffset)
.foregroundColor(.gray) .foregroundColor(.gray)
.fontWeight(.semibold) .fontWeight(.semibold)
.onTapGesture { .onTapGesture {

View file

@ -13,7 +13,8 @@ struct StatusRowSpoilerView: View {
.foregroundColor(.secondary) .foregroundColor(.secondary)
EmojiTextApp(status.spoilerText, emojis: status.emojis, language: status.language) EmojiTextApp(status.spoilerText, emojis: status.emojis, language: status.language)
.font(.system(.subheadline, weight: .bold)) .font(.system(.subheadline, weight: .bold))
.emojiSize(Font.scaledSubheadlinePointSize) .emojiSize(Font.scaledSubheadlineFont.emojiSize)
.emojiBaselineOffset(Font.scaledSubheadlineFont.emojiBaselineOffset)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.multilineTextAlignment(.leading) .multilineTextAlignment(.leading)
Spacer() Spacer()

View file

@ -17,7 +17,8 @@ struct StatusRowTextView: View {
lineLimit: viewModel.lineLimit) lineLimit: viewModel.lineLimit)
.font(.scaledBody) .font(.scaledBody)
.foregroundColor(viewModel.textDisabled ? .gray : theme.labelColor) .foregroundColor(viewModel.textDisabled ? .gray : theme.labelColor)
.emojiSize(Font.scaledBodyPointSize) .emojiSize(Font.scaledBodyFont.emojiSize)
.emojiBaselineOffset(Font.scaledBodyFont.emojiBaselineOffset)
.environment(\.openURL, OpenURLAction { url in .environment(\.openURL, OpenURLAction { url in
viewModel.routerPath.handleStatus(status: viewModel.finalStatus, url: url) viewModel.routerPath.handleStatus(status: viewModel.finalStatus, url: url)
}) })