mirror of
git://jb55.com/damus
synced 2024-09-18 19:23:49 +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:
parent
6f35de65f9
commit
7f6a702412
@ -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())
|
||||
@ -288,8 +288,42 @@ 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)
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user