mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-10-31 16:24:11 +00:00
Move the status emoji placement on the home screen. (#6260)
* 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
GitHub
@@ -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())) { }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user