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

Update and enable the new bloom style on the home screen. (#4291)

Browse Source 
* Update Compound

* Adopt the new accent colour (and gradient) tokens.
This commit is contained in:
Doug
2025-07-07 11:23:03 +01:00
committed by GitHub
parent cca1e12b45
commit 030a9bfbef
139 changed files with 335 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Application/AppSettings.swift
-4
View File
@@ -46,7 +46,6 @@ final class AppSettings {
case optimizeMediaUploads
case appAppearance
case sharePresence
case isNewBloomEnabled
case elementCallBaseURLOverride
@@ -347,9 +346,6 @@ final class AppSettings {
@UserPreference(key: UserDefaultsKeys.threadsEnabled, defaultValue: isDevelopmentBuild, storageType: .userDefaults(store))
var developerOptionsEnabled
@UserPreference(key: UserDefaultsKeys.isNewBloomEnabled, defaultValue: false, storageType: .userDefaults(store))
var isNewBloomEnabled
#endif
// MARK: - Shared
ElementX/Sources/Other/Pills/PillView.swift
+2 -2
View File
@@ -15,11 +15,11 @@ struct PillView: View {
let didChangeText: () -> Void
var textColor: Color {
context.viewState.isOwnMention ? .compound._textOwnPill : .compound.textPrimary
context.viewState.isOwnMention ? .compound.textBadgeAccent : .compound.textPrimary
}
var backgroundColor: Color {
context.viewState.isOwnMention ? .compound._bgOwnPill : .compound._bgPill
context.viewState.isOwnMention ? .compound.bgBadgeAccent : .compound.bgBadgeDefault
}
var body: some View {
ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift
+4 -4
View File
@@ -134,19 +134,19 @@ struct AvatarHeaderView<Footer: View>: View {
case .encrypted(true):
BadgeLabel(title: L10n.screenRoomDetailsBadgeEncrypted,
icon: \.lockSolid,
isHighlighted: true)
style: .accent)
case .encrypted(false):
BadgeLabel(title: L10n.screenRoomDetailsBadgeNotEncrypted,
icon: \.lockOff,
isHighlighted: false)
style: .info)
case .public:
BadgeLabel(title: L10n.screenRoomDetailsBadgePublic,
icon: \.public,
isHighlighted: false)
style: .info)
case .verified:
BadgeLabel(title: L10n.commonVerified,
icon: \.verified,
isHighlighted: true)
style: .accent)
}
}
}
ElementX/Sources/Other/SwiftUI/Views/BadgeLabel.swift
+52 -31
View File
@@ -9,46 +9,64 @@ import Compound
import SwiftUI
struct BadgeLabel: View {
enum Style {
case accent
case info
case `default`
}
let title: String
let icon: KeyPath<CompoundIcons, Image>
let isHighlighted: Bool
let style: Style
var body: some View {
Label(title,
icon: icon,
iconSize: .xSmall,
relativeTo: .compound.bodySM)
.labelStyle(BadgeLabelStyle(isHighlighted: isHighlighted))
}
}
private struct BadgeLabelStyle: LabelStyle {
let isHighlighted: Bool
var titleColor: Color {
isHighlighted ? .compound.textBadgeAccent : .compound.textBadgeInfo
.labelStyle(LabelStyle(style: style))
}
var iconColor: Color {
isHighlighted ? .compound.iconSuccessPrimary : .compound.iconInfoPrimary
}
var backgroundColor: Color {
isHighlighted ? .compound.bgBadgeAccent : .compound.bgBadgeInfo
}
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 4) {
configuration.icon
.foregroundStyle(iconColor)
configuration.title
.foregroundStyle(titleColor)
private struct LabelStyle: SwiftUI.LabelStyle {
let style: Style
var titleColor: Color {
switch style {
case .accent: .compound.textBadgeAccent
case .info: .compound.textBadgeInfo
case .default: .compound.textPrimary
}
}
var iconColor: Color {
switch style {
case .accent: .compound.iconAccentPrimary
case .info: .compound.iconInfoPrimary
case .default: .compound.iconPrimary
}
}
var backgroundColor: Color {
switch style {
case .accent: .compound.bgBadgeAccent
case .info: .compound.bgBadgeInfo
case .default: .compound.bgBadgeDefault
}
}
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 4) {
configuration.icon
.foregroundStyle(iconColor)
configuration.title
.foregroundStyle(titleColor)
}
.font(.compound.bodySM)
.padding(.leading, 8)
.padding(.trailing, 12)
.padding(.vertical, 4)
.background(Capsule().fill(backgroundColor))
}
.font(.compound.bodySM)
.padding(.leading, 8)
.padding(.trailing, 12)
.padding(.vertical, 4)
.background(Capsule().fill(backgroundColor))
}
}
@@ -57,10 +75,13 @@ struct BadgeLabel_Previews: PreviewProvider, TestablePreview {
VStack(spacing: 10) {
BadgeLabel(title: "Encrypted",
icon: \.lockSolid,
isHighlighted: true)
style: .accent)
BadgeLabel(title: "Not encrypted",
icon: \.lockSolid,
isHighlighted: false)
style: .info)
BadgeLabel(title: "1234",
icon: \.userProfile,
style: .default)
}
}
}
ElementX/Sources/Other/SwiftUI/Views/HorizontalHighlightGradient.swift
+10 -9
View File
@@ -8,28 +8,29 @@
import Compound
import SwiftUI
extension View {
func highlight(gradient: Gradient, borderColor: Color, backgroundColor: Color = .clear) -> some View {
modifier(HorizontalHighlightGradient(gradient: gradient, borderColor: borderColor, backgroundColor: backgroundColor))
}
}
struct HorizontalHighlightGradient: ViewModifier {
let gradient: Gradient
let borderColor: Color
let primaryColor: Color
let secondaryColor: Color
let backgroundColor: Color
func body(content: Content) -> some View {
ZStack(alignment: .top) {
VStack(spacing: 0) {
borderColor
.frame(height: 1)
LinearGradient(colors: [primaryColor, secondaryColor],
LinearGradient(gradient: gradient,
startPoint: .top,
endPoint: .bottom)
.background(backgroundColor)
}
content
.layoutPriority(1)
}
}
}
extension View {
func highlight(borderColor: Color, primaryColor: Color, secondaryColor: Color) -> some View {
modifier(HorizontalHighlightGradient(borderColor: borderColor, primaryColor: primaryColor, secondaryColor: secondaryColor))
}
}
ElementX/Sources/Screens/HomeScreen/HomeScreenModels.swift
-4
View File
@@ -105,10 +105,6 @@ struct HomeScreenViewState: BindableState {
var reportRoomEnabled = false
// Intentionally not mutable so that we don't have to reset the navigation bar's
// appearance whenever the feature flag is toggled (requires a restart).
let isNewBloomEnabled: Bool
var visibleRooms: [HomeScreenRoom] {
if roomListMode == .skeletons {
return placeholderRooms
ElementX/Sources/Screens/HomeScreen/HomeScreenViewModel.swift
+1 -1
View File
@@ -40,7 +40,7 @@ class HomeScreenViewModel: HomeScreenViewModelType, HomeScreenViewModelProtocol
roomSummaryProvider = userSession.clientProxy.roomSummaryProvider
super.init(initialViewState: .init(userID: userSession.clientProxy.userID, isNewBloomEnabled: appSettings.isNewBloomEnabled),
super.init(initialViewState: .init(userID: userSession.clientProxy.userID),
mediaProvider: userSession.mediaProvider)
userSession.clientProxy.userAvatarURLPublisher
ElementX/Sources/Screens/HomeScreen/View/BloomModifier.swift
+4 -148
View File
@@ -10,18 +10,13 @@ import SwiftUI
import SwiftUIIntrospect
extension View {
// Note: The dependency on HomeScreenViewModel.Context will be removed in the next iteration.
@ViewBuilder
func bloom(context: HomeScreenViewModel.Context, scrollViewAdapter: ScrollViewAdapter, isNewBloomEnabled: Bool) -> some View {
if isNewBloomEnabled {
modifier(NewBloomModifier())
} else {
modifier(BloomModifier(context: context, scrollViewAdapter: scrollViewAdapter))
}
func bloom() -> some View {
modifier(BloomModifier())
}
}
struct NewBloomModifier: ViewModifier {
private struct BloomModifier: ViewModifier {
@State private var standardAppearance = UINavigationBarAppearance()
@State private var scrollEdgeAppearance = UINavigationBarAppearance()
@@ -63,149 +58,10 @@ struct NewBloomModifier: ViewModifier {
}
private var bloomGradient: some View {
LinearGradient(colors: [.compound._bgOwnPill, .clear], // This isn't the final gradient.
LinearGradient(gradient: .compound.subtle,
startPoint: .top,
endPoint: .init(x: 0.5, y: 0.7))
.ignoresSafeArea(edges: .all)
.frame(width: 256, height: 256)
}
}
struct BloomModifier: ViewModifier {
@ObservedObject var context: HomeScreenViewModel.Context
let scrollViewAdapter: ScrollViewAdapter
// Bloom components
@State private var bloomView: UIView?
@State private var leftBarButtonView: UIView?
@State private var gradientView: UIView?
@State private var navigationBarContainer: UIView?
@State private var hairlineView: UIView?
func body(content: Content) -> some View {
content
.introspect(.viewController, on: .supportedVersions) { controller in
Task {
if bloomView == nil {
makeBloomView(controller: controller)
}
}
let isTopController = controller.navigationController?.topViewController != controller
let isHidden = isTopController || context.isSearchFieldFocused
if let bloomView {
bloomView.isHidden = isHidden
UIView.transition(with: bloomView, duration: 1.75, options: .curveEaseInOut) {
bloomView.alpha = isTopController ? 0 : 1
}
}
gradientView?.isHidden = isHidden
navigationBarContainer?.clipsToBounds = !isHidden
hairlineView?.isHidden = isHidden || !scrollViewAdapter.isAtTopEdge.value
if !isHidden {
updateBloomCenter()
}
}
.onReceive(scrollViewAdapter.isAtTopEdge.removeDuplicates()) { value in
hairlineView?.isHidden = !value
guard let gradientView else {
return
}
if value {
UIView.transition(with: gradientView, duration: 0.3, options: .curveEaseIn) {
gradientView.alpha = 0
}
} else {
gradientView.alpha = 1
}
}
}
private var bloomGradient: some View {
LinearGradient(colors: [.clear, .compound.bgCanvasDefault], startPoint: .top, endPoint: .bottom)
.mask {
LinearGradient(stops: [.init(color: .white, location: 0.75), .init(color: .clear, location: 1.0)],
startPoint: .leading,
endPoint: .trailing)
}
.ignoresSafeArea(edges: .all)
}
private func makeBloomView(controller: UIViewController) {
guard let navigationBarContainer = controller.navigationController?.navigationBar.subviews.first,
let leftBarButtonView = controller.navigationItem.leadingItemGroups.first?.barButtonItems.first?.customView else {
return
}
let bloomController = UIHostingController(rootView: bloom)
bloomController.view.translatesAutoresizingMaskIntoConstraints = true
bloomController.view.backgroundColor = .clear
navigationBarContainer.insertSubview(bloomController.view, at: 0)
self.leftBarButtonView = leftBarButtonView
bloomView = bloomController.view
self.navigationBarContainer = navigationBarContainer
updateBloomCenter()
let gradientController = UIHostingController(rootView: bloomGradient)
gradientController.view.backgroundColor = .clear
gradientController.view.translatesAutoresizingMaskIntoConstraints = false
navigationBarContainer.insertSubview(gradientController.view, aboveSubview: bloomController.view)
let constraints = [gradientController.view.bottomAnchor.constraint(equalTo: navigationBarContainer.bottomAnchor),
gradientController.view.trailingAnchor.constraint(equalTo: navigationBarContainer.trailingAnchor),
gradientController.view.leadingAnchor.constraint(equalTo: navigationBarContainer.leadingAnchor),
gradientController.view.heightAnchor.constraint(equalToConstant: 40)]
constraints.forEach { $0.isActive = true }
gradientView = gradientController.view
let dividerController = UIHostingController(rootView: Divider().ignoresSafeArea())
dividerController.view.translatesAutoresizingMaskIntoConstraints = false
navigationBarContainer.addSubview(dividerController.view)
let dividerConstraints = [dividerController.view.bottomAnchor.constraint(equalTo: gradientController.view.bottomAnchor),
dividerController.view.widthAnchor.constraint(equalTo: gradientController.view.widthAnchor),
dividerController.view.leadingAnchor.constraint(equalTo: gradientController.view.leadingAnchor)]
dividerConstraints.forEach { $0.isActive = true }
hairlineView = dividerController.view
}
private func updateBloomCenter() {
guard let leftBarButtonView,
let bloomView,
let navigationBarContainer = bloomView.superview else {
return
}
let center = leftBarButtonView.convert(leftBarButtonView.center, to: navigationBarContainer.coordinateSpace)
bloomView.center = center
}
private var bloom: some View {
BloomView(context: context)
}
}
private struct BloomView: View {
@ObservedObject var context: HomeScreenViewModel.Context
@Environment(\.colorScheme) private var colorScheme
var body: some View {
ZStack {
avatar
.blur(radius: 64)
.blendMode(colorScheme == .dark ? .exclusion : .hardLight)
.opacity(colorScheme == .dark ? 0.50 : 0.20)
avatar
.blur(radius: 64)
.blendMode(.color)
.opacity(colorScheme == .dark ? 0.20 : 0.80)
}
}
private var avatar: some View {
LoadableAvatarImage(url: context.viewState.userAvatarURL,
name: context.viewState.userDisplayName,
contentID: context.viewState.userID,
avatarSize: .custom(256),
mediaProvider: context.mediaProvider)
}
}
ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift
+1 -3
View File
@@ -25,9 +25,7 @@ struct HomeScreen: View {
.toolbar { toolbar }
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.track(screen: .Home)
.bloom(context: context,
scrollViewAdapter: scrollViewAdapter,
isNewBloomEnabled: context.viewState.isNewBloomEnabled)
.bloom()
.sentryTrace("\(Self.self)")
}
ElementX/Sources/Screens/JoinRoomScreen/View/JoinRoomScreen.swift
+1 -1
View File
@@ -94,7 +94,7 @@ struct JoinRoomScreen: View {
}
if !context.viewState.isDMInvite, let memberCount = context.viewState.roomDetails?.memberCount {
BadgeLabel(title: "\(memberCount)", icon: \.userProfile, isHighlighted: false)
BadgeLabel(title: "\(memberCount)", icon: \.userProfile, style: .default)
}
if let topic = context.viewState.roomDetails?.topic {
ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/FormattingToolbar.swift
+2 -2
View File
@@ -41,7 +41,7 @@ private extension FormatItem {
var foregroundColor: Color {
switch state {
case .reversed:
return .compound.iconSuccessPrimary
return .compound.iconAccentPrimary
case .enabled:
return .compound.iconSecondary
case .disabled:
@@ -52,7 +52,7 @@ private extension FormatItem {
var backgroundColor: Color {
switch state {
case .reversed:
return .compound._bgAccentSelected
return .compound.bgAccentSelected
case .enabled, .disabled:
return .compound.bgCanvasDefault
}
ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
+3 -3
View File
@@ -137,9 +137,9 @@ struct RoomScreen: View {
.padding(.top, 16)
.padding(.horizontal, 16)
.padding(.bottom, 12)
.highlight(borderColor: .compound.borderInfoSubtle,
primaryColor: .compound.bgInfoSubtle,
secondaryColor: .compound.bgCanvasDefault)
.highlight(gradient: .compound.info,
borderColor: .compound.borderInfoSubtle,
backgroundColor: .compound.bgCanvasDefault)
}
@ViewBuilder
ElementX/Sources/Screens/RoomScreen/View/RoomScreenFooterView.swift
+8 -5
View File
@@ -5,6 +5,7 @@
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
struct RoomScreenFooterView: View {
@@ -23,21 +24,23 @@ struct RoomScreenFooterView: View {
}
}
private var gradientColor: Color {
private var gradient: Gradient {
switch details {
case .pinViolation:
.compound.bgInfoSubtle
.compound.info
case .verificationViolation:
.compound.bgCriticalSubtle
Gradient(colors: [.compound.bgCriticalSubtle, .clear])
case .none:
Color.compound.bgCanvasDefault
Gradient(colors: [.clear])
}
}
var body: some View {
if let details {
detailsView(details)
.highlight(borderColor: borderColor, primaryColor: gradientColor, secondaryColor: .compound.bgCanvasDefault)
.highlight(gradient: gradient,
borderColor: borderColor,
backgroundColor: .compound.bgCanvasDefault)
.padding(.top, 8)
.fixedSize(horizontal: false, vertical: true)
}
ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/DeveloperOptionsScreenModels.swift
-1
View File
@@ -46,7 +46,6 @@ protocol DeveloperOptionsProtocol: AnyObject {
var elementCallBaseURLOverride: URL? { get set }
var knockingEnabled: Bool { get set }
var threadsEnabled: Bool { get set }
var isNewBloomEnabled: Bool { get set }
var hideQuietNotificationAlerts: Bool { get set }
}
ElementX/Sources/Screens/Settings/DeveloperOptionsScreen/View/DeveloperOptionsScreen.swift
-5
View File
@@ -50,11 +50,6 @@ struct DeveloperOptionsScreen: View {
Toggle(isOn: $context.fuzzyRoomListSearchEnabled) {
Text("Fuzzy searching")
}
Toggle(isOn: $context.isNewBloomEnabled) {
Text("New bloom appearance")
Text("Requires app reboot")
}
}
Section("Join rules") {
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/HighlightedTimelineItemModifier.swift
+3 -3
View File
@@ -23,15 +23,15 @@ private struct HighlightedTimelineItemModifier: ViewModifier {
.background {
if isHighlighted {
VStack(spacing: 0) {
Color.compound._bgBubbleHighlighted
LinearGradient(colors: [.compound._bgBubbleHighlighted, .clear],
Color.compound.gradientSubtleStop1
LinearGradient(gradient: .compound.subtle,
startPoint: .top,
endPoint: .bottom)
.frame(maxHeight: 200)
.layoutPriority(1)
}
.overlay(alignment: .top) {
Color.compound.bgAccentRest
Color.compound.borderAccentSubtle
.frame(height: 1)
}
}
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/TimelineStartRoomTimelineView.swift
+1 -1
View File
@@ -46,7 +46,7 @@ struct TimelineStartRoomTimelineView: View {
.padding(.top, 16)
.padding(.bottom, 8)
.padding(.horizontal, 16)
.highlight(borderColor: .compound.borderInfoSubtle, primaryColor: .compound.bgInfoSubtle, secondaryColor: Color.clear)
.highlight(gradient: .compound.info, borderColor: .compound.borderInfoSubtle)
}
private var title: String {