mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-28 23:32:41 +00:00
improved the pan animation to be as the designs
This commit is contained in:
parent
cac30ae11f
commit
2bd7232a3f
5 changed files with 32 additions and 11 deletions
|
@ -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;
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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! {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue