improved the pan animation to be as the designs

This commit is contained in:
Mauro Romito 2022-11-09 17:07:05 +01:00
parent cac30ae11f
commit 2bd7232a3f
5 changed files with 32 additions and 11 deletions

View file

@ -118,7 +118,9 @@ extern NSTimeInterval const kResizeComposerAnimationDuration;
@property (strong, nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray<NSLayoutConstraint*> *toolbarContainerConstraints;
@property (nonatomic, assign) CGPoint originalMaximisedToolbarCenter;
@property (nonatomic, assign) CGFloat originalMaximisedWysiwygHeight;
@property (strong, nonatomic, nullable) UIView* maximisedToolbarDimmingView;
/**

View file

@ -469,6 +469,9 @@ static CGSize kThreadListBarButtonItemImageSize;
self.jumpToLastUnreadBanner.backgroundColor = ThemeService.shared.theme.colors.navigation;
[self.jumpToLastUnreadBanner vc_removeShadow];
self.resetReadMarkerButton.tintColor = ThemeService.shared.theme.colors.quarterlyContent;
if (self.maximisedToolbarDimmingView) {
self.maximisedToolbarDimmingView.backgroundColor = [UIColor.blackColor colorWithAlphaComponent:0.29];
}
}
else
{
@ -480,6 +483,9 @@ static CGSize kThreadListBarButtonItemImageSize;
radius:8
opacity:0.1];
self.resetReadMarkerButton.tintColor = ThemeService.shared.theme.colors.tertiaryContent;
if (self.maximisedToolbarDimmingView) {
self.maximisedToolbarDimmingView.backgroundColor = [UIColor.blackColor colorWithAlphaComponent:0.12];
}
}
self.scrollToBottomBadgeLabel.badgeColor = ThemeService.shared.theme.tintColor;

View file

@ -170,7 +170,9 @@ extension RoomViewController {
let originalRect = roomInputToolbarContainer.convert(roomInputToolbarContainer.frame, to: view)
self.roomInputToolbarContainer.removeFromSuperview()
let dimmingView = UIView(frame: view.bounds)
dimmingView.backgroundColor = .black.withAlphaComponent(0.65)
// Same as the system dimming background color
dimmingView.backgroundColor = .black.withAlphaComponent(ThemeService.shared().isCurrentThemeDark() ? 0.29 : 0.12)
maximisedToolbarDimmingView = dimmingView
view.addSubview(dimmingView)
dimmingView.addSubview(self.roomInputToolbarContainer)
roomInputToolbarContainer.frame = originalRect
@ -214,25 +216,27 @@ private extension RoomViewController {
}
@objc private func didPanRoomToolbarContainer(_ sender: UIPanGestureRecognizer) {
guard let wysiwygInputToolbar = wysiwygInputToolbar else { return }
switch sender.state {
case .began:
originalMaximisedToolbarCenter = roomInputToolbarContainer.center
originalMaximisedWysiwygHeight = wysiwygInputToolbar.idealHeight
case .changed:
let translation = sender.translation(in: view)
guard originalMaximisedToolbarCenter.y + translation.y > originalMaximisedToolbarCenter.y else { return }
roomInputToolbarContainer.center = CGPoint(x: originalMaximisedToolbarCenter.x,
y: originalMaximisedToolbarCenter.y + translation.y)
guard wysiwygInputToolbar.idealHeight - translation.y < originalMaximisedWysiwygHeight else { return }
wysiwygInputToolbar.idealHeight = originalMaximisedWysiwygHeight - translation.y
case .ended:
if roomInputToolbarContainer.center.y > originalMaximisedToolbarCenter.y + roomInputToolbarContainer.frame.height / 4 {
wysiwygInputToolbar?.minimise()
if wysiwygInputToolbar.idealHeight < originalMaximisedWysiwygHeight * 0.5 {
wysiwygInputToolbar.minimise()
} else {
wysiwygInputToolbar.idealHeight = self.originalMaximisedWysiwygHeight
UIView.animate(withDuration: 0.3, delay: 0.0, options: [.curveEaseInOut]) {
self.roomInputToolbarContainer.center = self.originalMaximisedToolbarCenter
wysiwygInputToolbar.layoutIfNeeded()
}
}
case .cancelled:
wysiwygInputToolbar.idealHeight = self.originalMaximisedWysiwygHeight
UIView.animate(withDuration: 0.3, delay: 0.0, options: [.curveEaseInOut]) {
self.roomInputToolbarContainer.center = self.originalMaximisedToolbarCenter
wysiwygInputToolbar.layoutIfNeeded()
}
default:
break

View file

@ -62,6 +62,15 @@ class WysiwygInputToolbarView: MXKRoomInputToolbarView, NibLoadable, HtmlRoomInp
wysiwygViewModel.maximised
}
var idealHeight: CGFloat {
get {
wysiwygViewModel.idealHeight
}
set {
wysiwygViewModel.idealHeight = newValue
}
}
// MARK: - Setup
override class func instantiate() -> MXKRoomInputToolbarView! {

View file

@ -205,7 +205,7 @@ struct Composer: View {
}
.clipShape(rect)
.overlay(rect.stroke(borderColor, lineWidth: 1))
.animation(.easeInOut(duration: resizeAnimationDuration), value: wysiwygViewModel.idealHeight)
// .animation(.easeInOut(duration: resizeAnimationDuration), value: wysiwygViewModel.idealHeight)
.padding(.horizontal, horizontalPadding)
.padding(.top, 8)
.onTapGesture {