Use custom fonts for text chips in the share extension

This commit is contained in:
Jackson Harper 2023-01-20 19:48:06 +08:00
parent 12f40a61b8
commit 9703bba7ab
6 changed files with 31 additions and 41 deletions

View file

@ -1,8 +1,11 @@
import SwiftUI
import Utils
import Views
public extension PlatformViewController {
static func makeShareExtensionController(extensionContext: NSExtensionContext?) -> PlatformViewController {
registerFonts()
let hostingController = PlatformHostingController(
rootView: ShareExtensionView(extensionContext: extensionContext)
)

View file

@ -200,12 +200,13 @@ public struct ShareExtensionView: View {
searchButton
.onTapGesture { showSearchLabels = true }
VStack {
ScrollView {
LabelsMasonaryView(labels: labelsViewModel.labels,
selectedLabels: labelsViewModel.selectedLabels,
onLabelTap: onLabelTap)
Spacer()
}
.padding(.bottom, 16)
.background(Color.appButtonBackground)
.cornerRadius(8)
}

View file

@ -37,8 +37,8 @@ struct LabelsMasonaryView: View {
GeometryReader { geometry in
self.generateContent(in: geometry)
}
}
.frame(height: totalHeight)
}.padding(5)
.frame(height: totalHeight)
}
private func generateContent(in geom: GeometryProxy) -> some View {
@ -48,7 +48,7 @@ struct LabelsMasonaryView: View {
return ZStack(alignment: .topLeading) {
ForEach(self.labelItems, id: \.label.self) { label in
self.item(for: label)
.padding(.horizontal, 10)
.padding(.horizontal, 5)
.padding(.vertical, 5)
.alignmentGuide(.leading, computeValue: { dim in
if abs(width - dim.width) > geom.size.width {
@ -76,7 +76,7 @@ struct LabelsMasonaryView: View {
}
private func item(for item: (label: LinkedItemLabel, selected: Bool)) -> some View {
let chip = TextChip(feedItemLabel: item.label, negated: false, checked: item.selected) { chip in
let chip = TextChip(feedItemLabel: item.label, negated: false, checked: item.selected, padded: true) { chip in
onLabelTap(item.label, chip)
}
return chip

View file

@ -2,12 +2,12 @@
"colors" : [
{
"color" : {
"color-space" : "srgb",
"color-space" : "display-p3",
"components" : {
"alpha" : "1.000",
"blue" : "0x34",
"green" : "0xD2",
"red" : "0xFF"
"blue" : "0x57",
"green" : "0xD4",
"red" : "0xF8"
}
},
"idiom" : "universal"

View file

@ -66,8 +66,8 @@ public extension Font {
}
/// 12pt, Inter-Regular
static var appCaptionBold: Font {
.customFont(InterFont.bold.rawValue, size: 12, relativeTo: .caption)
static var appCaptionMedium: Font {
.customFont(InterFont.medium.rawValue, size: 12, relativeTo: .caption)
}
/// 11pt, Inter-Regular

View file

@ -6,6 +6,7 @@ public struct TextChip: View {
@Environment(\.colorScheme) var colorScheme
let checked: Bool
let padded: Bool
var onTap: ((TextChip) -> Void)?
public init(text: String, color: Color, negated: Bool = false) {
@ -13,6 +14,7 @@ public struct TextChip: View {
self.color = color
self.negated = negated
self.checked = false
self.padded = false
}
public init?(feedItemLabel: LinkedItemLabel, negated: Bool = false) {
@ -22,9 +24,10 @@ public struct TextChip: View {
self.color = color
self.negated = negated
self.checked = false
self.padded = false
}
public init?(feedItemLabel: LinkedItemLabel, negated: Bool = false, checked: Bool = false, onTap: ((TextChip) -> Void)?) {
public init?(feedItemLabel: LinkedItemLabel, negated: Bool = false, checked: Bool = false, padded: Bool = false, onTap: ((TextChip) -> Void)?) {
guard let color = Color(hex: feedItemLabel.color ?? "") else {
return nil
}
@ -34,6 +37,7 @@ public struct TextChip: View {
self.negated = negated
self.onTap = onTap
self.checked = checked
self.padded = padded
}
public let text: String
@ -45,37 +49,28 @@ public struct TextChip: View {
return .white
}
if colorScheme == .light {
return luminance > 0.5 ? .black : .white
}
if luminance > 0.2 {
return color
}
// lighten the color by 20%
return Color.lighten(color: color, by: 20)
return luminance > 0.5 ? .black : .white
}
var backgroundColor: Color {
color.opacity(colorScheme == .dark ? 0.2 : 1)
color.opacity(0.9)
}
var checkedBorderColor: Color {
colorScheme == .dark ? Color.appCtaYellow : Color.black
}
var borderColor: Color {
if colorScheme == .dark {
return textColor
} else {
return color.opacity(0.7)
}
checked ? checkedBorderColor : Color.clear
}
public var body: some View {
ZStack(alignment: .topTrailing) {
Text(text)
.strikethrough(color: negated ? textColor : .clear)
.padding(.horizontal, 8)
.padding(.vertical, 5)
.font(.appCaptionBold)
.padding(.horizontal, padded ? 10 : 8)
.padding(.vertical, padded ? 8 : 5)
.font(.appCaptionMedium)
.foregroundColor(textColor)
.lineLimit(1)
.background(
@ -84,18 +79,9 @@ public struct TextChip: View {
)
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(borderColor, lineWidth: 1)
.stroke(borderColor, lineWidth: 2)
)
.padding(1)
.overlay(alignment: .topTrailing) {
if checked {
Image(systemName: "checkmark.circle.fill")
.font(.appBody)
.symbolVariant(.circle.fill)
.foregroundStyle(Color.appBackground, Color.appGreenSuccess)
.padding([.top, .trailing], -6)
}
}
}.onTapGesture {
if let onTap = onTap {
onTap(self)