damus

commit 7f6a702412389f596dd261e5f4374d91209e1f92
parent 6f35de65f93b4967caafe3279aafeb15ced2b84c
Author: Suhail Saqan <suhail.saqan@gmail.com>
Date:   Thu,  7 Sep 2023 17:57:19 -0700

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>

Diffstat:
M
damus/Views/ActionBar/EventActionBar.swift
 | 
56
+++++++++++++++++++++++++++++++++++++-------------------

1 file changed, 37 insertions(+), 19 deletions(-)
diff --git a/damus/Views/ActionBar/EventActionBar.swift b/damus/Views/ActionBar/EventActionBar.swift
@@ -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,28 +287,34 @@ 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 {
-            Button(action: {
-                withAnimation(.easeOut(duration: 0.2)) {
-                    isReactionsVisible = false
-                    showReactionsBG = 0
-                }
-                showEmojis = []
-            }) {
-                Image(systemName: "xmark.circle.fill")
-                    .font(.body)
-                    .foregroundColor(.gray)
-            }
-            .padding(.leading, 7.5)
-            
             ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 20) {
+                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)
@@ -316,8 +322,20 @@ struct LikeButton: View {
                         }
                     }
                 }
-                .padding(.trailing, 10)
+                .padding(.leading, 10)
+            }
+            Button(action: {
+                withAnimation(.easeOut(duration: 0.2)) {
+                    isReactionsVisible = false
+                    showReactionsBG = 0
+                }
+                showEmojis = []
+            }) {
+                Image(systemName: "xmark.circle.fill")
+                    .font(.system(size: 18))
+                    .foregroundColor(.gray)
             }
+            .padding(.trailing, 7.5)
         }
     }