Move send button out of composer's text field (#1588)

* Move send button out of composer's text field

* Update user session flow screenshots
This commit is contained in:
aringenbach
2023-08-30 10:58:29 +02:00
committed by GitHub
parent 3af8be7dfd
commit aaa23f8724
52 changed files with 136 additions and 140 deletions

View File

@@ -23,6 +23,7 @@ struct ComposerToolbar: View {
let keyCommandHandler: KeyCommandHandler
@FocusState private var composerFocused: Bool
@ScaledMetric private var sendButtonIconSize = 16
var body: some View {
HStack(alignment: .bottom, spacing: 10) {
@@ -30,13 +31,28 @@ struct ComposerToolbar: View {
.padding(.bottom, 5) // centre align with the send button
messageComposer
.environmentObject(context)
Button {
context.send(viewAction: .sendMessage)
} label: {
submitButtonImage
.symbolVariant(.fill)
.font(.compound.bodyLG)
.foregroundColor(context.viewState.sendButtonDisabled ? .compound.iconDisabled : .global.white)
.background {
Circle()
.foregroundColor(context.viewState.sendButtonDisabled ? .clear : .compound.iconAccentTertiary)
}
}
.disabled(context.viewState.sendButtonDisabled)
.animation(.linear(duration: 0.1), value: context.viewState.sendButtonDisabled)
.keyboardShortcut(.return, modifiers: [.command])
.padding([.vertical, .trailing], 6)
}
}
private var messageComposer: some View {
MessageComposer(plainText: $context.composerPlainText,
composerView: composerView,
sendingDisabled: context.viewState.sendButtonDisabled,
mode: context.viewState.composerMode) {
context.send(viewAction: .sendMessage)
} pasteAction: { provider in
@@ -68,6 +84,24 @@ struct ComposerToolbar: View {
}
}
private var submitButtonImage: some View {
// ZStack with opacity so the button size is consistent.
ZStack {
Image(systemName: "checkmark")
.opacity(context.viewState.composerMode.isEdit ? 1 : 0)
.fontWeight(.medium)
.accessibilityLabel(L10n.actionConfirm)
.accessibilityHidden(!context.viewState.composerMode.isEdit)
Image(asset: Asset.Images.timelineComposerSendMessage)
.resizable()
.frame(width: sendButtonIconSize, height: sendButtonIconSize)
.padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
.opacity(context.viewState.composerMode.isEdit ? 0 : 1)
.accessibilityLabel(L10n.actionSend)
.accessibilityHidden(context.viewState.composerMode.isEdit)
}
}
private class ItemProviderHelper: WysiwygItemProviderHelper {
func isPasteSupported(for itemProvider: NSItemProvider) -> Bool {
itemProvider.isSupportedForPasteOrDrop

View File

@@ -23,7 +23,6 @@ typealias PasteHandler = (NSItemProvider) -> Void
struct MessageComposer: View {
@Binding var plainText: String
let composerView: WysiwygComposerView
let sendingDisabled: Bool
let mode: RoomScreenComposerMode
let sendAction: EnterKeyHandler
let pasteAction: PasteHandler
@@ -33,7 +32,6 @@ struct MessageComposer: View {
@FocusState private var focused: Bool
@State private var isMultiline = false
@ScaledMetric private var sendButtonIconSize = 16
var body: some View {
let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius)
@@ -59,26 +57,9 @@ struct MessageComposer: View {
.padding(.vertical, 10)
.focused($focused)
}
Button {
sendAction()
} label: {
submitButtonImage
.symbolVariant(.fill)
.font(.compound.bodyLG)
.foregroundColor(sendingDisabled ? .compound.iconDisabled : .global.white)
.background {
Circle()
.foregroundColor(sendingDisabled ? .clear : .compound.iconAccentTertiary)
}
}
.disabled(sendingDisabled)
.animation(.linear(duration: 0.1), value: sendingDisabled)
.keyboardShortcut(.return, modifiers: [.command])
.padding([.vertical, .trailing], 6)
}
}
.padding(.leading, 12.0)
.padding([.leading, .trailing], 12.0)
.clipped()
.background {
ZStack {
@@ -106,24 +87,6 @@ struct MessageComposer: View {
}
}
private var submitButtonImage: some View {
// ZStack with opacity so the button size is consistent.
ZStack {
Image(systemName: "checkmark")
.opacity(mode.isEdit ? 1 : 0)
.fontWeight(.medium)
.accessibilityLabel(L10n.actionConfirm)
.accessibilityHidden(!mode.isEdit)
Image(asset: Asset.Images.timelineComposerSendMessage)
.resizable()
.frame(width: sendButtonIconSize, height: sendButtonIconSize)
.padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
.opacity(mode.isEdit ? 0 : 1)
.accessibilityLabel(L10n.actionSend)
.accessibilityHidden(mode.isEdit)
}
}
private var borderRadius: CGFloat {
switch mode {
case .default:
@@ -205,7 +168,6 @@ struct MessageComposer_Previews: PreviewProvider {
return MessageComposer(plainText: .constant(content),
composerView: composerView,
sendingDisabled: sendingDisabled,
mode: mode,
sendAction: { },
pasteAction: { _ in },

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2745dc7f693b1e9a046bbb75796da87a67e605081fe121625289c9cf3d84882e
size 283525
oid sha256:358a2617686f2f9d84e1a33ebd430da88ace4136aac703fde1d6051b8e3ba07b
size 283637

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2bfd39ab7965f208e9bc196f3ce513f0e9cdb8180e1211d0ea13f0149f352eb3
size 296688
oid sha256:8e496eafa0ac95918c2e4c3f99463a586f17fc4dcb8524c2d389063b2d64c1b2
size 296789

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:65a5cfec66c33dccb07af5614be84291e466d434dfcfe4fe56587bd476289215
size 302401
oid sha256:ee807fe43ff2848c8200621db7e0a7283cf18b468ffbe1be5baa278a42dbd2fa
size 300653

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:16b54633d765113aa067e3d9b528037ac5710b8beda2402135ad091fe4c31420
size 299941
oid sha256:a624a1e4d4806435325c450726a1d799c3c873ebc2c9afbfe48f0b32484cb810
size 300024

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:563be876ecc1376b4ee1c3e096c7553c1774936a5a8d7012916a9ce0bf9a4481
size 283275
oid sha256:c98693ba962dac15b0d1e0449494341b74b833be5e74d8519c743051de47f032
size 283387

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2c541db903517fb37926bbc30a6c9acf80c360e24fa7dc24d1d8337b387902b1
size 99772
oid sha256:71c74a00787f9e9ca5c66a87c57f43510ae6dbe12fb1d1fd68cf456ba4632d9e
size 99867

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7a90dc15be8fd08412e3801f1ac3a296e3dd83ffe55b3bedc7a3c7587734ecba
size 122254
oid sha256:3a3bb2f710d90e0e7d5439f781381328835db44af6b517ecfa24f83b973ba9e7
size 122356

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:066a36fe220a4c8a6f5534b59050bbc4a6ea567422b43a216b99cbaf0baf37ad
size 295586
oid sha256:98b18e05bb45879e90ae45f7e790f57a6dad45038b749f2fe4ea8ee688bf7524
size 295683

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c112f5aee448a04024876375a31512fa3d38d69deeef4c13ec8f05adbb239df0
size 123121
oid sha256:be83a4f07c4a759d40bc927f0a57958eaf49e50d2ab69ca6052d5db5f6da7f2a
size 123234

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:cec6247e280f09bfb34570a96c8aeb583839f8d0380e75d69c1b1e042e8278d0
size 165504
oid sha256:7f916e649ef6b214a3d1cfad4359aae09a2a5e443d2fd7941b24774bcb41399e
size 165611

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ce7fb6d098b437b2450b1ddd92a23b4bc6620c0fe2b0d99ec1a2f85e3656821a
size 162702
oid sha256:ba9eb42a22c444489f2e45c47bc4c754a1b62a60100e9edb2222fc66d2950c8e
size 162808

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:bba88d411239ce95d6a3f6eee0c8827bf614a71cbef23bb8c02bcbf8b6d282d5
size 332142
oid sha256:fec5e9a805b65a713d320cdd86ec704f9466be0bec563f93050df2cfa05c3ac8
size 332194

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4f9c9d6d006964304ccfb59c8f16062f697877fac64eb3bdc2d0c40303db4507
size 402243
oid sha256:c7d0f4cf385da3bb4192f23ff3863666be0f3ac30b015929583cb0e2d62dfaba
size 402274

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a219698b34b517d5698e8b3f04f4017928e748e36c2ce639cc7da60d30bb20b5
size 370454
oid sha256:8c79c71e4a02af6471f9ff3f1ae738864b2d0488c8ea7a71122690444356ab0f
size 370593

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e1aab1bb6125e746ba4ed02a7a9eb391d10111b05a33666a4ac28cdf29954cd2
size 304213
oid sha256:03e4980124a8875cad8a734873fa95b12c9dbf87af6faa72e586aed4d4bfd4e1
size 304341

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3e4b31eb5561c282690e44789906c89cd0d91dc84597c37ba12cb381badbe76d
size 294250
oid sha256:af8d8d92782a38f0296841ba8b8100537bcfc69f7cfcf59b4d23eab96a5e84e6
size 306418

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d5a3c7fe9b3eda6fddba3eced5a2682298bd9432d6221b5f0d84fb724a6b0c55
size 307189
oid sha256:5984c652e6cffc37e0fa86e2595b1a3150a8c3b48e09af267ab25097249bdd51
size 307306

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3d312c1e6f73835ea223d4b06b9cb5c1237e79bd92b6793c636ec15a2dd50bd5
size 370023
oid sha256:1a50a5619f0d381dde1c6ab162769b23785c9984d44c42df956c6104ea08aa35
size 370162

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1a4c2f05711d57cc76b9d35e2a2d246fcdb62ab4e7e0a63278d33b00c2cb32ca
size 155301
oid sha256:729b5ff60dc8fbb01db574112cfe21e1193dc2d0c1e2f2923722f2b2208a9169
size 155428

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:bb933c8b49a86bdbe4969d573529851da622fd3bef6aec2ee4db69769f378a52
size 191684
oid sha256:47b1a4de38896780fafd5557688f9797374b30a970e75efff01280a1b06bb3ac
size 191806

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fd9f896d830f7788d1cc578c8afb9bc7206a7bb520d15d6c6af2b732dd56cac0
size 317304
oid sha256:519228a018d16b450fd1fb4d1a369da4c9add59a84ea415a3c1f37c85c43dee3
size 317437

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:88d7ab6f8e5b115a112c3e2b2a48eae2caa80b497cb7a12bc4d8023ea0c1dfe1
size 188457
oid sha256:7952e8a11dd1e5e917295d81a070a59e6d0a69526f734701b01e45ac026a989e
size 188586

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6fcd81ef389e8d04087f43303bd2bec1e7d4bb8183bcfe6bda00c2b07ec46a34
size 256534
oid sha256:6e4a01d29d42876e8dc0890d37f3239266584d18add028f0570700be04cef229
size 256661

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2a29f94a8baff42766e10084885512a6219f1bc3fe32887ff318a526584f428f
size 253383
oid sha256:85d64fddf62d7d937db31cc6ee414b17b0a4351fadb09474912ea1b5738fd962
size 253510

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5f2ff645cc1123cbcb66ee763ca1d6263187603ec1d35a201b7ead120109ae0d
size 302795
oid sha256:d7d529fc95c8a5940b8088c100c81bf1cd943993715a6e21c3183ef95a462219
size 302930

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:cc9cefc9ec2c34f0b87611d0cd7568a8923cd609b88bf1267f64fda987bb0207
size 284583
oid sha256:3d337f14708ed262fbc7dcf3fe00d52e4725f88fb4eee94dbdff59f19865c7e4
size 284644

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:167922bcb7911d70f9f850b8a6a8bc9f5a6803a0193e58b0097de7ac681f3a26
size 297177
oid sha256:e8d0efa6b8c50bf1f39bc2731fcadadefc80e510c52357072cfdf320c40def40
size 297223

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:45da783c68268176d5bb02a1f232738e4c52fecefdb68cf77a8d5ff9d3d82906
size 303044
oid sha256:a4244da51e14da5807a0f2dcd334c76c5f656fe8afc47e7e3d6dcffbd26273b7
size 303147

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:041f3b9095f95431918bf95d72d3481c5bbff5e9d86fd8936b13d3a56bcd54b4
size 300383
oid sha256:61a74b7389a9fdcd8de5d7de67762ca9d8be601b916331f29b343dd5996ac57c
size 300420

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7c49cf627a39cf6c9243411a4feef4c4bc03f2875b2b3a1bb13bb3635bb0eeed
size 284341
oid sha256:0ce9b4baf85635d32ca6b343225fdc13316b013015a076bf3f4be926f470fe72
size 284402

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:20ee74112947b1f4f18b0f6dfdb78d66f70bca461ee5e2b751ddabdfc426494f
size 100249
oid sha256:fcfa7830ec2674f1d3b44cdfe70188b48fef8c927dbb36124f5f302eb6671d8b
size 100295

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5a7d75675b674c67ccaf25cb2b1c248706283d6b4c0a528914d140b061b7723
size 122748
oid sha256:09182ea2dc4fb7c416b8c74a7de44ef83956e7434ad7d7223f854dc78e18dcdd
size 122793

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:bd015c400454bf0c52b56c3d0284bb7373f99474f54e4bbe1fca347277f87a9e
size 296077
oid sha256:12d65ae739e31b2a83871dc294c5c193da8e7fbb5b6edee09395399963369077
size 296119

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2f59880223ffd2dbf6e95a6c54df957ed49b2a2c142f5aa82dec95382bad42a0
size 124085
oid sha256:9bd5f6f15f5a828a0c7fbf9059a011ba08b51c456005679337b2a556ba6521b4
size 124145

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d39f400c814bf25259ac47d6f9855c660dec90c8f442c920623d9e1191cb262c
size 191391
oid sha256:43c29378ca639881a5c7ad07b73a2dfe22157e7f5559a5a37bd91ec4c1b6be60
size 191433

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:75180dc2435ab30d9de7621200c8c10a3ca3f234689186779ebe8b71e53bc8d8
size 180361
oid sha256:de2c3fdcf12dde3d966bc2a019b545849308b66899775f26e7c4ad5977e45f91
size 180407

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4eb2cb62cfd2fc73f429b7da7a894d4d808285c1a0e78b6e6c391e45086e20a8
size 334429
oid sha256:0a6e3deae7097d0fdf1e8982b5a35afae4e78667926544cc6105cd3736f43933
size 334498

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3bdeafaa2ef21e973428946160de575b227dc87f082bcc8df9210daf89fcbbaa
size 394633
oid sha256:77936df3bdcbf88fba931c4e5c2bac9ad73e696b2892a75bcc3253495d5a2a20
size 394716

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:99391bd22d37d4bf4b61969f7ac7f62655eb531357ad856d4fea25af9c001f30
size 364806
oid sha256:8c50df722dedbff174fbff4adf66e8d20dd81431114800df843b144606764aa9
size 364057

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:277fcdcfe4e1b5b92e8ae0f7baca1fab04db4b713aa97df760d365bfec87461b
size 305713
oid sha256:178cc898304279b90d05fca4edc62c0d650001b8874abcfe03bc28b051d2b8f7
size 304984

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7dad1a1892fb3a5fc46a332394b60d986e69e5c32914961686d52004a635b20f
size 295843
oid sha256:dc55a08402dd53e313a0509430dfca36d97aa30b14e002635f3fdf0b216c8f95
size 307109

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c3d695404ba0365cded0cd84398c0875ac85383579dc9e1ef1f0fb09e6c78700
size 308497
oid sha256:4e282ca5eee331661eb3b52a57cc26a6b36b45e5ba0883c03b299794e54f62b6
size 307860

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:097d9990ed986039c4211c2dc7b2005048ab15bc75852368a96e8dbf63206e61
size 364375
oid sha256:db3fc50c05521692fd2b6e575b272d81e1226978a805667af31554afd4902769
size 363626

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:44e772d784a093cc6dafd9c0c9e67912649122658df85e40a8194f3e6bbb0203
size 156850
oid sha256:061a801436ce63d4b2e3241b57f27a66c94dc9f06c1045608687ff490758d22f
size 156078

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:683443b121806392facff0ebbe154eca3480a0d012b5b5642c5105fe407e16f9
size 193174
oid sha256:bb0bb29bbefab9e632a77ea964ab67ca8866e0ba2711131fbaa1abfbec238c40
size 192424

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:249eec43894e48072d4dc754de55aef34635f904e72bef80bfbe7bff0b111a36
size 318662
oid sha256:2c8c29600a82a1610d6d8991d2b2da80aac47b3209d267b18aa9eac100ef7ff0
size 317993

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:663dbc6d9b8f0fcae82d14c319001790f47472dc76a2c94555ab325b7493572d
size 190743
oid sha256:37eb4fb8965491ff81b98063af3569c36b8ebe7b521907433b15140c312862a8
size 190002

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fdb234339f08999f4bd6f1caa8a414ef8d501dcab14b9ef7ba5f646727f96d18
size 276550
oid sha256:afe5fce7672d4a5f384d9e3fc16edb6dd898903c1793abc46878e98134d59d30
size 275771

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d09b8a4553a12b63b7708fdf0e9a127365ddd7d399f07c141336efc244a8cc4e
size 269426
oid sha256:43d019b4cf4143cae3b29bebc4785488cd58c8e1650e9eeca16f13b833d97923
size 268647

View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fa178de94ba0076b99394fb802224065515b8cc7cdfa0f9e8786556c6805737e
size 303309
oid sha256:51265ea53944f99b7bf88766c360ade118f18b81bc558d1a461b95034f92938e
size 303494