ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-10-31 16:24:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move the status emoji placement on the home screen. (#6260)

Browse Source 
* Minor tweaks to User Status.

- Change the layout of the status emoji on the Setting button.
- Remove the status emoji from the Settings screen (it's shown directly below in the status row).
This commit is contained in:
Doug
2026-10-05 10:18:23 +01:00
committed by GitHub
parent 57f5498da0
commit 9ce3bd97d8
23 changed files with 66 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/Views/AvatarSettingsButtonLabel.swift
+26 -62
View File
@@ -8,11 +8,12 @@
import Compound
import SwiftUI
struct AvatarSettingsButtonLabel: View {
struct AvatarSettingsButton: View {
@Environment(\.isInSidebar) private var isInSidebar
let userProfile: UserProfile
let mediaProvider: MediaProviderProtocol?
let action: () -> Void
var isCompact: Bool {
guard #available(iOS 26, *) else { return true }
@@ -20,64 +21,27 @@ struct AvatarSettingsButtonLabel: View {
}
var body: some View {
LoadableAvatarImage(url: userProfile.avatarURL,
name: userProfile.displayName,
contentID: userProfile.id,
avatarSize: .user(on: isCompact ? .chatsCompact : .chats),
mediaProvider: mediaProvider)
.modifier(StatusEmojiModifier(statusEmoji: userProfile.status.displayed?.emoji,
isCompact: isCompact))
.geometryGroup()
.accessibilityHidden(true) // Decorative, the enclosing button provides the description.
HStack(spacing: 4) {
Button(action: action) {
LoadableAvatarImage(url: userProfile.avatarURL,
name: userProfile.displayName,
contentID: userProfile.id,
avatarSize: .user(on: isCompact ? .chatsCompact : .chats),
mediaProvider: mediaProvider)
}
if let statusEmoji = userProfile.status.displayed?.emoji {
Text(String(statusEmoji))
.font(isCompact ? .compound.bodyXSSemibold : .compound.bodyLGSemibold)
.foregroundStyle(.compound.textPrimary)
}
}
.geometryGroup()
.accessibilityHidden(true) // Decorative, the enclosing button provides the description.
}
}
private struct StatusEmojiModifier: ViewModifier {
let statusEmoji: Character?
let isCompact: Bool
func body(content: Content) -> some View {
if let emojiText {
content
.inverseMask(alignment: .bottomTrailing) {
emojiText
.hidden()
.overlay { Circle().inset(by: -3) }
}
.overlay(alignment: .bottomTrailing) {
emojiText
}
} else {
content
}
}
var emojiText: (some View)? {
statusEmoji.map {
Text(String($0))
.font(emojiFont)
.padding(.vertical, 1) // Match Figma's line height.
.alignmentGuide(.trailing) { $0.width - trailingOffset }
.alignmentGuide(.bottom) { $0.height + bottomOffset }
}
}
// Values scaled by 0.8 in the compact layout for a button size of 32pt instead of 40pt.
var emojiFont: Font {
isCompact ? .compound.bodyXS : .compound.bodyMD
}
nonisolated var trailingOffset: CGFloat {
isCompact ? 6.5 : 8
}
nonisolated var bottomOffset: CGFloat {
isCompact ? 1.5 : 2
}
}
struct AvatarSettingsButtonLabel_Previews: PreviewProvider, TestablePreview {
struct AvatarSettingsButton_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(spacing: 24) {
states
@@ -92,13 +56,13 @@ struct AvatarSettingsButtonLabel_Previews: PreviewProvider, TestablePreview {
static var states: some View {
HStack(spacing: 16) {
AvatarSettingsButtonLabel(userProfile: .mockAlice,
mediaProvider: MediaProviderMock(.init()))
AvatarSettingsButton(userProfile: .mockAlice,
mediaProvider: MediaProviderMock(.init())) { }
AvatarSettingsButtonLabel(userProfile: .init(userID: "",
avatarURL: .mockMXCUserAvatar,
status: .mock(text: "", emoji: "🌴")),
mediaProvider: MediaProviderMock(.init()))
AvatarSettingsButton(userProfile: .init(userID: "",
avatarURL: .mockMXCUserAvatar,
status: .mock(text: "", emoji: "🌴")),
mediaProvider: MediaProviderMock(.init())) { }
}
}
}
ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift
+1 -1
View File
@@ -23,7 +23,7 @@ enum TestablePreviewsDictionary {
"AuthenticationClassicAppBackupInstructionsView_Previews" : AuthenticationClassicAppBackupInstructionsView_Previews.self,
"AuthenticationStartScreen_Previews" : AuthenticationStartScreen_Previews.self,
"AvatarHeaderView_Previews" : AvatarHeaderView_Previews.self,
"AvatarSettingsButtonLabel_Previews" : AvatarSettingsButtonLabel_Previews.self,
"AvatarSettingsButton_Previews" : AvatarSettingsButton_Previews.self,
"BadgeLabel_Previews" : BadgeLabel_Previews.self,
"BlockedUsersScreen_Previews" : BlockedUsersScreen_Previews.self,
"BloomModifier_Previews" : BloomModifier_Previews.self,
ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift
+2 -4
View File
@@ -98,11 +98,9 @@ struct HomeScreen: View {
}
private var settingsButton: some View {
Button {
AvatarSettingsButton(userProfile: context.viewState.userProfile,
mediaProvider: context.mediaProvider) {
context.send(viewAction: .showSettings)
} label: {
AvatarSettingsButtonLabel(userProfile: context.viewState.userProfile,
mediaProvider: context.mediaProvider)
}
.accessibilityLabel(L10n.commonSettings)
.accessibilityIdentifier(A11yIdentifiers.homeScreen.userAvatar)
ElementX/Sources/Screens/Settings/SettingsScreen/View/SettingsScreen.swift
+3 -9
View File
@@ -70,15 +70,9 @@ struct SettingsScreen: View {
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
HStack(spacing: 6) {
Text(context.viewState.userProfile.displayName ?? "")
if let statusEmoji = context.viewState.userProfile.status.displayed?.emoji {
Text(String(statusEmoji))
}
}
.font(.compound.headingMD)
.foregroundColor(.compound.textPrimary)
Text(context.viewState.userProfile.displayName ?? "")
.font(.compound.headingMD)
.foregroundColor(.compound.textPrimary)
Text(context.viewState.userProfile.id)
.font(.compound.bodySM)
ElementX/Sources/Screens/Spaces/SpacesScreen/View/SpacesScreen.swift
+2 -4
View File
@@ -95,11 +95,9 @@ struct SpacesScreen: View {
private var toolbar: some ToolbarContent {
// Use the title placement on iOS 26 to match the chats tab and fix a weird animation.
ToolbarItem(placement: Compound.supportsGlass ? .title : .navigationBarLeading) {
Button {
AvatarSettingsButton(userProfile: context.viewState.userProfile,
mediaProvider: context.mediaProvider) {
context.send(viewAction: .showSettings)
} label: {
AvatarSettingsButtonLabel(userProfile: context.viewState.userProfile,
mediaProvider: context.mediaProvider)
}
.buttonStyle(.borderless)
.accessibilityLabel(L10n.commonSettings)