Merge pull request #779 from Adamant-im/trello.com/c/ArzACuYT

[trello.com/c/46S4GSZ5] onHover for reactions in menu macOS

Author: vovameister

Adamant/Modules/Chat/View/Helpers/ChatReactionsView.swift

@@ -23,6 +23,8 @@ struct ChatReactionsView: View {
 
     var didSelectEmoji: ((_ emoji: String, _ messageId: String) -> Void)?
     var didSelectMore: (() -> Void)?
+    
+    @State private var isPlusHovered = false
 
     init(
         emojis: [String]?,
@@ -40,16 +42,9 @@ struct ChatReactionsView: View {
                 HStack(spacing: 5) {
                     ForEach(emojis.prefix(6), id: \.self) { emoji in
                         ChatReactionButton(
-                            emoji: emoji
+                            emoji: emoji,
+                            isSelected: selectedEmoji == emoji
                         )
-                        .padding(.leading, 1)
-                        .frame(width: 40, height: 40)
-                        .background(
-                            selectedEmoji == emoji
-                                ? Color.init(uiColor: .gray.withAlphaComponent(0.75))
-                                : .clear
-                        )
-                        .clipShape(Circle())
                         .onTapGesture {
                             didSelectEmoji?(emoji, messageId)
                         }
@@ -66,9 +61,19 @@ struct ChatReactionsView: View {
                     .padding(6)
             }
             .frame(width: 30, height: 30)
-            .background(Color.init(uiColor: .adamant.moreReactionsBackground))
+            .background(
+                isPlusHovered
+                ? Color.init(uiColor: .adamant.contextMenuSelectColor)
+                : Color.init(uiColor: .adamant.moreReactionsBackground)
+            )
             .clipShape(Circle())
+            .scaleEffect(isPlusHovered ? 1.15 : 1.0)
+            .onHover { hovering in
+                isPlusHovered = hovering
+            }
+            .animation(.easeInOut(duration: 0.2), value: isPlusHovered)
             .padding([.top, .bottom], 5)
+            
             Spacer()
         }
         .padding(.leading, 5)
@@ -79,10 +84,20 @@ struct ChatReactionsView: View {
 
 struct ChatReactionButton: View {
     let emoji: String
+    let isSelected: Bool
+    
+    @State private var isHovered = false
 
     var body: some View {
         Text(emoji)
             .font(.title)
+            .frame(width: 40, height: 40)
+            .background( isHovered ? Color.init(uiColor: .adamant.contextMenuSelectColor) :
+                            (isSelected ? Color.init(uiColor: .gray.withAlphaComponent(0.75)) : Color.clear))
             .clipShape(Circle())
+            .onHover { hovering in
+                isHovered = hovering
+            }
+            .animation(.easeInOut(duration: 0.1), value: isHovered)
     }
 }