Better UX for avatar / header selection

This commit is contained in:
Thomas Ricouard 2024-01-02 21:50:11 +01:00
parent 1eb33466ca
commit 6cc14f8249
2 changed files with 249 additions and 16 deletions

View File

@ -12596,6 +12596,125 @@
} }
} }
}, },
"account.edit.avatar" : {
"extractionState" : "manual",
"localizations" : {
"be" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"ca" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"de" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Edit avatar"
}
},
"en-GB" : {
"stringUnit" : {
"state" : "translated",
"value" : "Edit avatar"
}
},
"es" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"eu" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"fr" : {
"stringUnit" : {
"state" : "translated",
"value" : "Editer l'avatar"
}
},
"it" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"ja" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"ko" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"nb" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"nl" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"pl" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"pt-BR" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"tr" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"uk" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"zh-Hans" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
},
"zh-Hant" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit avatar"
}
}
}
},
"account.edit.display-name" : { "account.edit.display-name" : {
"extractionState" : "manual", "extractionState" : "manual",
"localizations" : { "localizations" : {
@ -12953,6 +13072,125 @@
} }
} }
}, },
"account.edit.header" : {
"extractionState" : "manual",
"localizations" : {
"be" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"ca" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"de" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"en" : {
"stringUnit" : {
"state" : "translated",
"value" : "Edit header"
}
},
"en-GB" : {
"stringUnit" : {
"state" : "translated",
"value" : "Edit header"
}
},
"es" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"eu" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"fr" : {
"stringUnit" : {
"state" : "translated",
"value" : "Editer la bannière"
}
},
"it" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"ja" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"ko" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"nb" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"nl" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"pl" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"pt-BR" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"tr" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"uk" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"zh-Hans" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
},
"zh-Hant" : {
"stringUnit" : {
"state" : "needs_review",
"value" : "Edit header"
}
}
}
},
"account.edit.metadata-name-placeholder" : { "account.edit.metadata-name-placeholder" : {
"extractionState" : "manual", "extractionState" : "manual",
"localizations" : { "localizations" : {
@ -73627,4 +73865,4 @@
} }
}, },
"version" : "1.0" "version" : "1.0"
} }

View File

@ -69,7 +69,7 @@ public struct EditAccountView: View {
Section { Section {
ZStack(alignment: .center) { ZStack(alignment: .center) {
if let header = viewModel.header { if let header = viewModel.header {
ZStack(alignment: .topTrailing) { ZStack(alignment: .topLeading) {
LazyImage(url: header) { state in LazyImage(url: header) { state in
if let image = state.image { if let image = state.image {
image image
@ -85,24 +85,20 @@ public struct EditAccountView: View {
} }
} }
.frame(height: 150) .frame(height: 150)
Button {
viewModel.isChangingHeader = true
viewModel.isPhotoPickerPresented = true
} label: {
Image(systemName: "photo.badge.plus")
.foregroundStyle(.white)
}
.buttonStyle(.borderedProminent)
.clipShape(Circle())
.offset(y: 4)
} }
} }
if let avatar = viewModel.avatar { if let avatar = viewModel.avatar {
ZStack(alignment: .bottomLeading) { ZStack(alignment: .bottomLeading) {
AvatarView(avatar, config: .account) AvatarView(avatar, config: .account)
Button { Menu {
viewModel.isChangingAvatar = true Button("account.edit.avatar") {
viewModel.isPhotoPickerPresented = true viewModel.isChangingAvatar = true
viewModel.isPhotoPickerPresented = true
}
Button("account.edit.header") {
viewModel.isChangingHeader = true
viewModel.isPhotoPickerPresented = true
}
} label: { } label: {
Image(systemName: "photo.badge.plus") Image(systemName: "photo.badge.plus")
.foregroundStyle(.white) .foregroundStyle(.white)
@ -110,7 +106,6 @@ public struct EditAccountView: View {
.buttonStyle(.borderedProminent) .buttonStyle(.borderedProminent)
.clipShape(Circle()) .clipShape(Circle())
.offset(x: -8, y: 8) .offset(x: -8, y: 8)
} }
} }
} }