Add blur to bot buttons

submodules/Display/Source/NavigationBar.swift

@@ -209,6 +209,8 @@ public final class NavigationBackgroundNode: ASDisplayNode {
     }
 
     public func update(size: CGSize, cornerRadius: CGFloat = 0.0, transition: ContainedViewLayoutTransition) {
+        self.validLayout = (size, cornerRadius)
+
         let contentFrame = CGRect(origin: CGPoint(), size: size)
         transition.updateFrame(node: self.backgroundNode, frame: contentFrame)
         if let effectView = self.effectView, effectView.frame != contentFrame {

submodules/TelegramPresentationData/Sources/PresentationThemeEssentialGraphics.swift

@@ -503,9 +503,13 @@ public final class PrincipalThemeAdditionalGraphics {
 
     public let chatBubbleNavigateButtonImage: UIImage
     public let chatBubbleActionButtonIncomingMiddleImage: UIImage
+    public let chatBubbleActionButtonMiddleMaskImage: UIImage
     public let chatBubbleActionButtonIncomingBottomLeftImage: UIImage
+    public let chatBubbleActionButtonBottomLeftMaskImage: UIImage
     public let chatBubbleActionButtonIncomingBottomRightImage: UIImage
+    public let chatBubbleActionButtonBottomRightMaskImage: UIImage
     public let chatBubbleActionButtonIncomingBottomSingleImage: UIImage
+    public let chatBubbleActionButtonBottomSingleMaskImage: UIImage
     public let chatBubbleActionButtonOutgoingMiddleImage: UIImage
     public let chatBubbleActionButtonOutgoingBottomLeftImage: UIImage
     public let chatBubbleActionButtonOutgoingBottomRightImage: UIImage
@@ -549,9 +553,13 @@ public final class PrincipalThemeAdditionalGraphics {
         
         self.chatBubbleNavigateButtonImage = chatBubbleActionButtonImage(fillColor: bubbleVariableColor(variableColor: theme.message.shareButtonFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.shareButtonStrokeColor, wallpaper: wallpaper), foregroundColor: bubbleVariableColor(variableColor: theme.message.shareButtonForegroundColor, wallpaper: wallpaper), image: UIImage(bundleImageName: "Chat/Message/NavigateToMessageIcon"), iconOffset: CGPoint(x: 0.0, y: 1.0))!
         self.chatBubbleActionButtonIncomingMiddleImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsStrokeColor, wallpaper: wallpaper), position: .middle, bubbleCorners: bubbleCorners)
+        self.chatBubbleActionButtonMiddleMaskImage = messageBubbleActionButtonImage(color: .white, strokeColor: .clear, position: .middle, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonIncomingBottomLeftImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsStrokeColor, wallpaper: wallpaper), position: .bottomLeft, bubbleCorners: bubbleCorners)
+        self.chatBubbleActionButtonBottomLeftMaskImage = messageBubbleActionButtonImage(color: .black, strokeColor: .clear, position: .bottomLeft, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonIncomingBottomRightImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsStrokeColor, wallpaper: wallpaper), position: .bottomRight, bubbleCorners: bubbleCorners)
+        self.chatBubbleActionButtonBottomRightMaskImage = messageBubbleActionButtonImage(color: .black, strokeColor: .clear, position: .bottomRight, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonIncomingBottomSingleImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.incoming.actionButtonsStrokeColor, wallpaper: wallpaper), position: .bottomSingle, bubbleCorners: bubbleCorners)
+        self.chatBubbleActionButtonBottomSingleMaskImage = messageBubbleActionButtonImage(color: .black, strokeColor: .clear, position: .bottomSingle, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonOutgoingMiddleImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsStrokeColor, wallpaper: wallpaper), position: .middle, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonOutgoingBottomLeftImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsStrokeColor, wallpaper: wallpaper), position: .bottomLeft, bubbleCorners: bubbleCorners)
         self.chatBubbleActionButtonOutgoingBottomRightImage = messageBubbleActionButtonImage(color: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsFillColor, wallpaper: wallpaper), strokeColor: bubbleVariableColor(variableColor: theme.message.outgoing.actionButtonsStrokeColor, wallpaper: wallpaper), position: .bottomRight, bubbleCorners: bubbleCorners)

submodules/TelegramUI/Sources/ChatEmptyNode.swift

@@ -887,6 +887,6 @@ final class ChatEmptyNode: ASDisplayNode {
         }
         
         transition.updateFrame(node: self.backgroundNode, frame: contentFrame)
-        self.backgroundNode.update(size: self.backgroundNode.bounds.size, cornerRadius: 10.0, transition: transition)
+        self.backgroundNode.update(size: self.backgroundNode.bounds.size, cornerRadius: 20.0, transition: transition)
     }
 }

submodules/TelegramUI/Sources/ChatMessageActionButtonsNode.swift

