From 84d60f5dc4b0a6f1c2401aef9e96dc71d0079e0d Mon Sep 17 00:00:00 2001 From: Michael Kirk Date: Mon, 2 Jul 2018 18:17:45 -0600 Subject: [PATCH] input toolbar layout tweaks --- .../ConversationInputTextView.m | 19 +++++---- .../ConversationInputToolbar.m | 41 ++++++++++--------- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/Signal/src/ViewControllers/ConversationView/ConversationInputTextView.m b/Signal/src/ViewControllers/ConversationView/ConversationInputTextView.m index 86885e0eb..c25fb3460 100644 --- a/Signal/src/ViewControllers/ConversationView/ConversationInputTextView.m +++ b/Signal/src/ViewControllers/ConversationView/ConversationInputTextView.m @@ -27,20 +27,21 @@ NS_ASSUME_NONNULL_BEGIN self.delegate = self; - CGFloat cornerRadius = 6.0f; + // round edge with dynamic type. + CGFloat cornerRadius = 16.0f; - self.backgroundColor = [UIColor whiteColor]; - self.layer.borderColor = [UIColor lightGrayColor].CGColor; + self.backgroundColor = [UIColor ows_light02Color]; + self.layer.borderColor = [UIColor.ows_blackColor colorWithAlphaComponent:0.12f].CGColor; self.layer.borderWidth = 0.5f; self.layer.cornerRadius = cornerRadius; - self.scrollIndicatorInsets = UIEdgeInsetsMake(cornerRadius, 0.0f, cornerRadius, 0.0f); + self.scrollIndicatorInsets = UIEdgeInsetsMake(4, 4, 4, 4); self.scrollEnabled = YES; self.scrollsToTop = NO; self.userInteractionEnabled = YES; - self.font = [UIFont systemFontOfSize:16.0f]; + self.font = [UIFont ows_dynamicTypeBodyFont]; self.textColor = [UIColor blackColor]; self.textAlignment = NSTextAlignmentNatural; @@ -57,7 +58,7 @@ NS_ASSUME_NONNULL_BEGIN // We need to do these steps _after_ placeholderView is configured. self.font = [UIFont ows_dynamicTypeBodyFont]; - self.textContainerInset = UIEdgeInsetsMake(4.0f, 2.0f, 4.0f, 2.0f); + self.textContainerInset = UIEdgeInsetsMake(4.0f, 8.0, 4.0f, 2.0f); self.contentInset = UIEdgeInsetsMake(1.0f, 0.0f, 1.0f, 0.0f); [self ensurePlaceholderConstraints]; @@ -104,10 +105,12 @@ NS_ASSUME_NONNULL_BEGIN CGRect beginningTextRect = [self firstRectForRange:beginningTextRange]; CGFloat topInset = beginningTextRect.origin.y; + CGFloat leftInset = beginningTextRect.origin.x; + // we use Left instead of Leading, since it's based on the prior CGRect offset self.placeholderConstraints = @[ - [self.placeholderView autoPinLeadingToSuperviewMargin], - [self.placeholderView autoPinTrailingToSuperviewMargin], + [self.placeholderView autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:leftInset], + [self.placeholderView autoPinEdgeToSuperviewEdge:ALEdgeRight], [self.placeholderView autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:topInset], ]; } diff --git a/Signal/src/ViewControllers/ConversationView/ConversationInputToolbar.m b/Signal/src/ViewControllers/ConversationView/ConversationInputToolbar.m index 96b43b06f..e1326d821 100644 --- a/Signal/src/ViewControllers/ConversationView/ConversationInputToolbar.m +++ b/Signal/src/ViewControllers/ConversationView/ConversationInputToolbar.m @@ -19,7 +19,6 @@ NS_ASSUME_NONNULL_BEGIN static void *kConversationInputTextViewObservingContext = &kConversationInputTextViewObservingContext; -static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; #pragma mark - @@ -90,7 +89,7 @@ static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; { // Since we have `self.autoresizingMask = UIViewAutoresizingFlexibleHeight`, the intrinsicContentSize is used // to determine the height of the rendered inputAccessoryView. - CGFloat height = self.toolbarHeight + ConversationInputToolbarBorderViewHeight; + CGFloat height = self.toolbarHeight; if (self.quotedMessagePreview) { height += self.quotedMessageTopMargin; height += self.quotedMessagePreview.intrinsicContentSize.height; @@ -107,10 +106,14 @@ static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; if (UIAccessibilityIsReduceTransparencyEnabled()) { self.backgroundColor = [UIColor ows_toolbarBackgroundColor]; } else { - // We can mute the blur by making our background color more opaque. - self.backgroundColor = [[UIColor ows_toolbarBackgroundColor] colorWithAlphaComponent:0.6]; + self.backgroundColor = [UIColor clearColor]; - UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]; + UIBlurEffect *blurEffect; + if (@available(iOS 10, *)) { + blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleProminent]; + } else { + blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]; + } UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect]; [self addSubview:blurEffectView]; [blurEffectView autoPinEdgesToSuperviewEdges]; @@ -118,13 +121,6 @@ static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; self.autoresizingMask = UIViewAutoresizingFlexibleHeight; - UIView *borderView = [UIView new]; - borderView.backgroundColor = [UIColor colorWithWhite:238 / 255.f alpha:1.f]; - [self addSubview:borderView]; - [borderView autoPinWidthToSuperview]; - [borderView autoPinEdgeToSuperviewEdge:ALEdgeTop]; - [borderView autoSetDimension:ALDimensionHeight toSize:ConversationInputToolbarBorderViewHeight]; - _composeContainer = [UIView containerView]; _contentStackView = [[UIStackView alloc] initWithArrangedSubviews:@[ _composeContainer ]]; _contentStackView.axis = UILayoutConstraintAxisVertical; @@ -171,9 +167,9 @@ static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; [self.sendButton setTitle:NSLocalizedString(@"SEND_BUTTON_TITLE", @"Label for the send button in the conversation view.") forState:UIControlStateNormal]; - [self.sendButton setTitleColor:[UIColor ows_materialBlueColor] forState:UIControlStateNormal]; + [self.sendButton setTitleColor:UIColor.ows_signalBlueColor forState:UIControlStateNormal]; self.sendButton.titleLabel.textAlignment = NSTextAlignmentCenter; - self.sendButton.titleLabel.font = [UIFont ows_mediumFontWithSize:16.f]; + self.sendButton.titleLabel.font = [UIFont ows_mediumFontWithSize:17.f]; [self.sendButton addTarget:self action:@selector(sendButtonPressed) forControlEvents:UIControlEventTouchUpInside]; [self.rightButtonWrapper addSubview:self.sendButton]; @@ -340,16 +336,23 @@ static const CGFloat ConversationInputToolbarBorderViewHeight = 0.5; const int contentHInset = 6; const int contentHSpacing = 6; + // I'm not sure why this addional offset is necessary, but without it our minTextViewHeight is too short. + const CGFloat kAdditionalUnaccountedForHeight = 1; + // We want to grow the text input area to fit its content within reason. - const CGFloat kMinTextViewHeight = ceil(self.inputTextView.font.lineHeight - + self.inputTextView.textContainerInset.top + self.inputTextView.textContainerInset.bottom - + self.inputTextView.contentInset.top + self.inputTextView.contentInset.bottom); + const CGFloat minTextViewHeight + = ceil(self.inputTextView.font.lineHeight + self.inputTextView.textContainerInset.top + + self.inputTextView.textContainerInset.bottom + self.inputTextView.contentInset.top + + self.inputTextView.contentInset.bottom) + + kAdditionalUnaccountedForHeight; + + // Exactly 4 lines of text with default sizing. const CGFloat kMaxTextViewHeight = 98.f; const CGFloat textViewDesiredHeight = (self.inputTextView.contentSize.height + self.inputTextView.contentInset.top + self.inputTextView.contentInset.bottom); - const CGFloat textViewHeight = ceil(CGFloatClamp(textViewDesiredHeight, kMinTextViewHeight, kMaxTextViewHeight)); - const CGFloat kMinContentHeight = kMinTextViewHeight + textViewVInset * 2; + const CGFloat textViewHeight = ceil(CGFloatClamp(textViewDesiredHeight, minTextViewHeight, kMaxTextViewHeight)); + const CGFloat kMinContentHeight = minTextViewHeight + textViewVInset * 2; self.textViewHeight = textViewHeight; self.toolbarHeight = textViewHeight + textViewVInset * 2;