letro/letro-ios
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases 2 Wiki Activity

implemented the UI to render the formatted floating date

Browse Source
This commit is contained in:
Mauro Romito
2026-03-27 17:19:33 +01:00
committed by Mauro
parent c0f9f13c50
commit 7296b09a17
13 changed files with 148 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
AccessibilityTests/Sources/GeneratedAccessibilityTests.swift
View File

@@ -159,6 +159,10 @@ extension AccessibilityTests {
try await performAccessibilityAudit(named: "FileRoomTimelineView_Previews")
}
func testFloatingDateBadge() async throws {
try await performAccessibilityAudit(named: "FloatingDateBadge_Previews")
}
func testFormButtonStyles() async throws {
try await performAccessibilityAudit(named: "FormButtonStyles_Previews")
}

4
ElementX.xcodeproj/project.pbxproj
View File

@@ -31,6 +31,7 @@
0180C44B997EDA8D21F883AC /* RoomNotificationSettingsCustomSectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B746EFA112532A7B701FB914 /* RoomNotificationSettingsCustomSectionView.swift */; };
01B63F1A04A276B39AC17014 /* CallInviteRoomTimelineItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = E9A3D3CFA199FA7897364547 /* CallInviteRoomTimelineItem.swift */; };
020F7E70167FB2833266F2F0 /* AnalyticsSettingsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = D39D7F513A36C9C1951DB44C /* AnalyticsSettingsScreen.swift */; };
023E44445795A279281E6106 /* FloatingDateBadge.swift in Sources */ = {isa = PBXBuildFile; fileRef = ECEC9A622AA2F8DBE928AC78 /* FloatingDateBadge.swift */; };
024E70451A7CD9E4E034D8A9 /* VoiceMessageRoomTimelineItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = D529B976F8B2AA654D923422 /* VoiceMessageRoomTimelineItem.swift */; };
02A92F8F4538CECDFB4F2607 /* RoomDirectorySearchScreenCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1562EAF6231151A675BED7A9 /* RoomDirectorySearchScreenCoordinator.swift */; };
02D8DF8EB7537EB4E9019DDB /* EventBasedTimelineItemProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 218AB05B4E3889731959C5F1 /* EventBasedTimelineItemProtocol.swift */; };
@@ -2867,6 +2868,7 @@
ECB836DD8BE31931F51B8AC9 /* EncryptionSettingsFlowCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EncryptionSettingsFlowCoordinator.swift; sourceTree = "<group>"; };
ECD5FCBA169B6A82F501CA1B /* AnalyticsSettingsScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnalyticsSettingsScreenViewModelProtocol.swift; sourceTree = "<group>"; };
ECE03E834CC8C2721899E6AC /* StaticLocationSheet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StaticLocationSheet.swift; sourceTree = "<group>"; };
ECEC9A622AA2F8DBE928AC78 /* FloatingDateBadge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FloatingDateBadge.swift; sourceTree = "<group>"; };
ECF79FB25E2D4BD6F50CE7C9 /* RoomMembersListScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomMembersListScreenViewModel.swift; sourceTree = "<group>"; };
ECFB21A2FF41CF0E118790DD /* StaticLocationData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StaticLocationData.swift; sourceTree = "<group>"; };
ED044D00F2176681CC02CD54 /* HomeScreenRoomCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreenRoomCell.swift; sourceTree = "<group>"; };
@@ -6877,6 +6879,7 @@
FDF04D0E125CB4B5C5DB5191 /* View */ = {
isa = PBXGroup;
children = (
ECEC9A622AA2F8DBE928AC78 /* FloatingDateBadge.swift */,
BCDA016D05107DED3B9495CB /* TimelineItemDebugView.swift */,
D53FCCE44F96E0BC411A6CF0 /* TimelineSenderAvatarView.swift */,
93C713D124FE915ABF47A6B7 /* TimelineView.swift */,
@@ -8171,6 +8174,7 @@
D33AC79A50DFC26D2498DD28 /* FileRoomTimelineItem.swift in Sources */,
37D789F24199B32E3FD1AA7B /* FileRoomTimelineItemContent.swift in Sources */,
64EE9D2CF7AD02EE53983CE1 /* FileRoomTimelineView.swift in Sources */,
023E44445795A279281E6106 /* FloatingDateBadge.swift in Sources */,
F5D2270B5021D521C0D22E11 /* FlowCoordinatorProtocol.swift in Sources */,
18E3786918486D4C9726BC84 /* FormButtonStyles.swift in Sources */,
4D0F4385B7DDB68C66C78857 /* FormattedBodyText.swift in Sources */,

51
ElementX/Sources/Other/SwiftUI/Views/TopBannerModifier.swift
View File

@@ -7,20 +7,53 @@
import SwiftUI
/// A single banner item to be displayed in a `topBanners` overlay.
struct TopBannerItem {
var banner: AnyView
var isVisible: Bool
init(_ banner: some View, isVisible: Bool) {
self.banner = AnyView(banner)
self.isVisible = isVisible
}
}
extension View {
/// Overlays the given banner view at the top edge of this view, using a
/// slide from the top edge when `isVisible` is toggled.
func topBanner(_ banner: some View, isVisible: Bool) -> some View {
overlay(alignment: .top) {
ZStack {
if isVisible {
banner.transition(.move(edge: .top))
} else {
// An equal amount of space needs to be reserved in order for the transition to work.
banner.hidden()
func topBanner(_ banner: some View, isVisible: Bool, footer: some View = EmptyView()) -> some View {
topBanners([TopBannerItem(banner, isVisible: isVisible)], footer: footer)
}
/// Overlays the given banner views at the top edge of this view. Each banner
/// slides from the top edge based on its own `isVisible` flag. Later items in
/// the array are overlayed on top of earlier ones. The footer is shared across
/// all banners and displayed below the topmost visible banner.
func topBanners(_ items: [TopBannerItem], footer: some View = EmptyView()) -> some View {
let anyBannerVisible = items.contains { $0.isVisible }
return overlay(alignment: .top) {
ZStack(alignment: .top) {
// Visible layout
VStack(spacing: 0) {
ZStack(alignment: .top) {
ForEach(Array(items.enumerated()), id: \.offset) { _, item in
if item.isVisible {
item.banner
.transition(.move(edge: .top))
}
}
}
footer
// Banners include a 28 padding to include shadows in their size
// so we need to remove 28 if any is visible
.padding(.top, anyBannerVisible ? -15 : 13)
}
// Hidden layout used for sizing when no banner is visible
Color.clear
.hidden()
.allowsHitTesting(false)
}
.animation(.elementDefault, value: isVisible)
.animation(.elementDefault, value: items.map(\.isVisible))
.clipped()
}
}

1
ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift
View File

@@ -47,6 +47,7 @@ enum TestablePreviewsDictionary {
"EstimatedWaveformView_Previews" : EstimatedWaveformView_Previews.self,
"FileMediaEventsTimelineView_Previews" : FileMediaEventsTimelineView_Previews.self,
"FileRoomTimelineView_Previews" : FileRoomTimelineView_Previews.self,
"FloatingDateBadge_Previews" : FloatingDateBadge_Previews.self,
"FormButtonStyles_Previews" : FormButtonStyles_Previews.self,
"FormattedBodyText_Previews" : FormattedBodyText_Previews.self,
"FormattingToolbar_Previews" : FormattingToolbar_Previews.self,

15
ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
View File

@@ -33,9 +33,11 @@ struct RoomScreen: View {
.accessibilityIdentifier(A11yIdentifiers.roomScreen.scrollToBottom)
}
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.topBanner(pinnedItemsBanner, isVisible: context.viewState.shouldShowPinnedEventsBanner && !isVoiceOverEnabled)
// This can overlay on top of the pinnedItemsBanner
.topBanner(knockRequestsBanner, isVisible: context.viewState.shouldSeeKnockRequests)
.topBanners([
TopBannerItem(pinnedItemsBanner, isVisible: context.viewState.shouldShowPinnedEventsBanner && !isVoiceOverEnabled),
// This can overlay on top of the pinnedItemsBanner
TopBannerItem(knockRequestsBanner, isVisible: context.viewState.shouldSeeKnockRequests)
], footer: dateBadge)
.safeAreaInset(edge: .top) {
// When VoiceOver is enabled, the table view isn't reversed and the scroll gestures
// don't trigger meaning the banner never hides itself and so the .overlay layout
@@ -88,6 +90,13 @@ struct RoomScreen: View {
.padding(.top, 16)
}
@ViewBuilder
private var dateBadge: some View {
if timelineContext.viewState.floatingTimelineDateEnabled, !isVoiceOverEnabled {
FloatingDateBadge(dateText: timelineContext.floatingDateText)
}
}
private func dismissKnockRequestsBanner() {
context.send(viewAction: .dismissKnockRequests)
}

6
ElementX/Sources/Screens/ThreadTimelineScreen/View/ThreadTimelineScreen.swift
View File

@@ -31,6 +31,12 @@ struct ThreadTimelineScreen: View {
.toolbar { toolbar }
.toolbarBackground(.visible, for: .navigationBar) // Fix the toolbar's background.
.timelineMediaPreview(viewModel: $context.mediaPreviewViewModel)
.overlay(alignment: .top) {
if timelineContext.viewState.floatingTimelineDateEnabled {
FloatingDateBadge(dateText: timelineContext.floatingDateText)
.padding(.top, 13)
}
}
.overlay(alignment: .bottomTrailing) {
TimelineScrollToBottomButton(isVisible: isAtBottomAndLive) {
timelineContext.send(viewAction: .scrollToBottom)

58
ElementX/Sources/Screens/Timeline/View/FloatingDateBadge.swift Normal file
View File

@@ -0,0 +1,58 @@
//
// Copyright 2025 Element Creations Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
/// A floating badge that displays the date of the topmost visible timeline item
/// while the user is scrolling the timeline. It fades in when scrolling starts and
/// fades out shortly after scrolling stops.
struct FloatingDateBadge: View {
let dateText: String?
@Environment(\.colorScheme) private var colorScheme: ColorScheme
private var backgroundColor: Color {
switch colorScheme {
case .dark:
.compound.bgSubtlePrimary
default:
.compound.bgCanvasDefault
}
}
var body: some View {
ZStack {
if let dateText {
Text(dateText)
.font(.compound.bodySMSemibold)
.foregroundColor(.compound.textPrimary)
.padding(.horizontal, 16)
.padding(.vertical, 8)
.background(Capsule()
.fill(backgroundColor))
.shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.1), radius: 12, x: 0, y: 4)
.transition(.opacity)
}
}
.animation(.easeInOut(duration: 0.15).disabledDuringTests(), value: dateText)
}
}
// MARK: - Previews
struct FloatingDateBadge_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(spacing: 20) {
FloatingDateBadge(dateText: "Today")
FloatingDateBadge(dateText: "Yesterday")
FloatingDateBadge(dateText: "Tuesday, January 9, 2007")
}
.padding()
.previewLayout(.sizeThatFits)
}
}

1
ElementX/Sources/Screens/Timeline/View/TimelineView.swift
View File

@@ -83,6 +83,7 @@ struct TimelineViewRepresentable: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> TimelineTableViewController {
TimelineTableViewController(coordinator: context.coordinator,
isScrolledToBottom: $viewModelContext.isScrolledToBottom,
floatingDateText: $viewModelContext.floatingDateText,
scrollToBottomPublisher: viewModelContext.viewState.timelineState.scrollToBottomPublisher)
}

8
PreviewTests/Sources/GeneratedPreviewTests.swift
View File

@@ -315,6 +315,14 @@ extension PreviewTests {
}
}
@Test
func floatingDateBadge() async throws {
AppSettings.resetAllSettings() // Ensure this test's previews start with fresh settings.
for (index, preview) in FloatingDateBadge_Previews._allPreviews.enumerated() {
try await assertSnapshots(matching: preview, step: index)
}
}
@Test
func formButtonStyles() async throws {
AppSettings.resetAllSettings() // Ensure this test's previews start with fresh settings.

BIN
PreviewTests/Sources/__Snapshots__/PreviewTests/floatingDateBadge.iPad-en-GB-0.png LFS Normal file
View File

Binary file not shown.

BIN
PreviewTests/Sources/__Snapshots__/PreviewTests/floatingDateBadge.iPad-pseudo-0.png LFS Normal file
View File

Binary file not shown.

BIN
PreviewTests/Sources/__Snapshots__/PreviewTests/floatingDateBadge.iPhone-en-GB-0.png LFS Normal file
View File

Binary file not shown.

BIN
PreviewTests/Sources/__Snapshots__/PreviewTests/floatingDateBadge.iPhone-pseudo-0.png LFS Normal file
View File

Binary file not shown.