ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-03 06:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Timeline: add a Jump to Unread button and a new-message badge on the scroll-to-bottom button. (#5506)

Browse Source 
* Timeline: add a Jump to Unread button and a new-message badge on the scroll-to-bottom button.

* Rename scrollToFirstUnread to scrollToReadMarker for consistency with isReadMarkerVisible.

* Cache readMarkerUniqueID and unreadMessageCount as stored properties on TimelineState.

* TimelineViewModel: rename newTimelineItems and drop redundant ordering comment.

* Use Compound chevron icons in TimelineScrollButton.

* Fix TimelineScrollButton layout at large dynamic type sizes.

* Add a trailingAccessory slot to topBanners and use it to dodge banners with the jump-to-read-marker button.

* Put jump-to-read-marker behind a developer-options feature flag.

* Fine-tune TimelineScrollButton sizing and badge colour.

* Remove TimelineScrollButton chevron offset that was compensating for SF Symbol centering.

* Drop the new-messages count, replace with a presence dot.

* Move both timeline scroll buttons to bottom-right and revert topBanners trailingAccessory slot.

* Position TimelineScrollButton badge above for up direction and below for down direction.

* Add long-press mark-as-read pill to the timeline scroll buttons

* Read isSwitchingTimelines from state in updateHasNewMessagesAtBottom.

* Use assertionFailure when scrollToReadMarker is called with no read marker.

* Add TimelineScrollButton preview snapshots.

* (fix) design and various self-review issues

* (fix) suppress scroll button tap after long-press

* (feat) fall back to RoomInfo.fullyReadEventID for jump-to-unread

* (fix) hide jump-to-unread immediately after mark-as-read

* (fix) align with newer matrix-rust-sdk surface

* Bump the RustSDK to v26.05.20

---------

Signed-off-by: Daniel Anderson <daniel.anderson@toptal.com>
Co-authored-by: Stefan Ceriu <stefan.ceriu@gmail.com>
This commit is contained in:
Danny
2026-05-21 06:03:32 -06:00
committed by GitHub
parent ccec2dff6e
commit eae464ecd7
29 changed files with 585 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/Views/TimelineScrollButton.swift
+141
View File
@@ -0,0 +1,141 @@
//
// Copyright 2026 Element Creations Ltd.
// Copyright 2025 New Vector 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 small floating circular button used by the timeline to jump to either the bottom (newest
/// item) or to the read marker (NEW banner). Optionally displays a presence dot.
struct TimelineScrollButton: View {
enum Direction {
case down
case up
}
let direction: Direction
let isHidden: Bool
let showsBadge: Bool
let onLongPress: (() -> Void)?
let callback: () -> Void
@ScaledMetric(relativeTo: .compound.bodyLG) private var iconSize: CGFloat = 24
@ScaledMetric(relativeTo: .compound.bodyLG) private var badgeDotSize: CGFloat = 12
@GestureState private var isPressing = false
/// Set when a long-press is recognized so the trailing touch-up doesn't also fire `callback()`.
@State private var consumedByLongPress = false
/// Padding around the chevron, balanced so the total circle stays ~36pt at default text size.
private let iconPadding: CGFloat = 6
/// Vertical offset that half-centers the badge dot on the circle's edge. Magnitude is half
/// the dot's diameter so half sits inside the circle, half outside. Sign is applied at the
/// call site based on direction.
private var badgeOffsetMagnitude: CGFloat {
badgeDotSize / 2
}
init(direction: Direction = .down,
isHidden: Bool = false,
showsBadge: Bool = false,
onLongPress: (() -> Void)? = nil,
callback: @escaping () -> Void) {
self.direction = direction
self.isHidden = isHidden
self.showsBadge = showsBadge
self.onLongPress = onLongPress
self.callback = callback
}
var body: some View {
if let onLongPress {
buttonContent
.scaleEffect(isPressing ? 1.05 : 1.0)
.compositingGroup()
.shadow(color: .black.opacity(isPressing ? 0.2 : 0), radius: isPressing ? 12 : 0)
.animation(.spring(response: 0.7), value: isPressing)
.simultaneousGesture(LongPressGesture(minimumDuration: 0.5)
.updating($isPressing) { current, state, _ in state = current }
.onEnded { _ in
consumedByLongPress = true
UIImpactFeedbackGenerator(style: .heavy).impactOccurred()
onLongPress()
})
.simultaneousGesture(DragGesture(minimumDistance: 0)
.onEnded { _ in
// Touch-up signal. Defer the clear so the Button's tap action — which
// also fires on touch-up when the release was on-button — reads the
// flag while it's still set and suppresses the unwanted callback.
Task { @MainActor in consumedByLongPress = false }
})
} else {
buttonContent
}
}
private var buttonContent: some View {
Button {
if consumedByLongPress {
consumedByLongPress = false
return
}
callback()
} label: {
ZStack(alignment: direction == .down ? .bottom : .top) {
icon
if showsBadge {
badge
.offset(y: direction == .down ? badgeOffsetMagnitude : -badgeOffsetMagnitude)
}
}
}
.opacity(isHidden ? 0 : 1)
.allowsHitTesting(!isHidden)
.accessibilityHidden(isHidden)
.accessibilityLabel(direction == .down ? L10n.a11yJumpToBottom : UntranslatedL10n.a11yJumpToUnread)
.animation(.elementDefault, value: isHidden)
}
@ViewBuilder
private var icon: some View {
let chevron = CompoundIcon(direction == .down ? \.chevronDown : \.chevronUp,
size: .custom(iconSize),
relativeTo: .compound.bodyLG)
.foregroundStyle(.compound.iconPrimary)
.padding(iconPadding)
if #available(iOS 26, *) {
chevron
.glassEffect(.regular, in: Circle())
.overlay(Circle().stroke(Color.compound.borderInteractiveSecondary, lineWidth: 1))
} else {
chevron
.background(.regularMaterial, in: Circle())
.overlay(Circle().stroke(Color.compound.borderInteractiveSecondary, lineWidth: 1))
}
}
private var badge: some View {
Circle()
.fill(Color.compound.iconAccentPrimary)
.frame(width: badgeDotSize, height: badgeDotSize)
}
}
struct TimelineScrollButton_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(spacing: 16) {
TimelineScrollButton(direction: .down) { }
TimelineScrollButton(direction: .down, showsBadge: true) { }
TimelineScrollButton(direction: .up) { }
TimelineScrollButton(direction: .up, showsBadge: true) { }
TimelineScrollButton(direction: .up, isHidden: true, showsBadge: true) { }
}
.padding()
.background(Color.compound.bgCanvasDefault)
.previewLayout(.sizeThatFits)
}
}
ElementX/Sources/Other/SwiftUI/Views/TimelineScrollToBottomButton.swift
-35
View File
@@ -1,35 +0,0 @@
//
// Copyright 2025 Element Creations Ltd.
// Copyright 2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//
import SwiftUI
struct TimelineScrollToBottomButton: View {
let isVisible: Bool
let callback: () -> Void
var body: some View {
Button { callback() } label: {
Image(systemName: "chevron.down")
.font(.compound.bodyLG)
.fontWeight(.semibold)
.foregroundColor(.compound.iconSecondary)
.padding(13)
.offset(y: 1)
.background {
Circle()
.fill(Color.compound.iconOnSolidPrimary)
// Intentionally using system primary colour to get white/black.
.shadow(color: .primary.opacity(0.33), radius: 2.0)
}
.padding()
}
.opacity(isVisible ? 0.0 : 1.0)
.accessibilityHidden(isVisible)
.animation(.elementDefault, value: isVisible)
}
}
ElementX/Sources/Other/SwiftUI/Views/TopBannerModifier.swift
+1 -1
View File
@@ -46,7 +46,7 @@ extension View {
func topBanner(_ banner: some View, isVisible: Bool, footer: some View = EmptyView()) -> some View {
topBanners([TopBannerLayer(banner, isVisible: isVisible)], footer: footer)
}
/// Overlays the given Z-axis banner slots at the top edge of this view.
/// Later items in the array are overlayed on top of earlier ones. Within
/// each slot, visible vertical banners are stacked in a VStack and slide