From 486ce389595f47e59cc1f5b051a93765c9a614d2 Mon Sep 17 00:00:00 2001 From: Ilya Laktyushin Date: Mon, 4 Apr 2022 01:15:30 +0400 Subject: [PATCH] Web app improvements --- submodules/AttachmentUI/BUILD | 1 + .../Sources/AttachmentPanel.swift | 30 ++++++++++++------- .../WebUI/Sources/WebAppController.swift | 16 +++++----- 3 files changed, 29 insertions(+), 18 deletions(-) diff --git a/submodules/AttachmentUI/BUILD b/submodules/AttachmentUI/BUILD index a4e4997ee3..655fdaa421 100644 --- a/submodules/AttachmentUI/BUILD +++ b/submodules/AttachmentUI/BUILD @@ -30,6 +30,7 @@ swift_library( "//submodules/ContextUI:ContextUI", "//submodules/ManagedAnimationNode:ManagedAnimationNode", "//submodules/PhotoResources:PhotoResources", + "//submodules/SemanticStatusNode:SemanticStatusNode", "//submodules/Components/AnimatedStickerComponent:AnimatedStickerComponent", ], visibility = [ diff --git a/submodules/AttachmentUI/Sources/AttachmentPanel.swift b/submodules/AttachmentUI/Sources/AttachmentPanel.swift index 8115d564f8..302c1ceda3 100644 --- a/submodules/AttachmentUI/Sources/AttachmentPanel.swift +++ b/submodules/AttachmentUI/Sources/AttachmentPanel.swift @@ -14,6 +14,7 @@ import ChatSendMessageActionUI import ChatTextLinkEditUI import PhotoResources import AnimatedStickerComponent +import SemanticStatusNode private let buttonSize = CGSize(width: 88.0, height: 49.0) private let smallButtonWidth: CGFloat = 69.0 @@ -351,25 +352,25 @@ public struct AttachmentMainButtonState { let text: String? let backgroundColor: UIColor let textColor: UIColor - let isEnabled: Bool let isVisible: Bool + let isLoading: Bool public init( text: String?, backgroundColor: UIColor, textColor: UIColor, - isEnabled: Bool, - isVisible: Bool + isVisible: Bool, + isLoading: Bool ) { self.text = text self.backgroundColor = backgroundColor self.textColor = textColor - self.isEnabled = isEnabled self.isVisible = isVisible + self.isLoading = isLoading } static var initial: AttachmentMainButtonState { - return AttachmentMainButtonState(text: nil, backgroundColor: .clear, textColor: .clear, isEnabled: false, isVisible: false) + return AttachmentMainButtonState(text: nil, backgroundColor: .clear, textColor: .clear, isVisible: false, isLoading: false) } } @@ -378,6 +379,7 @@ private final class MainButtonNode: HighlightTrackingButtonNode { private let backgroundNode: ASDisplayNode private let textNode: ImmediateTextNode + private let statusNode: SemanticStatusNode override init(pointerStyle: PointerStyle? = nil) { self.state = AttachmentMainButtonState.initial @@ -393,13 +395,16 @@ private final class MainButtonNode: HighlightTrackingButtonNode { self.textNode = ImmediateTextNode() self.textNode.textAlignment = .center + self.statusNode = SemanticStatusNode(backgroundNodeColor: .clear, foregroundNodeColor: .white) + super.init(pointerStyle: pointerStyle) self.addSubnode(self.backgroundNode) self.backgroundNode.addSubnode(self.textNode) + self.backgroundNode.addSubnode(self.statusNode) self.highligthedChanged = { [weak self] highlighted in - if let strongSelf = self, strongSelf.state.isEnabled { + if let strongSelf = self { if highlighted { strongSelf.backgroundNode.layer.removeAnimation(forKey: "opacity") strongSelf.backgroundNode.alpha = 0.65 @@ -415,8 +420,6 @@ private final class MainButtonNode: HighlightTrackingButtonNode { self.state = state self.isUserInteractionEnabled = state.isVisible - self.isEnabled = state.isEnabled - transition.updateAlpha(node: self, alpha: state.isEnabled ? 1.0 : 0.4) if let text = state.text { self.textNode.attributedText = NSAttributedString(string: text, font: Font.semibold(17.0), textColor: state.textColor) @@ -427,6 +430,11 @@ private final class MainButtonNode: HighlightTrackingButtonNode { self.backgroundNode.backgroundColor = state.backgroundColor } transition.updateFrame(node: self.backgroundNode, frame: CGRect(origin: CGPoint(), size: size)) + + let statusSize = CGSize(width: 20.0, height: 20.0) + transition.updateFrame(node: self.statusNode, frame: CGRect(origin: CGPoint(x: size.width - statusSize.width - 15.0, y: floorToScreenPixels((size.height - statusSize.height) / 2.0)), size: statusSize)) + + self.statusNode.transitionToState(state.isLoading ? .progress(value: nil, cancelEnabled: false, appearance: SemanticStatusNodeState.ProgressAppearance(inset: 0.0, lineWidth: 2.0)) : .none) } } @@ -878,7 +886,7 @@ final class AttachmentPanel: ASDisplayNode, UIScrollViewDelegate { func updateMainButtonState(_ mainButtonState: AttachmentMainButtonState?) { var currentButtonState = self.mainButtonState if mainButtonState == nil { - currentButtonState = AttachmentMainButtonState(text: currentButtonState.text, backgroundColor: currentButtonState.backgroundColor, textColor: currentButtonState.textColor, isEnabled: currentButtonState.isEnabled, isVisible: false) + currentButtonState = AttachmentMainButtonState(text: currentButtonState.text, backgroundColor: currentButtonState.backgroundColor, textColor: currentButtonState.textColor, isVisible: false, isLoading: false) } self.mainButtonState = mainButtonState ?? currentButtonState } @@ -947,7 +955,7 @@ final class AttachmentPanel: ASDisplayNode, UIScrollViewDelegate { containerTransition = transition } containerTransition.updateAlpha(node: self.scrollNode, alpha: isSelecting || isButtonVisible ? 0.0 : 1.0) - containerTransition.updateTransformScale(node: self.scrollNode, scale: isSelecting || isButtonVisible ? 0.8 : 1.0) + containerTransition.updateTransformScale(node: self.scrollNode, scale: isSelecting || isButtonVisible ? 0.85 : 1.0) if isSelectingUpdated { if isSelecting { @@ -996,7 +1004,7 @@ final class AttachmentPanel: ASDisplayNode, UIScrollViewDelegate { } let sideInset: CGFloat = 16.0 - let buttonSize = CGSize(width: layout.size.width - (sideInset + safeAreaInsets.left) * 2.0, height: 50.0) + let buttonSize = CGSize(width: layout.size.width - (sideInset + layout.safeInsets.left) * 2.0, height: 50.0) self.mainButtonNode.updateLayout(size: buttonSize, state: self.mainButtonState, transition: transition) transition.updateFrame(node: self.mainButtonNode, frame: CGRect(origin: CGPoint(x: layout.safeInsets.left + sideInset, y: isButtonVisible ? 8.0 : containerFrame.height), size: buttonSize)) diff --git a/submodules/WebUI/Sources/WebAppController.swift b/submodules/WebUI/Sources/WebAppController.swift index 771eef2774..9724e94069 100644 --- a/submodules/WebUI/Sources/WebAppController.swift +++ b/submodules/WebUI/Sources/WebAppController.swift @@ -283,13 +283,15 @@ public final class WebAppController: ViewController, AttachmentContainable { } case "web_app_setup_main_button": if let eventData = (body["eventData"] as? String)?.data(using: .utf8), let json = try? JSONSerialization.jsonObject(with: eventData, options: []) as? [String: Any] { - if let backgroundColorString = json["color"] as? String, let backgroundColor = UIColor(hexString: backgroundColorString), - let textColorString = json["text_color"] as? String, let textColor = UIColor(hexString: textColorString), - let text = json["text"] as? String, - let isEnabled = json["is_active"] as? Bool, - let isVisible = json["is_visible"] as? Bool - { - let state = AttachmentMainButtonState(text: text, backgroundColor: backgroundColor, textColor: textColor, isEnabled: isEnabled, isVisible: isVisible) + if let isVisible = json["is_visible"] as? Bool { + let text = json["text"] as? String + let backgroundColorString = json["color"] as? String + let backgroundColor = backgroundColorString.flatMap({ UIColor(hexString: $0) }) ?? .clear + let textColorString = json["text_color"] as? String + let textColor = textColorString.flatMap({ UIColor(hexString: $0) }) ?? .clear + + let isLoading = json["is_progress_visible"] as? Bool + let state = AttachmentMainButtonState(text: text, backgroundColor: backgroundColor, textColor: textColor, isVisible: isVisible, isLoading: isLoading ?? false) self.mainButtonStatePromise.set(.single(state)) } }