1
0
mirror of git://jb55.com/damus synced 2024-09-16 02:03:45 +00:00

emojis: make width dynamic and font bigger

add calculateOverlayWidth to support this

Closes: https://github.com/damus-io/damus/pull/1542
Signed-off-by: William Casarin <jb55@jb55.com>
This commit is contained in:
Suhail Saqan 2023-09-07 17:57:19 -07:00 committed by William Casarin
parent 6f35de65f9
commit 7f6a702412

View File

@ -256,8 +256,8 @@ struct LikeButton: View {
Group {
if isReactionsVisible {
ZStack {
RoundedRectangle(cornerRadius: 10)
.frame(width: 250, height: 50)
RoundedRectangle(cornerRadius: 20)
.frame(width: calculateOverlayWidth(), height: 50)
.foregroundColor(DamusColors.black)
.scaleEffect(Double(showReactionsBG), anchor: .topTrailing)
.animation(
@ -267,9 +267,9 @@ struct LikeButton: View {
.overlay(
Rectangle()
.foregroundColor(Color.white.opacity(0.2))
.frame(width: 250, height: 50)
.frame(width: calculateOverlayWidth(), height: 50)
.clipShape(
RoundedRectangle(cornerRadius: 10)
RoundedRectangle(cornerRadius: 20)
)
)
.overlay(reactions())
@ -287,9 +287,43 @@ struct LikeButton: View {
}
}
}
func calculateOverlayWidth() -> CGFloat {
let maxWidth: CGFloat = 250
let numberOfEmojis = emojis.count
let minimumWidth: CGFloat = 75
if numberOfEmojis > 0 {
let emojiWidth: CGFloat = 25
let padding: CGFloat = 15
let buttonWidth: CGFloat = 18
let buttonPadding: CGFloat = 20
let totalWidth = CGFloat(numberOfEmojis) * (emojiWidth + padding) + buttonWidth + buttonPadding
return min(maxWidth, max(minimumWidth, totalWidth))
} else {
return minimumWidth
}
}
func reactions() -> some View {
HStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
ForEach(emojis, id: \.self) { emoji in
if let index = emojis.firstIndex(of: emoji) {
let scale = index < showEmojis.count ? showEmojis[index] : 0
Text(emoji)
.font(.system(size: 25))
.scaleEffect(Double(scale))
.onTapGesture {
emojiTapped(emoji)
}
}
}
}
.padding(.leading, 10)
}
Button(action: {
withAnimation(.easeOut(duration: 0.2)) {
isReactionsVisible = false
@ -298,26 +332,10 @@ struct LikeButton: View {
showEmojis = []
}) {
Image(systemName: "xmark.circle.fill")
.font(.body)
.font(.system(size: 18))
.foregroundColor(.gray)
}
.padding(.leading, 7.5)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(emojis, id: \.self) { emoji in
if let index = emojis.firstIndex(of: emoji) {
let scale = index < showEmojis.count ? showEmojis[index] : 0
Text(emoji)
.scaleEffect(Double(scale))
.onTapGesture {
emojiTapped(emoji)
}
}
}
}
.padding(.trailing, 10)
}
.padding(.trailing, 7.5)
}
}