@@ -11,7 +11,8 @@ import AccountContext
 private let titleFont = Font.medium(16.0)
 
 private final class ChatMessageActionButtonNode: ASDisplayNode {
-    private let backgroundNode: ASImageNode
+    private let backgroundBlurNode: NavigationBackgroundNode
+    private let backgroundMaskNode: ASImageNode
     private var titleNode: TextNode?
     private var iconNode: ASImageNode?
     private var buttonView: HighlightTrackingButton?
@@ -25,20 +26,21 @@ private final class ChatMessageActionButtonNode: ASDisplayNode {
     private let accessibilityArea: AccessibilityAreaNode
     
     override init() {
-        self.backgroundNode = ASImageNode()
+        self.backgroundBlurNode = NavigationBackgroundNode(color: .clear)
-        self.backgroundNode.displayWithoutProcessing = true
+        self.backgroundBlurNode.isUserInteractionEnabled = false
-        self.backgroundNode.displaysAsynchronously = false
+
-        self.backgroundNode.isLayerBacked = true
+        self.backgroundMaskNode = ASImageNode()
-        self.backgroundNode.alpha = 1.0
+        self.backgroundMaskNode.isUserInteractionEnabled = false
-        self.backgroundNode.isUserInteractionEnabled = false
         
         self.accessibilityArea = AccessibilityAreaNode()
         self.accessibilityArea.accessibilityTraits = .button
         
         super.init()
         
-        self.addSubnode(self.backgroundNode)
+        self.addSubnode(self.backgroundBlurNode)
         self.addSubnode(self.accessibilityArea)
+
+        self.backgroundBlurNode.view.mask = backgroundMaskNode.view
         
         self.accessibilityArea.activate = { [weak self] in
             self?.buttonPressed()
@@ -57,11 +59,11 @@ private final class ChatMessageActionButtonNode: ASDisplayNode {
         buttonView.highligthedChanged = { [weak self] highlighted in
             if let strongSelf = self {
                 if highlighted {
-                    strongSelf.backgroundNode.layer.removeAnimation(forKey: "opacity")
+                    strongSelf.backgroundBlurNode.layer.removeAnimation(forKey: "opacity")
-                    strongSelf.backgroundNode.alpha = 0.55
+                    strongSelf.backgroundBlurNode.alpha = 0.55
                 } else {
-                    strongSelf.backgroundNode.alpha = 1.0
+                    strongSelf.backgroundBlurNode.alpha = 1.0
-                    strongSelf.backgroundNode.layer.animateAlpha(from: 0.55, to: 1.0, duration: 0.2)
+                    strongSelf.backgroundBlurNode.layer.animateAlpha(from: 0.55, to: 1.0, duration: 0.2)
                 }
             }
         }
@@ -125,17 +127,17 @@ private final class ChatMessageActionButtonNode: ASDisplayNode {
             
             let messageTheme = incoming ? theme.theme.chat.message.incoming : theme.theme.chat.message.outgoing
             let (titleSize, titleApply) = titleLayout(TextNodeLayoutArguments(attributedString: NSAttributedString(string: title, font: titleFont, textColor:  bubbleVariableColor(variableColor: messageTheme.actionButtonsTextColor, wallpaper: theme.wallpaper)), backgroundColor: nil, maximumNumberOfLines: 1, truncationType: .end, constrainedSize: CGSize(width: max(44.0, constrainedWidth - minimumSideInset - minimumSideInset), height: CGFloat.greatestFiniteMagnitude), alignment: .center, cutout: nil, insets: UIEdgeInsets(top: 1.0, left: 0.0, bottom: 1.0, right: 0.0)))
-            
+
-            let backgroundImage: UIImage?
+            let backgroundMaskImage: UIImage?
             switch position {
-                case .middle:
+            case .middle:
-                    backgroundImage = incoming ? graphics.chatBubbleActionButtonIncomingMiddleImage : graphics.chatBubbleActionButtonOutgoingMiddleImage
+                backgroundMaskImage = graphics.chatBubbleActionButtonMiddleMaskImage
-                case .bottomLeft:
+            case .bottomLeft:
-                    backgroundImage = incoming ? graphics.chatBubbleActionButtonIncomingBottomLeftImage : graphics.chatBubbleActionButtonOutgoingBottomLeftImage
+                backgroundMaskImage = graphics.chatBubbleActionButtonBottomLeftMaskImage
-                case .bottomRight:
+            case .bottomRight:
-                    backgroundImage = incoming ? graphics.chatBubbleActionButtonIncomingBottomRightImage : graphics.chatBubbleActionButtonOutgoingBottomRightImage
+                backgroundMaskImage = graphics.chatBubbleActionButtonBottomRightMaskImage
-                case .bottomSingle:
+            case .bottomSingle:
-                    backgroundImage = incoming ? graphics.chatBubbleActionButtonIncomingBottomSingleImage : graphics.chatBubbleActionButtonOutgoingBottomSingleImage
+                backgroundMaskImage = graphics.chatBubbleActionButtonBottomSingleMaskImage
             }
             
             return (titleSize.size.width + sideInset + sideInset, { width in
@@ -156,8 +158,12 @@ private final class ChatMessageActionButtonNode: ASDisplayNode {
                             node.longTapRecognizer?.isEnabled = false
                     }
                     
-                    node.backgroundNode.image = backgroundImage
+                    node.backgroundMaskNode.image = backgroundMaskImage
-                    node.backgroundNode.frame = CGRect(origin: CGPoint(), size: CGSize(width: max(0.0, width), height: 42.0))
+                    node.backgroundMaskNode.frame = CGRect(origin: CGPoint(), size: CGSize(width: max(0.0, width), height: 42.0))
+
+                    node.backgroundBlurNode.frame = CGRect(origin: CGPoint(), size: CGSize(width: max(0.0, width), height: 42.0))
+                    node.backgroundBlurNode.update(size: node.backgroundBlurNode.bounds.size, transition: .immediate)
+                    node.backgroundBlurNode.color = theme.theme.chat.serviceMessage.components.withDefaultWallpaper.dateFillStatic
                     
                     if iconImage != nil {
                         if node.iconNode == nil {