From 5661640f3834ad6ba97fefdbfe95a38ee498f952 Mon Sep 17 00:00:00 2001 From: Ilya Laktyushin Date: Tue, 6 Jun 2023 03:41:14 +0400 Subject: [PATCH] Story view iPad layout improvements --- .../Sources/MediaEditorScreen.swift | 1 + .../Sources/StoryPreviewComponent.swift | 1 + .../Sources/MessageInputPanelComponent.swift | 14 ++++++- .../Sources/StoryContainerScreen.swift | 9 +++-- .../StoryItemSetContainerComponent.swift | 39 +++++++++++++++---- 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaEditorScreen.swift b/submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaEditorScreen.swift index 186ad786c2..319880d560 100644 --- a/submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaEditorScreen.swift +++ b/submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaEditorScreen.swift @@ -671,6 +671,7 @@ final class MediaEditorScreenComponent: Component { strings: environment.strings, style: .editor, placeholder: "Add a caption...", + alwaysDarkWhenHasText: false, presentController: { [weak self] c in guard let self, let _ = self.component else { return diff --git a/submodules/TelegramUI/Components/MediaEditorScreen/Sources/StoryPreviewComponent.swift b/submodules/TelegramUI/Components/MediaEditorScreen/Sources/StoryPreviewComponent.swift index 2c48d81991..d270647c45 100644 --- a/submodules/TelegramUI/Components/MediaEditorScreen/Sources/StoryPreviewComponent.swift +++ b/submodules/TelegramUI/Components/MediaEditorScreen/Sources/StoryPreviewComponent.swift @@ -250,6 +250,7 @@ final class StoryPreviewComponent: Component { strings: presentationData.strings, style: .story, placeholder: "Reply Privately...", + alwaysDarkWhenHasText: false, presentController: { _ in }, sendMessageAction: { diff --git a/submodules/TelegramUI/Components/MessageInputPanelComponent/Sources/MessageInputPanelComponent.swift b/submodules/TelegramUI/Components/MessageInputPanelComponent/Sources/MessageInputPanelComponent.swift index 60657da8a9..90c6b3bf70 100644 --- a/submodules/TelegramUI/Components/MessageInputPanelComponent/Sources/MessageInputPanelComponent.swift +++ b/submodules/TelegramUI/Components/MessageInputPanelComponent/Sources/MessageInputPanelComponent.swift @@ -29,6 +29,7 @@ public final class MessageInputPanelComponent: Component { public let strings: PresentationStrings public let style: Style public let placeholder: String + public let alwaysDarkWhenHasText: Bool public let presentController: (ViewController) -> Void public let sendMessageAction: () -> Void public let setMediaRecordingActive: ((Bool, Bool, Bool) -> Void)? @@ -55,6 +56,7 @@ public final class MessageInputPanelComponent: Component { strings: PresentationStrings, style: Style, placeholder: String, + alwaysDarkWhenHasText: Bool, presentController: @escaping (ViewController) -> Void, sendMessageAction: @escaping () -> Void, setMediaRecordingActive: ((Bool, Bool, Bool) -> Void)?, @@ -80,6 +82,7 @@ public final class MessageInputPanelComponent: Component { self.strings = strings self.style = style self.placeholder = placeholder + self.alwaysDarkWhenHasText = alwaysDarkWhenHasText self.presentController = presentController self.sendMessageAction = sendMessageAction self.setMediaRecordingActive = setMediaRecordingActive @@ -119,6 +122,9 @@ public final class MessageInputPanelComponent: Component { if lhs.placeholder != rhs.placeholder { return false } + if lhs.alwaysDarkWhenHasText != rhs.alwaysDarkWhenHasText { + return false + } if lhs.audioRecorder !== rhs.audioRecorder { return false } @@ -718,7 +724,13 @@ public final class MessageInputPanelComponent: Component { } } - self.fieldBackgroundView.updateColor(color: self.textFieldExternalState.isEditing || component.style == .editor ? UIColor(white: 0.0, alpha: 0.5) : UIColor(white: 1.0, alpha: 0.09), transition: transition.containedViewLayoutTransition) + var fieldBackgroundIsDark = false + if self.textFieldExternalState.hasText && component.alwaysDarkWhenHasText { + fieldBackgroundIsDark = true + } else if self.textFieldExternalState.isEditing || component.style == .editor { + fieldBackgroundIsDark = true + } + self.fieldBackgroundView.updateColor(color: fieldBackgroundIsDark ? UIColor(white: 0.0, alpha: 0.5) : UIColor(white: 1.0, alpha: 0.09), transition: transition.containedViewLayoutTransition) if let placeholder = self.placeholder.view, let vibrancyPlaceholderView = self.vibrancyPlaceholder.view { placeholder.isHidden = self.textFieldExternalState.hasText vibrancyPlaceholderView.isHidden = placeholder.isHidden diff --git a/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryContainerScreen.swift b/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryContainerScreen.swift index 39792a8157..5a63af2df3 100644 --- a/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryContainerScreen.swift +++ b/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryContainerScreen.swift @@ -556,14 +556,15 @@ private final class StoryContainerScreenComponent: Component { } var itemSetContainerSize = availableSize - var itemSetContainerTopInset = environment.statusBarHeight + 12.0 + var itemSetContainerInsets = UIEdgeInsets(top: environment.statusBarHeight + 12.0, left: 0.0, bottom: 0.0, right: 0.0) var itemSetContainerSafeInsets = environment.safeInsets if case .regular = environment.metrics.widthClass { let availableHeight = min(1080.0, availableSize.height - max(45.0, environment.safeInsets.bottom) * 2.0) let mediaHeight = availableHeight - 40.0 let mediaWidth = floor(mediaHeight * 0.5625) itemSetContainerSize = CGSize(width: mediaWidth, height: availableHeight) - itemSetContainerTopInset = 0.0 + itemSetContainerInsets.top = 0.0 + itemSetContainerInsets.bottom = floorToScreenPixels((availableSize.height - itemSetContainerSize.height) / 2.0) itemSetContainerSafeInsets.bottom = 0.0 } @@ -575,13 +576,14 @@ private final class StoryContainerScreenComponent: Component { slice: slice, theme: environment.theme, strings: environment.strings, - containerInsets: UIEdgeInsets(top: itemSetContainerTopInset, left: 0.0, bottom: environment.inputHeight, right: 0.0), + containerInsets: itemSetContainerInsets, safeInsets: itemSetContainerSafeInsets, inputHeight: environment.inputHeight, metrics: environment.metrics, isProgressPaused: isProgressPaused || i != focusedIndex, hideUI: i == focusedIndex && self.itemSetPanState?.didBegin == false, visibilityFraction: 1.0 - abs(panFraction + cubeAdditionalRotationFraction), + isPanning: self.itemSetPanState?.didBegin == true, presentController: { [weak self] c in guard let self, let environment = self.environment else { return @@ -670,6 +672,7 @@ private final class StoryContainerScreenComponent: Component { self.addSubview(itemSetView) } if itemSetComponentView.superview == nil { + itemSetView.tintLayer.isDoubleSided = false itemSetComponentView.layer.isDoubleSided = false itemSetView.addSubview(itemSetComponentView) itemSetView.layer.addSublayer(itemSetView.tintLayer) diff --git a/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryItemSetContainerComponent.swift b/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryItemSetContainerComponent.swift index ff5eecd2ac..8b8d03ea20 100644 --- a/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryItemSetContainerComponent.swift +++ b/submodules/TelegramUI/Components/Stories/StoryContainerScreen/Sources/StoryItemSetContainerComponent.swift @@ -44,6 +44,7 @@ public final class StoryItemSetContainerComponent: Component { public let isProgressPaused: Bool public let hideUI: Bool public let visibilityFraction: CGFloat + public let isPanning: Bool public let presentController: (ViewController) -> Void public let close: () -> Void public let navigate: (NavigationDirection) -> Void @@ -63,6 +64,7 @@ public final class StoryItemSetContainerComponent: Component { isProgressPaused: Bool, hideUI: Bool, visibilityFraction: CGFloat, + isPanning: Bool, presentController: @escaping (ViewController) -> Void, close: @escaping () -> Void, navigate: @escaping (NavigationDirection) -> Void, @@ -81,6 +83,7 @@ public final class StoryItemSetContainerComponent: Component { self.isProgressPaused = isProgressPaused self.hideUI = hideUI self.visibilityFraction = visibilityFraction + self.isPanning = isPanning self.presentController = presentController self.close = close self.navigate = navigate @@ -122,6 +125,9 @@ public final class StoryItemSetContainerComponent: Component { if lhs.visibilityFraction != rhs.visibilityFraction { return false } + if lhs.isPanning != rhs.isPanning { + return false + } return true } @@ -788,6 +794,7 @@ public final class StoryItemSetContainerComponent: Component { //self.updatePreloads() + let wasPanning = self.component?.isPanning ?? false self.component = component self.state = state @@ -797,10 +804,23 @@ public final class StoryItemSetContainerComponent: Component { } else { bottomContentInset = 0.0 } + + var inputPanelAvailableWidth = availableSize.width + var inputPanelTransition = transition + if case .regular = component.metrics.widthClass { + if (self.inputPanelExternalState.isEditing || self.inputPanelExternalState.hasText) { + if wasPanning != component.isPanning { + inputPanelTransition = .easeInOut(duration: 0.25) + } + if !component.isPanning { + inputPanelAvailableWidth += 200.0 + } + } + } self.inputPanel.parentState = state let inputPanelSize = self.inputPanel.update( - transition: transition, + transition: inputPanelTransition, component: AnyComponent(MessageInputPanelComponent( externalState: self.inputPanelExternalState, context: component.context, @@ -808,6 +828,7 @@ public final class StoryItemSetContainerComponent: Component { strings: component.strings, style: .story, placeholder: "Reply Privately...", + alwaysDarkWhenHasText: component.metrics.widthClass == .regular, presentController: { [weak self] c in guard let self, let component = self.component else { return @@ -881,11 +902,11 @@ public final class StoryItemSetContainerComponent: Component { wasRecordingDismissed: self.sendMessageContext.wasRecordingDismissed, timeoutValue: nil, timeoutSelected: false, - displayGradient: component.inputHeight != 0.0, + displayGradient: component.inputHeight != 0.0 && component.metrics.widthClass != .regular, bottomInset: component.inputHeight != 0.0 ? 0.0 : bottomContentInset )), environment: {}, - containerSize: CGSize(width: availableSize.width, height: 200.0) + containerSize: CGSize(width: inputPanelAvailableWidth, height: 200.0) ) var currentItem: StoryContentItem? @@ -1096,11 +1117,15 @@ public final class StoryItemSetContainerComponent: Component { let inputPanelIsOverlay: Bool if component.inputHeight == 0.0 { inputPanelBottomInset = bottomContentInset - bottomContentInset += inputPanelSize.height + if case .regular = component.metrics.widthClass { + bottomContentInset += 60.0 + } else { + bottomContentInset += inputPanelSize.height + } inputPanelIsOverlay = false } else { bottomContentInset += 44.0 - inputPanelBottomInset = component.inputHeight + inputPanelBottomInset = component.inputHeight - component.containerInsets.bottom inputPanelIsOverlay = true } @@ -1295,7 +1320,7 @@ public final class StoryItemSetContainerComponent: Component { let itemLayout = ItemLayout(size: CGSize(width: contentFrame.width, height: availableSize.height - component.containerInsets.top - 44.0 - bottomContentInsetWithoutInput)) self.itemLayout = itemLayout - let inputPanelFrame = CGRect(origin: CGPoint(x: 0.0, y: availableSize.height - inputPanelBottomInset - inputPanelSize.height), size: inputPanelSize) + let inputPanelFrame = CGRect(origin: CGPoint(x: floorToScreenPixels((availableSize.width - inputPanelSize.width) / 2.0), y: availableSize.height - inputPanelBottomInset - inputPanelSize.height), size: inputPanelSize) var inputPanelAlpha: CGFloat = focusedItem?.isMy == true ? 0.0 : 1.0 if case .regular = component.metrics.widthClass { inputPanelAlpha *= component.visibilityFraction @@ -1304,7 +1329,7 @@ public final class StoryItemSetContainerComponent: Component { if inputPanelView.superview == nil { self.addSubview(inputPanelView) } - transition.setFrame(view: inputPanelView, frame: inputPanelFrame) + inputPanelTransition.setFrame(view: inputPanelView, frame: inputPanelFrame) transition.setAlpha(view: inputPanelView, alpha: inputPanelAlpha) }