From d0960cf75cdde46c7ded4d1c939beb6d8f116d86 Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Fri, 10 Feb 2023 09:48:01 +0000 Subject: [PATCH] Message composer icon and scroll to bottom button dark mode (#562) Remove animations on the composer when entering/exiting edit/reply mode too. --- .../Contents.json | 2 +- .../send.svg | 3 +++ .../timelineComposerSendMessage.svg | 5 ---- .../Contents.json | 23 ------------------ .../timelineScrollToBottom.png | Bin 735 -> 0 bytes .../timelineScrollToBottom@2x.png | Bin 1308 -> 0 bytes .../timelineScrollToBottom@3x.png | Bin 1934 -> 0 bytes ElementX/Sources/Generated/Assets.swift | 1 - .../RoomScreen/View/MessageComposer.swift | 18 +++++++++----- .../Screens/RoomScreen/View/RoomScreen.swift | 14 +++++++++-- 10 files changed, 28 insertions(+), 38 deletions(-) create mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/send.svg delete mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/timelineComposerSendMessage.svg delete mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/Contents.json delete mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom.png delete mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@2x.png delete mode 100644 ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@3x.png diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json b/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json index 538eaa5da..a88d70f2b 100644 --- a/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json +++ b/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json @@ -1,7 +1,7 @@ { "images" : [ { - "filename" : "timelineComposerSendMessage.svg", + "filename" : "send.svg", "idiom" : "universal" } ], diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/send.svg b/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/send.svg new file mode 100644 index 000000000..1cabb8690 --- /dev/null +++ b/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/timelineComposerSendMessage.svg b/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/timelineComposerSendMessage.svg deleted file mode 100644 index a9d140d06..000000000 --- a/ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/timelineComposerSendMessage.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/Contents.json b/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/Contents.json deleted file mode 100644 index a223dee6c..000000000 --- a/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/Contents.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "images" : [ - { - "filename" : "timelineScrollToBottom.png", - "idiom" : "universal", - "scale" : "1x" - }, - { - "filename" : "timelineScrollToBottom@2x.png", - "idiom" : "universal", - "scale" : "2x" - }, - { - "filename" : "timelineScrollToBottom@3x.png", - "idiom" : "universal", - "scale" : "3x" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom.png b/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom.png deleted file mode 100644 index 992d1edafceec488f3889497f5afe1994b3089a7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 735 zcmV<50wDc~P)ucy5u04>1PlEH-dC`)6Vi!=!A{fM#ljSd zcYPyYSWBPO^nr@IaUIps z6b&7H5;>MsVHed3BdpSfI5*Ocd8l3#VcUMp1MOIqZ7WSEjx`(+#X-1_*}`X4dYC<$ z6m~1?)x*(0>~ufi|NcHqc)#}2O_~0(i%*{=|XZtNa z^}orrr*U=R5i+t=GZD79a3v~#|M`pOFJ4V`PKzSfTZ=HjrLfGy&&}m)Sn-!LiA#%G zz2n0Gw+2I2{2NonrA6IazYSBEE{4c4XtNXSboZj;ix7;kfyM3EjH^AOK03h_~@kO`PVEzp|T zL0qScEzAxb{%FUTF6dg>bNw`-gwMHusV?9ubz<_ypy%IliWxh*W7?l}8&UsCcX3q&HRC$b*Wvp#o(eZf(_36nRL; zl0drDflXBGUR&kg>g2~|PT&r5pyIVCS63e5F_tmDIn3aOa8Kfk^tc`jIRF$i&3{qM R#K!;t002ovPDHLkV1g8RM*aW* diff --git a/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@2x.png b/ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@2x.png deleted file mode 100644 index c218462932b91d07823e50ed5d8e17e557258667..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1308 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 U4&x-}*Z=?k07*qoM6N<$f)8qLe*gdg diff --git a/ElementX/Sources/Generated/Assets.swift b/ElementX/Sources/Generated/Assets.swift index c45a0f33d..2a47f393b 100644 --- a/ElementX/Sources/Generated/Assets.swift +++ b/ElementX/Sources/Generated/Assets.swift @@ -36,7 +36,6 @@ internal enum Asset { internal static let appLogo = ImageAsset(name: "Images/app-logo") internal static let closeCircle = ImageAsset(name: "Images/close_circle") internal static let timelineComposerSendMessage = ImageAsset(name: "Images/timelineComposerSendMessage") - internal static let timelineScrollToBottom = ImageAsset(name: "Images/timelineScrollToBottom") } } // swiftlint:enable identifier_name line_length nesting type_body_length type_name diff --git a/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift b/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift index b30c3b605..a0d579518 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift @@ -21,12 +21,14 @@ struct MessageComposer: View { @Binding var focused: Bool let sendingDisabled: Bool let type: RoomScreenComposerMode - @State private var isMultiline = false let sendAction: () -> Void let replyCancellationAction: () -> Void let editCancellationAction: () -> Void + @State private var isMultiline = false + @ScaledMetric private var sendButtonIconSize = 16 + var body: some View { let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius) VStack(alignment: .leading, spacing: -6) { @@ -48,14 +50,13 @@ struct MessageComposer: View { .symbolVariant(.fill) .font(.element.body) .foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white) - .padding(5) .background { Circle() .foregroundColor(sendingDisabled ? .clear : .element.brand) } } .disabled(sendingDisabled) - .animation(.elementDefault, value: sendingDisabled) + .animation(.linear(duration: 0.1), value: sendingDisabled) .keyboardShortcut(.return, modifiers: [.command]) .padding([.vertical, .trailing], 6) } @@ -70,7 +71,9 @@ struct MessageComposer: View { .opacity(focused ? 1 : 0) } } - .animation(.elementDefault, value: type) + // Explicitly disable all animations to fix weirdness with the header immediately + // appearing whilst the text field and keyboard are still animating up to it. + .animation(.noAnimation, value: type) } @ViewBuilder @@ -93,9 +96,12 @@ struct MessageComposer: View { .fontWeight(.medium) .accessibilityLabel(ElementL10n.actionConfirm) .accessibilityHidden(!type.isEdit) - Image(systemName: "paperplane") - .offset(x: -1, y: 0) + Image(asset: Asset.Images.timelineComposerSendMessage) + .resizable() + .frame(width: sendButtonIconSize, height: sendButtonIconSize) + .padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6)) .opacity(type.isEdit ? 0 : 1) + .accessibilityLabel(ElementL10n.actionSend) .accessibilityHidden(type.isEdit) } } diff --git a/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift b/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift index 85d80a27c..4094cbf07 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift @@ -64,8 +64,18 @@ struct RoomScreen: View { var scrollToBottomButton: some View { Button { context.viewState.scrollToBottomPublisher.send(()) } label: { - Image(uiImage: Asset.Images.timelineScrollToBottom.image) - .shadow(radius: 2.0) + Image(systemName: "chevron.down") + .font(.element.body) + .fontWeight(.semibold) + .foregroundColor(.element.secondaryContent) + .padding(13) + .offset(y: 1) + .background { + Circle() + .fill(Color.element.background) + // Intentionally using system primary colour to get white/black. + .shadow(color: .primary.opacity(0.33), radius: 2.0) + } .padding() } .opacity(context.scrollToBottomButtonVisible ? 1.0 : 0.0)