swift/Beam
swift/Beam
1
0
Fork 0
mirror of https://github.com/element-hq/element-x-ios.git synced 2025-03-10 21:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Message composer icon and scroll to bottom button dark mode (#562)

Browse Source 
Remove animations on the composer when entering/exiting edit/reply mode too.
This commit is contained in:
Doug 2023-02-10 09:48:01 +00:00 committed by GitHub
parent 60ca1c5dae
commit d0960cf75c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 28 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json vendored
View File

@ -1,7 +1,7 @@
{
"images" : [
{
"filename" : "timelineComposerSendMessage.svg",
"filename" : "send.svg",
"idiom" : "universal"
}
],

3
ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/send.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.404 8.96458L1.56331 15.8816C0.630627 16.3478 -0.33971 15.3477 0.116135 14.4353C0.116135 14.4353 1.83155 10.9711 2.30339 10.0637C2.77523 9.15633 3.31538 8.99926 8.33135 8.35098C8.51695 8.32697 8.6689 8.1869 8.6689 7.99982C8.6689 7.81307 8.51695 7.67301 8.33135 7.649C3.31538 7.00071 2.77523 6.84364 2.30339 5.93624C1.83155 5.02918 0.116135 1.56465 0.116135 1.56465C-0.33971 0.65258 0.630627 -0.347862 1.56331 0.118344L15.404 7.03573C16.1987 7.43257 16.1987 8.5674 15.404 8.96458Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 611 B

5
ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/timelineComposerSendMessage.svg vendored
View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M18,0C27.934,0 36,8.066 36,18C36,27.934 27.934,36 18,36C8.066,36 0,27.934 0,18C0,8.066 8.066,0 18,0ZM27.83,19.085L12.259,26.867C11.21,27.391 10.119,26.266 10.631,25.24C10.631,25.24 12.561,21.343 13.092,20.322C13.623,19.301 14.23,19.124 19.874,18.395C20.082,18.368 20.253,18.21 20.253,18C20.253,17.79 20.082,17.632 19.874,17.605C14.23,16.876 13.623,16.699 13.092,15.678C12.561,14.658 10.631,10.76 10.631,10.76C10.119,9.734 11.21,8.609 12.259,9.133L27.83,16.915C28.724,17.362 28.724,18.638 27.83,19.085Z" style="fill:rgb(13,189,139);"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 998 B

23
ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/Contents.json vendored
View File

@ -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
}
}

BIN
ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 735 B

BIN
ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@2x.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
ElementX/Resources/Assets.xcassets/Images/timelineScrollToBottom.imageset/timelineScrollToBottom@3x.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

1
ElementX/Sources/Generated/Assets.swift
View File

@ -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

18
ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift
View File

@ -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)
}
}

14
ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
View File

@ -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)