From 01afb08165dc28f300b6f66d2988977bfd3f49be Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Fri, 10 May 2024 09:10:53 -0700 Subject: [PATCH] Tweak paused overlay design, widen tap area Summary: Tweaks the Paused Debugger Overlay design on iOS. The tap area to resume the application is now the entire "Paused in debugger" item. |Before|After| | {F1578785144} | {F1578734918} | Changelog: [Internal] Reviewed By: robhogan Differential Revision: D57161216 fbshipit-source-id: 581ebe44e45a57cdfe3e617e8f97f78619f84e73 --- .../RCTPausedInDebuggerOverlayController.mm | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm index b3f39547db3..c6c201c03cd 100644 --- a/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm +++ b/packages/react-native/React/DevSupport/RCTPausedInDebuggerOverlayController.mm @@ -6,6 +6,7 @@ */ #import +#include #import "RCTPausedInDebuggerOverlayController.h" @@ -27,7 +28,7 @@ UIView *dimmingView = [[UIView alloc] init]; dimmingView.translatesAutoresizingMaskIntoConstraints = NO; - dimmingView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5]; + dimmingView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2]; [self.view addSubview:dimmingView]; [NSLayoutConstraint activateConstraints:@[ [dimmingView.topAnchor constraintEqualToAnchor:self.view.topAnchor], @@ -46,31 +47,37 @@ UIView *messageContainer = [[UIView alloc] init]; [messageContainer addSubview:messageLabel]; [NSLayoutConstraint activateConstraints:@[ - [messageLabel.topAnchor constraintEqualToAnchor:messageContainer.topAnchor], + [messageLabel.topAnchor constraintEqualToAnchor:messageContainer.topAnchor constant:-1], [messageLabel.bottomAnchor constraintEqualToAnchor:messageContainer.bottomAnchor], - [messageLabel.leadingAnchor constraintEqualToAnchor:messageContainer.leadingAnchor constant:14], + [messageLabel.leadingAnchor constraintEqualToAnchor:messageContainer.leadingAnchor constant:16], [messageLabel.trailingAnchor constraintEqualToAnchor:messageContainer.trailingAnchor], ]]; UIButton *resumeButton = [UIButton buttonWithType:UIButtonTypeCustom]; [resumeButton setImage:[UIImage systemImageNamed:@"forward.frame.fill"] forState:UIControlStateNormal]; - [resumeButton addTarget:self action:@selector(resumeButtonTapped) forControlEvents:UIControlEventTouchUpInside]; - resumeButton.tintColor = [UIColor colorWithRed:0.26 green:0.5 blue:0.92 alpha:1]; + resumeButton.tintColor = [UIColor colorWithRed:0.37 green:0.37 blue:0.37 alpha:1]; + resumeButton.adjustsImageWhenDisabled = NO; + resumeButton.enabled = NO; [NSLayoutConstraint activateConstraints:@[ [resumeButton.widthAnchor constraintEqualToConstant:48], - [resumeButton.heightAnchor constraintEqualToConstant:48], + [resumeButton.heightAnchor constraintEqualToConstant:46], ]]; UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[ messageContainer, resumeButton ]]; stackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.757 alpha:1]; stackView.layer.cornerRadius = 12; stackView.layer.borderWidth = 2; - stackView.layer.borderColor = [UIColor colorWithRed:0.816 green:0.816 blue:0.723 alpha:1].CGColor; + stackView.layer.borderColor = [UIColor colorWithRed:0.71 green:0.71 blue:0.62 alpha:1].CGColor; stackView.translatesAutoresizingMaskIntoConstraints = NO; stackView.axis = UILayoutConstraintAxisHorizontal; stackView.distribution = UIStackViewDistributionFill; stackView.alignment = UIStackViewAlignmentCenter; + UITapGestureRecognizer *gestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self + action:@selector(handleResume:)]; + [stackView addGestureRecognizer:gestureRecognizer]; + stackView.userInteractionEnabled = YES; + [self.view addSubview:stackView]; [NSLayoutConstraint activateConstraints:@[ @@ -81,7 +88,7 @@ stackView.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight; } -- (void)resumeButtonTapped +- (void)handleResume:(UITapGestureRecognizer *)recognizer { self.onResume(); }