Storage management UI improvements

This commit is contained in:
Ali 2022-12-24 21:18:33 +04:00
parent 1ea4088098
commit f7c73e6ccb
2 changed files with 36 additions and 16 deletions

View File

@ -381,6 +381,7 @@ final class StorageUsagePanelContainerComponent: Component {
class View: UIView, UIGestureRecognizerDelegate {
private let topPanelBackgroundView: UIView
private let topPanelMergedBackgroundView: UIView
private let topPanelSeparatorLayer: SimpleLayer
private let header = ComponentView<Empty>()
@ -396,6 +397,10 @@ final class StorageUsagePanelContainerComponent: Component {
override init(frame: CGRect) {
self.topPanelBackgroundView = UIView()
self.topPanelMergedBackgroundView = UIView()
self.topPanelMergedBackgroundView.alpha = 0.0
self.topPanelSeparatorLayer = SimpleLayer()
self.panelsBackgroundLayer = SimpleLayer()
@ -404,6 +409,7 @@ final class StorageUsagePanelContainerComponent: Component {
self.layer.addSublayer(self.panelsBackgroundLayer)
self.addSubview(self.topPanelBackgroundView)
self.addSubview(self.topPanelMergedBackgroundView)
self.layer.addSublayer(self.topPanelSeparatorLayer)
let panRecognizer = InteractiveTransitionGestureRecognizer(target: self, action: #selector(self.panGesture(_:)), allowedDirections: { [weak self] point in
@ -531,6 +537,11 @@ final class StorageUsagePanelContainerComponent: Component {
}
}
func updateNavigationMergeFactor(value: CGFloat, transition: Transition) {
transition.setAlpha(view: self.topPanelMergedBackgroundView, alpha: value)
transition.setAlpha(view: self.topPanelBackgroundView, alpha: 1.0 - value)
}
func update(component: StorageUsagePanelContainerComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<StorageUsagePanelContainerEnvironment>, transition: Transition) -> CGSize {
let environment = environment[StorageUsagePanelContainerEnvironment.self].value
@ -542,20 +553,15 @@ final class StorageUsagePanelContainerComponent: Component {
if themeUpdated {
self.panelsBackgroundLayer.backgroundColor = component.theme.list.itemBlocksBackgroundColor.cgColor
self.topPanelSeparatorLayer.backgroundColor = component.theme.list.itemBlocksSeparatorColor.cgColor
self.topPanelBackgroundView.backgroundColor = component.theme.list.itemBlocksBackgroundColor
self.topPanelMergedBackgroundView.backgroundColor = component.theme.rootController.navigationBar.blurredBackgroundColor
}
let topPanelCoverHeight: CGFloat = 10.0
let topPanelFrame = CGRect(origin: CGPoint(x: 0.0, y: -topPanelCoverHeight), size: CGSize(width: availableSize.width, height: 44.0))
transition.setFrame(view: self.topPanelBackgroundView, frame: topPanelFrame)
let lockScrollingTransition: Transition
if themeUpdated {
lockScrollingTransition = transition
} else {
lockScrollingTransition = Transition(animation: .curve(duration: 0.2, curve: .easeInOut))
}
lockScrollingTransition.setBackgroundColor(view: self.topPanelBackgroundView, color: environment.isScrollable ? component.theme.rootController.navigationBar.blurredBackgroundColor : component.theme.list.itemBlocksBackgroundColor)
transition.setFrame(view: self.topPanelMergedBackgroundView, frame: topPanelFrame)
transition.setFrame(layer: self.panelsBackgroundLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: topPanelFrame.maxY), size: CGSize(width: availableSize.width, height: availableSize.height - topPanelFrame.maxY)))

View File

@ -236,6 +236,7 @@ final class StorageUsageScreenComponent: Component {
private let navigationBackgroundView: BlurredBackgroundView
private let navigationSeparatorLayer: SimpleLayer
private let navigationSeparatorLayerContainer: SimpleLayer
private let navigationEditButton = ComponentView<Empty>()
private let navigationDoneButton = ComponentView<Empty>()
@ -287,8 +288,12 @@ final class StorageUsageScreenComponent: Component {
self.headerOffsetContainer.isUserInteractionEnabled = false
self.navigationBackgroundView = BlurredBackgroundView(color: nil, enableBlur: true)
self.navigationBackgroundView.alpha = 0.0
self.navigationSeparatorLayer = SimpleLayer()
self.navigationSeparatorLayer.opacity = 0.0
self.navigationSeparatorLayerContainer = SimpleLayer()
self.navigationSeparatorLayerContainer.opacity = 0.0
self.scrollView = ScrollViewImpl()
@ -324,7 +329,9 @@ final class StorageUsageScreenComponent: Component {
self.scrollView.layer.addSublayer(self.headerProgressForegroundLayer)
self.addSubview(self.navigationBackgroundView)
self.layer.addSublayer(self.navigationSeparatorLayer)
self.navigationSeparatorLayerContainer.addSublayer(self.navigationSeparatorLayer)
self.layer.addSublayer(self.navigationSeparatorLayerContainer)
self.addSubview(self.headerOffsetContainer)
}
@ -356,10 +363,9 @@ final class StorageUsageScreenComponent: Component {
}
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
guard let navigationMetrics = self.navigationMetrics else {
guard let _ = self.navigationMetrics else {
return
}
let _ = navigationMetrics
let paneAreaExpansionDistance: CGFloat = 32.0
let paneAreaExpansionFinalPoint: CGFloat = scrollView.contentSize.height - scrollView.bounds.height
@ -399,6 +405,7 @@ final class StorageUsageScreenComponent: Component {
let navigationBackgroundAlpha: CGFloat = abs(headerOffset - minOffset) < 4.0 ? 1.0 : 0.0
animatedTransition.setAlpha(view: self.navigationBackgroundView, alpha: navigationBackgroundAlpha)
animatedTransition.setAlpha(layer: self.navigationSeparatorLayerContainer, alpha: navigationBackgroundAlpha)
if let navigationEditButtonView = self.navigationEditButton.view {
animatedTransition.setAlpha(view: navigationEditButtonView, alpha: (self.selectionState == nil ? 1.0 : 0.0) * navigationBackgroundAlpha)
@ -407,10 +414,13 @@ final class StorageUsageScreenComponent: Component {
animatedTransition.setAlpha(view: navigationDoneButtonView, alpha: (self.selectionState == nil ? 0.0 : 1.0) * navigationBackgroundAlpha)
}
if abs(headerOffset - minOffset) < 4.0 && !isLockedAtPanels {
animatedTransition.setAlpha(layer: self.navigationSeparatorLayer, alpha: 1.0)
} else {
animatedTransition.setAlpha(layer: self.navigationSeparatorLayer, alpha: 0.0)
let expansionDistance: CGFloat = 32.0
var expansionDistanceFactor: CGFloat = abs(scrollBounds.maxY - self.scrollView.contentSize.height) / expansionDistance
expansionDistanceFactor = max(0.0, min(1.0, expansionDistanceFactor))
transition.setAlpha(layer: self.navigationSeparatorLayer, alpha: expansionDistanceFactor)
if let panelContainerView = self.panelContainer.view as? StorageUsagePanelContainerComponent.View {
panelContainerView.updateNavigationMergeFactor(value: 1.0 - expansionDistanceFactor, transition: transition)
}
var offsetFraction: CGFloat = abs(headerOffset - minOffset) / 60.0
@ -497,7 +507,11 @@ final class StorageUsageScreenComponent: Component {
self.navigationBackgroundView.updateColor(color: environment.theme.rootController.navigationBar.blurredBackgroundColor, transition: .immediate)
self.navigationBackgroundView.update(size: navigationFrame.size, transition: transition.containedViewLayoutTransition)
transition.setFrame(view: self.navigationBackgroundView, frame: navigationFrame)
transition.setFrame(layer: self.navigationSeparatorLayer, frame: CGRect(origin: CGPoint(x: 0.0, y: navigationFrame.maxY), size: CGSize(width: availableSize.width, height: UIScreenPixel)))
let navigationSeparatorFrame = CGRect(origin: CGPoint(x: 0.0, y: navigationFrame.maxY), size: CGSize(width: availableSize.width, height: UIScreenPixel))
transition.setFrame(layer: self.navigationSeparatorLayerContainer, frame: navigationSeparatorFrame)
transition.setFrame(layer: self.navigationSeparatorLayer, frame: CGRect(origin: CGPoint(), size: navigationSeparatorFrame.size))
let navigationEditButtonSize = self.navigationEditButton.update(
transition: transition,